Merge branch 'codex/feedback-polish' into codex/daily-engagement

Author: gmval-g3

index.html

@@ -18,10 +18,11 @@
 #title-bar .dot{width:8px;height:8px;background:#D4A030;border-radius:50%;animation:blink 1.6s ease-in-out infinite}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
 #hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:'Silkscreen',monospace;font-size:11px;color:#D4A030;opacity:0.6;pointer-events:none;z-index:10;text-shadow:1px 1px 0px #6B4820;animation:fadeHint 4s ease-in-out infinite}
+#hint.status-hidden{visibility:hidden}
 @keyframes fadeHint{0%,100%{opacity:0.6}50%{opacity:0.2}}
 #controls{position:absolute;bottom:20px;left:20px;pointer-events:none;z-index:10;font-family:'Silkscreen',monospace;font-size:9px;color:#8A9870;line-height:1.8;text-shadow:1px 1px 0px #1a1510;opacity:0.7}
 #controls .key{display:inline-block;background:rgba(90,136,72,0.15);border:1px solid rgba(90,136,72,0.3);border-radius:3px;padding:1px 5px;font-family:'Press Start 2P',monospace;font-size:7px;color:#A8C088;margin-right:4px;vertical-align:middle}
-#coords{position:absolute;bottom:24px;right:24px;font-family:'Press Start 2P',monospace;font-size:8px;color:#5A8848;pointer-events:none;z-index:10}
+#coords{position:absolute;bottom:24px;right:76px;font-family:'Press Start 2P',monospace;font-size:8px;color:#5A8848;pointer-events:none;z-index:10}
 #emote{position:absolute;pointer-events:none;z-index:15;font-size:24px;transition:transform 0.15s ease-out,opacity 0.15s;transform:scale(0);opacity:0}
 #emote.show{transform:scale(1);opacity:1}
 #action-button{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:none;min-width:72px;height:52px;padding:0 12px;border:2px solid #D4A030;border-radius:4px;background:rgba(10,10,10,0.88);color:#E8C040;font:700 12px 'Silkscreen',monospace;cursor:pointer;box-shadow:0 0 18px rgba(212,160,48,0.2)}
@@ -64,6 +65,9 @@
   #sound-button{right:max(104px,calc(104px + env(safe-area-inset-right)));bottom:max(28px,calc(28px + env(safe-area-inset-bottom)))}
   #status{bottom:max(84px,calc(64px + env(safe-area-inset-bottom)));font-size:10px}
 }
+@media(hover:none),(pointer:coarse){
+  #action-button{display:block}
+}
 @media(prefers-reduced-motion:reduce){
   #title-bar .dot,#hint{animation:none}
   #emote,#status{transition:none}
@@ -260,9 +264,10 @@ <h2 id="journal-title">SIGNAL LOG</h2>
   const tx = player.tileX + d.dx, ty = player.tileY + d.dy;
   player.facing = dir;
 
-  // Check NPC on target tile
+  // Interaction targets reserve their tile so the player stops facing them.
   const npcOnTile = isTileOccupiedByNPC(tx, ty, null);
-  if (npcOnTile || !isWalkable(tx, ty)) {
+  const fragmentOnTile = getUncollectedFragmentAt(tx, ty);
+  if (npcOnTile || fragmentOnTile || !isWalkable(tx, ty)) {
     // BLOCKED
     player.state = 'BLOCKED';
     player.bumpDir = dir;
@@ -858,7 +863,8 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 // PATHFINDING
 // ══════════════════════════════════════════════════════
 function findPath(sx,sy,ex,ey){
-  return findWorldPath(sx, sy, ex, ey, isWalkable, { allowNearest: false });
+  const isPlayerWalkable = (x, y) => isWalkable(x, y) && !getUncollectedFragmentAt(x, y);
+  return findWorldPath(sx, sy, ex, ey, isPlayerWalkable, { allowNearest: false });
 }
 
 // ══════════════════════════════════════════════════════
@@ -879,6 +885,12 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 
   // Check if clicking adjacent NPC while idle
   if (player.state === 'IDLE') {
+    const fragment = getUncollectedFragmentAt(tileX, tileY);
+    if (fragment && Math.abs(tileX - player.tileX) + Math.abs(tileY - player.tileY) === 1) {
+      player.facing = dirToward(player.tileX, player.tileY, tileX, tileY);
+      collectFragment(fragment);
+      return;
+    }
     const adj = isTileOccupiedByNPC(tileX, tileY, null);
     if (adj && Math.abs(tileX - player.tileX) + Math.abs(tileY - player.tileY) === 1) {
       // Trigger interaction
@@ -909,7 +921,13 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 
 // ── WASD Keyboard Movement ──
 const keysDown = {};
+function shouldHandleGameKey(target) {
+  return !target || typeof target.closest !== 'function' ||
+    !target.closest('button, dialog, input, select, textarea, a[href]');
+}
+
 window.addEventListener('keydown', (e) => {
+  if (!shouldHandleGameKey(e.target)) return;
   const k = e.key.toLowerCase();
   if (['w','a','s','d','arrowup','arrowdown','arrowleft','arrowright',' ','enter'].includes(k)) e.preventDefault();
   keysDown[k] = true;
@@ -948,6 +966,12 @@ <h2 id="journal-title">SIGNAL LOG</h2>
   )) || null;
 }
 
+function getUncollectedFragmentAt(x, y) {
+  return signalFragments.find(fragment => (
+    fragment.discovered && !fragment.collected && fragment.x === x && fragment.y === y
+  )) || null;
+}
+
 function updateQuestUI() {
   const collected = signalFragments.filter(fragment => fragment.collected).length;
   questEl.textContent = quest.complete ? `FACTORY ONLINE · ${dailyChallenge.code}` : `SIGNALS ${collected}/${signalFragments.length} · ${dailyChallenge.code}`;
@@ -1085,6 +1109,7 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 function showStatus(message, duration = 1.5) {
   statusEl.textContent = message;
   statusEl.classList.add('show');
+  hintEl.classList.add('status-hidden');
   statusTimer = duration;
 }
 
@@ -1115,8 +1140,7 @@ <h2 id="journal-title">SIGNAL LOG</h2>
   }
   scanPulse = {
     x: player.tileX, y: player.tileY,
-    time: Date.now(),
-    radius: 0,
+    elapsed: 0,
     maxRadius: 6 * TS, // 6 tiles radius
     duration: 800, // ms
   };
@@ -1130,6 +1154,31 @@ <h2 id="journal-title">SIGNAL LOG</h2>
   return true;
 }
 
+function updateScanPulse(dt) {
+  if (!scanPulse) return;
+  const previousRadius = (scanPulse.elapsed / scanPulse.duration) * scanPulse.maxRadius;
+  scanPulse.elapsed = Math.min(scanPulse.duration, scanPulse.elapsed + dt * 1000);
+  const radius = (scanPulse.elapsed / scanPulse.duration) * scanPulse.maxRadius;
+
+  for (const fragment of signalFragments) {
+    if (fragment.discovered || fragment.collected) continue;
+    const distance = Math.hypot(
+      (fragment.x - scanPulse.x) * TS,
+      (fragment.y - scanPulse.y) * TS,
+    );
+    if (distance >= previousRadius && distance <= radius) {
+      fragment.discovered = true;
+      persistProgress();
+      updateJournal();
+      showStatus(`SIGNAL FOUND: ${fragment.name}`, 2.5);
+      feedback.play('discover');
+      feedback.haptic([15, 20, 15]);
+    }
+  }
+
+  if (scanPulse.elapsed >= scanPulse.duration) scanPulse = null;
+}
+
 // ══════════════════════════════════════════════════════
 // GAME LOOP
 // ══════════════════════════════════════════════════════
@@ -1138,9 +1187,13 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 function update(dt) {
   // Scan cooldown
   if (scanCooldownTimer > 0) scanCooldownTimer -= dt;
+  updateScanPulse(dt);
   if (statusTimer > 0) {
     statusTimer -= dt;
-    if (statusTimer <= 0) statusEl.classList.remove('show');
+    if (statusTimer <= 0) {
+      statusEl.classList.remove('show');
+      hintEl.classList.remove('status-hidden');
+    }
   }
 
   // ── Player State Machine ──
@@ -1349,10 +1402,7 @@ <h2 id="journal-title">SIGNAL LOG</h2>
 
   // Scan pulse effect
   if (scanPulse) {
-    const age = (Date.now() - scanPulse.time) / scanPulse.duration;
-    if (age >= 1) {
-      scanPulse = null;
-    } else {
+    const age = scanPulse.elapsed / scanPulse.duration;
       const cx = scanPulse.x * TS - camX + TS/2;
       const cy = scanPulse.y * TS - camY + TS/2;
       const radius = age * scanPulse.maxRadius;
@@ -1393,21 +1443,6 @@ <h2 id="journal-title">SIGNAL LOG</h2>
           rememberNPC(npc);
         }
       }
-      for (const fragment of signalFragments) {
-        if (fragment.discovered || fragment.collected) continue;
-        const fragmentX = fragment.x * TS - camX + TS/2;
-        const fragmentY = fragment.y * TS - camY + TS/2;
-        const distance = Math.hypot(fragmentX - cx, fragmentY - cy);
-        if (distance < radius && distance > radius - TS * 2) {
-          fragment.discovered = true;
-          persistProgress();
-          updateJournal();
-          showStatus(`SIGNAL FOUND: ${fragment.name}`, 2.5);
-          feedback.play('discover');
-          feedback.haptic([15, 20, 15]);
-        }
-      }
-    }
   }
 
   // Discovered signal fragments

tests/runtime-smoke.test.cjs

@@ -92,6 +92,35 @@ test('runtime initializes and renders a frame', () => {
   assert.equal(elements.game.width, 1600);
   assert.equal(elements.game.height, 1200);
 
+  const keyboardTargets = vm.runInContext(`({
+    game: shouldHandleGameKey(null),
+    canvas: shouldHandleGameKey({ closest: () => null }),
+    control: shouldHandleGameKey({ closest: () => ({}) }),
+  })`, sandbox);
+  assert.deepEqual(
+    { ...keyboardTargets },
+    { game: true, canvas: true, control: false },
+  );
+
+  const retrieval = vm.runInContext(`
+    const fragment = signalFragments[0];
+    player.tileX = fragment.x;
+    player.tileY = fragment.y - 1;
+    player.renderX = player.tileX;
+    player.renderY = player.tileY;
+    triggerScanPulse();
+    updateScanPulse(1);
+    playerStartMove('south');
+    const blocked = player.state;
+    player.state = 'IDLE';
+    performAction();
+    ({ discovered: fragment.discovered, blocked, collected: fragment.collected });
+  `, sandbox);
+  assert.deepEqual(
+    { ...retrieval },
+    { discovered: true, blocked: 'BLOCKED', collected: true },
+  );
+
   const completion = vm.runInContext(`
     for (const fragment of signalFragments) {
       fragment.discovered = true;