A first game's first turn: the step light, the goal, and a held opening
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
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
96c0c18d97
commit
e5d82a94af
@@ -223,7 +223,7 @@
|
||||
});
|
||||
const openingRolls = $derived(net.openingRolls ?? local.openingRolls);
|
||||
function dismissRolls() {
|
||||
net.openingRolls = null;
|
||||
net.dismissRolls();
|
||||
local.openingRolls = null;
|
||||
}
|
||||
/** A face-up card being peeked at from the scoresheet (view-only). */
|
||||
@@ -1405,6 +1405,8 @@
|
||||
const room = net.roomId;
|
||||
if (!room || finishedRoom === room) return;
|
||||
finishedRoom = room;
|
||||
// The step light is for a first game; the second is played by sight.
|
||||
if (prefs.finishedGames === 0) setPref("stepLight", false);
|
||||
setPref("finishedGames", prefs.finishedGames + 1);
|
||||
if (!prefs.tierChosen && prefs.botTier === "apprentice") setPref("botTier", "adept");
|
||||
});
|
||||
@@ -1479,7 +1481,26 @@
|
||||
// answer to "how can he even see me?" when sight ran through a warp mouth.
|
||||
const sightTrace = $derived(view ? stackSightTrace(view) : null);
|
||||
|
||||
/** The step light: with no card in hand, your square and the squares a
|
||||
* stride reaches are lit and the rest of the maze falls into shadow. */
|
||||
const stepLight = $derived(
|
||||
!!view && !!me && prefs.stepLight && isYourTurn && !view.turn.actionsEnded && !selectedCard &&
|
||||
!net.spectating && !youMustRespond && view.turn.movementAllowance - view.turn.movementUsed > 0,
|
||||
);
|
||||
const stepCells = $derived.by(() => {
|
||||
if (!stepLight || !view || !me) return [];
|
||||
return SIDES.map((side) => stepTarget(view!.board, me!.position, side))
|
||||
.filter((t) => t.kind !== "blocked")
|
||||
.map((t) => cellKey(t.to));
|
||||
});
|
||||
/** The first stride of a first game gets one line on the board itself. */
|
||||
const stepCaption = $derived(
|
||||
stepLight && view && me && view.turn.round === 1 && view.turn.movementUsed === 0
|
||||
? { cell: me.position, text: "This is you — tap a lit square to walk" }
|
||||
: null,
|
||||
);
|
||||
const litCells = $derived.by(() => {
|
||||
if (view && me && !selectedDef && stepLight) return new Set([cellKey(me.position), ...stepCells]);
|
||||
if (!view || !selectedDef || !yourMoment) return null;
|
||||
if (ambushVia || ambushSpell || ambushTrigger) return null; // ambushes aim at the future
|
||||
if (!me) return null;
|
||||
@@ -1833,6 +1854,11 @@
|
||||
onchange={(e) => setPref("handLeft", e.currentTarget.checked)} />
|
||||
<span>Hand at the left: your cards stand in a column beside the board (wide screens)</span>
|
||||
</label>
|
||||
<label class="pref-row pref-check">
|
||||
<input type="checkbox" checked={prefs.stepLight}
|
||||
onchange={(e) => setPref("stepLight", e.currentTarget.checked)} />
|
||||
<span>Step light: on your turn, the squares you can walk to glow and the rest of the maze dims (on for a first game)</span>
|
||||
</label>
|
||||
<label class="pref-row pref-check">
|
||||
<input type="checkbox" checked={prefs.cautions}
|
||||
onchange={(e) => setPref("cautions", e.currentTarget.checked)} />
|
||||
@@ -2603,6 +2629,8 @@
|
||||
onIllusionClick={(cell, side) => (illusionPrompt = { cell, side })}
|
||||
onEdgePeek={(tip) => (peekEdge = tip)}
|
||||
{litCells}
|
||||
spotCells={stepCells}
|
||||
spotCaption={stepCaption}
|
||||
{sightTrace}
|
||||
povFacing={prefs.liveFp && view.you && !net.spectating ? fpvFacing : null}
|
||||
povCreatureId={prefs.liveFp && !net.spectating ? fpvBody : null}
|
||||
@@ -2675,6 +2703,9 @@
|
||||
{:else if isYourTurn}
|
||||
<div class="slip yours">
|
||||
Your turn — round {view.turn.round}.
|
||||
{#if prefs.stepLight && view.turn.round <= 2}
|
||||
<div class="goal">Win by carrying two treasures that aren't yours to your home, or by being the last wizard standing.</div>
|
||||
{/if}
|
||||
{#if view.turn.actionsEnded}
|
||||
{#if me?.carriedTreasureId}
|
||||
picking up ended your actions for this turn, and the treasure comes with you —
|
||||
@@ -3751,6 +3782,7 @@
|
||||
transform: rotate(-0.4deg);
|
||||
}
|
||||
.slip.yours { border-left: 4px solid #2e7d32; }
|
||||
.slip .goal { margin-top: 0.3rem; font-size: 0.86rem; opacity: 0.85; }
|
||||
.slip.coach { border-left: 4px solid #c9a72a; }
|
||||
.slip.coach .stamp { margin-left: 0.5rem; }
|
||||
.slip.urgent { border-left: 4px solid #b3372b; transform: rotate(0.4deg); }
|
||||
|
||||
@@ -33,6 +33,8 @@
|
||||
markedCell = null,
|
||||
markedCells = null,
|
||||
litCells = null,
|
||||
spotCells = [],
|
||||
spotCaption = null,
|
||||
markedSector = null,
|
||||
ghostSlots = null,
|
||||
onGhostClick,
|
||||
@@ -65,6 +67,10 @@
|
||||
markedCells?: { x: number; y: number }[] | null;
|
||||
/** When set, squares NOT in this set dim — the targeting aid. */
|
||||
litCells?: Set<string> | null;
|
||||
/** The step light's squares: a pulsing rim on each. */
|
||||
spotCells?: string[];
|
||||
/** One line hung above a square — the first stride's cue. */
|
||||
spotCaption?: { cell: { x: number; y: number }; text: string } | null;
|
||||
/** Origin of a picked-up 5x5 sector: the whole sector outlines as taken. */
|
||||
markedSector?: { x: number; y: number } | null;
|
||||
/** Empty 5x5 slot origins a sector may land on — drawn as dashed ground
|
||||
@@ -680,6 +686,23 @@
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
<!-- the step light: the squares a stride reaches, rimmed and pulsing -->
|
||||
{#each spotCells as key (key)}
|
||||
{@const sx = Number(key.split(",")[0])}
|
||||
{@const sy = Number(key.split(",")[1])}
|
||||
<rect x={sx * CELL + 3} y={sy * CELL + 3} width={CELL - 6} height={CELL - 6} class="spot-cell" rx="5" />
|
||||
{/each}
|
||||
{#if spotCaption}
|
||||
{@const cols = Math.max(...Object.keys(view.board.cells).map((k) => Number(k.split(",")[0]))) + 1}
|
||||
{@const cw = spotCaption.text.length * 6.6 + 20}
|
||||
{@const cx = Math.min(Math.max(spotCaption.cell.x * CELL + CELL / 2, cw / 2 + 4), cols * CELL - cw / 2 - 4)}
|
||||
{@const above = spotCaption.cell.y > 0}
|
||||
{@const cy = above ? spotCaption.cell.y * CELL - 14 : (spotCaption.cell.y + 1) * CELL + 14}
|
||||
<g class="spot-caption" transform={`translate(${cx}, ${cy})`}>
|
||||
<rect x={-cw / 2} y={-12} width={cw} height={24} rx="12" />
|
||||
<text x="0" y="4">{spotCaption.text}</text>
|
||||
</g>
|
||||
{/if}
|
||||
<!-- FEAR's bubble: the three-space diamond, through walls, wrapping the rim -->
|
||||
{#each fearAura as key (key)}
|
||||
{@const bx = Number(key.split(",")[0])}
|
||||
@@ -823,6 +846,26 @@
|
||||
fill: rgba(12, 9, 5, 0.55);
|
||||
pointer-events: none;
|
||||
}
|
||||
.spot-cell {
|
||||
fill: none;
|
||||
stroke: #f2cf5b;
|
||||
stroke-width: 3;
|
||||
pointer-events: none;
|
||||
animation: spot-pulse 1.3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes spot-pulse {
|
||||
0%, 100% { opacity: 0.35; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.spot-caption { pointer-events: none; }
|
||||
.spot-caption rect { fill: rgba(28, 22, 12, 0.92); stroke: #f2cf5b; stroke-width: 1.5; }
|
||||
.spot-caption text {
|
||||
fill: #f7ecc8;
|
||||
font-size: 12px;
|
||||
font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.marked-cell {
|
||||
fill: rgba(211, 133, 43, 0.18);
|
||||
stroke: #d3852b;
|
||||
|
||||
@@ -408,6 +408,34 @@ class Net {
|
||||
ws.onmessage = (raw) => {
|
||||
const msg = JSON.parse(raw.data as string);
|
||||
this.lastHeard = Date.now();
|
||||
// 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;
|
||||
@@ -573,8 +601,7 @@ class Net {
|
||||
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;
|
||||
|
||||
@@ -31,6 +31,10 @@ export interface Prefs {
|
||||
tierChosen: boolean;
|
||||
/** Games this browser has seen through to a winner. */
|
||||
finishedGames: number;
|
||||
/** The step light: on your turn, the squares a stride can reach glow
|
||||
* and the rest of the maze falls into shadow. On for a browser's first
|
||||
* game, off once that game is won, and yours to switch on again. */
|
||||
stepLight: boolean;
|
||||
}
|
||||
|
||||
const KEY = "wizwar-prefs";
|
||||
@@ -39,7 +43,7 @@ function load(): Prefs {
|
||||
const fallback: Prefs = {
|
||||
art: "photo", autoGrab: false, flourishes: true, wizardName: "", color: null,
|
||||
cautions: true, botTier: "apprentice", instantReplay: true, liveFp: false, handLeft: false,
|
||||
coached: false, tierChosen: false, finishedGames: 0,
|
||||
coached: false, tierChosen: false, finishedGames: 0, stepLight: true,
|
||||
};
|
||||
try {
|
||||
const raw = localStorage.getItem(KEY);
|
||||
@@ -61,6 +65,9 @@ function load(): Prefs {
|
||||
coached: p.coached === true,
|
||||
tierChosen: p.tierChosen === true,
|
||||
finishedGames: typeof p.finishedGames === "number" ? p.finishedGames : 0,
|
||||
// A browser that has already won a game meets the step light switched
|
||||
// off; a fresh one has it on for its first.
|
||||
stepLight: typeof p.stepLight === "boolean" ? p.stepLight : !(typeof p.finishedGames === "number" && p.finishedGames > 0),
|
||||
};
|
||||
} catch {
|
||||
return fallback;
|
||||
|
||||
Reference in New Issue
Block a user