Revert look/pan to keyboard IJKL (replacing mouse-look), keep WASD movement

index.html

@@ -126,6 +126,11 @@
   .keycap[data-k="A"]{grid-column:1;grid-row:2}
   .keycap[data-k="S"]{grid-column:2;grid-row:2}
   .keycap[data-k="D"]{grid-column:3;grid-row:2}
+  /* IJKL look cross placement inside its own 3x2 grid */
+  .keycap[data-k="I"]{grid-column:2;grid-row:1}
+  .keycap[data-k="J"]{grid-column:1;grid-row:2}
+  .keycap[data-k="K"]{grid-column:2;grid-row:2}
+  .keycap[data-k="L"]{grid-column:3;grid-row:2}
 
   .look-info{font-size:12.5px;color:var(--muted);line-height:1.6}
   .look-info b{color:var(--text)}
@@ -145,7 +150,7 @@
       <div class="logo">🌍</div>
       <div>
         <h1>ABot-World — Interactive World Rollout</h1>
-        <p>Upload a starting frame, then steer a live action-conditioned world with WASD + mouse-look.</p>
+        <p>Upload a starting frame, then steer a live action-conditioned world with WASD + IJKL.</p>
       </div>
     </div>
     <div class="links">
@@ -164,7 +169,7 @@
           <div class="chip"><span class="dot" id="status-dot"></span><span id="status-label">Idle</span></div>
           <div class="chip"><span id="fps-value">0</span> fps · <span id="frame-value">0</span> blk</div>
         </div>
-        <div class="capture-hint" id="capture-hint">Click to capture · WASD to move · mouse to look · Esc to release</div>
+        <div class="capture-hint" id="capture-hint">Click to capture · WASD to move · IJKL to look · Esc to release</div>
         <div class="overlay" id="overlay">
           <div>
             <div class="spinner" id="spinner" style="display:none"></div>
@@ -188,16 +193,18 @@
           </div>
           <div>
             <div class="label" style="margin-bottom:8px">Look / pan</div>
-            <div class="look-info">
-              Move the world camera with your <b>mouse</b>. Click the view to capture
-              the pointer, then move the mouse to look &amp; pan. Press <b>Esc</b> to release.
+            <div class="keyboard" id="look-keys">
+              <span class="keycap" data-k="I">I</span>
+              <span class="keycap" data-k="J">J</span>
+              <span class="keycap" data-k="K">K</span>
+              <span class="keycap" data-k="L">L</span>
             </div>
-            <div class="look-badge" id="look-badge"><span class="d"></span><span id="look-badge-text">Mouse-look idle</span></div>
+            <div class="look-badge" id="look-badge"><span class="d"></span><span id="look-badge-text">Look idle</span></div>
           </div>
         </div>
         <div class="hint-line">
           <b>W A S D</b> — move &amp; turn (hold to steer the next block) ·
-          <b>Mouse</b> — look / pan. Click the video to capture input.
+          <b>I J K L</b> — look / pan. Click the video to capture input.
         </div>
         <div class="active-tags" id="active-tags"></div>
       </div>
@@ -243,12 +250,13 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 const SESSION_ID = (crypto.randomUUID && crypto.randomUUID()) ||
   (`s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,10)}`);
 
-// Movement keys are driven by the keyboard (WASD); look/pan (I J K L) is now
-// driven by mouse movement (pointer-lock mouse-look) — see mouse-look block.
+// Movement keys are driven by the keyboard (WASD); look/pan is driven by the
+// keyboard too (I J K L) — both are handled as held-key controls.
 const MOVE_KEYS = new Set(["W","A","S","D"]);
 const LOOK_KEYS = new Set(["I","J","K","L"]);
 const KEY_FROM_CODE = {
   KeyW:"W", KeyA:"A", KeyS:"S", KeyD:"D",
+  KeyI:"I", KeyJ:"J", KeyK:"K", KeyL:"L",
 };
 
 const state = {
@@ -533,29 +541,25 @@ function startCtrlLoop(){
 function stopCtrlLoop(){ if(ctrlTimer){ clearInterval(ctrlTimer); ctrlTimer = null; } }
 
 function renderKeys(){
-  // Highlight the on-screen WASD keys that are currently held.
+  // Highlight the on-screen WASD + IJKL keys that are currently held.
   keycaps.forEach(c=>c.classList.toggle("active", state.pressed.has(c.dataset.k)));
-  // Look/pan status badge reflects live mouse-look direction(s).
+  // Look/pan status badge reflects the held look keys (I J K L).
   const look = Array.from(state.pressed).filter(k=>LOOK_KEYS.has(k));
   const looking = look.length > 0;
   lookBadge.classList.toggle("active", looking);
   const LOOK_LABEL = { I:"up", K:"down", J:"left", L:"right" };
   lookBadgeText.textContent = looking
     ? "Looking " + look.map(k=>LOOK_LABEL[k]).join(" + ")
-    : (state.capturing ? "Mouse-look ready" : "Mouse-look idle");
+    : (state.capturing ? "Look ready" : "Look idle");
   const held = Array.from(state.pressed);
   activeTags.textContent = held.length ? "Active: " + held.join(" + ") : "";
 }
 
-// --- Movement keyboard capture (WASD) + mouse-look pointer capture ---
-// Clicking the stage captures input. We request Pointer Lock so raw mouse
-// movement drives look/pan (I J K L) instead of the old IJKL keys.
+// --- Keyboard capture: WASD (move) + IJKL (look/pan) ---
+// Clicking the stage captures input; held keys are sent ~10x/s to the server.
 function requestCapture(){
   state.capturing = true;
   stage.focus();
-  if(stage.requestPointerLock){
-    try{ stage.requestPointerLock(); }catch{}
-  }
   renderKeys();
 }
 stage.addEventListener("click", requestCapture);
@@ -564,63 +568,16 @@ document.addEventListener("keydown",(e)=>{
   if(!state.capturing) return;
   if(e.code === "Escape"){
     state.capturing=false; state.pressed.clear();
-    if(document.exitPointerLock) try{ document.exitPointerLock(); }catch{}
     renderKeys(); return;
   }
   const k = KEY_FROM_CODE[e.code];
-  if(k && MOVE_KEYS.has(k)){ e.preventDefault(); state.pressed.add(k); renderKeys(); }
+  if(k && (MOVE_KEYS.has(k) || LOOK_KEYS.has(k))){ e.preventDefault(); state.pressed.add(k); renderKeys(); }
 });
 document.addEventListener("keyup",(e)=>{
   const k = KEY_FROM_CODE[e.code];
   if(k){ state.pressed.delete(k); renderKeys(); }
 });
 
-// --- Mouse-look: convert pointer movement into look/pan keys (I J K L) ---
-// I = look up, K = look down, J = look left, L = look right. A small deadzone
-// avoids jitter; each look direction is held briefly after motion then released
-// so a continuous drag/move keeps looking while a still mouse stops looking.
-const LOOK_DEADZONE = 2;          // px of movement before a look direction fires
-let lookReleaseTimer = null;
-function applyMouseLook(dx, dy){
-  if(!state.capturing) return;
-  // Clear previous look keys; movement (WASD) is untouched.
-  let changed = false;
-  for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) changed = true; }
-
-  if(Math.abs(dx) > LOOK_DEADZONE){
-    state.pressed.add(dx > 0 ? "L" : "J"); changed = true;   // right / left
-  }
-  if(Math.abs(dy) > LOOK_DEADZONE){
-    state.pressed.add(dy > 0 ? "K" : "I"); changed = true;   // down / up
-  }
-  if(changed) renderKeys();
-
-  // Auto-release look keys shortly after the mouse stops moving.
-  if(lookReleaseTimer) clearTimeout(lookReleaseTimer);
-  lookReleaseTimer = setTimeout(()=>{
-    let cleared = false;
-    for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) cleared = true; }
-    if(cleared) renderKeys();
-  }, 120);
-}
-document.addEventListener("mousemove",(e)=>{
-  if(!state.capturing) return;
-  // Prefer raw movement deltas (available under pointer lock); fall back to
-  // client-space deltas for browsers that deny/lack pointer lock.
-  const dx = (e.movementX !== undefined) ? e.movementX : 0;
-  const dy = (e.movementY !== undefined) ? e.movementY : 0;
-  applyMouseLook(dx, dy);
-});
-// Track pointer-lock state so the badge reflects capture accurately.
-document.addEventListener("pointerlockchange", ()=>{
-  if(document.pointerLockElement !== stage){
-    // Pointer released (e.g. Esc pressed by the browser): drop look keys.
-    let cleared = false;
-    for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) cleared = true; }
-    if(cleared) renderKeys();
-  }
-});
-
 promptEl.addEventListener("input", ()=>{ state.prompt = promptEl.value; });
 
 // --- Start / Stop ---