Skip to content
Snippets Groups Projects
Commit 15c9a466 authored by Leander's avatar Leander
Browse files

feat: display selected player details

parent bc4ca383
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
dist/assets/index-BASoXudL.css 0 → 100644
+ 1
− 0
View file @ 15c9a466
:root{--primary: #987070;--secondary: #C39898;--tertiary: #DBB5B5;--quaternary: #F1E5D1;--text: #333;--box-shadow: 0px 2px 15px 2px rgb(51 51 51 / 5%)}body{font-family:Segoe UI,sans-serif;background-color:var(--quaternary);color:var(--text)}h1{text-align:center;margin-bottom:2rem}.axis path,.axis line{fill:none;stroke:#333;shape-rendering:crispEdges}.axis text{font-family:sans-serif;font-size:11px}.tooltip{position:absolute;display:none;background:#fff;padding:8px 14px;border-radius:8px;border:1px solid #ccc;color:#333;box-shadow:0 0 10px #0000001a;-webkit-user-select:none;user-select:none;z-index:10}.tooltip h4{margin:0 0 .5rem}.groupLabel{font-size:1rem;font-weight:700;text-align:center;padding:.25rem;background:#ffffff80;box-shadow:0 0 10px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#app{display:flex;gap:1rem}#app .left,#app .right{position:relative;flex:1;text-align:center}#app .left{flex:2}#app .left #bubble-chart-wrapper{position:relative;margin:1rem auto;width:fit-content;padding:1rem}#app .left .bubble-chart-settings{align-items:flex-end;justify-content:flex-end;gap:1rem}#app .left .bubble-chart-settings>div{align-items:center;justify-content:flex-end;gap:1rem}#app .left .bubble-chart-settings input,#app .left .bubble-chart-settings select{min-width:250px;margin-left:1rem}#app .right{flex:1}#app .right .comparison{display:flex;gap:1rem;padding:1rem;border-radius:.5rem;color:#fff}#app .right #radar-chart-wrapper{position:relative;margin:0 4rem 4rem}#app .right #player-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}#app .right #player-cards .player-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:.5rem;color:#fff;min-width:300px;height:fit-content;background:#ffffff80;box-shadow:0 0 10px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#app .right #player-cards .player-card h3,#app .right #player-cards .player-card p{margin:0;text-shadow:0 0 10px rgba(0,0,0,.5)}#app .chart-settings{position:absolute;top:100%;right:0;display:flex;padding:2rem;border-radius:.5rem;flex-direction:column;background:#ffffff80;box-shadow:0 0 10px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#app .chart-settings:empty{display:none}button{padding:.5rem;border:none;cursor:pointer;transition:transform .2s;background:linear-gradient(145deg,var(--primary),var(--secondary));color:#fff;border-radius:.5rem;min-width:3rem}button:hover{transform:scale(1.05)}select,input[type=text]{border-radius:.5rem;box-shadow:0 0 10px #0000001a;padding:.5rem;border:1px solid var(--text)}.search-wrapper{margin-bottom:1rem}@media (max-width: 1536px){#app{flex-direction:column}#app .left .bubble-chart-settings{position:static;width:fit-content;margin:0 0 0 auto}}@keyframes shimmer{0%{filter:blur(70px);transform:scale(1)}50%{filter:blur(100px);transform:scale(1.3)}to{filter:blur(70px);transform:scale(1)}}
dist/assets/index-D5SnUWTV.css deleted 100644 → 0
+ 0
− 1
View file @ bc4ca383
:root{--primary: #987070;--secondary: #C39898;--tertiary: #DBB5B5;--quaternary: #F1E5D1;--text: #333;--box-shadow: 0px 2px 15px 2px rgb(51 51 51 / 5%)}body{font-family:Segoe UI,sans-serif;background-color:var(--quaternary);color:var(--text)}h1{text-align:center;margin-bottom:2rem}.axis path,.axis line{fill:none;stroke:#333;shape-rendering:crispEdges}.axis text{font-family:sans-serif;font-size:11px}.tooltip{position:absolute;display:none;background:#fff;padding:8px 14px;border-radius:8px;border:1px solid #ccc;box-shadow:0 0 10px #0000001a;-webkit-user-select:none;user-select:none;z-index:10}.groupLabel{font-size:1rem;font-weight:700;text-align:center;padding:.25rem;background:#ffffff80;box-shadow:0 0 10px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#app{display:flex;gap:1rem}#app .left,#app .right{position:relative;flex:1;text-align:center}#app .left{flex:2}#app .left #bubble-chart-wrapper{position:relative;margin:1rem auto;width:fit-content;padding:1rem}#app .left .bubble-chart-settings{align-items:flex-end;justify-content:flex-end;gap:1rem}#app .left .bubble-chart-settings>div{align-items:center;justify-content:flex-end;gap:1rem}#app .left .bubble-chart-settings input,#app .left .bubble-chart-settings select{min-width:250px;margin-left:1rem}#app .right{flex:1}#app .right #radar-chart-wrapper{position:relative;margin:0 4rem 4rem}#app .chart-settings{position:absolute;top:100%;right:0;display:flex;padding:2rem;border-radius:.5rem;flex-direction:column;background:#ffffff80;box-shadow:0 0 10px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#app .chart-settings:empty{display:none}button{padding:.5rem;border:none;cursor:pointer;transition:transform .2s;background:linear-gradient(145deg,var(--primary),var(--secondary));color:#fff;border-radius:.5rem;min-width:3rem}button:hover{transform:scale(1.05)}select,input[type=text]{border-radius:.5rem;box-shadow:0 0 10px #0000001a;padding:.5rem;border:1px solid var(--text)}.search-wrapper{margin-bottom:1rem}@media (max-width: 1536px){#app{flex-direction:column}#app .left .bubble-chart-settings{position:static;width:fit-content;margin:0 0 0 auto}}@keyframes shimmer{0%{filter:blur(70px);transform:scale(1)}50%{filter:blur(100px);transform:scale(1.3)}to{filter:blur(70px);transform:scale(1)}}
dist/index.html
+ 14
− 7
View file @ 15c9a466
...@@ -4,13 +4,17 @@ ...@@ -4,13 +4,17 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Scouting tool</title> <title>Scouting tool</title>
<script type="module" crossorigin src="/assets/index-jafTSk0V.js"></script> <script type="module" crossorigin src="/assets/index-Cnt_SO0i.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D5SnUWTV.css"> <link rel="stylesheet" crossorigin href="/assets/index-BASoXudL.css">
</head> </head>
<body> <body>
<h1>Scouting tool</h1> <h1>Scouting tool</h1>
<p>Eine Visualisierung von Statistiken des Statistikportals <a href="https://fbref.com">https://fbref.com</a>, welche die Statistiken der Saison 2023/24 (bzw. den entsprechenden Zeitraum) von Spielern einiger der größten Profi-Fußballligen veranschaulicht. <p>Eine Visualisierung von Statistiken des Statistikportals <a href="https://fbref.com">https://fbref.com</a>, welche
Stand der Daten: <time datetime="2024-07-07 17:30">2024-07-07 17:30</time></p> die Statistiken der Saison 2023/24 (bzw. den entsprechenden Zeitraum) von Spielern einiger der größten
Profi-Fußballligen veranschaulicht.
Stand der Daten:
<time datetime="2024-07-07 17:30">2024-07-07 17:30</time>
</p>
<div id="app"> <div id="app">
<div class="left"> <div class="left">
<div class="search-wrapper"> <div class="search-wrapper">
...@@ -57,9 +61,12 @@ ...@@ -57,9 +61,12 @@
</div> </div>
<div class="right"> <div class="right">
<h2>Vergleichen</h2> <h2>Vergleichen</h2>
<div id="radar-chart-wrapper"> <div class="comparison">
<div id="player-cards"></div>
<div id="radar-chart-wrapper"></div>
</div>
</div> </div>
<div class="radar-chart-settings chart-settings"></div> <div class="radar-chart-settings chart-settings"></div>
</div> </div>
</div> </div>
... ...
......
index.html
+ 12
− 5
View file @ 15c9a466
...@@ -7,8 +7,12 @@ ...@@ -7,8 +7,12 @@
</head> </head>
<body> <body>
<h1>Scouting tool</h1> <h1>Scouting tool</h1>
<p>Eine Visualisierung von Statistiken des Statistikportals <a href="https://fbref.com">https://fbref.com</a>, welche die Statistiken der Saison 2023/24 (bzw. den entsprechenden Zeitraum) von Spielern einiger der größten Profi-Fußballligen veranschaulicht. <p>Eine Visualisierung von Statistiken des Statistikportals <a href="https://fbref.com">https://fbref.com</a>, welche
Stand der Daten: <time datetime="2024-07-07 17:30">2024-07-07 17:30</time></p> die Statistiken der Saison 2023/24 (bzw. den entsprechenden Zeitraum) von Spielern einiger der größten
Profi-Fußballligen veranschaulicht.
Stand der Daten:
<time datetime="2024-07-07 17:30">2024-07-07 17:30</time>
</p>
<div id="app"> <div id="app">
<div class="left"> <div class="left">
<div class="search-wrapper"> <div class="search-wrapper">
...@@ -55,9 +59,12 @@ ...@@ -55,9 +59,12 @@
</div> </div>
<div class="right"> <div class="right">
<h2>Vergleichen</h2> <h2>Vergleichen</h2>
<div id="radar-chart-wrapper"> <div class="comparison">
<div id="player-cards"></div>
<div id="radar-chart-wrapper"></div>
</div>
</div> </div>
<div class="radar-chart-settings chart-settings"></div> <div class="radar-chart-settings chart-settings"></div>
</div> </div>
</div> </div>
... ...
......
src/main.ts
+ 25
− 3
View file @ 15c9a466
...@@ -6,7 +6,7 @@ import {countries} from "@/countries.ts"; ...@@ -6,7 +6,7 @@ import {countries} from "@/countries.ts";
import {numericColumns, Player} from "@/player.ts"; import {numericColumns, Player} from "@/player.ts";
import {getPositionName} from "@/positions.ts"; import {getPositionName} from "@/positions.ts";
import RadarChart from "@/charts/radarChart.ts"; import RadarChart from "@/charts/radarChart.ts";
import {schemeTableau10} from "d3"; import {schemeTableau10, color} from "d3";
const radarChartWrapper = document.querySelector('#radar-chart-wrapper') as HTMLDivElement; const radarChartWrapper = document.querySelector('#radar-chart-wrapper') as HTMLDivElement;
const bubbleChartWrapper = document.querySelector('#bubble-chart-wrapper') as HTMLDivElement; const bubbleChartWrapper = document.querySelector('#bubble-chart-wrapper') as HTMLDivElement;
...@@ -206,13 +206,35 @@ function updateSelectedNodes(node: Player) { ...@@ -206,13 +206,35 @@ function updateSelectedNodes(node: Player) {
label: numericColumns[value as keyof typeof numericColumns] label: numericColumns[value as keyof typeof numericColumns]
} }
radarChart?.updateSelectedAttribute(radarChartAttributes) radarChart?.updateSelectedAttribute(radarChartAttributes)
} }
radarChartSettings.appendChild(input) radarChartSettings.appendChild(input)
} }
} else { } else {
radarChart.updateVis(selectedNodes) radarChart.updateVis(selectedNodes)
} }
updatePlayerCards()
}
function updatePlayerCards() {
const playerCardContainer = document.querySelector('#player-cards')
if (!playerCardContainer) return
playerCardContainer.innerHTML = ''
selectedNodes.forEach((node) => {
const d3color = color(node._color)?.brighter(0.8)
const card = document.createElement('div')
card.classList.add('player-card')
card.style.background = `linear-gradient(135deg, ${node._color}, ${d3color})`
card.innerHTML = `
<h3>${node.player}</h3>
<p>${node.team} - ${node.pos} - ${node.nation} - ${node.age}</p>
`
for (const attribute of radarChartAttributes) {
const value = node[attribute.key as keyof Player]
card.innerHTML += `
<p>${attribute.label}: ${value}</p>
`
}
playerCardContainer.appendChild(card)
})
} }
\ No newline at end of file
src/styles/index.scss
+ 42
− 2
View file @ 15c9a466
...@@ -50,9 +50,14 @@ h1 { ...@@ -50,9 +50,14 @@ h1 {
padding: 8px 14px; padding: 8px 14px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #ccc; border: 1px solid #ccc;
color: #333;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
user-select: none; user-select: none;
z-index: 10; z-index: 10;
h4 {
margin: 0 0 .5rem;
}
} }
.groupLabel { .groupLabel {
...@@ -94,6 +99,7 @@ h1 { ...@@ -94,6 +99,7 @@ h1 {
justify-content: flex-end; justify-content: flex-end;
gap: 1rem; gap: 1rem;
} }
input, select { input, select {
min-width: 250px; min-width: 250px;
margin-left: 1rem; margin-left: 1rem;
...@@ -104,10 +110,43 @@ h1 { ...@@ -104,10 +110,43 @@ h1 {
.right { .right {
flex: 1; flex: 1;
.comparison {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
color: white;
}
#radar-chart-wrapper { #radar-chart-wrapper {
position: relative; position: relative;
margin: 0 4rem 4rem; margin: 0 4rem 4rem;
} }
#player-cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
.player-card {
position: relative;
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem;
border-radius: 0.5rem;
color: white;
min-width: 300px;
height: fit-content;
@include glass;
h3, p {
margin: 0;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
}
}
} }
.chart-settings { .chart-settings {
...@@ -155,6 +194,7 @@ select, input[type="text"] { ...@@ -155,6 +194,7 @@ select, input[type="text"] {
@media (max-width: 1536px) { @media (max-width: 1536px) {
#app { #app {
flex-direction: column; flex-direction: column;
.left .bubble-chart-settings { .left .bubble-chart-settings {
position: static; position: static;
width: fit-content; width: fit-content;
... ...
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment