Initial commit

2026-07-01 17:56:31 +08:00
commit d78931979d
731 changed files with 311088 additions and 0 deletions
@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react'
+import Phaser from 'phaser'
+import { createGameConfig } from './config'
+import type { GameBridge } from './GameBridge'
+import { BootScene } from './scenes/BootScene'
+import { OfficeScene } from './scenes/OfficeScene'
+
+interface Props {
+  bridge: GameBridge
+}
+
+export function PhaserGame({ bridge }: Props) {
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const gameRef = useRef<Phaser.Game | null>(null)
+
+  useEffect(() => {
+    if (!wrapperRef.current || !containerRef.current || gameRef.current) return
+
+    // Measure the wrapper (which has definite CSS dimensions from the grid layout).
+    // The inner container div is initially empty so has 0 dimensions.
+    const wrapper = wrapperRef.current
+    const container = containerRef.current
+
+    // Force container to fill wrapper so clientWidth/Height are non-zero
+    container.style.width  = `${wrapper.clientWidth}px`
+    container.style.height = `${wrapper.clientHeight}px`
+
+    // Safety: never create a 0×0 game
+    const w = container.clientWidth  || window.innerWidth  - 400
+    const h = container.clientHeight || window.innerHeight - 48
+
+    if (w < 50 || h < 50) {
+      console.warn('[PhaserGame] Container too small:', w, h, '— using fallback size')
+      container.style.width  = `${window.innerWidth - 400}px`
+      container.style.height = `${window.innerHeight - 48}px`
+    }
+
+    console.log('[PhaserGame] Creating Phaser game', container.clientWidth, '×', container.clientHeight)
+
+    const config = createGameConfig(container)
+    config.scene = [BootScene, OfficeScene]
+    const game = new Phaser.Game(config)
+    game.registry.set('bridge', bridge)
+    gameRef.current = game
+
+    // Keep canvas sized to wrapper on window resize
+    const onResize = () => {
+      if (!wrapper || !game) return
+      container.style.width  = `${wrapper.clientWidth}px`
+      container.style.height = `${wrapper.clientHeight}px`
+      game.scale.resize(wrapper.clientWidth, wrapper.clientHeight)
+    }
+    window.addEventListener('resize', onResize)
+
+    return () => {
+      window.removeEventListener('resize', onResize)
+      game.destroy(true)
+      gameRef.current = null
+    }
+  }, [bridge]) // bridge is a stable ref, effect runs once
+
+  return (
+    // Wrapper fills the CSS grid cell
+    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>
+      {/* Phaser mounts its canvas inside this div */}
+      <div ref={containerRef} />
+    </div>
+  )
+}