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

A first game's first turn: the step light, the goal, and a held opening

Browse Source 
Three strangers this week pressed play, looked at the board for a
minute, and closed it. What they saw: a small maze under a roll-off
card, a column of prose, seven strange cards, and nothing that said
where they were or what to tap. Now, on a browser's first game, the
squares a stride can reach glow and the rest of the maze falls into
shadow, with one line hung over the wizard for the first stride. The
turn banner says what winning is for the first two rounds. And when
the clockwork rolls first, its opening turn waits behind the roll-off
card instead of playing out unwatched, then arrives a beat at a time.
The step light switches off once that first game is won, and lives in
preferences for anyone who wants it back.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-07 12:50:28 -05:00
co-authored by Claude Fable 5.1
parent 96c0c18d97
commit e5d82a94af
4 changed files with 277 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/net.svelte.ts
+193 -164
View File
@@ -408,174 +408,201 @@ class Net {
ws.onmessage = (raw) => {
const msg = JSON.parse(raw.data as string);
this.lastHeard = Date.now();
switch (msg.type) {
case "pong":
break;
case "seat": {
this.token = msg.token;
const seatRoom = (this.roomIdPending ?? this.roomId ?? "").toUpperCase();
if (seatRoom) {
const seat: Seat = { name: msg.playerId, roomId: seatRoom, token: msg.token };
localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
this.rememberSeat(seat);
}
break;
}
case "watching":
this.spectating = true;
this.roomId = msg.roomId;
break;
case "audience":
this.audience = msg.count ?? 0;
break;
case "room":
this.roomId = msg.roomId;
this.roomColors = msg.colors ?? {};
this.roomBots = msg.bots ?? {};
this.audience = msg.audience ?? 0;
if (this.you && this.token) {
const seat: Seat = { name: this.you, roomId: msg.roomId, token: this.token };
localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
this.rememberSeat(seat);
}
this.players = msg.players;
this.hostId = msg.hostId;
this.started = msg.started;
break;
case "state": {
this.view = msg.view;
if (typeof msg.seq === "number" && this.roomId && !this.spectating) {
this.currentSeq = msg.seq;
// Only the FIRST state after arriving carries a gap worth
// announcing. Later states were watched live: a caught-up
// watcher stays caught up, and an announced gap stays FROZEN
// until watched or skipped. A hidden tab accumulates its gap
// honestly.
if (this.watching === this.roomId && document.visibilityState === "visible") {
if (this.missedMoves === 0) this.markSeen();
} else {
const last = this.seen[this.roomId] ?? 0;
this.missedMoves = Math.max(0, msg.seq - last);
if (this.missedMoves === 0) this.markSeen();
}
if (document.visibilityState === "visible") this.watching = this.roomId;
}
break;
}
case "catchUp":
this.catchUp = msg.steps;
break;
case "moment":
this.moment = { steps: msg.steps, owner: msg.owner };
break;
case "share":
this.shareResolve?.(`${location.origin}/watch/${msg.id}`);
this.shareResolve = null;
this.shareReject = null;
break;
case "events": {
let talk = 0;
if (!msg.replayed) this.onFx?.(msg.events as GameEvent[]);
for (const e of msg.events as GameEvent[]) {
if (e.type === "tableTalk") talk++;
if (e.type === "gameStarted" && !msg.replayed) {
this.openingRolls = { rolls: e.dieRolls, first: e.firstPlayer, players: e.players };
}
if (TURN_BOUNDARY.has(e.type)) this.turnCounter++;
const line = humanize(e);
if (line) {
// Every turn wears its eye, on the header line that opens
// it — the players judge what is share-worthy. The game-
// winning line carries its own besides.
const notable = this.turnCounter >= 0 &&
(e.type === "gameWon" || TURN_BOUNDARY.has(e.type));
this.log = [...this.log, { text: line, turn: this.turnCounter >= 0 ? this.turnCounter : null, notable }];
}
}
if (talk > 0) {
this.chatCount += talk;
if (this.roomId) this.markChatSeen();
}
break;
}
case "kicked":
this.log = [...this.log, { text: `— the host cleared your seat in ${msg.roomId} —`, turn: null, notable: false }];
this.leaveLocal();
break;
case "roomAbandoned":
this.log = [...this.log, { text: `— the host closed room ${msg.roomId} —`, turn: null, notable: false }];
this.leaveLocal();
break;
case "transferCode":
this.transferCode = { code: msg.code, expiresAt: msg.expiresAt };
break;
case "transferClaimed": {
const seat = msg.seat as Seat & { roomId: string };
this.rememberSeat({ name: seat.name, roomId: seat.roomId, token: seat.token });
this.refreshGames();
this.resume({ name: seat.name, roomId: seat.roomId, token: seat.token });
break;
}
case "chat": {
this.log = [...this.log, { text: `\u{1F4AC} ${msg.player}: ${msg.text}`, turn: null, notable: false }];
this.chatCount += 1;
if (this.roomId) this.markChatSeen();
break;
}
case "stats": {
this.stats = msg.stats;
break;
}
case "feedbackList":
this.feedbackReports = msg.reports ?? [];
break;
case "feedbackReceived":
this.refreshFeedback();
break;
case "games": {
this.games = msg.games;
for (const g of msg.games as GameSummary[]) {
const key = `${g.roomId}:${g.name}`;
const was = this.lastYourTurn.get(key) ?? false;
if (g.yourTurn && !was) this.notifyTurn(g);
this.lastYourTurn.set(key, g.yourTurn);
}
// Prune ONLY seats the server proved dead: the room exists and
// refused this exact token. A seat merely ABSENT from the reply
// stays — a restarting server, a stale restore, or the wrong
// backend all answer with ignorance, and ignorance is not
// deletion. The wallet is capped by age instead of by trust.
const voided = new Set((msg.voided as string[] | undefined) ?? []);
let kept = this.seats.filter((s) => !voided.has(`${s.roomId}:${s.name}`));
if (kept.length > 50) kept = kept.slice(kept.length - 50);
if (kept.length !== this.seats.length) {
this.seats = kept;
saveSeats(this.seats);
}
break;
}
case "error":
// "Name is taken" means THIS token was tried and refused: the
// credential itself is dead, and holding it helps nobody. But
// "no such room" proves nothing about the seat — a restarting
// server, a stale restore, or the wrong backend all say it.
// The seat stays; the error shows; a later reconnect against
// the right server walks back in.
if (this.roomIdPending && /name is taken/.test(msg.message)) {
localStorage.removeItem(SEAT_KEY);
}
if (this.roomIdPending && /no such room|name is taken/.test(msg.message)) {
this.roomIdPending = null;
}
this.error = msg.message;
// The toast fades; the chronicle remembers why nothing happened.
this.log = [...this.log, { text: `— ${msg.message} —`, turn: null, notable: false }];
setTimeout(() => { if (this.error === msg.message) this.error = null; }, 5000);
break;
// While the opening roll-off card is up, the game holds still: the
// clockwork's first turn would otherwise play out behind the card
// in a blur nobody watched. Its moves wait, then arrive at a pace.
if ((this.openingRolls || this.draining) && this.view) {
if (msg.type === "state" || msg.type === "events") { this.held.push(msg); return; }
}
this.handle(msg);
};
}
private held: { type: string }[] = [];
private draining = false;
/** Put the roll-off card away and let the held moves play, a beat apart. */
dismissRolls(): void {
this.openingRolls = null;
if (this.draining) return;
this.draining = true;
const step = () => {
const m = this.held.shift();
if (!m || !this.roomId) { this.held = []; this.draining = false; return; }
this.handle(m);
setTimeout(step, m.type === "events" ? 900 : 0);
};
step();
}
private handle(msg: any): void {
switch (msg.type) {
case "pong":
break;
case "seat": {
this.token = msg.token;
const seatRoom = (this.roomIdPending ?? this.roomId ?? "").toUpperCase();
if (seatRoom) {
const seat: Seat = { name: msg.playerId, roomId: seatRoom, token: msg.token };
localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
this.rememberSeat(seat);
}
break;
}
case "watching":
this.spectating = true;
this.roomId = msg.roomId;
break;
case "audience":
this.audience = msg.count ?? 0;
break;
case "room":
this.roomId = msg.roomId;
this.roomColors = msg.colors ?? {};
this.roomBots = msg.bots ?? {};
this.audience = msg.audience ?? 0;
if (this.you && this.token) {
const seat: Seat = { name: this.you, roomId: msg.roomId, token: this.token };
localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
this.rememberSeat(seat);
}
this.players = msg.players;
this.hostId = msg.hostId;
this.started = msg.started;
break;
case "state": {
this.view = msg.view;
if (typeof msg.seq === "number" && this.roomId && !this.spectating) {
this.currentSeq = msg.seq;
// Only the FIRST state after arriving carries a gap worth
// announcing. Later states were watched live: a caught-up
// watcher stays caught up, and an announced gap stays FROZEN
// until watched or skipped. A hidden tab accumulates its gap
// honestly.
if (this.watching === this.roomId && document.visibilityState === "visible") {
if (this.missedMoves === 0) this.markSeen();
} else {
const last = this.seen[this.roomId] ?? 0;
this.missedMoves = Math.max(0, msg.seq - last);
if (this.missedMoves === 0) this.markSeen();
}
if (document.visibilityState === "visible") this.watching = this.roomId;
}
break;
}
case "catchUp":
this.catchUp = msg.steps;
break;
case "moment":
this.moment = { steps: msg.steps, owner: msg.owner };
break;
case "share":
this.shareResolve?.(`${location.origin}/watch/${msg.id}`);
this.shareResolve = null;
this.shareReject = null;
break;
case "events": {
let talk = 0;
if (!msg.replayed) this.onFx?.(msg.events as GameEvent[]);
for (const e of msg.events as GameEvent[]) {
if (e.type === "tableTalk") talk++;
if (e.type === "gameStarted" && !msg.replayed) {
this.openingRolls = { rolls: e.dieRolls, first: e.firstPlayer, players: e.players };
}
if (TURN_BOUNDARY.has(e.type)) this.turnCounter++;
const line = humanize(e);
if (line) {
// Every turn wears its eye, on the header line that opens
// it — the players judge what is share-worthy. The game-
// winning line carries its own besides.
const notable = this.turnCounter >= 0 &&
(e.type === "gameWon" || TURN_BOUNDARY.has(e.type));
this.log = [...this.log, { text: line, turn: this.turnCounter >= 0 ? this.turnCounter : null, notable }];
}
}
if (talk > 0) {
this.chatCount += talk;
if (this.roomId) this.markChatSeen();
}
break;
}
case "kicked":
this.log = [...this.log, { text: `— the host cleared your seat in ${msg.roomId} —`, turn: null, notable: false }];
this.leaveLocal();
break;
case "roomAbandoned":
this.log = [...this.log, { text: `— the host closed room ${msg.roomId} —`, turn: null, notable: false }];
this.leaveLocal();
break;
case "transferCode":
this.transferCode = { code: msg.code, expiresAt: msg.expiresAt };
break;
case "transferClaimed": {
const seat = msg.seat as Seat & { roomId: string };
this.rememberSeat({ name: seat.name, roomId: seat.roomId, token: seat.token });
this.refreshGames();
this.resume({ name: seat.name, roomId: seat.roomId, token: seat.token });
break;
}
case "chat": {
this.log = [...this.log, { text: `\u{1F4AC} ${msg.player}: ${msg.text}`, turn: null, notable: false }];
this.chatCount += 1;
if (this.roomId) this.markChatSeen();
break;
}
case "stats": {
this.stats = msg.stats;
break;
}
case "feedbackList":
this.feedbackReports = msg.reports ?? [];
break;
case "feedbackReceived":
this.refreshFeedback();
break;
case "games": {
this.games = msg.games;
for (const g of msg.games as GameSummary[]) {
const key = `${g.roomId}:${g.name}`;
const was = this.lastYourTurn.get(key) ?? false;
if (g.yourTurn && !was) this.notifyTurn(g);
this.lastYourTurn.set(key, g.yourTurn);
}
// Prune ONLY seats the server proved dead: the room exists and
// refused this exact token. A seat merely ABSENT from the reply
// stays — a restarting server, a stale restore, or the wrong
// backend all answer with ignorance, and ignorance is not
// deletion. The wallet is capped by age instead of by trust.
const voided = new Set((msg.voided as string[] | undefined) ?? []);
let kept = this.seats.filter((s) => !voided.has(`${s.roomId}:${s.name}`));
if (kept.length > 50) kept = kept.slice(kept.length - 50);
if (kept.length !== this.seats.length) {
this.seats = kept;
saveSeats(this.seats);
}
break;
}
case "error":
// "Name is taken" means THIS token was tried and refused: the
// credential itself is dead, and holding it helps nobody. But
// "no such room" proves nothing about the seat — a restarting
// server, a stale restore, or the wrong backend all say it.
// The seat stays; the error shows; a later reconnect against
// the right server walks back in.
if (this.roomIdPending && /name is taken/.test(msg.message)) {
localStorage.removeItem(SEAT_KEY);
}
if (this.roomIdPending && /no such room|name is taken/.test(msg.message)) {
this.roomIdPending = null;
}
this.error = msg.message;
// The toast fades; the chronicle remembers why nothing happened.
this.log = [...this.log, { text: `— ${msg.message} —`, turn: null, notable: false }];
setTimeout(() => { if (this.error === msg.message) this.error = null; }, 5000);
break;
}
}
private send(message: unknown): void {
if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(message));
}
@@ -733,6 +760,8 @@ class Net {
this.roomId = null;
this.roomIdPending = null;
this.view = null;
this.held = [];
this.draining = false;
this.started = false;
this.players = [];
this.token = null;