Merge branch 'main' into first-person-play

packages/web/src/App.svelte

@@ -342,7 +342,7 @@
     "wall-of-fire": "click a corridor line for the fire",
     "waterwall": "click a corridor line — the wave collapses at once",
     "pick-lock": "click a locked door",
-    "master-key": "click a locked door",
+    "master-key": "click a locked door — or Display it once and walk through every lock",
     "jam-lock": "click a door to jam its lock solid",
     "remove-lock": "click a door to strip its lock for good",
     "create-door": "click a wall for the new door",
@@ -720,6 +720,15 @@
           dispatch({ type: "moveCreature", creatureId: selectedCreature, direction: w.from.side });
           return;
         }
+        // Standing on a DIMENSIONAL WARP token: clicking the paired token
+        // steps it through.
+        const dw = view.dimWarps.find((d) =>
+          (cellKey(d.a) === cellKey(creature.position) && cellKey(d.b) === cellKey(cell)) ||
+          (cellKey(d.b) === cellKey(creature.position) && cellKey(d.a) === cellKey(cell)));
+        if (dw) {
+          dispatch({ type: "creatureWarpStep", creatureId: selectedCreature });
+          return;
+        }
       }
       selectedCreature = null;
       return;
@@ -1256,6 +1265,7 @@
   <header class="masthead">
     <span class="mast-title">Wiz-War</span>
     <span class="mast-sub">sixth edition</span>
+    <span class="mast-version" title="deployed">{__BUILD_STAMP__}</span>
     <button class="mast-leave" title="preferences" onclick={() => (prefsOpen = !prefsOpen)}>⚙ preferences</button>
     {#if local.active}
       <span class="mast-room">hotseat</span>
@@ -1811,6 +1821,10 @@
                 <span class="dot" style:background="#b3a687"></span>
               {/if}
               {p}{p === net.hostId ? " — host" : ""}{net.roomBots[p] ? ` ⚙ ${net.roomBots[p]}` : chosen === undefined ? " — choosing…" : ""}
+              {#if net.you === net.hostId && p !== net.hostId}
+                <button class="stamp tiny kick" title="clear this seat"
+                  onclick={() => net.kickSeat(p)}>✕</button>
+              {/if}
             </li>
           {/each}
         </ul>
@@ -1834,6 +1848,8 @@
           {/each}
         </div>
         {#if net.you === net.hostId}
+          <button class="stamp tiny abandon" title="dissolve this room for everyone"
+            onclick={() => net.abandonRoom()}>abandon room</button>
           {#if net.players.length < 6}
             <span class="bot-row">
               <span class="bot-label">⚙ seat a</span>
@@ -2219,6 +2235,10 @@
             {#if selectedCard?.cardId === "pick-lock" || selectedCard?.cardId === "master-key"}
               <label class="inline"><input type="checkbox" bind:checked={holdDoor} /> hold the door open</label>
             {/if}
+            {#if selectedCard?.cardId === "master-key" && isYourTurn &&
+              !me?.displayed.some((c) => c.instanceId === selectedCard!.instanceId)}
+              <button class="stamp tiny" onclick={castSelfWithNumber}>Display the key</button>
+            {/if}
             {#if selectedCard?.cardId === "rotate-sector"}
               <label class="inline"><input type="checkbox" bind:checked={rotateCW} /> clockwise</label>
               <span>— click the sector</span>
@@ -2463,6 +2483,14 @@
     text-transform: uppercase;
     color: #8d8672;
   }
+  .kick { margin-left: 0.4rem; color: #a04545; }
+  .abandon { margin: 0.4rem 0; color: #a04545; border-color: #a04545; }
+  .mast-version {
+    font-family: "Courier Prime", monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.06em;
+    color: #6b6454;
+  }
   .mast-room { margin-left: auto; font-size: 0.85rem; color: #a49c86; }
   .mast-room b { color: #e9e1cb; letter-spacing: 0.12em; }
   .mast-audience { font-size: 0.85rem; color: #a49c86; white-space: nowrap; }

packages/web/src/Board.svelte

@@ -68,7 +68,7 @@
     effects?: BoardFx[] | null;
     /** The sight line an attack in progress traveled — proof against "how
      * can he even see me?", drawn leg by leg through any warp mouth. */
-    sightTrace?: { from: { x: number; y: number }; to: { x: number; y: number }; trace: SightTrace } | null;
+    sightTrace?: { from: { x: number; y: number }; to: { x: number; y: number }; trace: SightTrace; bend?: { mid: { x: number; y: number }; trace: SightTrace } } | null;
   } = $props();
 
 
@@ -390,14 +390,20 @@
           x={gx * CELL + 4 + i * 9} y={gy * CELL + CELL - CELL * 0.42 - 3}
           width={CELL * 0.4} height={CELL * 0.4}
           preserveAspectRatio="xMidYMid slice"
-          class="token-art small"
+          class="token-art small peekable"
+          role="button" tabindex="-1"
+          onclick={(ev) => { ev.stopPropagation(); onCellPeek?.({ x: gx, y: gy }); }}
+          onkeydown={() => {}}
         >
           <title>{o.cardId}</title>
         </image>
       {:else}
         <rect
           x={gx * CELL + 6 + i * 8} y={gy * CELL + CELL - 16}
-          width={12} height={10} rx="2" class="ground-object"
+          width={12} height={10} rx="2" class="ground-object peekable"
+          role="button" tabindex="-1"
+          onclick={(ev) => { ev.stopPropagation(); onCellPeek?.({ x: gx, y: gy }); }}
+          onkeydown={() => {}}
         >
           <title>{o.cardId}</title>
         </rect>
@@ -661,7 +667,14 @@
 
   <!-- the sight line an attack traveled, leg by leg through any warp mouth -->
   {#if sightTrace}
-    <SightTraceOverlay from={sightTrace.from} to={sightTrace.to} trace={sightTrace.trace} />
+    {#if sightTrace.bend}
+      <SightTraceOverlay from={sightTrace.from} to={sightTrace.bend.mid} trace={sightTrace.trace} />
+      <SightTraceOverlay from={sightTrace.bend.mid} to={sightTrace.to} trace={sightTrace.bend.trace} />
+      <rect x={sightTrace.bend.mid.x * CELL + CELL / 2 - 6} y={sightTrace.bend.mid.y * CELL + CELL * 0.36 - 6}
+        width={12} height={12} class="sight-corner" transform="rotate(45 {sightTrace.bend.mid.x * CELL + CELL / 2} {sightTrace.bend.mid.y * CELL + CELL * 0.36})" />
+    {:else}
+      <SightTraceOverlay from={sightTrace.from} to={sightTrace.to} trace={sightTrace.trace} />
+    {/if}
   {/if}
   <!-- spell flourishes: one sprite component per effect (src/fx-sprites/) -->
   <g class="fx-layer" aria-hidden="true">
@@ -752,6 +765,17 @@
     fill: #6a5c44;
     pointer-events: none;
   }
+  .peekable { cursor: pointer; pointer-events: all; }
+  .sight-corner {
+    fill: none;
+    stroke: #c9a72a;
+    stroke-width: 2;
+    animation: sight-pulse 1.6s ease-in-out infinite;
+  }
+  @keyframes sight-pulse {
+    0%, 100% { opacity: 0.9; }
+    50% { opacity: 0.35; }
+  }
   .dim-cell {
     fill: rgba(12, 9, 5, 0.55);
     pointer-events: none;

packages/web/src/net.svelte.ts

@@ -103,6 +103,16 @@ export function humanize(e: GameEvent): string | null {
     case "doorHeld": return `${e.player} holds the door open.`;
     case "doorReleased": return `The held door swings shut.`;
     case "doorsRelocked": return `The door swings shut and relocks.`;
+    case "washedBack": return `${e.player} is washed back ${e.blockedSpaces > 0 ? "and crushed against the stone" : "by the wave"}!`;
+    case "enteredThornbush": return `${e.player} pushes into the thorns — and bleeds for it.`;
+    case "objectDragged": return `The ${e.what.replace(/-/g, " ")} is dragged across the maze.`;
+    case "cardsDealt": return `${e.player} is dealt ${e.count} card${e.count === 1 ? "" : "s"}.`;
+    case "cardsStolenPrivate": return e.cards.length > 0
+      ? `Stolen into your hand: ${e.cards.map((c) => cardDef(c.cardId).name).join(", ")}.`
+      : null;
+    case "handRevealedPrivate": return `${e.player}'s hand lies open to you: ${e.cards.map((c) => cardDef(c.cardId).name).join(", ")}.`;
+    case "creatureWarpStepped": return `The creature slips through the dimensional warp!`;
+    case "mentalForceFizzled": return `${e.attacker}'s mental force strains at ${e.defender} — and fails to find a path.`;
     case "doorJammed": return `${e.player} jams a door's lock solid.`;
     case "lockRemoved": return `${e.player} removes a door's lock for good.`;
     case "cardDisplayed": return `${e.player} displays ${cardDef(e.card.cardId).name}.`;
@@ -215,18 +225,6 @@ export interface LogLine {
  * momentSteps, so a chronicle turn number addresses the same commands. */
 const TURN_BOUNDARY = new Set(["turnStarted", "extraTurnStarted", "turnSkipped"]);
 
-/** Does this event make a turn worth reliving? Combat and spectacle. */
-export function isNotableEvent(e: GameEvent): boolean {
-  if (e.type === "spellCast") return e.target !== null || e.targetCell !== null;
-  return NOTABLE_EVENTS.has(e.type);
-}
-const NOTABLE_EVENTS = new Set([
-  "punched", "attackResolved", "damaged", "died", "knockedBack", "shoved",
-  "washedBack", "retreatedInHorror", "creatureAttacked", "boobytrapSprung",
-  "firewallBurned", "objectThrown", "gameWon", "positionsSwapped",
-  "teleported", "stonesDestroyed", "thumbOfGod", "stoneTurnedToWater",
-  "waterwallCrashes", "sectorRotated", "sectorRelocated", "homeBasesSwapped",
-]);
 
 const SEAT_KEY = "wizwar-seat";
 const SEATS_KEY = "wizwar-seats";
@@ -321,7 +319,6 @@ class Net {
    * counts, so a chronicle line can name the turn it belongs to. */
   private turnCounter = -1;
   /** The turn that already carries an instant-replay eye (one per turn). */
-  private eyeTurn = -1;
   /** The turn whose moment reel is open (share links point at it). */
   private momentTurn: number | null = null;
   private shareResolve: ((url: string) => void) | null = null;
@@ -444,12 +441,11 @@ class Net {
             if (TURN_BOUNDARY.has(e.type)) this.turnCounter++;
             const line = humanize(e);
             if (line) {
-              // One eye per turn — except the crown: the game-winning
-              // line always carries its own, whatever came before it.
+              // 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" ||
-                  (this.turnCounter !== this.eyeTurn && isNotableEvent(e)));
-              if (notable) this.eyeTurn = this.turnCounter;
+                (e.type === "gameWon" || TURN_BOUNDARY.has(e.type));
               this.log = [...this.log, { text: line, turn: this.turnCounter >= 0 ? this.turnCounter : null, notable }];
             }
           }
@@ -459,6 +455,14 @@ class Net {
           }
           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;
@@ -577,6 +581,14 @@ class Net {
     this.send({ type: "addBot", ...(style ? { style } : {}), ...(tier ? { tier } : {}) });
   }
 
+  kickSeat(name: string): void {
+    this.send({ type: "kickSeat", name });
+  }
+
+  abandonRoom(): void {
+    this.send({ type: "abandonRoom" });
+  }
+
   rollTableDie(): void {
     this.send({ type: "rollDie" });
   }
@@ -648,6 +660,19 @@ class Net {
   }
 
   /** Forget the remembered seat and return to the lobby. */
+  /** Client-side teardown when the SERVER detached us (kick, abandon). */
+  leaveLocal(): void {
+    localStorage.removeItem(SEAT_KEY);
+    this.roomId = null;
+    this.roomIdPending = null;
+    this.view = null;
+    this.started = false;
+    this.players = [];
+    this.token = null;
+    this.spectating = false;
+    this.audience = 0;
+  }
+
   leave(): void {
     this.send({ type: "leave" }); // detach server-side too (frees a gallery seat)
     localStorage.removeItem(SEAT_KEY);
@@ -698,7 +723,6 @@ class Net {
   private resetChronicle(): void {
     this.log = [];
     this.turnCounter = -1;
-    this.eyeTurn = -1;
   }
 
   /** Summon one turn's reel by its chronicle turn number. */

packages/web/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+/// <reference types="svelte" />
+
+/** Build moment, yyyy.mm.dd.hh.mm — injected by vite.config.ts. */
+declare const __BUILD_STAMP__: string;