Spaces:

cackerman
/

tom_game

Sleeping

App Files Files Community

cackerman commited on Oct 14, 2025

Commit

91e6663

verified ·

1 Parent(s): 0e308b4

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -36

index.html CHANGED Viewed

@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Room Scenario Game</title>
     <style>
       body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
-      #wrap { max-width: 1000px; margin: 0 auto; }
       #log { width: 100%; height: 60vh; border: 1px solid #ccc; padding: 12px; overflow: auto; white-space: pre-wrap; }
       #row { margin-top: 12px; display: flex; gap: 8px; }
       #cmd { flex: 1; padding: 8px; font-size: 16px; }
@@ -20,65 +22,95 @@
         <input id="cmd" type="text" placeholder="[Press Enter to start]" autocomplete="off" />
         <button id="primary">Start</button>
       </div>
-      <div id="small">Tip: Enter starts, continues, or submits your move. The button does the same.</div>
     </div>
     <script>
       const log = document.getElementById("log");
       const cmd = document.getElementById("cmd");
       const btn = document.getElementById("primary");
-      async function fetchState() {
-        const r = await fetch("/state");
-        return r.json();
-      }
       function render(s) {
         log.textContent = s.transcript || "";
         btn.textContent = s.primary_label || "Start";
         cmd.placeholder = s.placeholder || "";
-        // Show/hide the button: hide during player's action (mode=awaiting_action)
-        if (s.mode === "awaiting_action") {
-          btn.style.display = "none";
-        } else {
-          btn.style.display = "inline-block";
-        }
-        // Keep focus in the input at all times so Enter always works
         cmd.focus();
-        // Scroll to bottom
-        log.scrollTop = log.scrollHeight;
       }
       async function init() {
-        render(await fetchState());
         btn.addEventListener("click", async () => {
-          const r = await fetch("/primary", { method: "POST" });
-          render(await r.json());
-          cmd.value = "";
         });
-        // One input for everything: Enter continues or submits based on mode
         cmd.addEventListener("keydown", async (e) => {
           if (e.key !== "Enter") return;
           e.preventDefault();
-          const s = await fetchState();
-          if (s.mode === "awaiting_action") {
-            const text = cmd.value.trim();
-            const r = await fetch("/action", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ text })
-            });
-            render(await r.json());
-            cmd.value = "";
-          } else if (s.mode === "awaiting_continue" || s.mode === "awaiting_start") {
-            const r = await fetch("/primary", { method: "POST" });
-            render(await r.json());
-            cmd.value = "";
-          } else {
-            // over: do nothing
           }
         });
       }
       init();
     </script>
   </body>

   <head>
     <meta charset="utf-8" />
     <title>Room Scenario Game</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
+      :root { --w: 1000px; }
       body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
+      #wrap { max-width: var(--w); margin: 0 auto; }
       #log { width: 100%; height: 60vh; border: 1px solid #ccc; padding: 12px; overflow: auto; white-space: pre-wrap; }
       #row { margin-top: 12px; display: flex; gap: 8px; }
       #cmd { flex: 1; padding: 8px; font-size: 16px; }
         <input id="cmd" type="text" placeholder="[Press Enter to start]" autocomplete="off" />
         <button id="primary">Start</button>
       </div>
+      <div id="small">Enter starts, continues, or submits your move. The button does the same.</div>
     </div>
     <script>
       const log = document.getElementById("log");
       const cmd = document.getElementById("cmd");
       const btn = document.getElementById("primary");
+      function scrollBottom() { log.scrollTop = log.scrollHeight; }
       function render(s) {
         log.textContent = s.transcript || "";
         btn.textContent = s.primary_label || "Start";
         cmd.placeholder = s.placeholder || "";
+        // Hide the button when it's the live player's turn; otherwise show it.
+        btn.style.display = (s.mode === "awaiting_action") ? "none" : "inline-block";
+        // Keep focus where Enter should go
         cmd.focus();
+        scrollBottom();
+      }
+      async function fetchState() {
+        const r = await fetch("/state", { credentials: "include" });
+        if (!r.ok) throw new Error("state fetch failed");
+        return r.json();
+      }
+      async function callPrimary() {
+        btn.disabled = true;
+        try {
+          const r = await fetch("/primary", { method: "POST", credentials: "include" });
+          const s = await r.json();
+          render(s);
+          cmd.value = "";
+        } finally {
+          btn.disabled = false;
+        }
+      }
+      async function callAction(text) {
+        btn.disabled = true; // hidden during action anyway; still block double-submit
+        try {
+          const r = await fetch("/action", {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ text })
+          });
+          const s = await r.json();
+          render(s);
+          cmd.value = "";
+        } finally {
+          btn.disabled = false;
+        }
       }
       async function init() {
+        try {
+          render(await fetchState());
+        } catch (e) {
+          log.textContent = "Failed to load initial state.\n" + (e && e.message ? e.message : e);
+        }
         btn.addEventListener("click", async () => {
+          await callPrimary();
         });
+        // Single input for everything: Enter either submits action or continues
         cmd.addEventListener("keydown", async (e) => {
           if (e.key !== "Enter") return;
           e.preventDefault();
+          try {
+            const s = await fetchState();
+            if (s.mode === "awaiting_action") {
+              const text = cmd.value.trim();
+              await callAction(text);
+            } else if (s.mode === "awaiting_continue" || s.mode === "awaiting_start") {
+              await callPrimary();
+            } // mode "over": do nothing
+          } catch (err) {
+            // Keep UI usable even on transient network errors
+            console.error(err);
           }
         });
+        // Initial focus/scroll
+        cmd.focus();
+        scrollBottom();
       }
       init();
     </script>
   </body>