From 6a067d0c1e4715dd08033e4b2f74ea895e930ece Mon Sep 17 00:00:00 2001 From: eric <3024947@stud.hs-mannheim.de> Date: Fri, 8 Aug 2025 03:29:15 +0200 Subject: [PATCH] Neue GUI --- src/main/resources/public/game.html | 184 ++++++++++++++++++++++----- src/main/resources/public/js/game.js | 74 +++++------ 2 files changed, 187 insertions(+), 71 deletions(-) diff --git a/src/main/resources/public/game.html b/src/main/resources/public/game.html index 0577766..0e221fd 100644 --- a/src/main/resources/public/game.html +++ b/src/main/resources/public/game.html @@ -1,43 +1,159 @@ - - - Spotify Roulette – Spiel - + + + Spotify Roulette – Spiel + -

Spotify Roulette

-

Spiel-Code:

- -
-

Geladene Songs

- -
- -

Teilnehmer

- - -
- -
- - - -

Scoreboard

- - +
+

Spotify Roulette

+
Spiel-Code:
+
+
+
+
Teilnehmer
+ +
+
+ +
+ +
+
Scoreboard
+ +
+
+ + + + -
diff --git a/src/main/resources/public/js/game.js b/src/main/resources/public/js/game.js index a091ee6..348a353 100644 --- a/src/main/resources/public/js/game.js +++ b/src/main/resources/public/js/game.js @@ -98,7 +98,7 @@ function connectWebSocket() { } connectWebSocket(); -// 8) Funktion zum Anzeigen einer neuen Runde +// Zugriff auf DOM-Elemente const startBtn = document.getElementById("startRound"); const roundArea = document.getElementById("roundArea"); const songEmbed = document.getElementById("songEmbed"); @@ -106,6 +106,7 @@ const optionsDiv = document.getElementById("options"); const resultP = document.getElementById("result"); const scoreboard = document.getElementById("scoreboard"); +// 8) Funktion zum Anzeigen einer neuen Runde function handleRoundStart({ ownerOptions, songUri, allTracks, trackInfos }) { // UI zurücksetzen resultP.textContent = ""; @@ -120,36 +121,44 @@ function handleRoundStart({ ownerOptions, songUri, allTracks, trackInfos }) { width="100%" height="80" frameborder="0" allow="encrypted-media"> `; - // Song automatisch abspielen (sofern deviceId bereit und Username vorhanden) + if (window.playOnSpotify && typeof window.playOnSpotify === "function") { window.playOnSpotify(songUri, username); } - // Tipp-Buttons erzeugen - ownerOptions.forEach(user => { - const btn = document.createElement("button"); - btn.textContent = user; - btn.addEventListener("click", () => { - socket.send(JSON.stringify({ - type: "guess", - username: username, - guess: user - })); - // Nach Tipp alle Buttons deaktivieren - optionsDiv.querySelectorAll("button").forEach(b => b.disabled = true); - }); - optionsDiv.append(btn); - }); + // Dynamische Kreisverteilung der Buttons + // Warten, bis #options gerendert ist + setTimeout(() => { + const optsRect = optionsDiv.getBoundingClientRect(); + const radius = Math.min(optsRect.width, optsRect.height) / 2 - 50; // 50px Abstand zum Rand + + ownerOptions.forEach((user, i) => { + const btn = document.createElement("button"); + btn.textContent = user; + btn.classList.add("player-option"); + const angle = 360 * i / ownerOptions.length; + btn.style.transform = `rotate(${angle}deg) translateY(-${radius}px) rotate(${-angle}deg)`; + btn.addEventListener("click", () => { + socket.send(JSON.stringify({ + type: "guess", + username: username, + guess: user + })); + optionsDiv.querySelectorAll("button").forEach(b => b.disabled = true); + }); + optionsDiv.appendChild(btn); + }); + }, 0); - // UI anzeigen startBtn.hidden = true; roundArea.hidden = false; + const songList = document.getElementById("songList"); songList.innerHTML = ""; if (Array.isArray(trackInfos)) { trackInfos.forEach(trackInfo => { const li = document.createElement("li"); - li.textContent = trackInfo + li.textContent = trackInfo; songList.appendChild(li); }); } @@ -166,43 +175,38 @@ function renderScoreboard(scores) { } function handleRoundResult({ scores, guesses, owner }) { - // Scoreboard updaten renderScoreboard(scores); - // Ergebnis für alle Spieler anzeigen - resultP.innerHTML = ""; // Vorher leeren + resultP.innerHTML = ""; Object.entries(guesses).forEach(([user, guess]) => { const correct = guess === owner; const icon = correct ? "✅" : "❌"; - const msg = `${icon} ${user} hat auf ${guess} getippt${correct ? " (richtig!)" : " (falsch)"}`; + const delta = correct ? "+3" : "-1"; + const msg = `${icon} ${user} hat auf ${guess} getippt${correct ? " (richtig!)" : " (falsch)"} [${delta}]`; const p = document.createElement("p"); p.textContent = msg; resultP.appendChild(p); }); - // Nach kurzer Pause für die nächste Runde vorbereiten setTimeout(() => { resultP.textContent = ""; startBtn.hidden = true; startBtn.disabled = true; roundArea.hidden = true; }, 3000); - } function handleGameEnd({winner}) { resultP.textContent = `🎉 ${winner} hat gewonnen!`; setTimeout(() => { - startBtn.hidden = false; - roundArea.hidden = true; - startBtn.disabled = false; - // scoreboard leeren + startBtn.hidden = false; + roundArea.hidden = true; + startBtn.disabled = false; scoreboard.innerHTML = ""; }, 6000); } -// public/js/game.js - +// Spotify-Playback Funktion async function playOnSpotify(trackUri, username) { const deviceId = document.getElementById("deviceSelect")?.value; if (!deviceId) { @@ -213,11 +217,7 @@ async function playOnSpotify(trackUri, username) { const response = await fetch("/api/spotify/play", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - username, - device_id: deviceId, - track_uri: trackUri - }) + body: JSON.stringify({ username, device_id: deviceId, track_uri: trackUri }) }); if (!response.ok) { const error = await response.text(); @@ -227,4 +227,4 @@ async function playOnSpotify(trackUri, username) { alert(`Netzwerkfehler: ${err.message}`); } } -window.playOnSpotify = playOnSpotify; \ No newline at end of file +window.playOnSpotify = playOnSpotify;