Update game

client/src/game/BoardStore.ts

@@ -1,6 +1,7 @@
 import { BitBoard } from 'shared/bot/BitBoard.ts'
 import { isBoardCoordInBounds } from 'shared/board.ts'
 import type { Cell, SerializedBitBoard } from 'shared/types.ts'
+import { debug } from '../debug.ts'
 
 export class BoardStore {
   boardSize: number
@@ -22,18 +23,21 @@ export class BoardStore {
   }
 
   setCell(x: number, y: number, cell: Cell): void {
-    if (!isBoardCoordInBounds(x, y, this.boardSize)) return
+    debug('BoardStore', 'setCell', { x, y, playerId: cell.playerId, symbol: cell.symbol })
+    if (!isBoardCoordInBounds(x, y, this.boardSize)) { debug('BoardStore', 'setCell: out of bounds'); return }
     const player = Number(cell.playerId)
-    if (player !== 0 && player !== 1) return
-    if (this.bitBoard.has(x, y)) this.bitBoard.remove(x, y)
+    if (player !== 0 && player !== 1) { debug('BoardStore', 'setCell: invalid player', player); return }
+    if (this.bitBoard.has(x, y)) { debug('BoardStore', 'setCell: removing existing'); this.bitBoard.remove(x, y) }
     this.bitBoard.place(x, y, player)
   }
 
   removeCell(x: number, y: number): void {
+    debug('BoardStore', 'removeCell', { x, y })
     this.bitBoard.remove(x, y)
   }
 
   clear(): void {
+    debug('BoardStore', 'clear')
     this.bitBoard.clear()
   }
 
@@ -51,6 +55,7 @@ export class BoardStore {
   }
 
   deserialize(data: SerializedBitBoard | Record<string, Cell>, symbols = this.symbols): void {
+    debug('BoardStore', 'deserialize', { type: isSerializedBitBoard(data) ? 'bitboard' : 'record', dataSize: Object.keys(data).length })
     this.symbols = [symbols[0], symbols[1]]
     if (isSerializedBitBoard(data)) {
       this.boardSize = data.boardSize
@@ -62,6 +67,7 @@ export class BoardStore {
 
   setBoardSize(boardSize: number): void {
     if (this.boardSize === boardSize) return
+    debug('BoardStore', 'setBoardSize', { from: this.boardSize, to: boardSize })
     this.boardSize = boardSize
     this.bitBoard = BitBoard.empty(boardSize)
   }

client/src/game/CameraController.ts

@@ -1,6 +1,7 @@
 import { Container, Ticker } from 'pixi.js'
 import type { CameraState } from 'shared/board.ts'
 import { screenToWorld, CELL_SIZE } from 'shared/board.ts'
+import { debug } from '../debug.ts'
 
 const ZOOM_MIN = 0.1
 const ZOOM_MAX = 5
@@ -66,6 +67,7 @@ export class CameraController {
     this.state.zoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoom))
     this.state.x = boardSize / 2 * CELL_SIZE
     this.state.y = boardSize / 2 * CELL_SIZE
+    debug('CameraController', 'setInitialZoom', { boardSize, fitRatio, zoom: this.state.zoom, vw: this.vw, vh: this.vh })
     this.apply()
     this.triggerChange()
   }
@@ -216,6 +218,7 @@ export class CameraController {
   }
 
   private onPointerDown = (e: PointerEvent): void => {
+    debug('CameraController', 'pointerDown', { id: e.pointerId, button: e.button, clientX: e.clientX.toFixed(0), clientY: e.clientY.toFixed(0), pointerCount: this.pointers.size + 1 })
     this.stopMomentum()
     this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
     this.moved = false
@@ -228,6 +231,7 @@ export class CameraController {
       this.camStartY = this.state.y
       this.lastMoveX = e.clientX
       this.lastMoveY = e.clientY
+      debug('CameraController', 'drag start')
     }
 
     if (this.pointers.size === 2) {
@@ -235,6 +239,7 @@ export class CameraController {
       const p = Array.from(this.pointers.values())
       this.pinchDist = Math.hypot(p[1].x - p[0].x, p[1].y - p[0].y)
       this.pinchZoomStart = this.state.zoom
+      debug('CameraController', 'pinch start', { pinchDist: this.pinchDist.toFixed(1), zoomStart: this.pinchZoomStart.toFixed(3) })
     }
   }
 
@@ -285,6 +290,7 @@ export class CameraController {
   }
 
   private onPointerUp = (e: PointerEvent): void => {
+    debug('CameraController', 'pointerUp', { id: e.pointerId, button: e.button, moved: this.moved, pointerCount: this.pointers.size })
     this.pointers.delete(e.pointerId)
 
     if (e.button === 1) {
@@ -294,6 +300,7 @@ export class CameraController {
     if (this.pointers.size === 0) {
       this.clearHover()
       if (this.moved) {
+        debug('CameraController', 'start momentum')
         this.startMomentum(this.velocityX, this.velocityY)
       } else if (this.onCellClick && this.canvas && e.button !== 1) {
         const rect = this.canvas.getBoundingClientRect()
@@ -302,7 +309,10 @@ export class CameraController {
         const world = screenToWorld(sx, sy, this.state, this.vw, this.vh)
         const gx = Math.floor(world.x / CELL_SIZE)
         const gy = Math.floor(world.y / CELL_SIZE)
+        debug('CameraController', 'cell click detected', { gx, gy })
         this.onCellClick(gx, gy)
+      } else {
+        debug('CameraController', 'no action on pointerUp')
       }
     }
   }
@@ -313,6 +323,7 @@ export class CameraController {
 
   private onWheel = (e: WheelEvent): void => {
     e.preventDefault()
+    debug('CameraController', 'wheel', { deltaY: e.deltaY.toFixed(0), zoomBefore: this.state.zoom.toFixed(3) })
 
     const rect = this.canvas!.getBoundingClientRect()
     const sx = e.clientX - rect.left

client/src/game/GameEngine.ts

@@ -3,13 +3,14 @@ import { CameraController } from './CameraController.ts'
 import { GridRenderer } from './GridRenderer.ts'
 import { BoardStore } from './BoardStore.ts'
 import { SymbolRenderer } from './SymbolRenderer.ts'
-import { AudioManager } from './effects/AudioManager.ts'
+import { audioManager } from './effects/AudioManager.ts'
 import { ParticleSystem } from './effects/ParticleSystem.ts'
 import { PlacementEffect } from './effects/PlacementEffect.ts'
 import { WinEffect } from './effects/WinEffect.ts'
 import { BackgroundAtmosphere } from './effects/BackgroundAtmosphere.ts'
 import { CELL_SIZE, isBoardCoordInBounds } from 'shared/board.ts'
 import { theme, onThemeChange } from '../theme.ts'
+import { debug } from '../debug.ts'
 import type { Cell, RoomState, RoomScores, GameRules, SerializedBitBoard } from 'shared/types.ts'
 import { GameManager } from 'shared/GameManager.ts'
 
@@ -23,7 +24,7 @@ export class GameEngine {
   effectLayer!: Container
   particleLayer!: Container
 
-  audio!: AudioManager
+  audio = audioManager
   particleSys!: ParticleSystem
   screenLayer!: Container
   private placementEffect!: PlacementEffect
@@ -51,6 +52,7 @@ export class GameEngine {
   playerSymbols: [string, string] = ['X', 'O']
 
   localMode = false
+  localPlayerTypes: ('human' | 'bot')[] = []
   localInputEnabled = true
 
   boardSize = 15
@@ -67,12 +69,14 @@ export class GameEngine {
   onError: ((message: string) => void) | null = null
 
   async init(containerEl: HTMLElement): Promise<void> {
+    debug('GameEngine', 'init start', { w: containerEl.clientWidth, h: containerEl.clientHeight })
     this.containerEl = containerEl
 
     const w = containerEl.clientWidth
     const h = containerEl.clientHeight
 
     this.app = new Application()
+    const initStart = performance.now()
     await this.app.init({
       width: w,
       height: h,
@@ -81,8 +85,9 @@ export class GameEngine {
       resolution: window.devicePixelRatio || 1,
       autoDensity: true,
     })
+    debug('GameEngine', `app.init took ${(performance.now() - initStart).toFixed(1)}ms`)
 
-    if (this.destroyed) return
+    if (this.destroyed) { debug('GameEngine', 'destroyed after app.init, aborting'); return }
 
     containerEl.appendChild(this.app.canvas as HTMLCanvasElement)
 
@@ -96,7 +101,7 @@ export class GameEngine {
     this.bgAtmo = new BackgroundAtmosphere(this.app)
     this.app.stage.addChildAt(this.bgAtmo.container, 0)
 
-    if (this.destroyed) return
+    if (this.destroyed) { debug('GameEngine', 'destroyed after bgAtmo, aborting'); return }
 
     this.camera = new CameraController(this.worldContainer, w, h)
     this.camera.setInitialZoom(this.boardSize)
@@ -104,8 +109,9 @@ export class GameEngine {
     this.camera.onChange = () => this.redraw()
     this.camera.onCellClick = (gx, gy) => this.handleCellClick(gx, gy)
     this.camera.onCellHover = (gx, gy) => this.handleCellHover(gx, gy)
+    debug('GameEngine', 'camera initialized')
 
-    if (this.destroyed) return
+    if (this.destroyed) { debug('GameEngine', 'destroyed after camera, aborting'); return }
 
     this.grid = new GridRenderer()
     this.worldContainer.addChild(this.grid.container)
@@ -124,7 +130,6 @@ export class GameEngine {
     this.particleLayer = new Container()
     this.worldContainer.addChild(this.particleLayer)
 
-    this.audio = new AudioManager()
     this.particleSys = new ParticleSystem(this.particleLayer)
     this.placementEffect = new PlacementEffect(this.effectLayer, this.particleSys)
     this.winEffect = new WinEffect(this.effectLayer, this.particleSys, this.camera, w, h, this.screenLayer)
@@ -148,9 +153,11 @@ export class GameEngine {
 
     this.resizeObserver = new ResizeObserver(() => this.handleResize())
     this.resizeObserver.observe(containerEl)
+    debug('GameEngine', 'init complete')
   }
 
   destroy(): void {
+    debug('GameEngine', 'destroy')
     this.destroyed = true
     if (this.camera) {
       this.camera.onChange = null
@@ -163,7 +170,6 @@ export class GameEngine {
     this.bgAtmo?.destroy()
     this.symbols?.clear()
     this.particleSys?.clear()
-    this.audio?.destroy()
     if (this.particleTickerCb) {
       Ticker.shared.remove(this.particleTickerCb)
       this.particleTickerCb = null
@@ -213,15 +219,17 @@ export class GameEngine {
   }
 
   private handleCellClick(gx: number, gy: number): void {
-    if (this.status !== 'active') return
-    if (this.board.getCell(gx, gy)) return
-    if (!this.isInBounds(gx, gy)) return
-    if (this.localMode && !this.localInputEnabled) return
+    debug('GameEngine', 'cellClick', { gx, gy, status: this.status, localMode: this.localMode, currentPlayer: this.currentPlayer, playerIndex: this.playerIndex })
+    if (this.status !== 'active') { debug('GameEngine', 'cellClick ignored: status not active'); return }
+    if (this.board.getCell(gx, gy)) { debug('GameEngine', 'cellClick ignored: cell occupied'); return }
+    if (!this.isInBounds(gx, gy)) { debug('GameEngine', 'cellClick ignored: out of bounds'); return }
+    if (this.localMode && !this.localInputEnabled) { debug('GameEngine', 'cellClick ignored: local input disabled'); return }
 
     if (this.localMode && this.manager) {
       this.placeLocalMove(gx, gy)
     } else if (!this.localMode) {
       if (this.playerIndex !== this.currentPlayer) {
+        debug('GameEngine', 'cellClick ignored: not your turn')
         this.onError?.('Not your turn')
         return
       }
@@ -244,13 +252,15 @@ export class GameEngine {
   }
 
   placeLocalMove(gx: number, gy: number): boolean {
-    if (!this.localMode || !this.manager) return false
-    if (this.status !== 'active') return false
-    if (this.board.getCell(gx, gy)) return false
-    if (!this.isInBounds(gx, gy)) return false
+    debug('GameEngine', 'placeLocalMove', { gx, gy, currentPlayer: this.currentPlayer })
+    if (!this.localMode || !this.manager) { debug('GameEngine', 'placeLocalMove: not local or no manager'); return false }
+    if (this.status !== 'active') { debug('GameEngine', 'placeLocalMove: status not active'); return false }
+    if (this.board.getCell(gx, gy)) { debug('GameEngine', 'placeLocalMove: cell occupied'); return false }
+    if (!this.isInBounds(gx, gy)) { debug('GameEngine', 'placeLocalMove: out of bounds'); return false }
 
     const result = this.manager.placeMove(gx, gy)
-    if (!result.success) return false
+    debug('GameEngine', 'placeLocalMove result:', result)
+    if (!result.success) { debug('GameEngine', 'placeLocalMove: manager rejected'); return false }
 
     const cell = this.manager.getBoard().get(`${gx}:${gy}`)
     if (!cell) return false
@@ -331,6 +341,7 @@ export class GameEngine {
   }
 
   applyRoomState(s: RoomState): void {
+    debug('GameEngine', 'applyRoomState', { status: s.status, playerIndex: s.playerIndex, currentPlayer: s.currentPlayer, boardSize: s.boardSize, players: s.players })
     this.clearHover()
     this.winEffect.clear()
     if (s.boardSize) {
@@ -359,26 +370,44 @@ export class GameEngine {
   }
 
   applyMove(currentPlayer: number): void {
+    debug('GameEngine', 'applyMove', { currentPlayer })
     this.currentPlayer = currentPlayer
     this.onStateChanged?.()
   }
 
   rejectMove(x: number, y: number, _message: string): void {
+    debug('GameEngine', 'rejectMove', { x, y, message: _message })
     this.removeCell(x, y)
     this.currentPlayer = this.previousTurnPlayer
     this.onStateChanged?.()
   }
 
   applyWin(playerId: string, cells: { x: number; y: number }[] = []): void {
+    debug('GameEngine', 'applyWin', { playerId, cells, localMode: this.localMode, localPlayerTypes: this.localPlayerTypes })
     this.status = 'win'
     this.winnerPlayerId = playerId
     this.onStateChanged?.()
     this.audio?.stopMusic()
-    this.audio?.play('win')
+
+    const isPvE = this.localMode && this.localPlayerTypes.some(t => t === 'bot')
+    if (isPvE) {
+      const humanPlayerId = String(this.localPlayerTypes.indexOf('human'))
+      if (playerId === humanPlayerId) {
+        this.audio?.playVictoryMusic()
+        this.audio?.play('win')
+      } else {
+        this.audio?.playDefeatMusic()
+      }
+    } else {
+      this.audio?.playVictoryMusic()
+      this.audio?.play('win')
+    }
+
     this.winEffect.play(cells)
   }
 
   applyDraw(): void {
+    debug('GameEngine', 'applyDraw')
     this.status = 'draw'
     this.currentPlayer = -1
     this.onStateChanged?.()
@@ -386,6 +415,7 @@ export class GameEngine {
   }
 
   applyRematch(s: RoomState): void {
+    debug('GameEngine', 'applyRematch')
     this.applyRoomState(s)
   }
 
@@ -430,10 +460,12 @@ export class GameEngine {
   }
 
   applySwapFromManager(): void {
+    debug('GameEngine', 'applySwapFromManager')
     if (!this.manager) return
     const names = this.manager.getPlayerNames()
     const symbols = this.manager.getPlayerSymbols()
     const swapped = this.playerSymbols[0] !== symbols[0] || this.playerSymbols[1] !== symbols[1]
+    debug('GameEngine', 'swap result', { swapped, symbolsBefore: this.playerSymbols, symbolsAfter: symbols })
     this.players = [names[0], names[1]]
     this.playerSymbols = [symbols[0], symbols[1]]
     this.board.symbols = [symbols[0], symbols[1]]

client/src/game/GridRenderer.ts

@@ -1,6 +1,7 @@
 import { Container, Graphics, Text, TextStyle } from 'pixi.js'
 import { CELL_SIZE } from 'shared/board.ts'
 import { theme, getThemeMode } from '../theme.ts'
+import { debug } from '../debug.ts'
 
 const GRID_WIDTH = 1
 const GRID_MAJOR_WIDTH = 2
@@ -49,6 +50,7 @@ export class GridRenderer {
   }
 
   draw(boardSize: number = 15): void {
+    debug('GridRenderer', 'draw', { boardSize })
     this.graphics.clear()
 
     const isGarden = getThemeMode() === 'garden'

client/src/game/SymbolRenderer.ts

@@ -1,6 +1,7 @@
 import { Container, Graphics, Text, TextStyle } from 'pixi.js'
 import { CELL_SIZE } from 'shared/board.ts'
 import { theme } from '../theme.ts'
+import { debug } from '../debug.ts'
 import type { Cell } from 'shared/types.ts'
 
 export class SymbolRenderer {
@@ -19,6 +20,7 @@ export class SymbolRenderer {
     _minCellX: number, _minCellY: number,
     _maxCellX: number, _maxCellY: number,
   ): Container[] {
+    debug('SymbolRenderer', 'update', { cellCount: cells.length, existingSymbols: this.symbols.size })
     const keepKeys = new Set<string>()
     const added: Container[] = []
 
@@ -33,18 +35,22 @@ export class SymbolRenderer {
       added.push(s)
     }
 
+    let removed = 0
     for (const [key, symbol] of this.symbols) {
       if (!keepKeys.has(key)) {
         this.container.removeChild(symbol)
         symbol.destroy({ children: true })
         this.symbols.delete(key)
+        removed++
       }
     }
+    if (removed > 0) debug('SymbolRenderer', `removed ${removed} stale symbols`)
 
     return added
   }
 
   clear(): void {
+    debug('SymbolRenderer', 'clear', { count: this.symbols.size })
     for (const [, symbol] of this.symbols) {
       this.container.removeChild(symbol)
       symbol.destroy({ children: true })