Merge PR #15: Fix movement reservations and frame timing

Fix entity reservations, elapsed timing, and resilient input

Author: mcvalosborne

index.html

@@ -54,8 +54,13 @@
 const TS = TILE * PX;
 let W, H, COLS, ROWS;
 function resize() {
-  W = canvas.width = window.innerWidth;
-  H = canvas.height = window.innerHeight;
+  W = window.innerWidth;
+  H = window.innerHeight;
+  const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+  canvas.width = Math.floor(W * pixelRatio);
+  canvas.height = Math.floor(H * pixelRatio);
+  ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  ctx.imageSmoothingEnabled = false;
   COLS = Math.ceil(W / TS) + 2;
   ROWS = Math.ceil(H / TS) + 2;
 }
@@ -85,7 +90,15 @@
 // ══════════════════════════════════════════════════════
 // MAP (24x20 River Factory Zone)
 // ══════════════════════════════════════════════════════
-const { DIR, oppositeDir, createWorldMap, findPath: findWorldPath } = LittleAndroidLogic;
+const {
+  DIR,
+  oppositeDir,
+  createWorldMap,
+  findPath: findWorldPath,
+  entityOccupiesTile,
+  isTileReserved,
+  tickTimedItems,
+} = LittleAndroidLogic;
 const world = createWorldMap(77);
 const MW = world.width, MH = world.height, map = world.map;
 
@@ -95,11 +108,7 @@
   return t!==4&&t!==5&&t!==6&&t!==7&&t!==8&&t!==9&&t!==11&&t!==13&&t!==14&&t!==17;
 }
 function isTileOccupiedByNPC(tx,ty,excludeNPC){
-  for(const n of npcs){
-    if(n===excludeNPC)continue;
-    if(Math.round(n.tileX)===tx&&Math.round(n.tileY)===ty)return n;
-  }
-  return null;
+  return npcs.find(n => n !== excludeNPC && entityOccupiesTile(n, tx, ty)) || null;
 }
 
 // ══════════════════════════════════════════════════════
@@ -299,9 +308,9 @@
   const tx = npc.tileX + d.dx, ty = npc.tileY + d.dy;
   if (!isWalkable(tx, ty)) return false;
   // Check if player is on target tile
-  if (Math.round(player.tileX) === tx && Math.round(player.tileY) === ty) return false;
+  if (entityOccupiesTile(player, tx, ty)) return false;
   // Check other NPCs
-  if (isTileOccupiedByNPC(tx, ty, npc)) return false;
+  if (isTileReserved(npcs, tx, ty, npc)) return false;
   npc.facing = dir;
   npc.moveFromX = npc.tileX; npc.moveFromY = npc.tileY;
   npc.moveToX = tx; npc.moveToY = ty;
@@ -550,6 +559,31 @@
   }
 }
 
+function beginPlayerInteraction(npc) {
+  player.facing = dirToward(player.tileX, player.tileY, npc.tileX, npc.tileY);
+  player.state = 'INTERACTING';
+  player.interactTarget = npc;
+  player.interactArmTimer = 0.2;
+  triggerNPCInteraction(npc);
+}
+
+function requestPlayerInteraction(npc) {
+  if (!npc || npc.interacting) return false;
+  player.interactTarget = npc;
+  targetPath = [];
+  if (npc.moving) {
+    player.state = 'WAITING_INTERACTION';
+    return true;
+  }
+  const distance = Math.abs(npc.tileX - player.tileX) + Math.abs(npc.tileY - player.tileY);
+  if (distance !== 1) {
+    player.interactTarget = null;
+    return false;
+  }
+  beginPlayerInteraction(npc);
+  return true;
+}
+
 function endNPCInteraction(npc) {
   npc.interacting = false;
 
@@ -747,11 +781,7 @@
     const adj = isTileOccupiedByNPC(tileX, tileY, null);
     if (adj && Math.abs(tileX - player.tileX) + Math.abs(tileY - player.tileY) === 1) {
       // Trigger interaction
-      player.facing = dirToward(player.tileX, player.tileY, tileX, tileY);
-      player.state = 'INTERACTING';
-      player.interactTarget = adj;
-      player.interactArmTimer = 0.2; // 200ms arm raise
-      triggerNPCInteraction(adj);
+      requestPlayerInteraction(adj);
       return;
     }
   }
@@ -776,7 +806,7 @@
 const keysDown = {};
 window.addEventListener('keydown', (e) => {
   const k = e.key.toLowerCase();
-  if (['w','a','s','d',' '].includes(k)) e.preventDefault();
+  if (['w','a','s','d','arrowup','arrowdown','arrowleft','arrowright',' '].includes(k)) e.preventDefault();
   keysDown[k] = true;
 
   // Spacebar: action button / scan pulse
@@ -787,23 +817,23 @@
     const adj = isTileOccupiedByNPC(fx, fy, null);
     if (adj) {
       // Interact
-      player.state = 'INTERACTING';
-      player.interactTarget = adj;
-      player.interactArmTimer = 0.2;
-      triggerNPCInteraction(adj);
+      requestPlayerInteraction(adj);
     } else {
       // Scan pulse
       triggerScanPulse();
     }
   }
 });
 window.addEventListener('keyup', (e) => { keysDown[e.key.toLowerCase()] = false; });
+window.addEventListener('blur', () => {
+  for (const key of Object.keys(keysDown)) keysDown[key] = false;
+});
 
 function getWASDDirection() {
-  if (keysDown['w']) return 'north';
-  if (keysDown['s']) return 'south';
-  if (keysDown['a']) return 'west';
-  if (keysDown['d']) return 'east';
+  if (keysDown['w'] || keysDown['arrowup']) return 'north';
+  if (keysDown['s'] || keysDown['arrowdown']) return 'south';
+  if (keysDown['a'] || keysDown['arrowleft']) return 'west';
+  if (keysDown['d'] || keysDown['arrowright']) return 'east';
   return null;
 }
 
@@ -873,11 +903,7 @@
             const npcOnNext = isTileOccupiedByNPC(next.x, next.y, null);
             if (npcOnNext) {
               // Walk up to NPC, trigger interaction
-              player.facing = dirToward(player.tileX, player.tileY, next.x, next.y);
-              player.state = 'INTERACTING';
-              player.interactTarget = npcOnNext;
-              player.interactArmTimer = 0.2;
-              triggerNPCInteraction(npcOnNext);
+              requestPlayerInteraction(npcOnNext);
               targetPath = [];
             } else {
               const dir = dirToward(player.tileX, player.tileY, next.x, next.y);
@@ -937,6 +963,22 @@
       }
       break;
     }
+    case 'WAITING_INTERACTION': {
+      player.renderX = player.tileX;
+      player.renderY = player.tileY;
+      const target = player.interactTarget;
+      if (!target) {
+        player.state = 'IDLE';
+      } else if (!target.moving) {
+        const distance = Math.abs(target.tileX - player.tileX) + Math.abs(target.tileY - player.tileY);
+        if (distance === 1) beginPlayerInteraction(target);
+        else {
+          player.interactTarget = null;
+          player.state = 'IDLE';
+        }
+      }
+      break;
+    }
     case 'INTERACTING': {
       player.interactArmTimer -= dt;
       player.renderX = player.tileX;
@@ -957,6 +999,7 @@
 
   // ── Update all NPCs ──
   for (const npc of npcs) updateNPC(npc, dt);
+  scanLabels = tickTimedItems(scanLabels, dt);
 
   // ── Emote positioning ──
   if (emoteNPC) {
@@ -1077,8 +1120,6 @@
   // Draw persistent scan labels above NPCs
   for (let i = scanLabels.length - 1; i >= 0; i--) {
     const sl = scanLabels[i];
-    sl.timer -= 1/60; // approximate dt
-    if (sl.timer <= 0) { scanLabels.splice(i, 1); continue; }
     const fadeAlpha = Math.min(1, sl.timer / 0.5); // fade out in last 0.5s
     const nx = sl.npc.renderX * TS - camX + TS/2;
     const ny = sl.npc.renderY * TS - camY - 4;
@@ -1118,6 +1159,11 @@
 }
 
 function gameLoop(ts) {
+  if (document.hidden) {
+    lastTime = ts;
+    requestAnimationFrame(gameLoop);
+    return;
+  }
   const dt = Math.min((ts - lastTime) / 1000, 0.1);
   lastTime = ts;
   update(dt);

src/game-logic.js

@@ -167,5 +167,36 @@
     return [];
   }
 
-  return Object.freeze({ DIR, oppositeDir, mulberry32, createWorldMap, findPath });
+  function entityOccupiesTile(entity, x, y) {
+    if (!entity) return false;
+    if (Math.round(entity.tileX) === x && Math.round(entity.tileY) === y) return true;
+    const inTransit = entity.moving || entity.state === 'WALKING';
+    return Boolean(
+      inTransit &&
+      Math.round(entity.moveToX) === x &&
+      Math.round(entity.moveToY) === y,
+    );
+  }
+
+  function isTileReserved(entities, x, y, excludedEntity = null) {
+    return entities.some(entity => (
+      entity !== excludedEntity && entityOccupiesTile(entity, x, y)
+    ));
+  }
+
+  function tickTimedItems(items, deltaSeconds) {
+    for (const item of items) item.timer -= deltaSeconds;
+    return items.filter(item => item.timer > 0);
+  }
+
+  return Object.freeze({
+    DIR,
+    oppositeDir,
+    mulberry32,
+    createWorldMap,
+    findPath,
+    entityOccupiesTile,
+    isTileReserved,
+    tickTimedItems,
+  });
 });

tests/game-logic.test.cjs

@@ -2,7 +2,15 @@
 
 const test = require('node:test');
 const assert = require('node:assert/strict');
-const { DIR, oppositeDir, createWorldMap, findPath } = require('../src/game-logic.js');
+const {
+  DIR,
+  oppositeDir,
+  createWorldMap,
+  findPath,
+  entityOccupiesTile,
+  isTileReserved,
+  tickTimedItems,
+} = require('../src/game-logic.js');
 
 test('direction helpers remain stable', () => {
   assert.deepEqual(DIR.north, { dx: 0, dy: -1 });
@@ -34,3 +42,24 @@ test('pathfinding chooses a nearby walkable target for scenery clicks', () => {
   const isWalkable = (x, y) => x === 1 && y === 2;
   assert.deepEqual(findPath(1, 2, 2, 2, isWalkable), [{ x: 1, y: 2 }]);
 });
+
+test('moving entities reserve their source and destination tiles', () => {
+  const moving = {
+    tileX: 9,
+    tileY: 11,
+    moving: true,
+    moveToX: 10,
+    moveToY: 11,
+  };
+  assert.equal(entityOccupiesTile(moving, 9, 11), true);
+  assert.equal(entityOccupiesTile(moving, 10, 11), true);
+  assert.equal(isTileReserved([moving], 10, 11), true);
+  assert.equal(isTileReserved([moving], 10, 11, moving), false);
+});
+
+test('timed labels use elapsed time instead of frame count', () => {
+  const items = [{ timer: 2 }, { timer: 0.25 }];
+  const remaining = tickTimedItems(items, 0.5);
+  assert.equal(remaining.length, 1);
+  assert.equal(remaining[0].timer, 1.5);
+});

tests/runtime-smoke.test.cjs

@@ -42,6 +42,7 @@ test('runtime initializes and renders a frame', () => {
     window: {
       innerWidth: 800,
       innerHeight: 600,
+      devicePixelRatio: 2,
       addEventListener: (name, handler) => { listeners[`window:${name}`] = handler; },
     },
     requestAnimationFrame: handler => { nextFrame = handler; },
@@ -56,4 +57,76 @@ test('runtime initializes and renders a frame', () => {
     sandbox,
   );
   assert.deepEqual({ ...snapshot }, { playerX: 4, playerY: 6, state: 'IDLE', npcCount: 8 });
+  assert.equal(elements.game.width, 1600);
+  assert.equal(elements.game.height, 1200);
+});
+
+test('NPC movement rejects a destination reserved earlier in the frame', () => {
+  const html = fs.readFileSync('index.html', 'utf8');
+  const script = html.match(/<script>([\s\S]*?)<\/script>/)[1];
+  const context2d = new Proxy(
+    { measureText: text => ({ width: String(text).length * 9 }) },
+    { get: (target, key) => key in target ? target[key] : () => {} },
+  );
+  const element = () => ({
+    style: {}, classList: { add() {}, remove() {} }, textContent: '',
+    getBoundingClientRect: () => ({ left: 0, top: 0 }),
+    addEventListener() {}, getContext: () => context2d,
+  });
+  const elements = { game: element(), coords: element(), hint: element(), emote: element() };
+  const sandbox = {
+    LittleAndroidLogic, console, Date, Math, setTimeout, clearTimeout,
+    document: { hidden: false, getElementById: id => elements[id] },
+    window: { innerWidth: 800, innerHeight: 600, devicePixelRatio: 1, addEventListener() {} },
+    requestAnimationFrame() {},
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(script, sandbox);
+  const result = vm.runInContext(`
+    npcs.length = 0;
+    const first = makeNPC('worker', 9, 11, 'east');
+    const second = makeNPC('worker', 11, 11, 'west');
+    npcs.push(first, second);
+    ({ first: npcStartMove(first, 'east', 200), second: npcStartMove(second, 'west', 200) });
+  `, sandbox);
+  assert.deepEqual({ ...result }, { first: true, second: false });
+});
+
+test('interaction waits for a moving NPC to finish its tile step', () => {
+  const html = fs.readFileSync('index.html', 'utf8');
+  const script = html.match(/<script>([\s\S]*?)<\/script>/)[1];
+  const context2d = new Proxy(
+    { measureText: text => ({ width: String(text).length * 9 }) },
+    { get: (target, key) => key in target ? target[key] : () => {} },
+  );
+  const element = () => ({
+    style: {}, classList: { add() {}, remove() {} }, textContent: '',
+    getBoundingClientRect: () => ({ left: 0, top: 0 }), addEventListener() {},
+    getContext: () => context2d,
+  });
+  const elements = { game: element(), coords: element(), hint: element(), emote: element() };
+  const sandbox = {
+    LittleAndroidLogic, console, Date, Math, setTimeout, clearTimeout,
+    document: { hidden: false, getElementById: id => elements[id] },
+    window: { innerWidth: 800, innerHeight: 600, devicePixelRatio: 1, addEventListener() {} },
+    requestAnimationFrame() {},
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(script, sandbox);
+  const state = vm.runInContext(`
+    const target = makeNPC('worker', 4, 7, 'south');
+    target.moving = true;
+    target.moveToX = 5;
+    target.moveToY = 7;
+    npcs.length = 0;
+    npcs.push(target);
+    requestPlayerInteraction(target);
+    const waiting = player.state;
+    target.moving = false;
+    target.tileX = 4;
+    target.tileY = 7;
+    update(0.016);
+    ({ waiting, afterStep: player.state });
+  `, sandbox);
+  assert.deepEqual({ ...state }, { waiting: 'WAITING_INTERACTION', afterStep: 'INTERACTING' });
 });