funman300
07b8ecd9b2
Wires the WASM module from the previous commit into a minimal web
viewer served at <server>/replays/<id>. Two new server routes:
- `GET /replays/:id` — returns the same embedded HTML page for any
id; the page itself reads the path from window.location in JS and
fetches the replay JSON via /api/replays/:id.
- `/web/*` — ServeDir for the static assets (replay.css, replay.js,
and the wasm-bindgen-generated pkg/).
Web layer:
- index.html — header, board, controls, status. Module script.
- replay.css — midnight-purple palette matching the desktop client,
dark felt board, CSS-grid pile layout, tableau fan via per-card
inline `top` offset.
- replay.js — fetches the replay, instantiates the wasm
ReplayPlayer, drives state(), step(). Controls: Restart, Play/Pause
toggle, Step. Auto-tick at 600 ms.
- pkg/ — generated by wasm-bindgen (committed so deployers don't
have to install wasm-bindgen-cli + the wasm32 target).
`tower-http = "0.6"` added to solitaire_server with the `fs` feature
for ServeDir.
To regenerate pkg/ after a solitaire_wasm change:
RUSTFLAGS='--cfg getrandom_backend="wasm_js"' \
cargo build -p solitaire_wasm \
--target wasm32-unknown-unknown --release
wasm-bindgen --target web \
--out-dir solitaire_server/web/pkg --no-typescript \
target/wasm32-unknown-unknown/release/solitaire_wasm.wasm
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
35 lines
1020 B
HTML
35 lines
1020 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Solitaire Quest — Replay</title>
|
|
<link rel="stylesheet" href="/web/replay.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Solitaire Quest <span class="muted">— Replay</span></h1>
|
|
<div id="caption" class="muted">Loading…</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="board"></section>
|
|
|
|
<section id="controls">
|
|
<button id="btn-prev" disabled>⏮ Restart</button>
|
|
<button id="btn-play">▶ Play</button>
|
|
<button id="btn-step">⏭ Step</button>
|
|
<span id="progress" class="muted">step 0 / 0</span>
|
|
</section>
|
|
|
|
<section id="status" class="muted">
|
|
<span id="score">Score 0</span>
|
|
<span id="moves">Moves 0</span>
|
|
<span id="result"></span>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="/web/replay.js"></script>
|
|
</body>
|
|
</html>
|