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

submit button schöner

GUI
eric 2025-08-14 19:41:23 +02:00
parent 739db427ab
commit e7c0f6522d
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,10 @@
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)} .btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--muted)} .btn-ghost:hover{border-color:var(--muted)}
.muted{color:var(--muted)} .muted{color:var(--muted)}
/* Sichtbarer, ausgegrauter Submit-Button nur im disabled-Zustand */
#submitGuesses:disabled,
.btn:disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.35);pointer-events:none; transition:opacity .12s ease-in-out;
}
/* Grid */ /* Grid */
.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-top:20px} .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-top:20px}

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

@ -212,7 +212,10 @@ async function handleRoundStart({ ownerOptions, songUri, trackInfos }) {
if (path.classList.contains("disabled")) return; if (path.classList.contains("disabled")) return;
if (path.classList.toggle("selected")) selectedGuesses.add(u); if (path.classList.toggle("selected")) selectedGuesses.add(u);
else selectedGuesses.delete(u); else selectedGuesses.delete(u);
submitBtn.disabled = selectedGuesses.size === 0; //submitBtn.disabled = selectedGuesses.size === 0;
const hasSelection = selectedGuesses.size > 0;
submitBtn.hidden = !hasSelection; // ohne Auswahl: versteckt
submitBtn.disabled = !hasSelection; // mit Auswahl: enabled
}); });
// Label mittig im Segment // Label mittig im Segment
@ -248,11 +251,14 @@ async function handleRoundStart({ ownerOptions, songUri, trackInfos }) {
submitBtn.id = "submitGuesses"; submitBtn.id = "submitGuesses";
submitBtn.className = "btn btn-primary"; submitBtn.className = "btn btn-primary";
submitBtn.style.marginTop = "8px"; submitBtn.style.marginTop = "8px";
submitBtn.textContent = "submit"; submitBtn.textContent = "Submit";
optionsDiv.parentElement.appendChild(submitBtn); optionsDiv.parentElement.appendChild(submitBtn);
} }
submitBtn.hidden = false; //submitBtn.hidden = false;
// warum disabled? // warum disabled?
//submitBtn.disabled = true;
// Zu Beginn der Runde: Button verstecken, bis eine Auswahl existiert
submitBtn.hidden = true;
submitBtn.disabled = true; submitBtn.disabled = true;
submitBtn.onclick = () => { submitBtn.onclick = () => {
if (!selectedGuesses.size) return; if (!selectedGuesses.size) return;
@ -262,6 +268,9 @@ async function handleRoundStart({ ownerOptions, songUri, trackInfos }) {
username, username,
guesses guesses
})); }));
//submitBtn.disabled = true;
// Nach Abgabe sichtbar, aber disabled (ausgegraut)
submitBtn.hidden = false;
submitBtn.disabled = true; submitBtn.disabled = true;
// Sperre Eingaben nach Abgabe // Sperre Eingaben nach Abgabe
optionsDiv.querySelectorAll(".wedge").forEach(w => w.classList.add("disabled")); optionsDiv.querySelectorAll(".wedge").forEach(w => w.classList.add("disabled"));
@ -398,8 +407,10 @@ function handleRoundResult({ scores, guesses, owner }) {
startBtn.hidden = true; startBtn.hidden = true;
startBtn.disabled = true; startBtn.disabled = true;
roundArea.hidden = true; roundArea.hidden = true;
//const submitBtn = document.getElementById("submitGuesses");
//if (submitBtn) submitBtn.hidden = true;
const submitBtn = document.getElementById("submitGuesses"); const submitBtn = document.getElementById("submitGuesses");
if (submitBtn) submitBtn.hidden = true; if (submitBtn) { submitBtn.hidden = true; submitBtn.disabled = true; }
}; };
} }