Every edge answers a hover: tooltips for walls, doors, fire, illusions

Only the special door lock states carried titles. Now plain walls ('a
wall'), locked doors, the wall of fire (with its 4-damage warning), the
untested shimmer ('tap to test your eyes'), the known-illusion ghost,
and battle cracks (damage taken so far) all speak on hover. The
firewall's hover target is its bar; the flames stay click-through.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0138A8CjeQRpvzKxuMfz1Bqc

packages/web/src/Board.svelte

@@ -408,10 +408,10 @@
     {@const frac = Math.min(1, dmg / 20)}
     {#if kind === "V"}
       <line x1={(wx + 1) * CELL} y1={wy * CELL + 3} x2={(wx + 1) * CELL} y2={(wy + 1) * CELL - 3}
-        class="crack" style:opacity={0.35 + frac * 0.65} />
+        class="crack" style:opacity={0.35 + frac * 0.65}><title>battle-scarred — {dmg} damage taken</title></line>
     {:else}
       <line x1={wx * CELL + 3} y1={(wy + 1) * CELL} x2={(wx + 1) * CELL - 3} y2={(wy + 1) * CELL}
-        class="crack" style:opacity={0.35 + frac * 0.65} />
+        class="crack" style:opacity={0.35 + frac * 0.65}><title>battle-scarred — {dmg} damage taken</title></line>
     {/if}
   {/each}
 
@@ -421,9 +421,9 @@
     {@const ix = Number(key.split(":")[1]?.split(",")[0])}
     {@const iy = Number(key.split(":")[1]?.split(",")[1])}
     {#if kind === "V"}
-      <line x1={(ix + 1) * CELL} y1={iy * CELL} x2={(ix + 1) * CELL} y2={(iy + 1) * CELL} class="illusion" />
+      <line x1={(ix + 1) * CELL} y1={iy * CELL} x2={(ix + 1) * CELL} y2={(iy + 1) * CELL} class="illusion"><title>an illusion — your eyes see through it</title></line>
     {:else}
-      <line x1={ix * CELL} y1={(iy + 1) * CELL} x2={(ix + 1) * CELL} y2={(iy + 1) * CELL} class="illusion" />
+      <line x1={ix * CELL} y1={(iy + 1) * CELL} x2={(ix + 1) * CELL} y2={(iy + 1) * CELL} class="illusion"><title>an illusion — your eyes see through it</title></line>
     {/if}
   {/each}
 

packages/web/src/EdgeGlyph.svelte

@@ -11,6 +11,7 @@
   const CELL = 48;
   const WALL = 7;
   const cls = $derived(state === "door" ? `door${lock ? ` ${lock}` : ""}` : "wall");
+  const tip = $derived(title ?? (state === "door" ? "a locked door" : "a wall"));
 </script>
 
 {#if kind === "V"}
@@ -18,13 +19,13 @@
     x={(x + 1) * CELL - WALL / 2} y={y * CELL - WALL / 2}
     width={WALL} height={CELL + WALL}
     class={cls}
-  >{#if title}<title>{title}</title>{/if}</rect>
+  ><title>{tip}</title></rect>
 {:else}
   <rect
     x={x * CELL - WALL / 2} y={(y + 1) * CELL - WALL / 2}
     width={CELL + WALL} height={WALL}
     class={cls}
-  >{#if title}<title>{title}</title>{/if}</rect>
+  ><title>{tip}</title></rect>
 {/if}
 
 <style>

packages/web/src/FirewallEdge.svelte

@@ -25,7 +25,8 @@
   const py = (t: number) => (kind === "V" ? t * CELL : 0);
 </script>
 
-<g transform={`translate(${cx} ${cy})`} class="fw" aria-hidden="true">
+<g transform={`translate(${cx} ${cy})`} class="fw">
+  <title>a wall of fire — passing through burns for 4</title>
   <defs>
     <linearGradient id={`fw-bar-${uid}`} x1="0" y1="1" x2="0" y2="0">
       <stop offset="0" stop-color="#7c1a14" />
@@ -65,7 +66,7 @@
 </g>
 
 <style>
-  .fw { pointer-events: none; }
+  .fw-tongue, .fw-ember { pointer-events: none; }
   .fw-bar {
     stroke: #7c1a14;
     stroke-width: 1;

packages/web/src/IllusionShimmer.svelte

@@ -18,7 +18,7 @@
   <line {x1} {y1} {x2} {y2} class="illusion-hit"
     role="button" tabindex="-1" aria-label="a shimmering wall — test your eyes"
     onclick={(ev) => { ev.stopPropagation(); onclick?.(); }}
-    onkeydown={() => {}} />
+    onkeydown={() => {}}><title>this wall shimmers oddly — tap to test your eyes</title></line>
 {/if}
 
 <style>