eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The reel learns to shine: gliding bodies, warp-threaded shots, a clip worth sharing

Browse Source 
Three polishes aimed at the instant-replay dream. Other wizards and
creatures now GLIDE between steps in first person instead of blinking
cell to cell — a stride tweens, a teleport still simply arrives. A
projectile whose sight line runs through a warp now flies as two
simultaneous legs under the mouths' rigid motion, so the fireball
plunges into the opening on one side and bursts from the pair on the
other, whichever room the camera stands in. And the saved video is no
longer a bare canvas grab: it composites into a shareable 1280x720
frame with the step's caption burned in — gold actor name, the reel's
own words — and the game's name in the corner, so a clip passed along
explains itself.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-23 15:20:13 -04:00
co-authored by Claude Fable 5
parent e8c6b93c71
commit b82d526a79
4 changed files with 167 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/Replay.svelte
+89 -3
View File
@@ -75,6 +75,59 @@
return () => clearInterval(t);
});
/** Other bodies glide between steps instead of blinking cell to cell:
* each step, anyone whose position changed a walkable distance tweens
* from where the previous step's view had them. */
let actorPos = $state<Record<string, { x: number; y: number }>>({});
let prevView: GameView | null = null;
$effect(() => {
const st = steps[Math.min(idx, steps.length - 1)];
if (!fp || !st) { prevView = null; actorPos = {}; return; }
const v = st.view;
const before = prevView;
prevView = v;
if (!before || before === v) return;
const moves: { id: string; fx: number; fy: number; tx: number; ty: number }[] = [];
const gather = (
id: string,
now: { x: number; y: number },
was: { x: number; y: number } | undefined,
) => {
if (!was) return;
const d = Math.hypot(now.x - was.x, now.y - was.y);
// A single stride or shove glides; a leap across the maze is a
// teleport and should simply be there.
if (d > 0.05 && d <= 3.5) {
moves.push({ id, fx: was.x + 0.5, fy: was.y + 0.5, tx: now.x + 0.5, ty: now.y + 0.5 });
}
};
for (const p of v.players) {
if (!p.alive || p.id === v.you) continue;
const was = before.players.find((q) => q.id === p.id && q.alive);
gather(p.id, p.position, was?.position);
}
for (const c of v.creatures) {
gather(c.id, c.position, before.creatures.find((q) => q.id === c.id)?.position);
}
if (moves.length === 0) { actorPos = {}; return; }
const t0 = performance.now();
const dur = 400 / speed;
let raf = 0;
const tick = (now: number) => {
const w = Math.min(1, Math.max(0, (now - t0) / dur));
const ease = w * w * (3 - 2 * w);
const next: Record<string, { x: number; y: number }> = {};
for (const m of moves) {
next[m.id] = { x: m.fx + (m.tx - m.fx) * ease, y: m.fy + (m.ty - m.fy) * ease };
}
actorPos = next;
if (w < 1) raf = requestAnimationFrame(tick);
else actorPos = {};
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
});
// --- The first-person camera: your wizard's walk, relived. -------------
// Each step the camera settles on your position. A step away tweens —
// turn first, then stride; a leap (teleport, warp) cuts. When you stood
@@ -152,19 +205,51 @@
return () => cancelAnimationFrame(raf);
});
// --- Save a video: record the first-person canvas as it plays. --------
// --- Save a video: the first-person view composited into a shareable
// 1280x720 frame — the step's caption burned in at the bottom, the
// game's name in the corner — so a downloaded clip explains itself.
let stageEl: HTMLDivElement | undefined = $state();
let recorder = $state<MediaRecorder | null>(null);
function toggleRecord() {
if (recorder) { recorder.stop(); return; }
const cv = stageEl?.querySelector("canvas");
if (!cv) return;
const comp = document.createElement("canvas");
comp.width = 1280;
comp.height = 720;
const g = comp.getContext("2d")!;
let compRaf = 0;
const drawComp = () => {
g.imageSmoothingEnabled = false;
g.drawImage(cv, 0, 0, 1280, 720);
g.imageSmoothingEnabled = true;
// The caption bar: who did what, in the reel's own words.
g.fillStyle = "rgba(12, 10, 8, 0.78)";
g.fillRect(0, 720 - 96, 1280, 96);
g.fillStyle = "#e0b34a";
g.font = "600 22px Oswald, sans-serif";
g.fillText(step.actor.toUpperCase(), 28, 720 - 60, 400);
g.fillStyle = "#efe8d4";
g.font = "21px 'Courier Prime', monospace";
const said = lines.slice(0, 2);
if (said.length === 0) said.push("…considers the maze.");
said.forEach((line, i) => g.fillText(line, 28, 720 - 32 + i * 26, 1224));
// The colophon corner.
g.fillStyle = "rgba(224, 179, 74, 0.6)";
g.font = "600 20px Oswald, sans-serif";
g.textAlign = "right";
g.fillText("W I Z - W A R", 1280 - 24, 40);
g.textAlign = "left";
compRaf = requestAnimationFrame(drawComp);
};
compRaf = requestAnimationFrame(drawComp);
const mime = MediaRecorder.isTypeSupported("video/webm;codecs=vp9")
? "video/webm;codecs=vp9" : "video/webm";
const rec = new MediaRecorder(cv.captureStream(60), { mimeType: mime });
const rec = new MediaRecorder(comp.captureStream(60), { mimeType: mime });
const chunks: Blob[] = [];
rec.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
rec.onstop = () => {
cancelAnimationFrame(compRaf);
const url = URL.createObjectURL(new Blob(chunks, { type: "video/webm" }));
const a = document.createElement("a");
a.href = url;
@@ -208,7 +293,8 @@
<div class="replay-board" bind:this={stageEl}>
{#if fp}
<FirstPerson view={step.view} povId={step.view.you}
x={cam.x} y={cam.y} facing={cam.facing} width={640} height={360} fx={fpFx} />
x={cam.x} y={cam.y} facing={cam.facing} width={640} height={360}
fx={fpFx} posOverride={actorPos} />
{:else}
<Board view={step.view} effects={boardFx} {sightTrace} />
{/if}