feat: add playable actors and seamless journey state

index.html

@@ -280,6 +280,24 @@
       }
       @media (hover: hover) { .enter:hover { background: var(--amber-lit); } }
 
+      .walk {
+        font: inherit;
+        font-size: 11px;
+        padding: var(--s2) var(--s3);
+        cursor: pointer;
+        text-align: left;
+        border: 1px solid rgba(242, 177, 52, 0.48);
+        border-radius: var(--r-sm);
+        color: var(--amber-ink);
+        background: rgba(242, 177, 52, 0.1);
+        box-shadow: var(--shadow);
+        transition: background var(--t), border-color var(--t);
+      }
+      @media (hover: hover) {
+        .walk:hover { background: rgba(242, 177, 52, 0.2); border-color: var(--amber); }
+      }
+      .walk[aria-pressed="true"] { background: rgba(242, 177, 52, 0.25); }
+
       /* The public-office note. Amber-edged rather than amber-filled: it is an
          explanation, not an action, and the one filled amber thing on screen
          should stay the door. */
@@ -671,9 +689,9 @@
          only while a route chapter owns the follow camera. Full words rather
          than mystery glyphs: the controls disappear everywhere space is tight
          except on the devices that cannot drive without them. */
-      .drive-controls { display: none; }
+      .drive-controls, .walk-controls { display: none; }
       @media (pointer: coarse) {
-        .drive-controls:not([hidden]) {
+        .drive-controls:not([hidden]), .walk-controls:not([hidden]) {
           position: fixed;
           left: 50%;
           bottom: calc(var(--s3) + env(safe-area-inset-bottom));
@@ -691,7 +709,7 @@
           -webkit-backdrop-filter: var(--blur);
           box-shadow: var(--shadow);
         }
-        .drive-control {
+        .drive-control, .walk-control {
           min-height: 48px;
           border: 1px solid var(--hairline);
           border-radius: var(--r-sm);
@@ -705,13 +723,14 @@
           user-select: none;
           -webkit-user-select: none;
         }
-        .drive-control[aria-pressed="true"] {
+        .drive-control[aria-pressed="true"], .walk-control[aria-pressed="true"] {
           border-color: rgba(242, 177, 52, 0.65);
           background: rgba(242, 177, 52, 0.28);
           color: var(--amber-ink);
         }
         /* The source line is useful but cannot sit underneath the controls. */
-        body:has(.drive-controls:not([hidden])) .source { bottom: 7.5rem; }
+        body:has(.drive-controls:not([hidden])) .source,
+        body:has(.walk-controls:not([hidden])) .source { bottom: 7.5rem; }
       }
 
       /* ---- Responsive -------------------------------------------------------
@@ -897,6 +916,7 @@
       </section>
       <nav id="cities" class="cities" aria-label="City"></nav>
       <button id="enter" class="enter">Enter the office →</button>
+      <button id="walk" class="walk" aria-pressed="false" hidden>Walk as your dog →</button>
       <p class="card badge" id="office-badge" hidden></p>
       <nav id="chapters" aria-label="Chapters"></nav>
       <p class="card" id="blurb"></p>
@@ -919,6 +939,7 @@
       <div class="card hint" id="hint">
         <span><kbd>1</kbd>–<kbd>9</kbd> chapters</span>
         <span id="drive-hint">choose <kbd>2</kbd> or <kbd>3</kbd> to follow</span>
+        <span id="walk-hint" hidden><kbd>V</kbd> walk · <kbd>WASD</kbd> move</span>
         <span><kbd>[</kbd> <kbd>]</kbd> city</span>
         <span><kbd>O</kbd> office</span>
         <span><kbd>M</kbd> plan</span>
@@ -946,6 +967,13 @@
       <button class="drive-control" data-drive-action="camera">Camera</button>
     </div>
 
+    <div id="walk-controls" class="walk-controls" aria-label="Walking controls" hidden>
+      <button class="walk-control" data-walk-key="a" aria-pressed="false">Left</button>
+      <button class="walk-control" data-walk-key="w" aria-pressed="false">Forward</button>
+      <button class="walk-control" data-walk-key="s" aria-pressed="false">Back</button>
+      <button class="walk-control" data-walk-key="d" aria-pressed="false">Right</button>
+    </div>
+
     <p id="source" class="source"></p>
 
     <!-- Behind the panel sheet on a phone, and nowhere else. A sheet with no
@@ -959,7 +987,8 @@
         <h2 id="shortcuts-title">Keyboard</h2>
         <dl class="keys">
           <dt><kbd>1</kbd>–<kbd>9</kbd></dt><dd>Fly to a chapter, or an office viewpoint</dd>
-          <dt><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></dt><dd>Drive after choosing the 101 or I-5 chapter</dd>
+          <dt><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></dt><dd>Drive a route, or move while walking inside</dd>
+          <dt><kbd>V</kbd></dt><dd>Walk through an office / return to the dollhouse view</dd>
           <dt><kbd>Space</kbd></dt><dd>Handbrake while driving</dd>
           <dt><kbd>P</kbd> / <kbd>R</kbd></dt><dd>Resume assisted drive / reset the car</dd>
           <dt><kbd>C</kbd></dt><dd>Switch chase / driver-height camera</dd>