From f6bd6e9f2f7a0b55ae5d0c330201962707ea4d55 Mon Sep 17 00:00:00 2001
From: eric <3024947@stud.hs-mannheim.de>
Date: Tue, 12 Aug 2025 06:18:24 +0200
Subject: [PATCH] kein runde starten knopf mehr in overlay
---
src/main/resources/public/game.html | 32 ++++++++++++++++++++++-
src/main/resources/public/js/game.js | 39 +++++++++++++++++++++++-----
2 files changed, 63 insertions(+), 8 deletions(-)
diff --git a/src/main/resources/public/game.html b/src/main/resources/public/game.html
index 7cd53d3..fde76ee 100644
--- a/src/main/resources/public/game.html
+++ b/src/main/resources/public/game.html
@@ -161,6 +161,29 @@
.win-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.confetti{position:absolute; top:-10vh; width:10px; height:16px; opacity:.9; animation:fall 3.2s linear infinite}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0deg)}100%{transform:translateY(110vh) rotate(360deg)}}
+
+ /* Overlay-Scoreboard */
+ .win-leaderboard{ margin-top:14px; text-align:left }
+ .win-lead-title{ font-weight:800; color:#cfcfcf; margin:6px 0 8px }
+ .win-board{
+ list-style:none; padding:0; margin:0;
+ display:flex; flex-direction:column; gap:8px;
+ max-height:40vh; overflow:auto;
+ }
+ .win-board li{
+ display:flex; align-items:center; justify-content:space-between;
+ background:#0f0f0f; border:1px solid var(--border);
+ border-radius:12px; padding:10px 12px;
+ }
+ .win-board .left{ display:flex; align-items:center; gap:10px }
+ .win-board .rank{ width:28px; text-align:center; font-weight:900; color:#9f9f9f }
+ .win-board .name{ font-weight:700 }
+ .win-board .pts{ color:#cfcfcf; font-weight:700 }
+ .win-board li.winner{
+ border-color:var(--accent);
+ box-shadow:0 0 0 4px var(--glow);
+ }
+
@@ -244,8 +267,15 @@
Gewonnen!
—
+
+
+
+
-
+
diff --git a/src/main/resources/public/js/game.js b/src/main/resources/public/js/game.js
index 0a72706..80c5903 100644
--- a/src/main/resources/public/js/game.js
+++ b/src/main/resources/public/js/game.js
@@ -314,7 +314,7 @@ function handleGameEnd({ winner }) {
const overlay = document.getElementById("winnerOverlay");
const nameEl = document.getElementById("winName");
const ptsEl = document.getElementById("winPoints");
- const btnNext = document.getElementById("winNext");
+ //const btnNext = document.getElementById("winNext");
const btnClose= document.getElementById("winClose");
const btnShare= document.getElementById("winShare");
@@ -322,6 +322,31 @@ function handleGameEnd({ winner }) {
const pts = lastScores && typeof lastScores[winner] !== "undefined" ? lastScores[winner] : null;
ptsEl.textContent = pts != null ? `${winner} endet mit ${pts} Punkten.` : "";
+ // Leaderboard im Overlay rendern (aus Cache lastScores)
+ const boardEl = document.getElementById("winBoard");
+ if (boardEl) {
+ boardEl.innerHTML = "";
+ const entries = lastScores
+ ? Object.entries(lastScores).sort((a,b)=> (b[1]-a[1]) || a[0].localeCompare(b[0]))
+ : [];
+
+ entries.forEach(([user, pts], i) => {
+ const li = document.createElement("li");
+ if (user === winner) li.classList.add("winner");
+
+ const medal = i===0 ? "🥇" : i===1 ? "🥈" : i===2 ? "🥉" : String(i+1);
+
+ li.innerHTML = `
+
+ ${pts} Punkte
+ `;
+ boardEl.appendChild(li);
+ });
+ }
+
// Konfetti erzeugen (einmalig pro Anzeige)
Array.from(overlay.querySelectorAll(".confetti")).forEach(n => n.remove());
const colors = [ "var(--accent)", "#21d07a", "#b3b3b3", "#ffffff" ];
@@ -335,12 +360,12 @@ function handleGameEnd({ winner }) {
overlay.appendChild(c);
}
// Buttons
- btnNext.onclick = () => {
- socket.send(JSON.stringify({ type: "next-round" }));
- overlay.style.display = "none";
- roundArea.hidden = true;
- resultP.textContent = "";
- };
+ //btnNext.onclick = () => {
+ // socket.send(JSON.stringify({ type: "next-round" }));
+ // overlay.style.display = "none";
+ // roundArea.hidden = true;
+ // resultP.textContent = "";
+ //};
btnClose.onclick = () => { overlay.style.display = "none"; };
btnShare.onclick = async () => {
const text = `🏆 ${winner} hat Spotify Roulette gewonnen!`;