refactor(sts-like-viewer): simplify scene management and config

- Move configuration to `src/config/index.ts`
- Simplify `App.tsx` by passing scene classes directly to `PhaserScene`
- Update `GameUI` initialization to use string ID for container
- Update documentation to mention `initData` for `ReactiveScene`
- Standardize quote usage and formatting in config files

packages/sts-like-viewer/src/ui/App.tsx

@@ -1,53 +1,19 @@
-import { h } from "preact";
 import { PhaserGame, PhaserScene } from "boardgame-phaser";
-import { useMemo } from "preact/hooks";
 import { IndexScene } from "@/scenes/IndexScene";
 import { MapViewerScene } from "@/scenes/MapViewerScene";
 import { GridViewerScene } from "@/scenes/GridViewerScene";
 import { ShapeViewerScene } from "@/scenes/ShapeViewerScene";
-import { GameFlowScene } from "@/scenes/GameFlowScene";
-import { PlaceholderEncounterScene } from "@/scenes/PlaceholderEncounterScene";
-import { createGameState } from "@/state/gameState";
-
-// 全局游戏状态单例
-const gameState = createGameState();
+import { GAME_CONFIG } from "@/config";
 
 export default function App() {
-  const indexScene = useMemo(() => new IndexScene(), []);
-  const mapViewerScene = useMemo(() => new MapViewerScene(), []);
-  const gridViewerScene = useMemo(() => new GridViewerScene(), []);
-  const shapeViewerScene = useMemo(() => new ShapeViewerScene(), []);
-  const gameFlowScene = useMemo(() => new GameFlowScene(gameState), []);
-  const placeholderEncounterScene = useMemo(
-    () => new PlaceholderEncounterScene(gameState),
-    [],
-  );
-
   return (
     <div className="flex flex-col h-screen">
       <div className="flex-1 flex relative justify-center items-center">
-        <PhaserGame
-          initialScene="IndexScene"
-          config={{ width: 1920, height: 1080 }}
-        >
-          <PhaserScene sceneKey="IndexScene" scene={indexScene as any} />
-          <PhaserScene
-            sceneKey="MapViewerScene"
-            scene={mapViewerScene as any}
-          />
-          <PhaserScene
-            sceneKey="GridViewerScene"
-            scene={gridViewerScene as any}
-          />
-          <PhaserScene
-            sceneKey="ShapeViewerScene"
-            scene={shapeViewerScene as any}
-          />
-          <PhaserScene sceneKey="GameFlowScene" scene={gameFlowScene as any} />
-          <PhaserScene
-            sceneKey="PlaceholderEncounterScene"
-            scene={placeholderEncounterScene as any}
-          />
+        <PhaserGame initialScene="IndexScene" config={GAME_CONFIG}>
+          <PhaserScene scene={IndexScene} />
+          <PhaserScene scene={MapViewerScene} />
+          <PhaserScene scene={GridViewerScene} />
+          <PhaserScene scene={ShapeViewerScene} />
         </PhaserGame>
       </div>
     </div>