Move vector collision accuracy to shared handling and fix bezel visibility outside fullscreen - PR_26133_108-shared-vector-collision-and-bezel-fix

Author: DavidQ

docs/dev/reports/PR_26133_108-shared-vector-collision-and-bezel-fix_report.md

@@ -0,0 +1,46 @@
+# PR_26133_108-shared-vector-collision-and-bezel-fix
+
+## Summary
+- Promoted concave vector polygon collision accuracy into the shared `arePolygonsColliding` engine path.
+- Removed the duplicated Asteroids-only vector collision helpers so Asteroids bullet, UFO, ship, and asteroid polygon collisions all use the shared collision path.
+- Hardened fullscreen bezel image attachment so the overlay is tracked before loading and syncs visible immediately after image readiness in normal and fullscreen modes.
+- Added targeted shared collision, Asteroids collision, and Asteroids bezel assertions.
+
+## Scope Notes
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Used the PR_26133_107 report/current baseline as prior reference; `tmp/PR_26133_107-asteroids-bezel-collision-fixes_delta.zip` was not present in this workspace.
+- Scope stayed limited to shared vector collision accuracy and bezel visibility.
+- No sample JSON, `start_of_day`, workspace manifest/schema contracts, or `imageDataUrl` contracts were changed.
+
+## Playwright Impact
+- Playwright impacted: Yes.
+- Validated Asteroids normal-page bezel display, fullscreen bezel display, fullscreen transparent-window canvas fit, and Object Vector Asteroids runtime rendering.
+- Expected pass behavior: the actual bezel image is mounted, `display:block`, and sized in both normal page window mode and fullscreen mode; shared vector collision detects concave edge overlaps and avoids concave notch false positives.
+- Expected fail behavior: tests fail if the bezel is fullscreen-only, the overlay image is not visibly mounted, fullscreen canvas fit regresses, or vector polygon collision falls back to convex-only SAT behavior.
+
+## Validation Results
+- PASS `node --check src/engine/collision/polygon.js`
+- PASS `node --check games/Asteroids/game/AsteroidsWorld.js`
+- PASS `node --check src/engine/runtime/fullscreenBezel.js`
+- PASS `node --check tests/final/PrecisionCollisionSystems.test.mjs`
+- PASS `node --check tests/games/AsteroidsCollisionTimingStress.test.mjs`
+- PASS `node --input-type=module -e "import { run } from './tests/final/PrecisionCollisionSystems.test.mjs'; run();"`
+- PASS `node --input-type=module -e "import { run } from './tests/games/AsteroidsCollisionTimingStress.test.mjs'; run();"`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "fits the game canvas inside the fullscreen play area|loads Object Vector Studio V2 runtime assets into Asteroids gameplay rendering" --project=playwright --workers=1 --reporter=list` (2 passed)
+- PASS `npm run test:workspace-v2` (56 passed)
+- PASS `git diff --check`
+- PASS Playwright V8 coverage report generated at `docs/dev/reports/playwright_v8_coverage_report.txt`.
+  - `(57%) games/Asteroids/game/AsteroidsWorld.js - changed JS file with browser V8 coverage`
+  - `(88%) src/engine/runtime/fullscreenBezel.js - changed JS file with browser V8 coverage`
+  - `(91%) src/engine/collision/polygon.js - changed JS file with browser V8 coverage`
+
+## Manual Validation
+1. Open `/games/Asteroids/index.html`.
+2. Confirm the bezel is visible around the canvas before entering fullscreen.
+3. Click the canvas to enter fullscreen and confirm the bezel remains visible and the canvas fits inside the transparent bezel window.
+4. Start a game and verify slow or stationary ship overlap with the visible large-asteroid vector edge destroys the ship.
+5. Verify bullets and UFOs do not trigger hits while sitting in the concave empty notch of the visible large asteroid.
+
+## Full Samples Smoke
+- Skipped as requested.
+- Reason: this PR is limited to shared vector collision behavior, Asteroids collision/bezel validation, and does not modify shared sample loading, sample JSON, or broad sample runtime behavior.

games/Asteroids/game/AsteroidsWorld.js

@@ -31,7 +31,6 @@ const WAVE_SPAWN_MARGIN_Y = 120;
 const WAVE_SPAWN_ATTEMPTS = 60;
 const ASTEROID_SPAWN_SAFE_PADDING = 24;
 const MAX_UPDATE_STEP_SECONDS = 1 / 60;
-const VECTOR_COLLISION_EPSILON = 0.000001;
 let hasLoggedWorldConstruction = false;
 let hasLoggedWorldStartGame = false;
 
@@ -136,116 +135,6 @@ function getRectOverlapDepth(x, y, radius, rect) {
   return Math.max(0, Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom));
 }
 
-function isFiniteVectorPoint(point) {
-  return Number.isFinite(point?.x) && Number.isFinite(point?.y);
-}
-
-function areVectorPointsEqual(left, right) {
-  return Math.abs(left.x - right.x) <= VECTOR_COLLISION_EPSILON
-    && Math.abs(left.y - right.y) <= VECTOR_COLLISION_EPSILON;
-}
-
-function normalizeVectorPolygon(points) {
-  if (!Array.isArray(points)) {
-    return [];
-  }
-
-  const polygon = points
-    .filter(isFiniteVectorPoint)
-    .map((point) => ({ x: point.x, y: point.y }));
-
-  if (polygon.length > 1 && areVectorPointsEqual(polygon[0], polygon[polygon.length - 1])) {
-    polygon.pop();
-  }
-
-  return polygon;
-}
-
-function vectorCross(start, end, point) {
-  return ((end.x - start.x) * (point.y - start.y)) - ((end.y - start.y) * (point.x - start.x));
-}
-
-function isPointOnVectorSegment(point, start, end) {
-  if (Math.abs(vectorCross(start, end, point)) > VECTOR_COLLISION_EPSILON) {
-    return false;
-  }
-
-  return point.x >= Math.min(start.x, end.x) - VECTOR_COLLISION_EPSILON
-    && point.x <= Math.max(start.x, end.x) + VECTOR_COLLISION_EPSILON
-    && point.y >= Math.min(start.y, end.y) - VECTOR_COLLISION_EPSILON
-    && point.y <= Math.max(start.y, end.y) + VECTOR_COLLISION_EPSILON;
-}
-
-function areVectorSegmentsIntersecting(leftStart, leftEnd, rightStart, rightEnd) {
-  const leftStartToRightStart = vectorCross(leftStart, leftEnd, rightStart);
-  const leftStartToRightEnd = vectorCross(leftStart, leftEnd, rightEnd);
-  const rightStartToLeftStart = vectorCross(rightStart, rightEnd, leftStart);
-  const rightStartToLeftEnd = vectorCross(rightStart, rightEnd, leftEnd);
-
-  if (isPointOnVectorSegment(rightStart, leftStart, leftEnd)
-    || isPointOnVectorSegment(rightEnd, leftStart, leftEnd)
-    || isPointOnVectorSegment(leftStart, rightStart, rightEnd)
-    || isPointOnVectorSegment(leftEnd, rightStart, rightEnd)) {
-    return true;
-  }
-
-  return ((leftStartToRightStart > VECTOR_COLLISION_EPSILON && leftStartToRightEnd < -VECTOR_COLLISION_EPSILON)
-      || (leftStartToRightStart < -VECTOR_COLLISION_EPSILON && leftStartToRightEnd > VECTOR_COLLISION_EPSILON))
-    && ((rightStartToLeftStart > VECTOR_COLLISION_EPSILON && rightStartToLeftEnd < -VECTOR_COLLISION_EPSILON)
-      || (rightStartToLeftStart < -VECTOR_COLLISION_EPSILON && rightStartToLeftEnd > VECTOR_COLLISION_EPSILON));
-}
-
-function isPointInsideVectorPolygon(point, polygon) {
-  let inside = false;
-
-  for (let index = 0, previousIndex = polygon.length - 1; index < polygon.length; previousIndex = index, index += 1) {
-    const current = polygon[index];
-    const previous = polygon[previousIndex];
-
-    if (isPointOnVectorSegment(point, previous, current)) {
-      return true;
-    }
-
-    const crossesRay = (current.y > point.y) !== (previous.y > point.y);
-    if (crossesRay) {
-      const rayX = ((previous.x - current.x) * (point.y - current.y)) / (previous.y - current.y) + current.x;
-      if (point.x < rayX) {
-        inside = !inside;
-      }
-    }
-  }
-
-  return inside;
-}
-
-function areVectorPolygonsOverlapping(leftPoints, rightPoints) {
-  const leftPolygon = normalizeVectorPolygon(leftPoints);
-  const rightPolygon = normalizeVectorPolygon(rightPoints);
-
-  if (leftPolygon.length < 3 || rightPolygon.length < 3) {
-    return false;
-  }
-
-  for (let leftIndex = 0; leftIndex < leftPolygon.length; leftIndex += 1) {
-    const leftStart = leftPolygon[leftIndex];
-    const leftEnd = leftPolygon[(leftIndex + 1) % leftPolygon.length];
-
-    for (let rightIndex = 0; rightIndex < rightPolygon.length; rightIndex += 1) {
-      if (areVectorSegmentsIntersecting(
-        leftStart,
-        leftEnd,
-        rightPolygon[rightIndex],
-        rightPolygon[(rightIndex + 1) % rightPolygon.length]
-      )) {
-        return true;
-      }
-    }
-  }
-
-  return leftPolygon.some((point) => isPointInsideVectorPolygon(point, rightPolygon))
-    || rightPolygon.some((point) => isPointInsideVectorPolygon(point, leftPolygon));
-}
-
 export default class AsteroidsWorld {
   constructor(bounds, { rng = Math.random, asteroidGeometryProfiles = null } = {}) {
     if (!hasLoggedWorldConstruction) {
@@ -920,7 +809,7 @@ export default class AsteroidsWorld {
       const shipPolygon = this.ship.getPoints();
       for (let asteroidIndex = this.asteroids.length - 1; asteroidIndex >= 0; asteroidIndex -= 1) {
         const asteroid = this.asteroids[asteroidIndex];
-        if (areVectorPolygonsOverlapping(shipPolygon, asteroid.getPoints())) {
+        if (arePolygonsColliding(shipPolygon, asteroid.getPoints())) {
           const result = this.splitAsteroid(asteroidIndex);
           this.destroyShip();
           events.scoreEvents.push(result.points);

src/engine/collision/polygon.js

@@ -4,41 +4,65 @@ David Quesenberry
 03/22/2026
 polygon.js
 */
-function projectPolygon(points, axis) {
-  let min = Infinity;
-  let max = -Infinity;
-
-  for (const point of points) {
-    const projection = (point.x * axis.x) + (point.y * axis.y);
-    min = Math.min(min, projection);
-    max = Math.max(max, projection);
+const POLYGON_COLLISION_EPSILON = 0.000001;
+
+function isFinitePolygonPoint(point) {
+  return Number.isFinite(point?.x) && Number.isFinite(point?.y);
+}
+
+function arePolygonPointsEqual(left, right) {
+  return Math.abs(left.x - right.x) <= POLYGON_COLLISION_EPSILON
+    && Math.abs(left.y - right.y) <= POLYGON_COLLISION_EPSILON;
+}
+
+function normalizePolygon(points) {
+  if (!Array.isArray(points)) {
+    return [];
+  }
+
+  const polygon = points
+    .filter(isFinitePolygonPoint)
+    .map((point) => ({ x: point.x, y: point.y }));
+
+  if (polygon.length > 1 && arePolygonPointsEqual(polygon[0], polygon[polygon.length - 1])) {
+    polygon.pop();
   }
 
-  return { min, max };
+  return polygon;
 }
 
-function getAxes(points) {
-  const axes = [];
-
-  for (let index = 0; index < points.length; index += 1) {
-    const current = points[index];
-    const next = points[(index + 1) % points.length];
-    const edge = {
-      x: next.x - current.x,
-      y: next.y - current.y,
-    };
-    const normal = {
-      x: -edge.y,
-      y: edge.x,
-    };
-    const length = Math.hypot(normal.x, normal.y) || 1;
-    axes.push({
-      x: normal.x / length,
-      y: normal.y / length,
-    });
+function polygonCross(start, end, point) {
+  return ((end.x - start.x) * (point.y - start.y)) - ((end.y - start.y) * (point.x - start.x));
+}
+
+function isPointOnPolygonSegment(point, start, end) {
+  if (Math.abs(polygonCross(start, end, point)) > POLYGON_COLLISION_EPSILON) {
+    return false;
+  }
+
+  return point.x >= Math.min(start.x, end.x) - POLYGON_COLLISION_EPSILON
+    && point.x <= Math.max(start.x, end.x) + POLYGON_COLLISION_EPSILON
+    && point.y >= Math.min(start.y, end.y) - POLYGON_COLLISION_EPSILON
+    && point.y <= Math.max(start.y, end.y) + POLYGON_COLLISION_EPSILON;
+}
+
+function arePolygonSegmentsIntersecting(leftStart, leftEnd, rightStart, rightEnd) {
+  const leftStartToRightStart = polygonCross(leftStart, leftEnd, rightStart);
+  const leftStartToRightEnd = polygonCross(leftStart, leftEnd, rightEnd);
+  const rightStartToLeftStart = polygonCross(rightStart, rightEnd, leftStart);
+  const rightStartToLeftEnd = polygonCross(rightStart, rightEnd, leftEnd);
+
+  if (isPointOnPolygonSegment(rightStart, leftStart, leftEnd)
+    || isPointOnPolygonSegment(rightEnd, leftStart, leftEnd)
+    || isPointOnPolygonSegment(leftStart, rightStart, rightEnd)
+    || isPointOnPolygonSegment(leftEnd, rightStart, rightEnd)) {
+    return true;
   }
 
-  return axes;
+  return ((leftStartToRightStart > POLYGON_COLLISION_EPSILON && leftStartToRightEnd < -POLYGON_COLLISION_EPSILON)
+      || (leftStartToRightStart < -POLYGON_COLLISION_EPSILON && leftStartToRightEnd > POLYGON_COLLISION_EPSILON))
+    && ((rightStartToLeftStart > POLYGON_COLLISION_EPSILON && rightStartToLeftEnd < -POLYGON_COLLISION_EPSILON)
+      || (rightStartToLeftStart < -POLYGON_COLLISION_EPSILON && rightStartToLeftEnd > POLYGON_COLLISION_EPSILON));
 }
 
 export function getPolygonBounds(points) {
@@ -53,33 +77,72 @@ export function getPolygonBounds(points) {
 }
 
 export function isPointInPolygon(point, polygon) {
+  if (!isFinitePolygonPoint(point)) {
+    return false;
+  }
+
+  const normalizedPolygon = normalizePolygon(polygon);
+  if (normalizedPolygon.length < 3) {
+    return false;
+  }
+
   let inside = false;
 
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x;
-    const yi = polygon[i].y;
-    const xj = polygon[j].x;
-    const yj = polygon[j].y;
-    const intersects = ((yi > point.y) !== (yj > point.y))
-      && (point.x < ((xj - xi) * (point.y - yi)) / ((yj - yi) || 0.00001) + xi);
-    if (intersects) {
-      inside = !inside;
+  for (let index = 0, previousIndex = normalizedPolygon.length - 1; index < normalizedPolygon.length; previousIndex = index, index += 1) {
+    const current = normalizedPolygon[index];
+    const previous = normalizedPolygon[previousIndex];
+
+    if (isPointOnPolygonSegment(point, previous, current)) {
+      return true;
+    }
+
+    const crossesRay = (current.y > point.y) !== (previous.y > point.y);
+    if (crossesRay) {
+      const rayX = ((previous.x - current.x) * (point.y - current.y)) / (previous.y - current.y) + current.x;
+      if (point.x < rayX) {
+        inside = !inside;
+      }
     }
   }
 
   return inside;
 }
 
-export function arePolygonsColliding(a, b) {
-  const axes = [...getAxes(a), ...getAxes(b)];
+export function arePolygonsColliding(leftPoints, rightPoints) {
+  const leftPolygon = normalizePolygon(leftPoints);
+  const rightPolygon = normalizePolygon(rightPoints);
+
+  if (leftPolygon.length < 3 || rightPolygon.length < 3) {
+    return false;
+  }
+
+  for (let leftIndex = 0; leftIndex < leftPolygon.length; leftIndex += 1) {
+    const leftStart = leftPolygon[leftIndex];
+    const leftEnd = leftPolygon[(leftIndex + 1) % leftPolygon.length];
+
+    for (let rightIndex = 0; rightIndex < rightPolygon.length; rightIndex += 1) {
+      if (arePolygonSegmentsIntersecting(
+        leftStart,
+        leftEnd,
+        rightPolygon[rightIndex],
+        rightPolygon[(rightIndex + 1) % rightPolygon.length]
+      )) {
+        return true;
+      }
+    }
+  }
+
+  for (const point of leftPolygon) {
+    if (isPointInPolygon(point, rightPolygon)) {
+      return true;
+    }
+  }
 
-  for (const axis of axes) {
-    const projectionA = projectPolygon(a, axis);
-    const projectionB = projectPolygon(b, axis);
-    if (projectionA.max < projectionB.min || projectionB.max < projectionA.min) {
-      return false;
+  for (const point of rightPolygon) {
+    if (isPointInPolygon(point, leftPolygon)) {
+      return true;
     }
   }
 
-  return true;
+  return false;
 }

src/engine/runtime/fullscreenBezel.js

@@ -928,6 +928,11 @@ export default class fullscreenBezel {
       this.refreshStretchConfig();
       this.ready = true;
       this.missing = false;
+      const fullscreenElement = this.documentRef?.fullscreenElement || null;
+      this.sync({
+        fullscreenActive: !!fullscreenElement,
+        fullscreenElement
+      });
     };
     element.onerror = () => {
       this.ready = false;
@@ -937,10 +942,9 @@ export default class fullscreenBezel {
       this.imageSize = null;
       this.applyCanvasNormalLayout();
     };
-    element.src = resolveRuntimeAssetUrl(this.path, this.documentRef);
-
-    this.host.appendChild?.(element);
     this.element = element;
+    this.host.appendChild?.(element);
+    element.src = resolveRuntimeAssetUrl(this.path, this.documentRef);
   }
 
   detach() {