hypercross
/
boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style: enforce 2-space indent and double quotes

This commit is contained in:
hypercross 2026-04-19 10:48:32 +08:00
parent ddc9d057fd
commit 648e801dad
12 changed files with 466 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
eslint.config.js
View File

@ -28,7 +28,7 @@ export default tseslint.config(
files: ["**/*.ts", "**/*.tsx"],
rules: {
// --- Project Conventions ---
quotes: ["error", "single", { avoidEscape: true }],
quotes: ["error", "double", { avoidEscape: true }],
"comma-dangle": ["error", "always-multiline"],
indent: ["error", 2, { SwitchCase: 1 }],
@ -68,7 +68,6 @@ export default tseslint.config(
"import/no-duplicates": "error",
// --- General ---
"no-console": "warn",
"prefer-const": "error",
"no-var": "error",
eqeqeq: ["error", "always"],

39
packages/framework/src/index.ts
View File

@ -1,19 +1,38 @@
// Resource management
export { DisposableBag } from './utils';
export type { IDisposable, DisposableItem } from './utils';
export { DisposableBag } from "./utils";
export type { IDisposable, DisposableItem } from "./utils";
// Drag & drop utilities
export { dragDropEventEffect, DragDropEventType } from './utils';
export type { DragDropEvent } from './utils';
export { dragDropEventEffect, DragDropEventType } from "./utils";
export type { DragDropEvent } from "./utils";
// Data-driven object spawning
export { spawnEffect } from './spawner';
export type { Spawner } from './spawner';
export { spawnEffect } from "./spawner";
export type { Spawner } from "./spawner";
// Scene base classes
export { ReactiveScene, GameHostScene, FadeScene, FADE_SCENE_KEY } from './scenes';
export type { ReactiveSceneOptions, ReactiveScenePhaserData, SceneController, GameHostSceneOptions, FadeSceneData } from './scenes';
export {
ReactiveScene,
GameHostScene,
FadeScene,
FADE_SCENE_KEY,
} from "./scenes";
export type {
ReactiveSceneOptions,
ReactiveScenePhaserData,
SceneController,
GameHostSceneOptions,
FadeSceneData,
} from "./scenes";
// React ↔ Phaser bridge
export { PhaserGame, PhaserScene, phaserContext, defaultPhaserConfig, GameUI, type PhaserGameContext, type SceneController as PhaserSceneController } from './ui';
export type { PhaserGameProps, PhaserSceneProps, GameUIOptions } from './ui';
export {
PhaserGame,
PhaserScene,
phaserContext,
defaultPhaserConfig,
GameUI,
type PhaserGameContext,
type SceneController as PhaserSceneController,
} from "./ui";
export type { PhaserGameProps, PhaserSceneProps, GameUIOptions } from "./ui";

22
packages/framework/src/scenes/FadeScene.ts
View File

@ -1,5 +1,4 @@
import Phaser from 'phaser';
import { ReactiveScene, type ReactiveScenePhaserData } from './ReactiveScene';
import { ReactiveScene } from "./ReactiveScene";
export interface FadeSceneData {
[key: string]: unknown;
@ -21,14 +20,9 @@ export class FadeScene extends ReactiveScene<FadeSceneData> {
// 创建黑色遮罩层，覆盖整个游戏区域
const game = this.game;
this.overlay = this.add.rectangle(
0,
0,
game.scale.width,
game.scale.height,
0x000000,
1
).setOrigin(0)
this.overlay = this.add
.rectangle(0, 0, game.scale.width, game.scale.height, 0x000000, 1)
.setOrigin(0)
.setAlpha(1)
.setDepth(999999)
.setInteractive({ useHandCursor: false });
@ -59,12 +53,12 @@ export class FadeScene extends ReactiveScene<FadeSceneData> {
private fadeTo(targetAlpha: number, duration: number): Promise<void> {
// 如果 overlay 还未初始化，直接返回 resolved promise
if (!this.overlay) {
console.warn('FadeScene: overlay 未初始化，跳过过渡动画');
console.warn("FadeScene: overlay 未初始化，跳过过渡动画");
return Promise.resolve();
}
if (this.isFading) {
console.warn('FadeScene: 正在进行过渡动画');
console.warn("FadeScene: 正在进行过渡动画");
}
this.isFading = true;
@ -75,7 +69,7 @@ export class FadeScene extends ReactiveScene<FadeSceneData> {
targets: this.overlay,
alpha: targetAlpha,
duration,
ease: 'Linear',
ease: "Linear",
onComplete: () => {
this.isFading = false;
resolve();
@ -86,4 +80,4 @@ export class FadeScene extends ReactiveScene<FadeSceneData> {
}
// 导出常量供 PhaserGame 使用
export const FADE_SCENE_KEY = '__fade__';
export const FADE_SCENE_KEY = "__fade__";

19
packages/framework/src/scenes/GameHostScene.ts
View File

@ -1,20 +1,21 @@
import type { GameHost } from 'boardgame-core';
import { ReactiveScene } from './ReactiveScene';
import { ReactiveScene } from "./ReactiveScene";
import type { GameHost } from "boardgame-core";
export interface GameHostSceneOptions<TState extends Record<string, unknown>> {
gameHost: GameHost<TState>;
[key: string]: unknown;
}
export abstract class GameHostScene<TState extends Record<string, unknown>>
extends ReactiveScene<GameHostSceneOptions<TState>>
{
export abstract class GameHostScene<
TState extends Record<string, unknown>,
> extends ReactiveScene<GameHostSceneOptions<TState>> {
public get gameHost(): GameHost<TState> {
const gameHost = this.initData.gameHost as GameHost<TState>;
if (!gameHost) {
throw new Error(
`GameHostScene (${this.scene.key}): gameHost 未提供。` +
`确保在 PhaserScene 组件的 data 属性中传入 gameHost。`
"确保在 PhaserScene 组件的 data 属性中传入 gameHost。",
);
}
return gameHost;
@ -29,8 +30,8 @@ export abstract class GameHostScene<TState extends Record<string, unknown>>
}
addTweenInterruption(tween: Phaser.Tweens.Tween) {
this.addInterruption(new Promise(
resolve => tween.once('complete', resolve)
));
this.addInterruption(
new Promise((resolve) => tween.once("complete", resolve)),
);
}
}

19
packages/framework/src/scenes/ReactiveScene.ts
View File

@ -1,6 +1,9 @@
import Phaser from 'phaser';
import { effect, type ReadonlySignal } from '@preact/signals-core';
import { DisposableBag, type IDisposable } from '../utils';
import { effect, type ReadonlySignal } from "@preact/signals-core";
import { Scene } from "phaser";
import { DisposableBag, type IDisposable } from "../utils";
import type Phaser from "phaser";
type CleanupFn = void | (() => void);
@ -17,7 +20,7 @@ export interface ReactiveScenePhaserData {
sceneController: SceneController;
}
export interface ReactiveSceneOptions<TData extends Record<string, unknown> = {}> {
export interface ReactiveSceneOptions {
key?: string;
}
@ -25,8 +28,8 @@ export interface ReactiveSceneOptions<TData extends Record<string, unknown> = {}
* 通用的响应式 Scene 基类
* @typeparam TData - 通过 init(data) 接收的数据类型（必须包含 phaserGame 和 sceneController）
*/
export abstract class ReactiveScene<TData extends Record<string, unknown> = {}>
extends Phaser.Scene
export abstract class ReactiveScene<TData = object>
extends Scene
implements IDisposable
{
protected disposables = new DisposableBag();
@ -40,7 +43,7 @@ export abstract class ReactiveScene<TData extends Record<string, unknown> = {}>
if (!this._initData) {
throw new Error(
`ReactiveScene (${this.scene.key}): initData 尚未初始化。` +
`确保场景通过 PhaserScene 组件注册，并在 create() 阶段访问。`
"确保场景通过 PhaserScene 组件注册，并在 create() 阶段访问。",
);
}
return this._initData;
@ -69,7 +72,7 @@ export abstract class ReactiveScene<TData extends Record<string, unknown> = {}>
}
create(): void {
this.events.on('shutdown', this.dispose, this);
this.events.on("shutdown", this.dispose, this);
}
dispose(): void {

16
packages/framework/src/scenes/index.ts
View File

@ -1,8 +1,12 @@
export { ReactiveScene } from './ReactiveScene';
export type { ReactiveSceneOptions, ReactiveScenePhaserData, SceneController } from './ReactiveScene';
export { ReactiveScene } from "./ReactiveScene";
export type {
ReactiveSceneOptions,
ReactiveScenePhaserData,
SceneController,
} from "./ReactiveScene";
export { FadeScene, FADE_SCENE_KEY } from './FadeScene';
export type { FadeSceneData } from './FadeScene';
export { FadeScene, FADE_SCENE_KEY } from "./FadeScene";
export type { FadeSceneData } from "./FadeScene";
export { GameHostScene } from './GameHostScene';
export type { GameHostSceneOptions } from './GameHostScene';
export { GameHostScene } from "./GameHostScene";
export type { GameHostSceneOptions } from "./GameHostScene";

8
packages/framework/src/ui/GameUI.tsx
View File

@ -1,11 +1,11 @@
export interface GameUIOptions {
container: HTMLElement;
root: any;
root: HTMLElement;
}
export class GameUI {
private container: HTMLElement;
private root: any;
private root: HTMLElement;
constructor(options: GameUIOptions) {
this.container = options.container;
@ -13,13 +13,13 @@ export class GameUI {
}
mount(): void {
import('preact').then(({ render }) => {
import("preact").then(({ render }) => {
render(this.root, this.container);
});
}
unmount(): void {
import('preact').then(({ render }) => {
import("preact").then(({ render }) => {
render(null, this.container);
});
}

56
packages/framework/src/ui/PhaserBridge.tsx
View File

@ -1,10 +1,15 @@
import Phaser from 'phaser';
import { signal, useSignal, useSignalEffect } from '@preact/signals';
import { createContext, h } from 'preact';
import Phaser, { AUTO } from 'phaser';
import { createContext } from 'preact';
import { useContext, useEffect, useRef } from 'preact/hooks';
import { ReadonlySignal } from "@preact/signals-core";
import {
FadeScene as FadeSceneClass,
FADE_SCENE_KEY,
} from '../scenes/FadeScene';
import type { ReactiveScene } from '../scenes';
import { FadeScene as FadeSceneClass, FADE_SCENE_KEY } from '../scenes/FadeScene';
import type { ReadonlySignal } from '@preact/signals-core';
export interface SceneController {
/** 启动场景（带淡入淡出过渡） */
@ -22,10 +27,11 @@ export interface PhaserGameContext {
sceneController: SceneController;
}
export const phaserContext = createContext<ReadonlySignal<PhaserGameContext> | null>(null);
export const phaserContext =
createContext<ReadonlySignal<PhaserGameContext> | null>(null);
export const defaultPhaserConfig: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
type: AUTO,
width: 560,
height: 560,
parent: 'phaser-container',
@ -37,11 +43,14 @@ export interface PhaserGameProps {
config?: Partial<Phaser.Types.Core.GameConfig>;
/** 初始启动的场景 key */
initialScene?: string;
children?: any;
children?: preact.ComponentChildren;
}
export function PhaserGame(props: PhaserGameProps) {
const gameSignal = useSignal<PhaserGameContext>({ game: undefined!, sceneController: undefined! });
const gameSignal = useSignal<PhaserGameContext>({
game: undefined!,
sceneController: undefined!,
});
const initialSceneLaunched = useRef(false);
useSignalEffect(() => {
@ -69,7 +78,7 @@ export function PhaserGame(props: PhaserGameProps) {
// 等待场景注册完成（最多等待 100ms）
let retries = 0;
while (!phaserGame.scene.getScene(sceneKey) && retries < 10) {
await new Promise(resolve => setTimeout(resolve, 10));
await new Promise((resolve) => setTimeout(resolve, 10));
retries++;
}
@ -80,7 +89,9 @@ export function PhaserGame(props: PhaserGameProps) {
}
isTransitioning.value = true;
const fade = phaserGame.scene.getScene(FADE_SCENE_KEY) as FadeSceneClass;
const fade = phaserGame.scene.getScene(
FADE_SCENE_KEY,
) as FadeSceneClass;
// 淡出到黑色
phaserGame.scene.bringToTop(FADE_SCENE_KEY);
@ -127,7 +138,9 @@ export function PhaserGame(props: PhaserGameProps) {
}
isTransitioning.value = true;
const fade = phaserGame.scene.getScene(FADE_SCENE_KEY) as FadeSceneClass;
const fade = phaserGame.scene.getScene(
FADE_SCENE_KEY,
) as FadeSceneClass;
// 淡出到黑色
phaserGame.scene.bringToTop(FADE_SCENE_KEY);
@ -156,7 +169,11 @@ export function PhaserGame(props: PhaserGameProps) {
// 启动初始场景（仅一次）
useEffect(() => {
const ctx = gameSignal.value;
if (!initialSceneLaunched.current && props.initialScene && ctx?.sceneController) {
if (
!initialSceneLaunched.current &&
props.initialScene &&
ctx?.sceneController
) {
initialSceneLaunched.current = true;
// 使用 microtask 确保所有子组件的场景注册已完成
Promise.resolve().then(() => {
@ -174,16 +191,17 @@ export function PhaserGame(props: PhaserGameProps) {
);
}
export interface PhaserSceneProps<TData extends Record<string, unknown> = {}> {
export interface PhaserSceneProps<TData = {}> {
sceneKey: string;
scene: ReactiveScene<TData>;
data?: TData;
children?: any;
}
export const phaserSceneContext = createContext<ReadonlySignal<ReactiveScene> | null>(null);
export const phaserSceneContext =
createContext<ReadonlySignal<ReactiveScene> | null>(null);
export function PhaserScene<TData extends Record<string, unknown> = {}>(props: PhaserSceneProps<TData>) {
export function PhaserScene<TData = {}>(props: PhaserSceneProps<TData>) {
const phaserGameSignal = useContext(phaserContext);
const sceneSignal = useSignal<ReactiveScene<TData>>();
const registered = useRef(false);
@ -215,5 +233,11 @@ export function PhaserScene<TData extends Record<string, unknown> = {}>(props: P
};
});
return <phaserSceneContext.Provider value={sceneSignal as ReadonlySignal<ReactiveScene>}>{props.children}</phaserSceneContext.Provider>;
return (
<phaserSceneContext.Provider
value={sceneSignal as ReadonlySignal<ReactiveScene>}
>
{props.children}
</phaserSceneContext.Provider>
);
}

15
packages/framework/src/ui/index.ts
View File

@ -1,5 +1,12 @@
export { GameUI } from './GameUI';
export type { GameUIOptions } from './GameUI';
export { GameUI } from "./GameUI";
export type { GameUIOptions } from "./GameUI";
export { PhaserGame, PhaserScene, phaserContext, defaultPhaserConfig, type PhaserGameContext, type SceneController } from './PhaserBridge';
export type { PhaserGameProps, PhaserSceneProps } from './PhaserBridge';
export {
PhaserGame,
PhaserScene,
phaserContext,
defaultPhaserConfig,
type PhaserGameContext,
type SceneController,
} from "./PhaserBridge";
export type { PhaserGameProps, PhaserSceneProps } from "./PhaserBridge";

6
packages/framework/src/utils/disposable.ts
View File

@ -26,18 +26,14 @@ export class DisposableBag implements IDisposable {
this._isDisposed = true;
for (const item of this._disposables) {
try {
this._execute(item);
} catch (error) {
console.error('Error during resource disposal:', error);
}
}
this._disposables.clear();
}
private _execute(item: DisposableItem): void {
if (typeof item === 'function') {
if (typeof item === "function") {
item();
} else {
item.dispose();

2
packages/framework/src/utils/dnd.ts
View File

@ -1,4 +1,4 @@
import { DisposableBag } from "./disposable";
import type { DisposableBag } from "./disposable";
type PointerRecord = {
id: number;

10
packages/framework/src/utils/index.ts
View File

@ -1,3 +1,7 @@
export { DisposableBag } from './disposable';
export type { IDisposable, DisposableItem } from './disposable';
export { dragDropEventEffect, DragDropEventType, type DragDropEvent } from './dnd';
export { DisposableBag } from "./disposable";
export type { IDisposable, DisposableItem } from "./disposable";
export {
dragDropEventEffect,
DragDropEventType,
type DragDropEvent,
} from "./dnd";