| <!doctype html> |
| <html> |
| <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; } |
| button { padding: 8px 12px; font-size: 16px; } |
| #small { color: #666; font-size: 12px; margin-top: 6px; } |
| </style> |
| </head> |
| <body> |
| <div id="wrap"> |
| <div id="log"></div> |
| <div id="row"> |
| <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"); |
| |
| let SID = ""; |
| let MODE = "awaiting_start"; |
| |
| function scrollBottom(){ log.scrollTop = log.scrollHeight; } |
| |
| function render(s){ |
| if (s.sid) SID = s.sid; |
| if (s.mode) MODE = s.mode; |
| log.textContent = s.transcript || ""; |
| btn.textContent = s.primary_label || "Start"; |
| cmd.placeholder = s.placeholder || ""; |
| btn.style.display = (MODE === "awaiting_action") ? "none" : "inline-block"; |
| cmd.focus(); |
| scrollBottom(); |
| } |
| |
| async function fetchState(){ |
| const r = await fetch(SID ? `/state?sid=${SID}` : "/state"); |
| if (!r.ok) throw new Error("state fetch failed"); |
| return r.json(); |
| } |
| async function callPrimary(){ |
| btn.disabled = true; |
| try{ |
| const r = await fetch(SID ? `/primary?sid=${SID}` : "/primary", { method: "POST" }); |
| render(await r.json()); |
| cmd.value = ""; |
| } finally { btn.disabled = false; } |
| } |
| async function callAction(text){ |
| btn.disabled = true; |
| try{ |
| const r = await fetch(SID ? `/action?sid=${SID}` : "/action", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ text }) |
| }); |
| render(await r.json()); |
| cmd.value = ""; |
| } finally { btn.disabled = false; } |
| } |
| |
| async function init(){ |
| |
| render(await fetchState()); |
| |
| btn.addEventListener("click", async () => { await callPrimary(); }); |
| |
| |
| cmd.addEventListener("keydown", async (e) => { |
| if (e.key !== "Enter") return; |
| e.preventDefault(); |
| if (MODE === "awaiting_action"){ |
| await callAction(cmd.value.trim()); |
| } else if (MODE === "awaiting_continue" || MODE === "awaiting_start"){ |
| await callPrimary(); |
| } |
| }); |
| |
| cmd.focus(); |
| scrollBottom(); |
| } |
| init(); |
| </script> |
| </body> |
| </html> |
