File size: 10,561 Bytes
4be6a52 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#101218">
<title>Stackcraft — Make your next move</title>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/app.js" defer></script>
</head>
<body>
<div class="app-shell">
<header class="site-header">
<a class="wordmark" href="/" aria-label="Stackcraft home"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>STACK<span>CRAFT</span><small>LAB</small></a>
<div class="header-note"><span class="status-dot"></span> A small game. A better decision.</div>
</header>
<main>
<section class="intro" aria-labelledby="page-title">
<div><p class="eyebrow">THE PLACEMENT LAB / 001</p><h1 id="page-title">Make your next move<span>.</span></h1><p class="subtitle">A familiar game. Room to think. Every placement counts.</p></div>
<div class="view-tabs" role="tablist" aria-label="Game view"><button id="play-tab" class="view-tab active" role="tab" aria-selected="true" aria-controls="play-view" tabindex="0">Play</button><button id="race-tab" class="view-tab" role="tab" aria-selected="false" aria-controls="race-view" tabindex="-1">Watch a race <span aria-hidden="true">↗</span></button></div>
</section>
<div id="error" class="error-banner" role="alert" hidden></div>
<section id="play-view" class="game-layout" role="tabpanel" aria-labelledby="play-tab">
<aside class="left-rail">
<div class="panel player-card"><p class="eyebrow">AT THE CONTROLS</p><div class="player-name"><span class="avatar" aria-hidden="true">YOU</span><div><h2>Human intuition</h2><p>Your board. Your call.</p></div></div><div class="player-status"><span class="status-dot"></span><span id="player-status">Ready to play</span></div></div>
<div class="panel stats-panel" aria-label="Game statistics"><div class="stat primary-stat"><span>SCORE</span><strong id="score">0</strong></div><div class="stat-row"><div class="stat"><span>LINES</span><strong id="lines">0</strong></div><div class="stat"><span>PLACED</span><strong id="pieces">0</strong></div></div></div>
<div class="panel sequence-panel"><p class="eyebrow">SAME SEED, SAME PIECES</p><label for="seed">Piece sequence</label><div class="seed-controls"><input id="seed" type="number" value="42" min="0" max="2147483647" step="1" inputmode="numeric" aria-describedby="seed-help"><button id="restart" class="icon-button" title="Start a new game with this seed" aria-label="Start new game">↻</button></div><p id="seed-help" class="helper">Change the seed for a new challenge.<br>Keep it to try a different strategy.</p></div>
</aside>
<div id="human-board-home" hidden></div>
<div id="human-board-column" class="board-column">
<div id="comparison-human-note" class="comparison-human-note" hidden><span id="comparison-human-label"></span><button id="leave-comparison-play" class="text-button">Leave comparison</button></div>
<div class="board-heading"><span><span class="status-dot"></span><span id="board-mode">YOUR BOARD</span></span><span id="move-counter">MOVE 001</span></div>
<div class="board-wrap"><div id="board" class="board" role="img" tabindex="0" aria-label="Empty game board. Use left and right arrows to choose a placement, up to rotate, and space to drop."></div><div id="terminal-overlay" class="terminal-overlay" hidden><span id="terminal-eyebrow" class="eyebrow">RUN COMPLETE</span><h2 id="terminal-title">One more try?</h2><p id="terminal-description">No legal placements remain.</p><button id="play-again" class="primary-button">Play again <span aria-hidden="true">↗</span></button></div></div>
<div class="board-footer"><span id="placement-label">Choose your landing spot</span><span class="ghost-key"><i></i> LANDING GHOST</span></div>
<div id="play-controls" class="play-controls" aria-label="Placement controls"><div class="direction-controls"><button id="move-left" class="control-button" aria-label="Move placement left" title="Left arrow">←</button><button id="rotate" class="control-button rotate-button" aria-label="Rotate piece" title="Up arrow">↻<span>ROTATE</span></button><button id="move-right" class="control-button" aria-label="Move placement right" title="Right arrow">→</button></div><button id="drop" class="primary-button drop-button">Drop piece <span>SPACE ↵</span></button></div>
<div id="replay-controls" class="replay-controls panel" hidden><div class="replay-heading"><span class="eyebrow">REPLAY · RECORDED MOVES</span><button id="exit-replay" class="text-button">Back to game</button></div><input id="replay-position" type="range" min="0" max="0" value="0" aria-label="Replay move"><div class="replay-buttons"><button id="replay-prev" class="control-button" aria-label="Previous replay frame">←</button><button id="replay-play" class="control-button" aria-label="Play replay">Play</button><button id="replay-next" class="control-button" aria-label="Next replay frame">→</button><span id="replay-progress">0 / 0</span></div></div>
</div>
<aside class="right-rail">
<div class="panel piece-panel"><div class="piece-header"><p class="eyebrow">CURRENT PIECE</p><span id="current-name" class="piece-name">—</span></div><div id="current-preview" class="piece-preview" aria-label="Current piece"></div><div class="next-piece"><div><p class="eyebrow">UP NEXT</p><p class="helper">One move ahead.</p></div><div id="next-preview" class="piece-preview small" aria-label="Next piece"></div></div></div>
<div class="how-to"><p class="eyebrow">TAKE YOUR TIME</p><h2>Find the fit.</h2><p>Move the ghost. Rotate your piece. Drop when it feels right.</p><ul class="keyboard-help"><li><span>Choose position</span><span><kbd>←</kbd> <kbd>→</kbd></span></li><li><span>Rotate</span><kbd>↑</kbd></li><li><span>Place piece</span><kbd>space</kbd></li></ul><p class="helper">Or tap a column on the board.</p></div>
<div class="replay-tools"><p class="eyebrow">EVERY MOVE, REPLAYABLE</p><button id="download-replay" class="secondary-button"><span aria-hidden="true">↓</span> Save replay</button><button id="load-replay" class="text-button"><span aria-hidden="true">↑</span> Open a replay</button><input id="replay-file" type="file" accept=".json,application/json" hidden><p class="helper">A tiny JSON file. An exact rerun.</p></div>
</aside>
</section>
<section id="race-view" class="race-view" role="tabpanel" aria-labelledby="race-tab" hidden>
<div class="race-intro"><div><p class="eyebrow">SAME PIECES. DIFFERENT DECISIONS.</p><h2 id="race-label">Recorded player comparison</h2><p id="race-context" class="helper">Loading verified replay frames…</p></div><div class="race-disclosure"><span class="recorded-badge">RECORDED REPLAY</span><span id="race-inference-label">No live model inference</span></div></div>
<div id="race-join-controls" class="race-join-controls" hidden><div class="race-join-buttons"><button id="join-race" class="secondary-button">Start live board</button><button id="leave-comparison-race" class="text-button" hidden>Leave comparison</button><button id="race-match-human" class="text-button" hidden>Match my move</button></div><p id="race-join-help" class="helper">Starts a new human game on this recording's seed, replacing your current human game. Bots remain recorded.</p><p id="race-human-timeline-note" class="helper" hidden></p></div>
<div id="race-loading" class="race-loading" role="status">Loading recorded baseline games…</div>
<div id="race-boards" class="race-boards" aria-label="Player comparison boards"><article id="race-human-card" class="race-human-card" aria-labelledby="race-human-title" hidden><div class="race-card-heading"><h3 id="race-human-title">You</h3><span class="live-human-badge">LIVE HUMAN</span></div><dl class="race-metrics"><div><dt>LINES</dt><dd id="race-human-lines">0</dd></div><div><dt>SCORE</dt><dd id="race-human-score">0</dd></div><div><dt>PLACED</dt><dd id="race-human-pieces">0</dd></div></dl><p id="race-human-preview" class="race-human-preview"></p><div id="race-human-slot"></div><p class="race-human-instructions">← → choose · ↑ rotate · Space drop<br>No timer. Your move advances the recorded boards.</p></article></div>
<div id="race-transport" class="race-transport panel" hidden><div class="race-position-row"><label for="race-position">PIECE INDEX</label><span id="race-progress">0 / 0</span></div><input id="race-position" type="range" min="0" max="0" value="0" aria-label="Race piece index"><div class="race-buttons"><button id="race-restart" class="control-button" aria-label="Restart recorded race" title="Restart recorded race">↺</button><button id="race-prev" class="control-button" aria-label="Previous race move">←</button><button id="race-play" class="primary-button" aria-label="Play recorded race">Play race <span aria-hidden="true">▶</span></button><button id="race-next" class="control-button" aria-label="Next race move">→</button><span class="race-speed">Synchronized by pieces placed.<br>Finished boards stay on their final frame.</span></div></div>
<p id="race-caption" class="race-caption">Recorded decisions. Playback speed does not represent decision latency.</p><p id="race-report-link-wrap" class="race-report-link" hidden><a id="race-report-link" target="_blank" rel="noopener noreferrer">Full study results <span aria-hidden="true">↗</span></a></p><details id="race-provenance" class="race-provenance" hidden><summary>Recording provenance</summary><ul id="race-source-list"></ul></details>
</section>
<div id="announcement" class="sr-only" aria-live="polite" aria-atomic="true"></div>
<footer class="site-footer"><p><strong>Built for fair comparisons.</strong> Deterministic seven-bag pieces. One-piece preview. Straight drops.</p><details><summary>The research rules</summary><p>Stackcraft is a simplified, turn-based falling-block game on a 10 × 20 board. There is no gravity timer, hold, wall kick, tuck or T-spin bonus. Clear 1 / 2 / 3 / 4 lines to score 100 / 300 / 500 / 800 points. All players will use the same rules. Comparison boards replay measured model decisions; the human board runs live.</p></details><span class="footer-version">STACKCRAFT / RULES V1</span></footer>
</main>
</div>
</body>
</html>
|