3014947
/
SpotifyRoulette
1
0
Fork 0
Code Issues 20 Pull Requests Packages Projects Releases Wiki Activity

piechart wip fast fertig (feinschliff fehlt)

pull/32/head
eric 2025-08-10 23:03:30 +02:00
parent c0ffb4d2f1
commit 6ddd5ea8aa
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/resources/public/game.html
View File

@ -139,12 +139,14 @@
/* === Pie-Slices === */ /* === Pie-Slices === */
#options svg.options-svg { width:100%; height:auto; display:block; border-radius:50%; } #options svg.options-svg { width:100%; height:auto; display:block; border-radius:50%; }
.wedge { fill:#181818; stroke:#2a2a2a; stroke-width:2; cursor:pointer; transition:filter .15s, fill .2s; } .wedge { fill:#181818; stroke: #ffffff; stroke-width:4; cursor:pointer; transition:filter .15s, fill .2s; }
.wedge:hover { filter:brightness(1.08); } .wedge:hover { filter:brightness(1.08); }
.wedge.selected { fill:#1db954; } .wedge.selected { fill: #0d351c; }
.wedge.correct { fill:#1db954; } /* .wedge.correct { fill:#1db954; } */
.wedge.correct { fill: var(--accent) !important; } /* grün */
.wedge.wrong { fill: #e22134 !important; } /* rot */
.wedge.disabled { pointer-events:none; opacity:.85; } .wedge.disabled { pointer-events:none; opacity:.85; }
.wedge-label { fill:#fff; font-weight:700; font-size:14px; pointer-events:none; } .wedge-label { fill:#fff; font-weight:700; font-size:35px; pointer-events:none; }
</style> </style>
</head> </head>
<body> <body>

36
src/main/resources/public/js/game.js
View File

@ -184,6 +184,17 @@ async function handleRoundStart({ ownerOptions, songUri, trackInfos }) {
const mid = (a0 + a1) / 2; const mid = (a0 + a1) / 2;
const P = polar(CX, CY, R * 0.58, mid); const P = polar(CX, CY, R * 0.58, mid);
const text = document.createElementNS(SVGNS, "text"); const text = document.createElementNS(SVGNS, "text");
const span = a1 - a0; // Winkelbreite des Segments
const font = Math.max(18, Math.min(42, 26 * (span / 60)));
text.setAttribute("font-size", font);
text.setAttribute("font-weight", "800");
// Bessere Lesbarkeit auf dunklem Slice
text.setAttribute("paint-order", "stroke");
text.setAttribute("stroke", "#000");
text.setAttribute("stroke-width", "2");
text.setAttribute("fill", "#fff");
// überschreibt CSS-Größe
text.setAttribute("x", P.x); text.setAttribute("x", P.x);
text.setAttribute("y", P.y); text.setAttribute("y", P.y);
text.setAttribute("class", "wedge-label"); text.setAttribute("class", "wedge-label");
@ -240,15 +251,31 @@ function renderScoreboard(scores) {
function handleRoundResult({ scores, guesses, owner }) { function handleRoundResult({ scores, guesses, owner }) {
renderScoreboard(scores); renderScoreboard(scores);
// korrektes Segment hervorheben
try { try {
document.querySelectorAll("#options .wedge").forEach(w => { const wedges = document.querySelectorAll("#options .wedge");
// Owner-Slice immer grün
wedges.forEach(w => {
if (w.getAttribute("data-user") === owner) w.classList.add("correct"); if (w.getAttribute("data-user") === owner) w.classList.add("correct");
}); });
} catch(e) {}
// Nur die EIGENE Auswahl einfärben: rot wenn falsch, sonst grün
const myGuess = guesses?.[username];
if (myGuess) {
const myWedge = Array.from(wedges).find(w => w.getAttribute("data-user") === myGuess);
if (myWedge) {
if (myGuess === owner) {
myWedge.classList.add("correct");
} else {
myWedge.classList.add("wrong"); // nur dieser wird rot
}
}
}
} catch (e) {}
resultP.innerHTML = ""; resultP.innerHTML = "";
Object.entries(guesses).forEach(([user, guess]) => { Object.entries(guesses || {}).forEach(([user, guess]) => {
const correct = guess === owner; const correct = guess === owner;
const icon = correct ? "✅" : "❌"; const icon = correct ? "✅" : "❌";
const delta = correct ? "+3" : "-1"; const delta = correct ? "+3" : "-1";
@ -271,6 +298,7 @@ function handleRoundResult({ scores, guesses, owner }) {
}; };
} }
// 8) Spielende -> Start-Button zurück // 8) Spielende -> Start-Button zurück
function handleGameEnd({ winner }) { function handleGameEnd({ winner }) {
resultP.textContent = `🎉 ${winner} hat gewonnen!`; resultP.textContent = `🎉 ${winner} hat gewonnen!`;