Route Asteroids demo and attract asteroid rendering through manifest object geometry - PR_26133_125-asteroids-manifest-demo-attract-rendering

Author: DavidQ

docs/dev/reports/PR_26133_125-asteroids-manifest-demo-attract-rendering_report.md

@@ -0,0 +1,35 @@
+# PR_26133_125 Asteroids Manifest Demo Attract Rendering Report
+
+## Summary
+
+- Demo and Attract asteroid rendering now routes large, medium, and small asteroids through the shared Object Vector runtime renderer.
+- Demo/Attract asteroid bindings use the same manifest object IDs as gameplay:
+  - `object.asteroids.large-asteroid`
+  - `object.asteroids.medium-asteroid`
+  - `object.asteroids.small-asteroid`
+- Gameplay asteroid rendering now passes the validated manifest object ID with `requireManifestBinding: true`, so background world asteroids shown during menu/attract screens also stay manifest-bound.
+- Manifest-authored shape styles remain the rendering source; no asteroid colors, maps, or geometry were copied into Demo/Attract code.
+
+## Cleanup Decisions
+
+- Replaced the attract-only asteroid ID alias with explicit asteroid object IDs in `ASTEROIDS_OBJECT_GEOMETRY_IDS`.
+- Added a small Demo/Attract asteroid binding helper that supplies object key, exact manifest object ID, and manifest-binding enforcement while leaving geometry and style to `ObjectVectorRuntimeAssetService`.
+- Kept `attractAsteroid` only as the diagnostics render-count bucket so existing runtime diagnostics still report attract asteroid rendering.
+- Did not change ship flame shapes/states or asteroid manifest geometry/scale data.
+
+## Validation
+
+- PASS `node -e "import('./tests/games/AsteroidsPresentation.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsPresentation'))"`
+- PASS `node -e "import('./tests/games/AsteroidsValidation.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsValidation'))"`
+- PASS `node -e "import('./tests/games/AsteroidsPlatformDemo.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsPlatformDemo'))"`
+- PASS `node -e "import('./tests/games/AsteroidsAssetReferenceAdoption.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsAssetReferenceAdoption'))"`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "loads Object Vector Studio V2 runtime assets into Asteroids gameplay rendering"`
+- PASS `git diff --check` with line-ending warnings only.
+
+## Manual Notes
+
+- Playwright impacted: Yes.
+- Playwright validates the Asteroids Object Vector runtime asset path, Demo/Attract asteroid object resolution, and gameplay object render counts.
+- Expected pass behavior: Demo/Attract resolves large, medium, and small asteroid manifest objects and gameplay continues rendering Asteroids objects from Object Vector Studio V2 data.
+- Expected fail behavior: missing or mismatched manifest object IDs fail runtime resolution instead of using a hardcoded Demo/Attract fallback.
+- Full regression and full samples smoke tests were skipped per PR instructions.

games/Asteroids/game.manifest.json

@@ -256,6 +256,36 @@
                 "x": 0,
                 "y": 0
               }
+            },
+            {
+              "tool": "line",
+              "order": 1,
+              "visible": true,
+              "locked": false,
+              "geometry": {
+                "point1": {
+                  "x": -16,
+                  "y": 2
+                },
+                "point2": {
+                  "x": -3,
+                  "y": 2
+                }
+              },
+              "style": {
+                "fill": "#00000000",
+                "stroke": "#F87171",
+                "strokeWidth": 2,
+                "fillOpacity": 1,
+                "strokeOpacity": 1
+              },
+              "transform": {
+                "rotation": 0,
+                "scaleX": 1,
+                "scaleY": 1,
+                "x": 0,
+                "y": 0
+              }
             }
           ],
           "states": [
@@ -271,7 +301,7 @@
                     {
                       "shapeIndex": 0,
                       "transform": {
-                        "rotation": 0,
+                        "rotation": 90,
                         "scaleX": 1,
                         "scaleY": 1,
                         "x": 0,
@@ -1209,7 +1239,7 @@
               },
               "style": {
                 "fill": "#00000000",
-                "stroke": "#94A3B8",
+                "stroke": "#FFBE64",
                 "strokeWidth": 2,
                 "fillOpacity": 1,
                 "strokeOpacity": 1

games/Asteroids/game/AsteroidsAttractAdapter.js

@@ -7,6 +7,21 @@ AsteroidsAttractAdapter.js
 import { clamp } from '../../../src/shared/utils/mathUtils.js';
 import { ASTEROIDS_OBJECT_GEOMETRY_IDS } from './asteroidsObjectGeometryManifest.js';
 
+const ATTRACT_ASTEROID_RENDER_BINDINGS = Object.freeze({
+  large: Object.freeze({
+    objectId: ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidLarge,
+    objectKey: 'asteroidLarge',
+  }),
+  medium: Object.freeze({
+    objectId: ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidMedium,
+    objectKey: 'asteroidMedium',
+  }),
+  small: Object.freeze({
+    objectId: ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidSmall,
+    objectKey: 'asteroidSmall',
+  }),
+});
+
 function estimateTextWidth(text, fontPx) {
   return String(text ?? '').length * (fontPx * 0.62);
 }
@@ -89,6 +104,23 @@ export default class AsteroidsAttractAdapter {
     return clamp(timing.alpha, 0, 1);
   }
 
+  drawManifestAsteroid(renderer, sizeKey, options = {}) {
+    const binding = ATTRACT_ASTEROID_RENDER_BINDINGS[sizeKey];
+    if (!binding) {
+      return;
+    }
+
+    this.scene?.drawObjectVectorAsset?.(renderer, 'attractAsteroid', {
+      ...this.scene.objectVectorTagOptions(binding.objectKey),
+      elapsedMs: this.scene.objectVectorPlaybackMs,
+      fps: 12,
+      objectId: binding.objectId,
+      requireManifestBinding: true,
+      stateId: 'active',
+      ...options,
+    });
+  }
+
   renderTitle(renderer, alpha) {
     drawTextPanel(renderer, {
       cx: 480,
@@ -131,16 +163,20 @@ export default class AsteroidsAttractAdapter {
       x: 328,
       y: 348,
     });
-    this.scene?.drawObjectVectorAsset?.(renderer, 'attractAsteroid', {
-      ...this.scene.objectVectorTagOptions('asteroidLarge'),
-      elapsedMs: this.scene.objectVectorPlaybackMs,
-      fps: 12,
-      objectId: ASTEROIDS_OBJECT_GEOMETRY_IDS.attractAsteroid,
-      scale: 0.72,
-      stateId: 'active',
+    this.drawManifestAsteroid(renderer, 'large', {
       x: 632,
       y: 352,
     });
+    this.drawManifestAsteroid(renderer, 'medium', {
+      rotation: 0.34,
+      x: 698,
+      y: 316,
+    });
+    this.drawManifestAsteroid(renderer, 'small', {
+      rotation: -0.46,
+      x: 594,
+      y: 306,
+    });
   }
 
   renderHighScores(renderer, alpha) {
@@ -220,17 +256,20 @@ export default class AsteroidsAttractAdapter {
       y,
     });
 
-    const rockX = 480 + Math.sin(this.demoTime * 0.5) * 250;
-    const rockY = 330 + Math.cos(this.demoTime * 0.9) * 120;
-    this.scene?.drawObjectVectorAsset?.(renderer, 'attractAsteroid', {
-      ...this.scene.objectVectorTagOptions('asteroidLarge'),
-      elapsedMs: this.scene.objectVectorPlaybackMs,
-      fps: 12,
-      objectId: ASTEROIDS_OBJECT_GEOMETRY_IDS.attractAsteroid,
-      scale: 0.72,
-      stateId: 'active',
-      x: rockX,
-      y: rockY,
+    this.drawManifestAsteroid(renderer, 'large', {
+      rotation: this.demoTime * 0.25,
+      x: 480 + Math.sin(this.demoTime * 0.5) * 250,
+      y: 330 + Math.cos(this.demoTime * 0.9) * 120,
+    });
+    this.drawManifestAsteroid(renderer, 'medium', {
+      rotation: -this.demoTime * 0.31,
+      x: 520 + Math.sin((this.demoTime * 0.78) + 1.4) * 190,
+      y: 356 + Math.cos((this.demoTime * 0.64) + 0.7) * 96,
+    });
+    this.drawManifestAsteroid(renderer, 'small', {
+      rotation: this.demoTime * 0.42,
+      x: 430 + Math.sin((this.demoTime * 0.92) + 2.2) * 154,
+      y: 318 + Math.cos((this.demoTime * 0.72) + 2.7) * 78,
     });
     this.scene?.drawObjectVectorAsset?.(renderer, 'attractUfo', {
       ...this.scene.objectVectorTagOptions('ufoLarge'),

games/Asteroids/game/AsteroidsGameScene.js

@@ -739,6 +739,8 @@ export default class AsteroidsGameScene extends Scene {
         ...this.objectVectorTagOptions(objectKey),
         elapsedMs: this.objectVectorPlaybackMs,
         fps: 12,
+        objectId: this.objectVectorRuntimeObjectValidation.objectsByKey[objectKey]?.id || "",
+        requireManifestBinding: true,
         rotation: asteroid.angle,
         stateId: "active",
         x: asteroid.x,

games/Asteroids/game/asteroidsObjectGeometryManifest.js

@@ -6,14 +6,18 @@ const ASTEROIDS_OBJECT_VECTOR_TOOL_KEY = 'object-vector-studio-v2';
 const OBJECT_VECTOR_PAYLOAD_KEYS = new Set(['version', 'toolId', 'name', 'objects']);
 
 export const ASTEROIDS_OBJECT_GEOMETRY_IDS = Object.freeze({
-  attractAsteroid: 'object.asteroids.large-asteroid',
+  asteroidLarge: 'object.asteroids.large-asteroid',
+  asteroidMedium: 'object.asteroids.medium-asteroid',
+  asteroidSmall: 'object.asteroids.small-asteroid',
   bullet: 'object.asteroids.bullet',
   attractShip: 'object.asteroids.ship',
   attractUfo: 'object.asteroids.large-ufo',
 });
 
 export const ASTEROIDS_REQUIRED_MANIFEST_GEOMETRY_IDS = Object.freeze([
-  ASTEROIDS_OBJECT_GEOMETRY_IDS.attractAsteroid,
+  ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidLarge,
+  ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidMedium,
+  ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidSmall,
   ASTEROIDS_OBJECT_GEOMETRY_IDS.attractShip,
   ASTEROIDS_OBJECT_GEOMETRY_IDS.attractUfo,
   ASTEROIDS_OBJECT_GEOMETRY_IDS.bullet,

tests/games/AsteroidsPresentation.test.mjs

@@ -65,13 +65,15 @@ function createObjectVectorRuntime(calls) {
       const object = options.objectId
         ? assetSet.objectsById.get(options.objectId)
         : [...assetSet.objectsById.values()].find((candidate) => objectHasTags(candidate, options.tags || []));
+      const shape = object?.shapes?.[0];
       calls.push({
         objectId: object?.id || options.objectId,
+        requireManifestBinding: options.requireManifestBinding === true,
         renderKey: options.runtimeRole,
+        stroke: shape?.style?.stroke || '',
         stateId: options.stateId,
         tags: options.tags,
       });
-      const shape = object?.shapes?.[0];
       const points = shape?.geometry?.points;
       if (typeof renderer.drawPolygon === 'function' && Array.isArray(points)) {
         renderer.drawPolygon(points, shape.style);
@@ -204,8 +206,13 @@ function testAsteroidsMenuHighScoreUsesLeaderboardTop() {
   assert.equal(textCalls.some(([text]) => text === 'HIGH SCORE 2500'), false);
 }
 
-function testAsteroidsAttractObjectsLoadFromManifestTags() {
+function testAsteroidsAttractAsteroidsUseManifestObjectsAndStyles() {
   const renderCalls = [];
+  const payload = loadAsteroidsObjectVectorPayload();
+  const styleByObjectId = new Map(payload.objects.map((object) => [
+    object.id,
+    object.shapes[0]?.style?.stroke || '',
+  ]));
   const scene = new AsteroidsGameScene(createAsteroidsTestSceneOptions({
     objectVectorAssets: createObjectVectorAssetSet(),
     objectVectorRuntime: createObjectVectorRuntime(renderCalls),
@@ -216,6 +223,7 @@ function testAsteroidsAttractObjectsLoadFromManifestTags() {
 
   const renderer = {
     drawRect() {},
+    drawPolygon() {},
     drawText() {},
   };
 
@@ -228,7 +236,19 @@ function testAsteroidsAttractObjectsLoadFromManifestTags() {
   const objectIds = renderCalls.map((call) => call.objectId);
   assert.equal(objectIds.includes('object.asteroids.ship'), true);
   assert.equal(objectIds.includes('object.asteroids.large-asteroid'), true);
+  assert.equal(objectIds.includes('object.asteroids.medium-asteroid'), true);
+  assert.equal(objectIds.includes('object.asteroids.small-asteroid'), true);
   assert.equal(objectIds.includes('object.asteroids.large-ufo'), true);
+  [
+    'object.asteroids.large-asteroid',
+    'object.asteroids.medium-asteroid',
+    'object.asteroids.small-asteroid',
+  ].forEach((objectId) => {
+    const calls = renderCalls.filter((call) => call.objectId === objectId);
+    assert.equal(calls.length > 0, true);
+    assert.equal(calls.every((call) => call.requireManifestBinding), true);
+    assert.equal(calls.every((call) => call.stroke === styleByObjectId.get(objectId)), true);
+  });
 }
 
 function testAsteroidsGameplayBulletsUseManifestObjectGeometry() {
@@ -322,7 +342,7 @@ export function run() {
   testAsteroidsAttractMenuFlow();
   testAsteroidsGameOverQualifyingScoreInitialsFlow();
   testAsteroidsMenuHighScoreUsesLeaderboardTop();
-  testAsteroidsAttractObjectsLoadFromManifestTags();
+  testAsteroidsAttractAsteroidsUseManifestObjectsAndStyles();
   testAsteroidsGameplayBulletsUseManifestObjectGeometry();
   testAsteroidsGameplayRenderDoesNotCoverBackgroundLayer();
 }

tests/games/AsteroidsValidation.test.mjs

@@ -160,11 +160,15 @@ export async function run() {
   const objectVectorPayload = manifestPayload.tools['object-vector-studio-v2'];
   assert.equal(Object.hasOwn(objectVectorPayload, 'vectorMaps'), false);
   assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.bullet, 'object.asteroids.bullet');
-  assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractAsteroid, 'object.asteroids.large-asteroid');
+  assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidLarge, 'object.asteroids.large-asteroid');
+  assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidMedium, 'object.asteroids.medium-asteroid');
+  assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidSmall, 'object.asteroids.small-asteroid');
   assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractShip, 'object.asteroids.ship');
   assert.equal(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractUfo, 'object.asteroids.large-ufo');
   assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.bullet).id, 'object.asteroids.bullet');
-  assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractAsteroid).id, 'object.asteroids.large-asteroid');
+  assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidLarge).id, 'object.asteroids.large-asteroid');
+  assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidMedium).id, 'object.asteroids.medium-asteroid');
+  assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.asteroidSmall).id, 'object.asteroids.small-asteroid');
   assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractShip).id, 'object.asteroids.ship');
   assert.equal(objectGeometry.objectsById.get(ASTEROIDS_OBJECT_GEOMETRY_IDS.attractUfo).id, 'object.asteroids.large-ufo');
   ASTEROIDS_REQUIRED_MANIFEST_GEOMETRY_IDS.forEach((id) => {

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -7670,6 +7670,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         scene.attractAdapter.setPhase("demo");
         scene.attractAdapter.startDemo();
       });
+      await page.waitForFunction(() => {
+        const messages = (window.__asteroidsObjectVectorRuntime?.events || [])
+          .map((entry) => entry.message)
+          .join("\n");
+        return messages.includes("Object Vector runtime cache miss for asteroidLarge; cached resolved object object.asteroids.large-asteroid.")
+          && messages.includes("Object Vector runtime cache miss for asteroidMedium; cached resolved object object.asteroids.medium-asteroid.")
+          && messages.includes("Object Vector runtime cache miss for asteroidSmall; cached resolved object object.asteroids.small-asteroid.");
+      });
       await page.waitForFunction(() => {
         const counts = window.__asteroidsObjectVectorRuntime?.renderCounts || {};
         return counts.attractUfo > 0;
@@ -7779,11 +7787,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(diagnostics.objectVectorObjectIds).toEqual(expect.arrayContaining([
         "object.asteroids.bullet",
         "object.asteroids.large-asteroid",
+        "object.asteroids.medium-asteroid",
+        "object.asteroids.small-asteroid",
         "object.asteroids.large-ufo",
         "object.asteroids.ship"
       ]));
       const eventMessages = diagnostics.events.map((entry) => entry.message).join("\n");
       expect(eventMessages).toContain("Object Vector runtime asset load from Asteroids game.manifest.json:tools.object-vector-studio-v2: 7 objects.");
+      expect(eventMessages).toContain("Object Vector runtime cache miss for asteroidLarge; cached resolved object object.asteroids.large-asteroid.");
+      expect(eventMessages).toContain("Object Vector runtime cache miss for asteroidMedium; cached resolved object object.asteroids.medium-asteroid.");
+      expect(eventMessages).toContain("Object Vector runtime cache miss for asteroidSmall; cached resolved object object.asteroids.small-asteroid.");
       expect(eventMessages).toContain("Object Vector runtime cache miss for ship; cached resolved object object.asteroids.ship.");
       expect(eventMessages).toContain("Object Vector runtime cache miss for ufoSmall; cached resolved object object.asteroids.small-ufo.");
       expect(eventMessages).toContain("Object Vector runtime frame resolved: object.asteroids.ship idle/frame-1.");