Spaces:
Running
Running
| // The play page. It holds one OpenEnv WebSocket session (/ws): "reset" deals, "step" submits the | |
| // final expression. Combining cards on the table only builds that expression; the server grades it. | |
| (function () { | |
| const $ = (id) => document.getElementById(id); | |
| const LEVEL_TITLES = { "24": "24", "three-digit": "Three-digit", year: "Year", "four-digit": "Four-digit", custom: "Your number", video: "From the video" }; | |
| const SYM = { "+": "+", "-": "−", "*": "×", "/": "÷" }; | |
| const PREC = { "+": 1, "-": 1, "*": 2, "/": 2 }; | |
| // ---- exact fractions ---------------------------------------------------- | |
| const gcd = (a, b) => { a = Math.abs(a); b = Math.abs(b); while (b) [a, b] = [b, a % b]; return a || 1; }; | |
| const frac = (n, d = 1) => { if (d < 0) { n = -n; d = -d; } const g = gcd(n, d); return { n: n / g, d: d / g }; }; | |
| const apply = (op, a, b) => { | |
| if (op === "+") return frac(a.n * b.d + b.n * a.d, a.d * b.d); | |
| if (op === "-") return frac(a.n * b.d - b.n * a.d, a.d * b.d); | |
| if (op === "*") return frac(a.n * b.n, a.d * b.d); | |
| if (b.n === 0) return null; | |
| return frac(a.n * b.d, a.d * b.n); | |
| }; | |
| const show = (f) => (f.d === 1 ? String(f.n) : `${f.n}/${f.d}`); | |
| const num = (n) => (Math.abs(n) < 10000 ? String(n) : n.toLocaleString("en-US")); | |
| const pretty = (f) => (f.d === 1 ? num(f.n) : `${f.n}/${f.d}`); | |
| // Same parenthesisation as the server's to_text. | |
| function text(tree, symbols) { | |
| const walk = (t) => { | |
| if (typeof t === "number") return [String(t), 3]; | |
| const [op, l, r] = t; | |
| let [lt, lp] = walk(l), [rt, rp] = walk(r); | |
| if (lp < PREC[op]) lt = `(${lt})`; | |
| if (rp < PREC[op] || (rp === PREC[op] && (op === "-" || op === "/"))) rt = `(${rt})`; | |
| return [`${lt} ${symbols ? SYM[op] : op} ${rt}`, PREC[op]]; | |
| }; | |
| return walk(tree)[0]; | |
| } | |
| // ---- state ---------------------------------------------------------------- | |
| const S = { | |
| ws: null, ready: null, pending: null, | |
| level: "year", videoIndex: 0, | |
| task: null, piles: [], history: [], steps: [], | |
| selected: null, op: null, done: false, busy: false, | |
| startedAt: 0, timer: null, nextId: 0, | |
| }; | |
| // ---- OpenEnv session -------------------------------------------------------- | |
| function connect() { | |
| if (S.ws && S.ws.readyState <= 1) return S.ready; | |
| const ws = new WebSocket((location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/ws"); | |
| S.ws = ws; | |
| S.ready = new Promise((resolve, reject) => { | |
| ws.onopen = () => resolve(); | |
| ws.onerror = () => reject(new Error("Could not reach the environment server.")); | |
| }); | |
| ws.onmessage = (ev) => { | |
| const msg = JSON.parse(ev.data); | |
| const p = S.pending; S.pending = null; | |
| if (!p) return; | |
| if (msg.type === "error") p.reject(new Error((msg.data && msg.data.message) || "Server error")); | |
| else p.resolve(msg.data); | |
| }; | |
| ws.onclose = () => { | |
| if (S.pending) { S.pending.reject(new Error("The session closed. Deal again.")); S.pending = null; } | |
| S.ws = null; | |
| }; | |
| return S.ready; | |
| } | |
| async function send(type, data) { | |
| await connect(); | |
| return new Promise((resolve, reject) => { | |
| S.pending = { resolve, reject }; | |
| S.ws.send(JSON.stringify({ type, data })); | |
| }); | |
| } | |
| // ---- dealing ----------------------------------------------------------------- | |
| async function deal() { | |
| if (S.busy) return; | |
| let data; | |
| if (S.level === "video") { | |
| data = { split: "video", index: S.videoIndex }; | |
| S.videoIndex = (S.videoIndex + 1) % 2; | |
| } else if (S.level === "custom") { | |
| const raw = $("custom-target").value.replace(/[,\s_]/g, ""); | |
| if (!/^\d{1,6}$/.test(raw)) { setStatus("Type a whole number for the target first.", "warn"); $("custom-target").focus(); return; } | |
| data = { target: Number(raw) }; | |
| } else if (S.level === "year") { | |
| data = { level: "year", target: new Date().getFullYear() }; | |
| } else { | |
| data = { level: S.level }; | |
| } | |
| S.busy = true; | |
| setStatus("Dealing…"); | |
| try { | |
| const res = await send("reset", data); | |
| start(res.observation); | |
| } catch (e) { | |
| setStatus(e.message, "warn"); | |
| } finally { | |
| S.busy = false; | |
| } | |
| } | |
| function start(obs) { | |
| S.task = obs; | |
| S.piles = obs.cards.map((c) => ({ id: S.nextId++, value: frac(c.rank), tree: c.rank, card: c, count: 1 })); | |
| S.history = []; S.steps = []; S.selected = null; S.op = null; S.done = false; | |
| $("target").textContent = num(obs.target); | |
| $("task-id").textContent = obs.task_id.startsWith("video-") ? "As dealt in the video" : `${obs.cards.length} cards`; | |
| $("prompt").textContent = obs.system_prompt + "\n\n" + obs.prompt; | |
| $("expr").value = ""; | |
| $("result").hidden = true; | |
| $("table").classList.remove("over"); | |
| S.startedAt = performance.now(); | |
| clearInterval(S.timer); | |
| S.timer = setInterval(tick, 250); | |
| tick(); | |
| render(); | |
| setStatus(""); | |
| } | |
| function tick() { | |
| const s = Math.floor((performance.now() - S.startedAt) / 1000); | |
| $("timer").textContent = `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; | |
| } | |
| // ---- combining on the table --------------------------------------------------- | |
| function pick(id) { | |
| if (S.done || !S.task) return; | |
| if (S.selected === null) { S.selected = id; S.op = null; } | |
| else if (S.selected === id) { S.selected = null; S.op = null; } | |
| else if (S.op) { combine(S.selected, S.op, id); return; } | |
| else S.selected = id; | |
| render(); | |
| } | |
| function chooseOp(op) { | |
| if (S.done || S.selected === null) { setStatus("Pick a card first.", "hint"); return; } | |
| S.op = S.op === op ? null : op; | |
| render(); | |
| } | |
| function combine(aId, op, bId) { | |
| const a = S.piles.find((p) => p.id === aId), b = S.piles.find((p) => p.id === bId); | |
| const value = apply(op, a.value, b.value); | |
| if (!value) { setStatus("Can't divide by zero.", "warn"); S.op = null; render(); return; } | |
| S.history.push({ piles: S.piles.slice(), steps: S.steps.slice() }); | |
| const made = { id: S.nextId++, value, tree: [op, a.tree, b.tree], card: null, count: a.count + b.count, fresh: true }; | |
| S.steps.push(`${show(a.value)} ${SYM[op]} ${show(b.value)} = ${show(value)}`); | |
| const at = Math.min(S.piles.indexOf(a), S.piles.indexOf(b)); | |
| S.piles = S.piles.filter((p) => p !== a && p !== b); | |
| S.piles.splice(Math.min(at, S.piles.length), 0, made); | |
| S.selected = S.piles.length > 1 ? made.id : null; | |
| S.op = null; | |
| render(); | |
| if (S.piles.length === 1) { | |
| const last = S.piles[0]; | |
| if (last.value.d === 1 && last.value.n === S.task.target) submit(text(last.tree, false)); | |
| else setStatus(`All cards used: ${pretty(last.value)}, not ${num(S.task.target)}. Undo, or submit it as it is.`, "warn", true); | |
| } else setStatus(""); | |
| } | |
| function undo() { | |
| if (S.done || !S.history.length) return; | |
| const prev = S.history.pop(); | |
| S.piles = prev.piles; S.steps = prev.steps; S.selected = null; S.op = null; | |
| render(); setStatus(""); | |
| } | |
| function restart() { | |
| if (S.done || !S.history.length) return; | |
| const first = S.history[0]; | |
| S.history = []; S.piles = first.piles; S.steps = []; S.selected = null; S.op = null; | |
| render(); setStatus(""); | |
| } | |
| // ---- submitting --------------------------------------------------------------- | |
| async function submit(expression) { | |
| if (S.done || S.busy || !S.task) return; | |
| S.busy = true; | |
| setStatus("Checking…"); | |
| try { | |
| const res = await send("step", { expression }); | |
| finish(res, expression); | |
| } catch (e) { | |
| setStatus(e.message, "warn"); | |
| } finally { | |
| S.busy = false; | |
| } | |
| } | |
| function finish(res, expression) { | |
| S.done = true; | |
| clearInterval(S.timer); | |
| const obs = res.observation, r = obs.result || {}, check = r.check || {}; | |
| const secs = obs.elapsed_s != null ? obs.elapsed_s : (performance.now() - S.startedAt) / 1000; | |
| $("table").classList.add("over"); | |
| let head, cls; | |
| if (!expression) { head = "Here is one way"; cls = "neutral"; } | |
| else if (r.exact) { head = `Exact — ${num(obs.target)} in ${fmtTime(secs)}`; cls = "good"; } | |
| else if (r.valid) { head = `${check.value} — off by ${offBy(check.value, obs.target)}`; cls = "near"; } | |
| else { head = r.error ? capital(r.error) : "Not a valid answer"; cls = "bad"; } | |
| const out = $("result"); | |
| out.className = "result " + cls; | |
| out.replaceChildren(); | |
| const top = document.createElement("div"); | |
| top.className = "result-head"; | |
| top.append(span("result-title", head), span("result-reward", `reward ${Number(res.reward ?? 0).toFixed(2)}`)); | |
| out.append(top); | |
| if (expression && check.canonical) out.append(kv("You", prettyExpr(check.canonical))); | |
| if (obs.solution) { | |
| out.append(kv(r.exact ? "Another way" : "A solution", prettyExpr(obs.solution))); | |
| const ol = document.createElement("ol"); | |
| ol.className = "steps compact"; | |
| for (const s of obs.solution_steps) ol.append(span("", s, "li")); | |
| out.append(ol); | |
| } else if (!r.exact) { | |
| out.append(kv("A solution", "None found for this hand.")); | |
| } | |
| const again = document.createElement("button"); | |
| again.className = "btn primary"; | |
| again.textContent = "Deal again"; | |
| again.onclick = deal; | |
| out.append(again); | |
| out.hidden = false; | |
| record(S.task, !!r.exact, secs); | |
| render(); | |
| setStatus(""); | |
| out.scrollIntoView({ block: "nearest", behavior: "smooth" }); | |
| } | |
| // ---- rendering ---------------------------------------------------------------- | |
| function render() { | |
| const piles = $("piles"); | |
| piles.replaceChildren(); | |
| piles.dataset.count = S.piles.length; | |
| if (S.task) piles.style.setProperty("--n", S.task.cards.length); | |
| for (const p of S.piles) { | |
| const node = p.card ? Cards.playingCard(p.card) : Cards.resultCard(pretty(p.value), text(p.tree, true), p.count); | |
| const btn = document.createElement("button"); | |
| btn.className = "pile" + (p.id === S.selected ? " selected" : "") + (p.fresh ? " fresh" : ""); | |
| btn.type = "button"; | |
| btn.disabled = S.done; | |
| btn.append(node); | |
| btn.setAttribute("aria-pressed", p.id === S.selected ? "true" : "false"); | |
| btn.onclick = () => pick(p.id); | |
| piles.append(btn); | |
| p.fresh = false; | |
| } | |
| for (const b of document.querySelectorAll("#ops button")) { | |
| b.disabled = S.done || S.selected === null || S.piles.length < 2; | |
| b.classList.toggle("on", b.dataset.op === S.op); | |
| } | |
| $("undo").disabled = S.done || !S.history.length; | |
| $("restart").disabled = S.done || !S.history.length; | |
| $("giveup").disabled = S.done || !S.task; | |
| $("typed").querySelector("button").disabled = S.done || !S.task; | |
| $("expr").disabled = S.done || !S.task; | |
| const steps = $("steps"); | |
| steps.replaceChildren(...S.steps.map((s) => span("", s, "li"))); | |
| $("steps-empty").hidden = S.steps.length > 0; | |
| const groups = S.piles.filter((p) => !p.card); | |
| $("expression").textContent = S.piles.length === 1 ? text(S.piles[0].tree, true) : groups.length ? groups.map((p) => text(p.tree, true)).join(" · ") : "—"; | |
| for (const b of document.querySelectorAll(".modes button")) b.setAttribute("aria-selected", b.dataset.level === S.level ? "true" : "false"); | |
| $("custom").hidden = S.level !== "custom"; | |
| renderStats(); | |
| } | |
| function setStatus(msg, kind, withSubmit) { | |
| const node = $("status"); | |
| node.className = "status" + (kind ? " " + kind : ""); | |
| node.replaceChildren(document.createTextNode(msg)); | |
| if (withSubmit) { | |
| const b = document.createElement("button"); | |
| b.className = "btn small"; | |
| b.textContent = "Submit anyway"; | |
| b.onclick = () => submit(text(S.piles[0].tree, false)); | |
| node.append(" ", b); | |
| } | |
| } | |
| // ---- per-browser record -------------------------------------------------------- | |
| const STORE = "scott-wu-math-stats-v1"; | |
| function load() { try { return JSON.parse(localStorage.getItem(STORE)) || {}; } catch { return {}; } } | |
| function record(task, solved, secs) { | |
| const all = load(), key = task.task_id.startsWith("video-") ? "video" : task.level; | |
| const s = all[key] || { played: 0, solved: 0, best: null }; | |
| s.played += 1; | |
| if (solved) { s.solved += 1; s.best = s.best == null ? secs : Math.min(s.best, secs); } | |
| all[key] = s; | |
| try { localStorage.setItem(STORE, JSON.stringify(all)); } catch {} | |
| } | |
| function renderStats() { | |
| const all = load(), body = $("stats").querySelector("tbody"); | |
| body.replaceChildren(); | |
| for (const key of Object.keys(LEVEL_TITLES)) { | |
| const s = all[key]; | |
| if (!s) continue; | |
| const tr = document.createElement("tr"); | |
| tr.append(span("", LEVEL_TITLES[key], "td"), span("num", `${s.solved}/${s.played}`, "td"), span("num", s.best == null ? "—" : fmtTime(s.best), "td")); | |
| body.append(tr); | |
| } | |
| $("stats").hidden = !body.children.length; | |
| $("stats").closest("section").hidden = !body.children.length; | |
| } | |
| // ---- helpers ------------------------------------------------------------------ | |
| function span(cls, t, tag = "span") { const n = document.createElement(tag); if (cls) n.className = cls; n.textContent = t; return n; } | |
| function kv(k, v) { const d = document.createElement("div"); d.className = "kv"; d.append(span("k", k), span("v", v)); return d; } | |
| function prettyExpr(s) { return s.replace(/\*/g, "×").replace(/\//g, "÷").replace(/ - /g, " − "); } | |
| function capital(s) { return s.charAt(0).toUpperCase() + s.slice(1); } | |
| function fmtTime(secs) { const s = Math.round(secs); return s < 60 ? `${s}s` : `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; } | |
| function offBy(valueText, target) { | |
| const [n, d] = valueText.split("/").map(Number); | |
| const diff = Math.abs(n / (d || 1) - target); | |
| return Number.isInteger(diff) ? num(diff) : diff.toFixed(2); | |
| } | |
| // ---- wiring ------------------------------------------------------------------- | |
| for (const b of document.querySelectorAll(".modes button")) { | |
| b.onclick = () => { | |
| S.level = b.dataset.level; | |
| render(); | |
| if (S.level === "custom") { $("custom-target").focus(); return; } | |
| deal(); | |
| }; | |
| } | |
| for (const b of document.querySelectorAll("#ops button")) b.onclick = () => chooseOp(b.dataset.op); | |
| $("custom").onsubmit = (e) => { e.preventDefault(); deal(); }; | |
| $("typed").onsubmit = (e) => { e.preventDefault(); const v = $("expr").value.trim(); if (v) submit(v); }; | |
| $("undo").onclick = undo; | |
| $("restart").onclick = restart; | |
| $("giveup").onclick = () => submit(""); | |
| $("deal").onclick = deal; | |
| $("rules-link").onclick = (e) => { e.preventDefault(); $("rules").showModal(); }; | |
| document.addEventListener("keydown", (e) => { | |
| if (e.target.closest("input, textarea, dialog") || e.metaKey || e.ctrlKey || e.altKey) return; | |
| const ops = { "+": "+", "-": "-", "*": "*", x: "*", X: "*", "/": "/" }; | |
| if (ops[e.key]) { e.preventDefault(); chooseOp(ops[e.key]); } | |
| else if (e.key === "Backspace") { e.preventDefault(); undo(); } | |
| else if (e.key === "Escape") { S.selected = null; S.op = null; render(); } | |
| else if (e.key === "Enter" && S.done) { e.preventDefault(); deal(); } | |
| }); | |
| // Start on the level in the URL (#24, #four-digit, …), else the year, as in the video. | |
| const fromHash = decodeURIComponent(location.hash.slice(1)); | |
| if (LEVEL_TITLES[fromHash]) S.level = fromHash; | |
| render(); | |
| if (S.level !== "custom") deal(); | |
| })(); | |