From 6ddd5ea8aa506cceb4c7efa0817b16ec9166fe91 Mon Sep 17 00:00:00 2001 From: eric <3024947@stud.hs-mannheim.de> Date: Sun, 10 Aug 2025 23:03:30 +0200 Subject: [PATCH] piechart wip fast fertig (feinschliff fehlt) --- src/main/resources/public/game.html | 10 ++++---- src/main/resources/public/js/game.js | 36 ++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/main/resources/public/game.html b/src/main/resources/public/game.html index 1681340..2c4e32a 100644 --- a/src/main/resources/public/game.html +++ b/src/main/resources/public/game.html @@ -139,12 +139,14 @@ /* === Pie-Slices === */ #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.selected { fill:#1db954; } - .wedge.correct { fill:#1db954; } + .wedge.selected { fill: #0d351c; } + /* .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-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; } diff --git a/src/main/resources/public/js/game.js b/src/main/resources/public/js/game.js index b5bcd12..ee93bbb 100644 --- a/src/main/resources/public/js/game.js +++ b/src/main/resources/public/js/game.js @@ -184,6 +184,17 @@ async function handleRoundStart({ ownerOptions, songUri, trackInfos }) { const mid = (a0 + a1) / 2; const P = polar(CX, CY, R * 0.58, mid); 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("y", P.y); text.setAttribute("class", "wedge-label"); @@ -240,15 +251,31 @@ function renderScoreboard(scores) { function handleRoundResult({ scores, guesses, owner }) { renderScoreboard(scores); - // korrektes Segment hervorheben + 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"); }); - } 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 = ""; - Object.entries(guesses).forEach(([user, guess]) => { + Object.entries(guesses || {}).forEach(([user, guess]) => { const correct = guess === owner; const icon = correct ? "✅" : "❌"; const delta = correct ? "+3" : "-1"; @@ -271,6 +298,7 @@ function handleRoundResult({ scores, guesses, owner }) { }; } + // 8) Spielende -> Start-Button zurück function handleGameEnd({ winner }) { resultP.textContent = `🎉 ${winner} hat gewonnen!`;