From 1d803dd21918032dada5068316a77ae3e54f548a Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Mon, 20 Apr 2026 15:24:07 +0800
Subject: [PATCH] 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
---
 docs/GamePatterns.md                          |  2 +-
 .../src/{config.ts => config/index.ts}        | 41 ++++++++++++-----
 packages/sts-like-viewer/src/main.tsx         |  9 ++--
 packages/sts-like-viewer/src/ui/App.tsx       | 46 +++----------------
 4 files changed, 40 insertions(+), 58 deletions(-)
 rename packages/sts-like-viewer/src/{config.ts => config/index.ts} (87%)

diff --git a/docs/GamePatterns.md b/docs/GamePatterns.md
index ea98751..58a89e8 100644
--- a/docs/GamePatterns.md
+++ b/docs/GamePatterns.md
@@ -32,8 +32,8 @@ packages/my-game/
 
 ### 1. ReactiveScene / GameHostScene
 Extend `ReactiveScene`(`packages\framework\src\scenes\ReactiveScene.ts`) to use reactive integration features.
-- Access game context for scene navigation
 - Use `this.disposables` for auto-cleanup on shutdown.
+- Use `initData` for context data passed from the `<PhaserScene/>` preact component.
 
 ### 2. Spawner Pattern
 Implement `Spawner<TData, TObj>` for data-driven objects.
diff --git a/packages/sts-like-viewer/src/config.ts b/packages/sts-like-viewer/src/config/index.ts
similarity index 87%
rename from packages/sts-like-viewer/src/config.ts
rename to packages/sts-like-viewer/src/config/index.ts
index 5902a1d..a8d016f 100644
--- a/packages/sts-like-viewer/src/config.ts
+++ b/packages/sts-like-viewer/src/config/index.ts
@@ -3,6 +3,8 @@
  * All magic numbers should be defined here and imported where needed.
  */
 
+import { PhaserGameProps } from "boardgame-phaser";
+
 // ── Map Layout ──────────────────────────────────────────────────────────────
 
 export const MAP_CONFIG = {
@@ -83,9 +85,9 @@ export const UI_CONFIG = {
   /** Button border color */
   BUTTON_BORDER: 0x7777aa,
   /** Button text color */
-  BUTTON_TEXT_COLOR: '#ffffff',
+  BUTTON_TEXT_COLOR: "#ffffff",
   /** Button font size */
-  BUTTON_FONT_SIZE: '16px',
+  BUTTON_FONT_SIZE: "16px",
 } as const;
 
 // ── Colors ──────────────────────────────────────────────────────────────────
@@ -102,14 +104,14 @@ export const NODE_COLORS = {
 } as const;
 
 export const NODE_LABELS = {
-  start: '起点',
-  end: '终点',
-  minion: '战斗',
-  elite: '精英',
-  event: '事件',
-  camp: '营地',
-  shop: '商店',
-  curio: '奇遇',
+  start: "起点",
+  end: "终点",
+  minion: "战斗",
+  elite: "精英",
+  event: "事件",
+  camp: "营地",
+  shop: "商店",
+  curio: "奇遇",
 } as const;
 
 export const ITEM_COLORS = [
@@ -118,5 +120,20 @@ export const ITEM_COLORS = [
 
 // ── Positive/Negative Effects (for buff icons) ──────────────────────────────
 
-export const POSITIVE_EFFECTS = new Set(['block', 'strength', 'dexterity', 'regen']);
-export const NEGATIVE_EFFECTS = new Set(['weak', 'vulnerable', 'frail', 'poison']);
+export const POSITIVE_EFFECTS = new Set([
+  "block",
+  "strength",
+  "dexterity",
+  "regen",
+]);
+export const NEGATIVE_EFFECTS = new Set([
+  "weak",
+  "vulnerable",
+  "frail",
+  "poison",
+]);
+
+export const GAME_CONFIG: Phaser.Types.Core.GameConfig = {
+  width: 1920,
+  height: 1080,
+};
diff --git a/packages/sts-like-viewer/src/main.tsx b/packages/sts-like-viewer/src/main.tsx
index 013e785..81a946e 100644
--- a/packages/sts-like-viewer/src/main.tsx
+++ b/packages/sts-like-viewer/src/main.tsx
@@ -1,11 +1,10 @@
-import { h } from 'preact';
-import { GameUI } from 'boardgame-phaser';
-import './style.css';
+import { GameUI } from "boardgame-phaser";
+import "./style.css";
 import App from "@/ui/App";
 
 const ui = new GameUI({
-  container: document.getElementById('ui-root')!,
-  root: <App/>,
+  container: "ui-root",
+  root: <App />,
 });
 
 ui.mount();
diff --git a/packages/sts-like-viewer/src/ui/App.tsx b/packages/sts-like-viewer/src/ui/App.tsx
index 10fde21..f212e20 100644
--- a/packages/sts-like-viewer/src/ui/App.tsx
+++ b/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>