funman300/Ferrous-Solitaire
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 28 Wiki Activity

feat(server): web replay viewer (HTML/CSS + WASM bindings)

Browse Source 
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>
This commit is contained in:
funman300
2026-05-05 18:54:01 +00:00
parent 5bed43ef32
commit 07b8ecd9b2
8 changed files with 822 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
solitaire_server/web/index.html
+34
View File
@@ -0,0 +1,34 @@
<!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>