Spaces:
Paused
Paused
| import { game, applyState, subscribe } from "./gameState.js"; | |
| import { trackMotion } from "./snakeMotion.js"; | |
| import { renderDashboard, drawCharts, setText } from "./dashboard.js"; | |
| import { CanvasRenderer } from "./renderer2d.js"; | |
| const $ = (id) => document.getElementById(id); | |
| const VIEWS = ["2d", "3d", "cinematic"]; | |
| /* ---------- viewer preferences (this browser only) ---------- */ | |
| const prefs = { view: "3d", tod: "golden", grid: true, follow: false }; | |
| try { Object.assign(prefs, JSON.parse(localStorage.getItem("laya-snake-view") || "{}")); } catch (_) {} | |
| if (!VIEWS.includes(prefs.view)) prefs.view = "3d"; | |
| const debug = new URLSearchParams(location.search).has("debug"); | |
| // Saves the viewer's scene preferences and applies them. | |
| function savePrefs() { | |
| try { localStorage.setItem("laya-snake-view", JSON.stringify(prefs)); } catch (_) {} | |
| showPrefs(); | |
| selectRenderer(); | |
| } | |
| // Reflects the local scene preferences in the settings panel. | |
| function showPrefs() { | |
| [...$("view-seg").children].forEach((b) => b.classList.toggle("on", b.dataset.v === prefs.view)); | |
| $("tod-sel").value = prefs.tod; | |
| $("sw-grid").classList.toggle("on", prefs.grid); | |
| $("sw-follow").classList.toggle("on", prefs.follow); | |
| setText("hdr-view", { "2d": "2D view", "3d": "3D view", cinematic: "Realistic view" }[prefs.view]); | |
| } | |
| /* ---------- commands (unchanged server API) ---------- */ | |
| // Sends one control command to the game server and applies the state it returns. | |
| async function cmd(name) { | |
| if (game.state && game.state.view_only) return; | |
| try { | |
| const r = await fetch("/api/cmd/" + name, { method: "POST" }); | |
| if (r.ok) applyState(await r.json()); | |
| } catch (_) {} | |
| } | |
| $("btn-pause").onclick = () => cmd("pause"); | |
| $("btn-reset").onclick = () => cmd("reset"); | |
| $("sw-shield").onclick = () => cmd("shield"); | |
| $("sw-auto").onclick = () => cmd("auto"); | |
| $("sw-obst").onclick = () => cmd("obstacles"); | |
| $("food-dec").onclick = () => game.state && cmd("foods/" + (game.state.rules.foods - 1)); | |
| $("food-inc").onclick = () => game.state && cmd("foods/" + (game.state.rules.foods + 1)); | |
| $("speed").oninput = (e) => cmd("speed/" + e.target.value); | |
| $("size-sel").onchange = (e) => cmd("size/" + e.target.value); | |
| $("tod-sel").onchange = (e) => { prefs.tod = e.target.value; savePrefs(); }; | |
| $("sw-grid").onclick = () => { prefs.grid = !prefs.grid; savePrefs(); }; | |
| $("sw-follow").onclick = () => { prefs.follow = !prefs.follow; savePrefs(); }; | |
| [...$("view-seg").children].forEach((b) => b.onclick = () => { prefs.view = b.dataset.v; savePrefs(); }); | |
| document.addEventListener("keydown", (e) => { | |
| if (e.metaKey || e.ctrlKey || e.altKey || /SELECT|INPUT/.test(e.target.tagName)) return; | |
| const k = e.key.toLowerCase(); | |
| const local = { | |
| v: () => { prefs.view = VIEWS[(VIEWS.indexOf(prefs.view) + 1) % VIEWS.length]; }, | |
| g: () => { prefs.grid = !prefs.grid; }, | |
| f: () => { prefs.follow = !prefs.follow; }, | |
| }; | |
| if (local[k]) { e.preventDefault(); local[k](); savePrefs(); return; } | |
| const map = { " ": "pause", r: "reset", s: "shield", a: "auto", o: "obstacles", | |
| arrowup: "faster", arrowdown: "slower", "+": "grow", "=": "grow", "-": "shrink", "_": "shrink" }; | |
| if (map[k]) { e.preventDefault(); cmd(map[k]); } | |
| }); | |
| const navLinks = [...document.querySelectorAll(".nav a")]; | |
| const spy = new IntersectionObserver((entries) => { | |
| entries.forEach((en) => { | |
| if (en.isIntersecting) navLinks.forEach((a) => a.classList.toggle("on", a.getAttribute("href") === "#" + en.target.id)); | |
| }); | |
| }, { rootMargin: "-30% 0px -60% 0px" }); | |
| ["game", "stats", "model", "charts", "history"].forEach((id) => spy.observe($(id))); | |
| /* ---------- renderers ---------- */ | |
| const canvas2d = new CanvasRenderer($("stage"), prefs); | |
| let three = null, threeState = "idle"; | |
| let current = null; | |
| // Loads the Three.js world the first time a 3D view is chosen; afterwards it is reused as is. | |
| function ensureThree() { | |
| if (threeState !== "idle") return; | |
| threeState = "loading"; | |
| $("load3d").classList.add("show"); | |
| import("./renderer3d.js") | |
| .then(async (m) => { | |
| three = new m.ThreeRenderer($("stage3d"), prefs); | |
| if (debug) window.__laya3d = three; | |
| if (game.state) three.update(game.state); | |
| await three.init(); | |
| if (debug) { $("debug3d").classList.add("show"); await three.enableDebug($("debug3d")); } | |
| threeState = "ready"; | |
| }) | |
| .catch((err) => { | |
| console.error("[3d] could not start the 3D view:", err); | |
| threeState = "failed"; | |
| $("load3d").textContent = "3D view unavailable (WebGL). Showing 2D."; | |
| setTimeout(() => $("load3d").classList.remove("show"), 4000); | |
| }) | |
| .finally(() => { if (threeState === "ready") $("load3d").classList.remove("show"); selectRenderer(); }); | |
| } | |
| // Picks the renderer for the current view; the game itself is never touched by a switch. | |
| function selectRenderer() { | |
| const wants3d = prefs.view !== "2d"; | |
| if (wants3d) ensureThree(); | |
| const next = wants3d && threeState === "ready" ? three : canvas2d; | |
| if (next === three) three.setMode(prefs.view); | |
| $("stage-box").dataset.mode = next === three ? prefs.view : "2d"; | |
| if (next !== current) { | |
| if (current) current.deactivate(); | |
| current = next; | |
| current.resize(); | |
| } | |
| } | |
| new ResizeObserver(() => { canvas2d.resize(); if (three) three.resize(); }).observe($("stage-box")); | |
| window.addEventListener("resize", () => { canvas2d.resize(); drawCharts(); }); | |
| /* ---------- state flow: server update -> state -> dashboard + both renderers ---------- */ | |
| subscribe((s, prev) => { | |
| trackMotion(prev, s); | |
| canvas2d.update(s); | |
| if (three) three.update(s); | |
| renderDashboard(s); | |
| }); | |
| // One animation loop for the whole page; only the visible renderer draws. | |
| function loop(now) { | |
| requestAnimationFrame(loop); | |
| if (game.state && current) current.render(now); | |
| } | |
| // Subscribes to the server's state stream (Server-Sent Events, unchanged). | |
| function connect() { | |
| const es = new EventSource("/api/events"); | |
| es.onmessage = (e) => applyState(JSON.parse(e.data)); | |
| es.onerror = () => { | |
| $("status").className = "pill down"; | |
| setText("status-text", "DISCONNECTED"); | |
| }; | |
| } | |
| showPrefs(); | |
| selectRenderer(); | |
| fetch("/api/state").then((r) => r.json()).then(applyState).catch(() => {}); | |
| connect(); | |
| requestAnimationFrame(loop); | |