Fix Asteroids page-window bezel visibility and low-speed vector collision accuracy - PR_26133_107-asteroids-bezel-collision-fixes

Author: DavidQ

docs/dev/reports/PR_26133_107-asteroids-bezel-collision-fixes_report.md

@@ -0,0 +1,40 @@
+# PR_26133_107-asteroids-bezel-collision-fixes
+
+## Summary
+- Preserved the PR_26133_106 Asteroids bezel behavior and validated that the bezel is visible in normal page window mode before fullscreen.
+- Replaced only the Asteroids player-ship vs asteroid collision branch with a local vector polygon overlap check that handles concave asteroid geometry by segment intersection and point containment.
+- Added a no-velocity regression case where the ship overlaps the visible concave edge of the large asteroid and must be destroyed immediately.
+
+## Scope Notes
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Used `tmp/PR_26133_106-asteroids-bezel-rounding-fixes_delta.zip` and `docs/dev/reports/PR_26133_106-asteroids-bezel-rounding-fixes_report.md` as the prior reference.
+- `docs/pr/BUILD_PR.md` is currently an unrelated Level 18 rebase note; this report follows the explicit PR_26133_107 BUILD command from the user.
+- Scope stayed limited to Asteroids bezel validation and Asteroids vector collision accuracy.
+- No sample JSON, `start_of_day`, workspace manifest/schema contracts, or `imageDataUrl` contracts were changed.
+
+## Playwright Impact
+- Playwright impacted: Yes.
+- Validated normal-page Asteroids bezel visibility, fullscreen transparent-window fit preservation, and Object Vector Asteroids runtime rendering through the existing targeted Workspace Manager V2 coverage.
+- Expected pass behavior: the bezel state is visible before fullscreen, fullscreen uses `transparent-window-fit`, Object Vector Asteroids rendering loads, and stationary/slow ship overlap with the visible asteroid polygon destroys the ship.
+- Expected fail behavior: tests fail if the bezel remains fullscreen-only, fullscreen canvas fit regresses, Object Vector Asteroids runtime rendering fails, or the no-velocity concave-edge ship collision is missed.
+
+## Validation Results
+- PASS `node --check games/Asteroids/game/AsteroidsWorld.js`
+- PASS `node --check tests/games/AsteroidsCollisionTimingStress.test.mjs`
+- 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`.
+  - `(51%) games/Asteroids/game/AsteroidsWorld.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 canvas still fits inside the transparent bezel window.
+4. Start a game and let the ship drift slowly, or remain nearly stationary, into the visible edge of a large asteroid.
+5. Expected: the ship is destroyed as soon as its vector hull overlaps the visible vector asteroid polygon, including concave-edge overlap.
+
+## Full Samples Smoke
+- Skipped as requested.
+- Reason: this PR is limited to Asteroids bezel/collision validation and does not modify the shared sample loader, sample JSON, or broad sample runtime behavior.

games/Asteroids/game/AsteroidsWorld.js

@@ -31,6 +31,7 @@ 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;
 
@@ -135,6 +136,116 @@ 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) {
@@ -809,7 +920,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 (arePolygonsColliding(shipPolygon, asteroid.getPoints())) {
+        if (areVectorPolygonsOverlapping(shipPolygon, asteroid.getPoints())) {
           const result = this.splitAsteroid(asteroidIndex);
           this.destroyShip();
           events.scoreEvents.push(result.points);

tests/games/AsteroidsCollisionTimingStress.test.mjs

@@ -91,6 +91,23 @@ export function run() {
   assert.equal(shipImpactEvents.shipDestroyed, true);
   assert.equal(shipImpactWorld.shipActive, false);
 
+  const shipConcaveEdgeWorld = new AsteroidsWorld({ width: 960, height: 720 }, { rng: () => 0.5, asteroidGeometryProfiles });
+  shipConcaveEdgeWorld.ufoSpawnTimer = Number.POSITIVE_INFINITY;
+  shipConcaveEdgeWorld.ship.invulnerable = 0;
+  shipConcaveEdgeWorld.ship.x = 430;
+  shipConcaveEdgeWorld.ship.y = 386;
+  shipConcaveEdgeWorld.ship.vx = 0;
+  shipConcaveEdgeWorld.ship.vy = 0;
+  shipConcaveEdgeWorld.ship.angle = -Math.PI / 2;
+  shipConcaveEdgeWorld.asteroids = [createStationaryAsteroid(shipConcaveEdgeWorld, {
+    x: 480,
+    y: 360,
+    size: 3,
+  })];
+  const shipConcaveEdgeEvents = shipConcaveEdgeWorld.update(0, createInput());
+  assert.equal(shipConcaveEdgeEvents.shipDestroyed, true);
+  assert.equal(shipConcaveEdgeWorld.shipActive, false);
+
   const ufoImpactWorld = new AsteroidsWorld({ width: 960, height: 720 }, { rng: () => 0.5, asteroidGeometryProfiles });
   ufoImpactWorld.ufoSpawnTimer = Number.POSITIVE_INFINITY;
   ufoImpactWorld.asteroids = [createStationaryAsteroid(ufoImpactWorld, { x: 480, y: 360, size: 3 })];