From e7c0f6522da5ed52522bf48fdd5bad90f57a48c9 Mon Sep 17 00:00:00 2001
From: eric <3024947@stud.hs-mannheim.de>
Date: Thu, 14 Aug 2025 19:41:23 +0200
Subject: [PATCH] =?UTF-8?q?submit=20button=20sch=C3=B6ner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/public/game.html  |  4 ++++
 src/main/resources/public/js/game.js | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/public/game.html b/src/main/resources/public/game.html
index fde76ee..44405d2 100644
--- a/src/main/resources/public/game.html
+++ b/src/main/resources/public/game.html
@@ -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}
diff --git a/src/main/resources/public/js/game.js b/src/main/resources/public/js/game.js
index 6121b45..59403e0 100644
--- a/src/main/resources/public/js/game.js
+++ b/src/main/resources/public/js/game.js
@@ -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; }
     };
 }