modify the engine mouse code to only capture the mouse position while on the canvus, if off canvas, return last know posistion

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,15 +1,13 @@
 MODEL: GPT-5.3-codex
-REASONING: medium
+REASONING: low
 
 COMMAND:
-Apply header/intro STRUCTURE from index pages to all /games/<game>/index.html pages.
+Correct the Asteroids sample launch targets only.
+Ensure the card uses exactly:
+- /games/Asteroids/index.html
+- /games/Asteroids/index.html?debug=1
 
-STRICT:
-- Do NOT change or set any colors
-- Do NOT modify CSS tokens
-- Only reuse structure and existing classes
-- No changes outside header section
-- Preserve all existing game functionality
-
-Update roadmap status if execution-backed.
-Write validation report under docs/dev/reports.
+Do not reference asteroids_new anywhere.
+Do not change other samples, asset files, or layout.
+Update roadmap status only if this execution is test-backed and appropriate.
+Write validation findings under docs/dev/reports.

docs/dev/commit_comment.txt

@@ -1,2 +1,3 @@
-Apply header structure parity to all game detail pages.
-No color or style changes. Structure reuse only.
+Correct Asteroids sample play/debug links to existing game path.
+Remove incorrect target usage that referenced nonexistent asteroids_new assets.
+Scoped fix only.

docs/dev/reports/validation_checklist.txt

@@ -1,7 +1,7 @@
 # Validation Checklist
 
-- [ ] All game pages include header structure
-- [ ] Header overlays correctly
-- [ ] No color changes introduced
-- [ ] No regressions in gameplay
-- [ ] No layout issues
+- [ ] Asteroids Play link resolves to /games/Asteroids/index.html
+- [ ] Asteroids Debug link resolves to /games/Asteroids/index.html?debug=1
+- [ ] No asteroids_new reference remains in the Asteroids sample link target
+- [ ] No other sample cards changed
+- [ ] No duplicate Asteroids launch links

src/engine/input/InputService.js

@@ -169,6 +169,13 @@ export default class InputService {
     }
 
     onMouseMove(event) {
+        const eventTarget = event?.target ?? null;
+        const isCanvasTarget = typeof HTMLCanvasElement !== 'undefined'
+            && eventTarget instanceof HTMLCanvasElement;
+        if (!isCanvasTarget) {
+            return;
+        }
+
         const nextX = event.offsetX ?? event.clientX ?? 0;
         const nextY = event.offsetY ?? event.clientY ?? 0;
         this.mouseDelta.x += nextX - this.mousePosition.x;

src/engine/theme/mount-shared-header.js

@@ -1,49 +1,6 @@
-import { createToolboxAidHeader } from './index.js';
+import { mountToolboxAidHeader } from './index.js';
 
-const mountRoot = document.getElementById('shared-theme-header-root') || document.getElementById('shared-theme-header');
-if (mountRoot) {
-  const shell = document.createElement('details');
-  shell.className = 'is-collapsible';
-  shell.open = true;
-
-  const summary = document.createElement('summary');
-  summary.className = 'is-collapsible__summary';
-  summary.textContent = 'Header and Intro';
-
-  const content = document.createElement('div');
-  content.className = 'is-collapsible__content';
-
-  const headerTarget = document.createElement('div');
-  headerTarget.id = 'shared-theme-header';
-
-  const introMain = document.createElement('main');
-  introMain.className = 'page-shell';
-
-  const introSection = document.createElement('section');
-  introSection.className = 'page-intro';
-
-  const introTitle = document.createElement('h1');
-  introTitle.className = 'page-intro-title';
-
-  const introDetails = document.createElement('p');
-  introDetails.className = 'page-intro-details';
-
-  introSection.append(introTitle, introDetails);
-  introMain.append(introSection);
-  content.append(headerTarget, introMain);
-  shell.append(summary, content);
-
-  mountRoot.replaceWith(shell);
-
-  createToolboxAidHeader().then((headerNode) => {
-    headerTarget.prepend(headerNode);
-    const body = document.body;
-    const fallbackTitle = document.querySelector('body > main h1');
-    const fallbackDetails = document.querySelector('body > main p');
-    const title = body.dataset.headerTitle || fallbackTitle?.textContent?.trim() || '';
-    const details = body.dataset.headerDetails || fallbackDetails?.textContent?.trim() || '';
-
-    introTitle.textContent = title;
-    introDetails.textContent = details;
-  });
+const target = document.getElementById('shared-theme-header');
+if (target) {
+  mountToolboxAidHeader(target);
 }

src/engine/theme/toolboxaid-header.js

@@ -53,7 +53,7 @@ async function loadTemplate() {
   const templateUrl = new URL('./toolboxaid-header.html', import.meta.url);
   const response = await fetch(templateUrl);
   if (!response.ok) {
-    throw new Error('Failed to load src/engine/theme/toolboxaid-header.html');
+    throw new Error('Failed to load toolboxaid-header.html');
   }
 
   templateCache = await response.text();