From fb35075b01bccb78a0997206bd83e47d5d8862b7 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 11 Apr 2026 20:17:10 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20arcade=20mode=20crash=20=E2=80=94=20kapl?=
 =?UTF-8?q?ay=20go()=20defers=20scene=20init=20to=20next=20frame?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

k.go('arcade') schedules the scene callback on frameEnd, not synchronously.
start() was called before fighters existed, causing "Cannot read properties
of undefined (reading 'obj')". Fix: await a readiness promise that resolves
once the scene callback has created the fighters.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ArcadeViewer.vue |  4 ++--
 frontend/src/game/ArcadeScene.ts         | 11 ++++++++++-
 frontend/src/game/arcade/types.ts        |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ArcadeViewer.vue b/frontend/src/components/ArcadeViewer.vue
index e39a128..f274ef7 100644
--- a/frontend/src/components/ArcadeViewer.vue
+++ b/frontend/src/components/ArcadeViewer.vue
@@ -151,12 +151,12 @@ async function initScene(): Promise<void> {
     comboTimer = setTimeout(() => { comboInfo.value = null }, 1200)
   })
 
-  // Start
+  // Start (awaits scene readiness — kaplay defers scene init to next frame)
   showAnnouncement('ROUND 1', 1200)
   setTimeout(() => {
     showAnnouncement('FIGHT!', 800)
   }, 1300)
-  scene.start()
+  await scene.start()
 
   // Start input polling
   inputPollId = requestAnimationFrame(pollInput)
diff --git a/frontend/src/game/ArcadeScene.ts b/frontend/src/game/ArcadeScene.ts
index b15d98d..23775b3 100644
--- a/frontend/src/game/ArcadeScene.ts
+++ b/frontend/src/game/ArcadeScene.ts
@@ -156,6 +156,11 @@ export async function createArcadeScene(config: ArcadeConfig): Promise<ArcadeSce
   let fighter1: FighterInstance
   let fighter2: FighterInstance
 
+  // Scene readiness — k.go() defers the scene callback to the next frame end,
+  // so we need to wait for fighters to be created before start() can run.
+  let sceneReady: () => void
+  const sceneReadyPromise = new Promise<void>(resolve => { sceneReady = resolve })
+
   // ═══════════════════════════════════════════════════════════════
   // Scene Setup
   // ═══════════════════════════════════════════════════════════════
@@ -180,6 +185,9 @@ export async function createArcadeScene(config: ArcadeConfig): Promise<ArcadeSce
     fighter1 = createFighter('p1', P1_START_X, 1, player1.name)
     fighter2 = createFighter('p2', P2_START_X, 2, player2.name)
 
+    // Signal that the scene is ready (fighters exist)
+    sceneReady()
+
     // ═══════════════════════════════════════════════════════════
     // Main Game Loop
     // ═══════════════════════════════════════════════════════════
@@ -489,7 +497,8 @@ export async function createArcadeScene(config: ArcadeConfig): Promise<ArcadeSce
   k.go('arcade')
 
   return {
-    start() {
+    async start() {
+      await sceneReadyPromise
       matchOver = false
       p1Wins = 0
       p2Wins = 0
diff --git a/frontend/src/game/arcade/types.ts b/frontend/src/game/arcade/types.ts
index 835f72a..81ac215 100644
--- a/frontend/src/game/arcade/types.ts
+++ b/frontend/src/game/arcade/types.ts
@@ -97,7 +97,7 @@ export interface ArcadeCallbacks {
 }
 
 export interface ArcadeSceneController {
-  start: () => void
+  start: () => Promise<void>
   pause: () => void
   resume: () => void
   destroy: () => void