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

kein runde starten knopf mehr in overlay

GUI
eric 2025-08-12 06:18:24 +02:00
parent 8c39cd3937
commit f6bd6e9f2f
2 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,6 +161,29 @@
.win-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px} .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} .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)}} @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);
}
</style> </style>
</head> </head>
<body> <body>
@ -244,8 +267,15 @@
<p class="win-title">Gewonnen!</p> <p class="win-title">Gewonnen!</p>
<h2 id="winName" class="win-name">—</h2> <h2 id="winName" class="win-name">—</h2>
<p id="winPoints" class="win-points"></p> <p id="winPoints" class="win-points"></p>
<!-- Leaderboard im Overlay -->
<div class="win-leaderboard">
<div class="win-lead-title">Leaderboard</div>
<ol id="winBoard" class="win-board"></ol>
</div>
<div class="win-actions"> <div class="win-actions">
<button id="winNext" class="btn btn-primary">Neue Runde</button> <!-- <button id="winNext" class="btn btn-primary">Neue Runde</button> -->
<button id="winClose" class="btn btn-ghost">Schließen</button> <button id="winClose" class="btn btn-ghost">Schließen</button>
<button id="winShare" class="btn btn-ghost">Teilen</button> <button id="winShare" class="btn btn-ghost">Teilen</button>
</div> </div>

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

@ -314,7 +314,7 @@ function handleGameEnd({ winner }) {
const overlay = document.getElementById("winnerOverlay"); const overlay = document.getElementById("winnerOverlay");
const nameEl = document.getElementById("winName"); const nameEl = document.getElementById("winName");
const ptsEl = document.getElementById("winPoints"); const ptsEl = document.getElementById("winPoints");
const btnNext = document.getElementById("winNext"); //const btnNext = document.getElementById("winNext");
const btnClose= document.getElementById("winClose"); const btnClose= document.getElementById("winClose");
const btnShare= document.getElementById("winShare"); const btnShare= document.getElementById("winShare");
@ -322,6 +322,31 @@ function handleGameEnd({ winner }) {
const pts = lastScores && typeof lastScores[winner] !== "undefined" ? lastScores[winner] : null; const pts = lastScores && typeof lastScores[winner] !== "undefined" ? lastScores[winner] : null;
ptsEl.textContent = pts != null ? `${winner} endet mit ${pts} Punkten.` : ""; 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 = `
<div class="left">
<div class="rank">${medal}</div>
<div class="name">${user}</div>
</div>
<div class="pts">${pts} Punkte</div>
`;
boardEl.appendChild(li);
});
}
// Konfetti erzeugen (einmalig pro Anzeige) // Konfetti erzeugen (einmalig pro Anzeige)
Array.from(overlay.querySelectorAll(".confetti")).forEach(n => n.remove()); Array.from(overlay.querySelectorAll(".confetti")).forEach(n => n.remove());
const colors = [ "var(--accent)", "#21d07a", "#b3b3b3", "#ffffff" ]; const colors = [ "var(--accent)", "#21d07a", "#b3b3b3", "#ffffff" ];
@ -335,12 +360,12 @@ function handleGameEnd({ winner }) {
overlay.appendChild(c); overlay.appendChild(c);
} }
// Buttons // Buttons
btnNext.onclick = () => { //btnNext.onclick = () => {
socket.send(JSON.stringify({ type: "next-round" })); // socket.send(JSON.stringify({ type: "next-round" }));
overlay.style.display = "none"; // overlay.style.display = "none";
roundArea.hidden = true; // roundArea.hidden = true;
resultP.textContent = ""; // resultP.textContent = "";
}; //};
btnClose.onclick = () => { overlay.style.display = "none"; }; btnClose.onclick = () => { overlay.style.display = "none"; };
btnShare.onclick = async () => { btnShare.onclick = async () => {
const text = `🏆 ${winner} hat Spotify Roulette gewonnen!`; const text = `🏆 ${winner} hat Spotify Roulette gewonnen!`;