create-remix-game 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-remix-game",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "CLI for scaffolding Remix games",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",

package/templates/base/src/main.ts.template

@@ -1,11 +1,8 @@
 import { initRemix } from "@insidethesim/remix-dev"
-import { initializeSDKMock } from "@insidethesim/remix-dev/mocks"
 import { GameScene } from "./scenes/GameScene"
 import GameSettings from "./config/GameSettings"
 
-// Initialize SDK mock BEFORE creating the game
-// This ensures window.FarcadeSDK exists when scenes are created
-await initializeSDKMock()
+// SDK mock is automatically initialized by the framework (dev-init.ts)
 
 // Game configuration
 const config: Phaser.Types.Core.GameConfig = {
@@ -33,6 +30,9 @@ const config: Phaser.Types.Core.GameConfig = {
 // Create the game instance
 const game = new Phaser.Game(config)
 
+// Store globally for performance monitoring and HMR cleanup
+;(window as any).game = game
+
 // Initialize Remix framework after game is created
 game.events.once("ready", () => {
   initRemix(game, {

package/templates/base/src/scenes/DemoScene.ts

@@ -1,9 +1,13 @@
+import type { FarcadeSDK, GameInfo } from '@farcade/game-sdk'
 import GameSettings from '../config/GameSettings'
 
-// Declare the FarcadeSDK type on window
+// Extend the Player type from SDK
+type Player = GameInfo['players'][number]
+
+// Declare the FarcadeSDK on window
 declare global {
   interface Window {
-    FarcadeSDK: any
+    FarcadeSDK: FarcadeSDK
     debugLogs: string[]
   }
 }
@@ -18,14 +22,10 @@ interface Ball {
 
 export class DemoScene extends Phaser.Scene {
   private balls: Ball[] = []
-  private clickCount: number = 0
-  private clickText?: Phaser.GameObjects.Text
   private gameOver: boolean = false
   private elementsCreated: boolean = false
 
-  // Color selection state
-  private selectedColor: 'green' | 'blue' | 'red' = 'green'
-  private colorSwatches: Phaser.GameObjects.Container | undefined
+  // Color values
   private colorValues = {
     green: 0x33ff00,
     blue: 0x0099ff,
@@ -34,10 +34,27 @@ export class DemoScene extends Phaser.Scene {
 
   // Multiplayer support
   private isMultiplayer: boolean = false
-  private players: Array<{ id: string; name: string; imageUrl?: string }> = []
+  private players: Player[] = []
   private meId: string = '1'
-  private otherPlayerClicks: number = 0
-  private allClickCounts: { [key: string]: number } = {}
+
+  // Per-player state (works for both single and multiplayer)
+  private playerStates: {
+    [playerId: string]: {
+      color: 'green' | 'blue' | 'red'
+      score: number
+    }
+  } = {}
+
+  // Turn-based multiplayer state
+  private currentTurnPlayerId: string = '1'
+  private roundNumber: number = 0
+  private lastSentStateId?: string // Track last state we sent to avoid processing our own updates
+
+  // UI Elements
+  private player1ScoreText?: Phaser.GameObjects.Text
+  private player2ScoreText?: Phaser.GameObjects.Text
+  private turnIndicatorText?: Phaser.GameObjects.Text
+  private colorSwatches?: Phaser.GameObjects.Container
 
   constructor() {
     super({ key: 'DemoScene' })
@@ -45,6 +62,121 @@ export class DemoScene extends Phaser.Scene {
 
   preload(): void {}
 
+  // ========== Helper Methods ==========
+
+  private initializePlayerState(playerId: string): void {
+    if (!this.playerStates[playerId]) {
+      // In multiplayer, assign fixed colors based on player order
+      let assignedColor: 'green' | 'blue' | 'red' = 'green'
+      if (this.isMultiplayer && this.players.length >= 2) {
+        // Player 1 (players[0]) = green, Player 2 (players[1]) = red
+        const playerIndex = this.players.findIndex((p) => p.id === playerId)
+        assignedColor = playerIndex === 1 ? 'red' : 'green'
+      }
+
+      this.playerStates[playerId] = {
+        color: assignedColor,
+        score: 0,
+      }
+    }
+  }
+
+  private getMyState() {
+    this.initializePlayerState(this.meId)
+    return this.playerStates[this.meId]
+  }
+
+  private getPlayerState(playerId: string) {
+    this.initializePlayerState(playerId)
+    return this.playerStates[playerId]
+  }
+
+  private isMyTurn(): boolean {
+    return !this.isMultiplayer || this.currentTurnPlayerId === this.meId
+  }
+
+  private getOtherPlayerId(): string | null {
+    if (!this.isMultiplayer || this.players.length < 2) return null
+    return this.players.find((p) => p.id !== this.meId)?.id || null
+  }
+
+  private switchTurn(): void {
+    if (!this.isMultiplayer) return
+
+    const otherPlayerId = this.getOtherPlayerId()
+    if (otherPlayerId) {
+      this.currentTurnPlayerId = otherPlayerId
+      this.roundNumber++
+    }
+  }
+
+  private getTurnText(): string {
+    if (!this.isMultiplayer) return ''
+    const currentPlayer = this.players.find((p) => p.id === this.currentTurnPlayerId)
+    return this.isMyTurn() ? '⭐ YOUR TURN ⭐' : `${currentPlayer?.name || 'Opponent'}'s Turn`
+  }
+
+  private updateUI(): void {
+    if (this.isMultiplayer && this.players.length >= 2) {
+      const player1 = this.players[0]
+      const player2 = this.players[1]
+
+      if (this.player1ScoreText) {
+        const p1State = this.getPlayerState(player1.id)
+        this.player1ScoreText.setText(`${player1.name}\nScore: ${p1State.score}/3`)
+      }
+
+      if (this.player2ScoreText) {
+        const p2State = this.getPlayerState(player2.id)
+        this.player2ScoreText.setText(`${player2.name}\nScore: ${p2State.score}/3`)
+      }
+
+      if (this.turnIndicatorText) {
+        this.turnIndicatorText.setText(this.getTurnText())
+      }
+    } else if (this.player1ScoreText) {
+      this.player1ScoreText.setText(`Score: ${this.getMyState().score}/3`)
+    }
+  }
+
+  private loadStateFromData(state: any): void {
+    if (!state) return
+
+    if (this.isMultiplayer) {
+      // Multiplayer: load per-player states and turn info
+      if (state.playerStates) {
+        this.playerStates = state.playerStates
+      }
+      if (state.currentTurnPlayerId) {
+        this.currentTurnPlayerId = state.currentTurnPlayerId
+      }
+      if (typeof state.roundNumber === 'number') {
+        this.roundNumber = state.roundNumber
+      }
+      if (typeof state.gameOver === 'boolean') {
+        this.gameOver = state.gameOver
+      }
+    } else {
+      // Single-player: load only color preference (score always starts at 0)
+      const myState = this.getMyState()
+      if (state.color) {
+        myState.color = state.color
+      }
+    }
+  }
+
+  private updateBallColors(): void {
+    // Update ball colors to match current player's color
+    const myColor = this.getMyState().color
+    const colorValue = this.colorValues[myColor]
+
+    this.balls.forEach((ball) => {
+      if (!ball.isPopped) {
+        ball.sprite.setFillStyle(colorValue)
+      }
+    })
+  }
+
   create(): void {
     // Initialize SDK first and wait for it to be ready before creating game elements
     this.initializeSDK()
@@ -57,21 +189,39 @@ export class DemoScene extends Phaser.Scene {
     }
     this.elementsCreated = true
 
-    // Add instructional text
+    console.log(
+      '[DemoScene] Creating game elements, isMultiplayer:',
+      this.isMultiplayer,
+      'players:',
+      this.players.length
+    )
+
+    // Initialize my player state
+    this.initializePlayerState(this.meId)
+
+    // Add title
     const title = this.add
-      .text(GameSettings.canvas.width / 2, GameSettings.canvas.height / 2 - 100, 'Remix SDK Demo', {
-        fontSize: '64px',
-        color: '#ffffff',
-        fontFamily: 'Arial',
-      })
+      .text(
+        GameSettings.canvas.width / 2,
+        GameSettings.canvas.height / 2 - 100,
+        this.isMultiplayer ? 'Turn-Based Demo' : 'Remix SDK Demo',
+        {
+          fontSize: '64px',
+          color: '#ffffff',
+          fontFamily: 'Arial',
+        }
+      )
       .setOrigin(0.5)
       .setDepth(100)
 
+    // Instruction text
     const instruction = this.add
       .text(
         GameSettings.canvas.width / 2,
         GameSettings.canvas.height / 2 - 20,
-        'Pop 3 balls to trigger Game Over!',
+        this.isMultiplayer
+          ? 'Take turns popping balls!\nFirst to 3 wins!'
+          : 'Pop 3 balls to trigger Game Over!',
         {
           fontSize: '32px',
           color: '#ffffff',
@@ -82,22 +232,65 @@ export class DemoScene extends Phaser.Scene {
       .setOrigin(0.5)
       .setDepth(100)
 
-    // Add click counter text (left-aligned)
-    this.clickText = this.add
-      .text(50, 50, 'Score: 0/3', {
-        fontSize: '36px',
-        color: '#ffffff',
-        fontFamily: 'Arial',
-      })
-      .setOrigin(0, 0.5)
-      .setDepth(100)
+    if (this.isMultiplayer && this.players.length >= 2) {
+      // Multiplayer: Show both players' scores
+      const player1 = this.players.find((p) => p.id === '1') || this.players[0]
+      const player2 = this.players.find((p) => p.id === '2') || this.players[1]
 
-    // Create color swatch selector in top right
-    this.createColorSwatches()
+      // Initialize both player states
+      this.initializePlayerState(player1.id)
+      this.initializePlayerState(player2.id)
 
-    // Update UI to reflect loaded state
-    if (this.clickText && this.clickCount > 0) {
-      this.clickText.setText(`Score: ${this.clickCount}/3`)
+      // Player 1 score (left side)
+      this.player1ScoreText = this.add
+        .text(50, 50, `${player1.name}\nScore: ${this.getPlayerState(player1.id).score}/3`, {
+          fontSize: '28px',
+          color: player1.id === this.meId ? '#00ff00' : '#ffffff',
+          fontFamily: 'Arial',
+        })
+        .setOrigin(0, 0.5)
+        .setDepth(100)
+
+      // Player 2 score (right side)
+      this.player2ScoreText = this.add
+        .text(
+          GameSettings.canvas.width - 50,
+          50,
+          `${player2.name}\nScore: ${this.getPlayerState(player2.id).score}/3`,
+          {
+            fontSize: '28px',
+            color: player2.id === this.meId ? '#00ff00' : '#ffffff',
+            fontFamily: 'Arial',
+            align: 'right',
+          }
+        )
+        .setOrigin(1, 0.5)
+        .setDepth(100)
+
+      // Turn indicator (center top)
+      this.turnIndicatorText = this.add
+        .text(GameSettings.canvas.width / 2, 40, this.getTurnText(), {
+          fontSize: '32px',
+          color: '#ffff00',
+          fontFamily: 'Arial',
+        })
+        .setOrigin(0.5)
+        .setDepth(100)
+    } else {
+      // Single player: Show one score
+      this.player1ScoreText = this.add
+        .text(50, 50, `Score: ${this.getMyState().score}/3`, {
+          fontSize: '36px',
+          color: '#ffffff',
+          fontFamily: 'Arial',
+        })
+        .setOrigin(0, 0.5)
+        .setDepth(100)
+    }
+
+    // Create color swatch selector in top right (single-player only)
+    if (!this.isMultiplayer) {
+      this.createColorSwatches()
     }
 
     // Add removal instructions at bottom
@@ -120,10 +313,32 @@ export class DemoScene extends Phaser.Scene {
     // Create bouncing balls
     this.createBalls(15)
 
-    // Don't save state immediately - wait for SDK to be ready
-    // The state will be saved after SDK initialization
+    // Add global click handler for background clicks (in multiplayer)
+    if (this.isMultiplayer) {
+      this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+        // Only process if it's your turn and game is not over
+        if (!this.gameOver && this.isMyTurn()) {
+          // Check if we clicked on a ball by seeing if any ball was clicked
+          let clickedBall = false
+          this.balls.forEach((ball) => {
+            const distance = Phaser.Math.Distance.Between(
+              pointer.x,
+              pointer.y,
+              ball.sprite.x,
+              ball.sprite.y
+            )
+            if (distance <= ball.radius && !ball.isPopped) {
+              clickedBall = true
+            }
+          })
 
-    // Remove global click listener - clicks will be handled per ball
+          // If we didn't click a ball, it's a miss - still counts as turn
+          if (!clickedBall) {
+            this.handleMiss()
+          }
+        }
+      })
+    }
   }
 
   private createBalls(count: number): void {
@@ -132,8 +347,9 @@ export class DemoScene extends Phaser.Scene {
       const x = Phaser.Math.Between(radius, GameSettings.canvas.width - radius)
       const y = Phaser.Math.Between(radius, GameSettings.canvas.height - radius)
 
-      // Use selected color
-      const color = this.colorValues[this.selectedColor]
+      // Use my player's selected color
+      const myColor = this.getMyState().color
+      const color = this.colorValues[myColor]
       const ball = this.add.circle(x, y, radius, color)
       ball.setStrokeStyle(2, 0x000000)
       ball.setInteractive()
@@ -149,6 +365,12 @@ export class DemoScene extends Phaser.Scene {
       // Add click handler to this specific ball
       ball.on('pointerdown', () => {
         if (!this.gameOver && !ballData.isPopped) {
+          // In multiplayer, only allow clicks on your turn
+          if (this.isMultiplayer && !this.isMyTurn()) {
+            // Visual feedback that it's not your turn
+            this.cameras.main.shake(100, 0.002)
+            return
+          }
           this.popBall(ballData)
         }
       })
@@ -265,26 +487,24 @@ export class DemoScene extends Phaser.Scene {
     }
 
     // Determine multiplayer mode based on build configuration
-    // In production, GAME_MULTIPLAYER_MODE will be replaced with true/false by build script
-    try {
-      // @ts-ignore - This will be replaced at build time
-      this.isMultiplayer = GAME_MULTIPLAYER_MODE
-    } catch (error) {
-      // If GAME_MULTIPLAYER_MODE is not defined, we're in a Remix environment
-      // Since package.json says multiplayer: false, we should use single-player mode
-      this.isMultiplayer = false
-    }
+    // GAME_MULTIPLAYER_MODE is set by vite-plugin based on package.json
+    // @ts-ignore - This is defined by Vite's define config
+    this.isMultiplayer =
+      typeof GAME_MULTIPLAYER_MODE !== 'undefined' ? GAME_MULTIPLAYER_MODE : false
+    console.log('[DemoScene] Multiplayer mode:', this.isMultiplayer)
 
     // Set up SDK event listeners
     window.FarcadeSDK.on('play_again', () => {
-      this.restartGame()
-      // Send reset state to other player after restart
-      if (this.isMultiplayer) {
-        // Small delay to ensure state is reset before sending
-        setTimeout(() => {
-          this.sendGameState()
-        }, 10)
+      console.log('[DemoScene] play_again event received, isMultiplayer:', this.isMultiplayer)
+      // In single-player, handle reset locally
+      if (!this.isMultiplayer) {
+        console.log('[DemoScene] Single-player mode, calling restartGame()')
+        this.restartGame()
+      } else {
+        console.log('[DemoScene] Multiplayer mode, waiting for game_state_updated(null)')
       }
+      // In multiplayer, the SDK mock will send game_state_updated(null)
+      // which triggers setupNewGame() via the game_state_updated listener
     })
 
     window.FarcadeSDK.on('toggle_mute', (data: { isMuted: boolean }) => {
@@ -304,66 +524,58 @@ export class DemoScene extends Phaser.Scene {
     if (this.isMultiplayer) {
       // Multiplayer setup - Set up listeners BEFORE calling ready
       window.FarcadeSDK.on('game_state_updated', (gameState: any) => {
+        console.log('[DemoScene] game_state_updated event received:', gameState)
         // Handle it exactly like chess.js does
         if (!gameState) {
+          console.log('[DemoScene] Null state received, calling setupNewGame()')
           this.setupNewGame()
         } else {
           this.handleGameStateUpdate(gameState)
         }
       })
 
-      // Add listener for state loading
-      window.FarcadeSDK.on('load_state', (state: any) => {
-        if (state) {
-          if (state.selectedColor) {
-            this.selectColor(state.selectedColor)
-          }
-          if (typeof state.clickCount === 'number') {
-            this.clickCount = state.clickCount
-            if (this.clickText) {
-              this.clickText.setText(`Score: ${this.clickCount}/3`)
-            }
-          }
-        }
-      })
-
-      // Also listen for restore_game_state events
-      window.FarcadeSDK.on('restore_game_state', (data: any) => {
-        if (data?.gameState) {
-          const state = data.gameState
-          if (state.selectedColor) {
-            this.selectColor(state.selectedColor)
-          }
-          if (typeof state.clickCount === 'number') {
-            this.clickCount = state.clickCount
-            if (this.clickText) {
-              this.clickText.setText(`Score: ${this.clickCount}/3`)
-            }
-          }
-        }
-      })
+      // State updates come through game_state_updated event only
 
       // Call multiplayer ready and await the response
       try {
-        const data = await window.FarcadeSDK.multiplayer.actions.ready()
-        if (data.players) {
-          this.players = data.players
+        const gameInfo = await window.FarcadeSDK.multiplayer.actions.ready()
+
+        // gameInfo structure: { players, player, viewContext, initialGameState }
+        // Extract player data from gameInfo
+        if (gameInfo.players) {
+          this.players = gameInfo.players
         }
-        if (data.meId) {
-          this.meId = data.meId
+        if (gameInfo.player?.id) {
+          this.meId = gameInfo.player.id
         }
-        if (data.initialGameState?.gameState) {
-          const state = data.initialGameState.gameState
-          if (state.selectedColor) {
-            this.selectedColor = state.selectedColor
+
+        // Load initial game state if it exists
+        if (gameInfo.initialGameState?.gameState) {
+          const state = gameInfo.initialGameState.gameState
+          // Check if state is from wrong mode (single-player state in multiplayer)
+          if (!state.playerStates && state.color) {
+            console.log('[DemoScene] Detected single-player state in multiplayer mode, ignoring...')
+            // Don't load it, will send fresh multiplayer state below
+            this.currentTurnPlayerId = this.players[0]?.id || '1'
+          } else {
+            this.loadStateFromData(state)
           }
+        } else {
+          // No existing state - Player 1 starts first turn
+          this.currentTurnPlayerId = this.players[0]?.id || '1'
         }
+
         // Now create game elements after state is loaded
         this.createGameElements()
-        // Send initial state after ready, like chess.js does in setupNewGame
-        setTimeout(() => {
-          this.sendGameState()
-        }, 100)
+
+        // Only Player 0 (first player) sends initial state to avoid infinite loops
+        // Other players will receive the state via game_state_updated event
+        if (gameInfo.initialGameState === null && this.meId === this.players[0]?.id) {
+          // No existing state and I'm Player 0 - send initial state
+          setTimeout(() => {
+            this.sendGameState()
+          }, 100)
+        }
       } catch (error) {
         console.error('Failed to initialize multiplayer SDK:', error)
         // Create game elements anyway if there's an error
@@ -372,14 +584,27 @@ export class DemoScene extends Phaser.Scene {
     } else {
       // Single player - call ready and await it
       try {
-        const data = await window.FarcadeSDK.singlePlayer.actions.ready()
-
-        // Handle any response, including null/undefined
-        if (data?.initialGameState?.gameState) {
-          const state = data.initialGameState.gameState
-          if (state.selectedColor) {
-            this.selectedColor = state.selectedColor
+        const gameInfo = await window.FarcadeSDK.singlePlayer.actions.ready()
+
+        // gameInfo structure: { players, player, viewContext, initialGameState }
+        // initialGameState is the GameStateEnvelope or null
+        if (gameInfo.initialGameState?.gameState) {
+          const state = gameInfo.initialGameState.gameState
+          // Check if state is from wrong mode (multiplayer state in single-player)
+          if (state.playerStates || state.currentTurnPlayerId) {
+            console.log('[DemoScene] Detected multiplayer state in single-player mode, clearing...')
+            // Don't load it, send fresh single-player state instead
+            setTimeout(() => {
+              this.saveGameState()
+            }, 100)
+          } else {
+            this.loadStateFromData(state)
           }
+        } else {
+          // No initial state - send our default state
+          setTimeout(() => {
+            this.saveGameState()
+          }, 100)
         }
       } catch (error) {
         console.error('Failed to initialize single player SDK:', error)
@@ -398,144 +623,120 @@ export class DemoScene extends Phaser.Scene {
       return
     }
 
-    const otherPlayerId = this.players.find((p) => p.id !== this.meId)?.id
+    const otherPlayerId = this.getOtherPlayerId()
 
-    // Include both players' click counts and selected color
+    // Complete game state with per-player data and turn information
+    // IMPORTANT: Deep clone to avoid reference issues
     const stateData = {
-      players: this.players,
-      clickCounts: {
-        [this.meId]: this.clickCount,
-        [otherPlayerId || '2']: this.otherPlayerClicks,
-      },
-      selectedColor: this.selectedColor,
+      playerStates: JSON.parse(JSON.stringify(this.playerStates)),
+      currentTurnPlayerId: this.currentTurnPlayerId,
+      roundNumber: this.roundNumber,
       gameOver: this.gameOver,
     }
 
-    // Call updateGameState directly, no defensive checks - like chess.js
-    window.FarcadeSDK.multiplayer.actions.updateGameState({
-      data: stateData,
+    console.log('[DemoScene] Sending state:', stateData)
+
+    // Use saveGameState instead of updateGameState (this is the SDK 0.2 pattern)
+    // alertUserIds tells the SDK to notify the other player
+    window.FarcadeSDK.multiplayer.actions.saveGameState({
+      gameState: stateData,
       alertUserIds: otherPlayerId ? [otherPlayerId] : [],
     })
+
+    // Store the state data signature to detect our own updates
+    this.lastSentStateId = JSON.stringify(stateData)
   }
 
   private setupNewGame(): void {
+    console.log('[DemoScene] setupNewGame called')
     this.restartGame()
     // Send initial state
     if (this.isMultiplayer) {
-      this.sendGameState()
+      console.log(
+        '[DemoScene] Multiplayer: checking if should send initial state, meId:',
+        this.meId,
+        'player0:',
+        this.players[0]?.id
+      )
+      // Only Player 1 sends initial state
+      if (this.meId === this.players[0]?.id) {
+        console.log('[DemoScene] I am Player 1, sending initial state')
+        this.sendGameState()
+      } else {
+        console.log('[DemoScene] I am not Player 1, waiting for state from Player 1')
+      }
     }
   }
 
-  private handleGameStateUpdate(gameState: any): void {
-    // Handle the game state exactly like chess.js does
-    if (!gameState) {
+  private handleGameStateUpdate(envelope: any): void {
+    // Handle state updates from other players
+    if (!envelope) {
       this.setupNewGame()
       return
     }
 
-    // Chess.js expects { id: string, data: { players, moves } }
-    // We have { id: string, data: { players, clickCounts, gameOver } }
-    const { id, data } = gameState
+    // The envelope structure is: { id, gameState, alertUserIds }
+    const { id, gameState } = envelope
 
-    if (!data) {
+    if (!gameState) {
       this.setupNewGame()
       return
     }
 
-    // Update game state from data
-    if (data.players) {
-      this.players = data.players
-    }
-
-    this.handleStateUpdate(data)
-  }
-
-  private handleStateUpdate(data: any): void {
-    if (!data) {
-      this.restartGame()
+    // Ignore our own state updates (prevents infinite loops)
+    const incomingStateSignature = JSON.stringify(gameState)
+    if (incomingStateSignature === this.lastSentStateId) {
+      console.log('[DemoScene] Ignoring own state update')
       return
     }
 
-    // Update selected color if provided
-    if (data.selectedColor && data.selectedColor !== this.selectedColor) {
-      this.selectColor(data.selectedColor)
-    }
+    console.log('[DemoScene] Processing state update from other player:', gameState)
 
-    // Update all click counts
-    if (data.clickCounts) {
-      this.allClickCounts = { ...data.clickCounts }
+    // Check for game over BEFORE loading state (otherwise this.gameOver will already be true)
+    const wasGameOver = this.gameOver
+    const incomingGameOver = gameState.gameOver === true
 
-      // Update other player's count specifically
-      if (this.players && this.players.length > 0) {
-        const otherPlayerId = this.players.find((p) => p.id !== this.meId)?.id
-        if (otherPlayerId && data.clickCounts[otherPlayerId] !== undefined) {
-          this.otherPlayerClicks = data.clickCounts[otherPlayerId]
-        }
-      }
+    // Check if this is a reset state (all scores at 0, gameOver false, round 0)
+    const isResetState =
+      gameState.gameOver === false &&
+      gameState.roundNumber === 0 &&
+      Object.values(gameState.playerStates || {}).every((state: any) => state.score === 0)
 
-      // Also update our own count if it's different (in case of sync issues)
-      if (
-        data.clickCounts[this.meId] !== undefined &&
-        data.clickCounts[this.meId] !== this.clickCount
-      ) {
-        // Only update if the other player has a higher count (they clicked more recently)
-        if (data.clickCounts[this.meId] > this.clickCount) {
-          this.clickCount = data.clickCounts[this.meId]
-          if (this.clickText) {
-            this.clickText.setText(`Score: ${this.clickCount}/3`)
-          }
-        }
-      }
+    if (isResetState) {
+      console.log('[DemoScene] Received reset state from play_again')
+      // Don't just load state - fully restart to ensure balls and UI are reset
+      this.restartGame()
+      return
     }
 
-    // Check game state changes
-    if (data.gameOver === true && !this.gameOver) {
-      // Store the scores before marking game over
-      if (data.clickCounts) {
-        // Update our knowledge of all click counts
-        const otherPlayerId = this.players?.find((p) => p.id !== this.meId)?.id
-        if (otherPlayerId && data.clickCounts[otherPlayerId] !== undefined) {
-          this.otherPlayerClicks = data.clickCounts[otherPlayerId]
-        }
-        // Also ensure our own count is up to date
-        if (data.clickCounts[this.meId] !== undefined) {
-          this.clickCount = data.clickCounts[this.meId]
-        }
-      }
+    // Load the state
+    this.loadStateFromData(gameState)
 
-      // Mark game over locally
-      this.gameOver = true
+    // Update UI to reflect new state
+    this.updateUI()
 
-      // Trigger game over in SDK for this player too (with the same scores)
-      // This ensures both players see the game over screen
-      if (window.FarcadeSDK) {
-        if (this.isMultiplayer && this.players && this.players.length === 2) {
-          // Build the complete click counts from the received data
-          const scores = this.players.map((player) => ({
-            playerId: player.id,
-            score: data.clickCounts?.[player.id] || 0,
-          }))
+    // Update ball colors based on current player's color
+    this.updateBallColors()
 
-          window.FarcadeSDK.multiplayer.actions.gameOver({ scores })
-        } else {
-          // Fallback for single player mode
-          window.FarcadeSDK.singlePlayer.actions.gameOver({ score: this.clickCount })
-        }
-      }
+    // Trigger game over if incoming state has game over and we didn't already have it
+    if (incomingGameOver && !wasGameOver) {
+      this.triggerGameOver()
     }
   }
 
   private handleClick(): void {
-    this.clickCount++
-    if (this.clickText) {
-      this.clickText.setText(`Score: ${this.clickCount}/3`)
-    }
+    // Increment current player's score
+    const myState = this.getMyState()
+    myState.score++
 
     // Check if this click triggers game over
-    if (this.clickCount >= 3) {
+    if (myState.score >= 3) {
       // Set game over state BEFORE sending state update
       this.gameOver = true
 
+      // Update UI (score changed, game over)
+      this.updateUI()
+
       // Send final state with gameOver = true
       if (this.isMultiplayer) {
         this.sendGameState()
@@ -546,64 +747,91 @@ export class DemoScene extends Phaser.Scene {
         this.triggerGameOver()
       }, 50)
     } else {
-      // Normal click - just send updated count
+      // Normal click - switch turns and send updated state
+      if (this.isMultiplayer) {
+        this.switchTurn()
+      }
+
+      // Update UI AFTER switching turns (so turn indicator shows correct player)
+      this.updateUI()
+
+      // Send state update to other player
       if (this.isMultiplayer) {
         this.sendGameState()
       }
     }
   }
 
-  private triggerGameOver(): void {
-    // gameOver is already set in handleClick
+  private handleMiss(): void {
+    // Missing a ball counts as a turn in multiplayer
+    if (!this.isMultiplayer) return
+
+    // Visual feedback for miss
+    this.cameras.main.flash(100, 255, 100, 100)
+
+    // Switch turns
+    this.switchTurn()
+
+    // Update UI
+    this.updateUI()
+
+    // Send state update
+    this.sendGameState()
+  }
 
-    // Use SDK to trigger game over - simplified like chess.js
+  private triggerGameOver(): void {
     if (!window.FarcadeSDK) return
 
     if (this.isMultiplayer) {
-      // Build scores array for multiplayer - exactly like chess.js does
+      // Build scores array for multiplayer
       const scores: Array<{ playerId: string; score: number }> = []
 
-      // Ensure we have both players
+      // Get scores for all players
       if (this.players && this.players.length >= 2) {
-        scores.push({
-          playerId: this.players[0].id,
-          score: this.players[0].id === this.meId ? this.clickCount : this.otherPlayerClicks,
-        })
-        scores.push({
-          playerId: this.players[1].id,
-          score: this.players[1].id === this.meId ? this.clickCount : this.otherPlayerClicks,
-        })
-      } else {
-        // Fallback with default IDs
-        scores.push({
-          playerId: this.meId || '1',
-          score: this.clickCount,
-        })
-        scores.push({
-          playerId: this.meId === '1' ? '2' : '1',
-          score: this.otherPlayerClicks,
+        this.players.forEach((player) => {
+          scores.push({
+            playerId: player.id,
+            score: this.getPlayerState(player.id).score,
+          })
         })
       }
 
       window.FarcadeSDK.multiplayer.actions.gameOver({ scores })
     } else {
       // Single player
-      window.FarcadeSDK.singlePlayer.actions.gameOver({ score: this.clickCount })
+      window.FarcadeSDK.singlePlayer.actions.gameOver({ score: this.getMyState().score })
     }
   }
 
   private restartGame(): void {
-    this.clickCount = 0
-    this.otherPlayerClicks = 0
+    // Reset all player states
+    Object.keys(this.playerStates).forEach((playerId) => {
+      // In multiplayer, preserve assigned colors (Player 1 = green, Player 2 = red)
+      let assignedColor: 'green' | 'blue' | 'red' = 'green'
+      if (this.isMultiplayer && this.players.length >= 2) {
+        const playerIndex = this.players.findIndex((p) => p.id === playerId)
+        assignedColor = playerIndex === 1 ? 'red' : 'green'
+      } else {
+        // Single player - keep current color
+        assignedColor = this.playerStates[playerId]?.color || 'green'
+      }
+
+      this.playerStates[playerId] = {
+        color: assignedColor,
+        score: 0,
+      }
+    })
+
     this.gameOver = false
-    this.selectedColor = 'green' // Reset to default color
+    this.roundNumber = 0
 
-    if (this.clickText) {
-      this.clickText.setText('Score: 0/3')
+    // Player 1 starts first
+    if (this.isMultiplayer && this.players.length >= 2) {
+      this.currentTurnPlayerId = this.players[0].id
     }
 
-    // Reset color selection UI
-    this.selectColor('green')
+    // Update UI
+    this.updateUI()
 
     // Reset all balls to new positions and unpop them
     this.balls.forEach((ball) => {
@@ -617,6 +845,9 @@ export class DemoScene extends Phaser.Scene {
       ball.velocityY = Phaser.Math.Between(-300, 300)
     })
 
+    // Update ball colors
+    this.updateBallColors()
+
     // Focus the canvas to enable keyboard input
     this.game.canvas.focus()
   }
@@ -630,9 +861,10 @@ export class DemoScene extends Phaser.Scene {
     colors.forEach((colorName, index) => {
       const x = index * 45
 
-      // Create circle swatch, highlighting the currently selected color
+      // Create circle swatch
       const swatch = this.add.circle(x, 0, 18, this.colorValues[colorName])
-      swatch.setStrokeStyle(3, colorName === this.selectedColor ? 0xffffff : 0x666666)
+      const myColor = this.getMyState().color
+      swatch.setStrokeStyle(3, colorName === myColor ? 0xffffff : 0x666666)
       swatch.setInteractive()
       swatch.setData('color', colorName)
 
@@ -656,11 +888,13 @@ export class DemoScene extends Phaser.Scene {
   }
 
   private selectColor(color: 'green' | 'blue' | 'red'): void {
-    this.selectedColor = color
+    // Update my player's color
+    const myState = this.getMyState()
+    myState.color = color
 
     // Update swatch borders to show selection
     if (this.colorSwatches) {
-      this.colorSwatches.list.forEach((obj) => {
+      this.colorSwatches.list.forEach((obj: any) => {
         const swatch = obj as Phaser.GameObjects.Arc
         const swatchColor = swatch.getData('color')
         swatch.setStrokeStyle(3, swatchColor === color ? 0xffffff : 0x666666)
@@ -668,37 +902,42 @@ export class DemoScene extends Phaser.Scene {
     }
 
     // Update all existing balls to new color
-    this.balls.forEach((ball) => {
-      ball.sprite.setFillStyle(this.colorValues[color])
-    })
+    this.updateBallColors()
 
     // Save state after color change
     this.saveGameState()
   }
 
   private saveGameState(): void {
-    // Save state to emulate SDK state saving
-    const gameState = {
-      selectedColor: this.selectedColor,
-      timestamp: Date.now(),
-    }
+    // Save state through SDK only - no localStorage
+    if (this.isMultiplayer) {
+      // Multiplayer: save full per-player state with turn info
+      const gameState = {
+        playerStates: this.playerStates,
+        currentTurnPlayerId: this.currentTurnPlayerId,
+        roundNumber: this.roundNumber,
+        timestamp: Date.now(),
+      }
 
-    // Save through SDK only - no localStorage
-    if (window.FarcadeSDK?.singlePlayer?.actions?.saveGameState) {
-      window.FarcadeSDK.singlePlayer.actions.saveGameState({ gameState })
-    } else if (window.FarcadeSDK?.multiplayer?.actions?.saveGameState && this.isMultiplayer) {
-      // For multiplayer mode
-      window.FarcadeSDK.multiplayer.actions.saveGameState({
-        gameState,
-        alertUserIds: this.players?.filter((p) => p.id !== this.meId).map((p) => p.id) || [],
-      })
-    }
-  }
+      if (window.FarcadeSDK?.multiplayer?.actions?.saveGameState) {
+        const otherPlayerId = this.getOtherPlayerId()
+        window.FarcadeSDK.multiplayer.actions.saveGameState({
+          gameState,
+          alertUserIds: otherPlayerId ? [otherPlayerId] : [],
+        })
+      }
+    } else {
+      // Single-player: save only color preference (score is session-only)
+      const myState = this.getMyState()
+      const gameState = {
+        color: myState.color,
+        timestamp: Date.now(),
+      }
 
-  private loadGameState(): void {
-    // Don't load from localStorage - only from SDK events
-    // The SDK will send us restore_game_state events when needed
-    // Waiting for SDK restore_game_state event
+      if (window.FarcadeSDK?.singlePlayer?.actions?.saveGameState) {
+        window.FarcadeSDK.singlePlayer.actions.saveGameState({ gameState })
+      }
+    }
   }
 
   private popBall(ball: Ball): void {