The replay viewer's renderer used to wipe and rebuild every card
from scratch on every step (`board.replaceChildren()`). Each step
was a discrete redraw — fine for correctness, abrupt for the eye.
Restructured to a persistent card-element model:
- `#board` is now a positioned context (relative) instead of a
CSS grid. The dashed empty-pile placeholders are absolutely-
positioned `.slot` elements painted once at bootstrap.
- Each card lives as a sibling of the slots, absolutely-positioned
with `transform: translate(x, y)`. The CSS transition on
`transform` (280 ms cubic-bezier) runs every move as a flight
rather than a redraw.
- `cardEls: Map<id, HTMLElement>` persists across renders. Cards
unchanged between steps don't re-create their DOM at all.
- Z-index is set per-render from the card's pile index so a card
flying out from the bottom of a tableau passes behind the cards
above it.
- Newly-spawned cards (rare — only on Restart) fade in at their
target position via a `requestAnimationFrame` opacity flip;
cards that disappear (also rare) fade out and despawn after the
220 ms fade.
- `will-change: transform` lets the browser composite the
animation, keeping it smooth on low-spec hardware.
Restart now drops every existing card before resetting so the
fresh deal looks like a new game, not a continuation.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
funman300