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

View File

@ -52,6 +52,10 @@
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{border-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{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-top:20px}

View File

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