Compare commits
No commits in common. "02d2f45da297ad814050a9157e922e42acd1d384" and "ecfa89e383b1d13bfae3830754833f57fc0167f6" have entirely different histories.
02d2f45da2
...
ecfa89e383
|
|
@ -1,25 +1 @@
|
|||
/**
|
||||
* Re-export onitama game module from boardgame-core
|
||||
* This provides a convenient import path within onitama-game
|
||||
*/
|
||||
export {
|
||||
registry,
|
||||
prompts,
|
||||
start,
|
||||
createInitialState,
|
||||
initializeCards,
|
||||
getAvailableMoves,
|
||||
isValidMove,
|
||||
getCardMoveCandidates,
|
||||
createRegions,
|
||||
createCards,
|
||||
createPawns,
|
||||
createGameInfo,
|
||||
type OnitamaState,
|
||||
type OnitamaGame,
|
||||
type PlayerType,
|
||||
type Card,
|
||||
type CardData,
|
||||
type Pawn,
|
||||
type RegionType,
|
||||
} from "boardgame-core/samples/onitama";
|
||||
export * from "boardgame-core/samples/onitama";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import { h } from 'preact';
|
||||
import { GameUI } from 'boardgame-phaser';
|
||||
import * as gameModule from './game/onitama';
|
||||
import './style.css';
|
||||
import App from "@/ui/App";
|
||||
import {OnitamaScene} from "@/scenes/OnitamaScene";
|
||||
|
||||
const ui = new GameUI({
|
||||
container: document.getElementById('ui-root')!,
|
||||
root: <App/>,
|
||||
root: <App gameModule={gameModule} gameScene={OnitamaScene}/>,
|
||||
});
|
||||
|
||||
ui.mount();
|
||||
|
|
|
|||
|
|
@ -1,156 +0,0 @@
|
|||
import { ReactiveScene } from 'boardgame-phaser';
|
||||
import Phaser from 'phaser';
|
||||
|
||||
/** 菜单场景配置 */
|
||||
const MENU_CONFIG = {
|
||||
colors: {
|
||||
title: '#1f2937',
|
||||
buttonText: '#ffffff',
|
||||
buttonBg: 0x3b82f6,
|
||||
buttonBgHover: 0x2563eb,
|
||||
subtitle: '#6b7280',
|
||||
},
|
||||
fontSize: {
|
||||
title: '48px',
|
||||
button: '24px',
|
||||
subtitle: '16px',
|
||||
},
|
||||
button: {
|
||||
width: 200,
|
||||
height: 80,
|
||||
},
|
||||
positions: {
|
||||
titleY: -120,
|
||||
buttonY: 40,
|
||||
subtitleY: 160,
|
||||
},
|
||||
} as const;
|
||||
|
||||
export class MenuScene extends ReactiveScene {
|
||||
private titleText!: Phaser.GameObjects.Text;
|
||||
private startButtonContainer!: Phaser.GameObjects.Container;
|
||||
private startButtonBg!: Phaser.GameObjects.Rectangle;
|
||||
private startButtonText!: Phaser.GameObjects.Text;
|
||||
|
||||
constructor() {
|
||||
super('MenuScene');
|
||||
}
|
||||
|
||||
create(): void {
|
||||
super.create();
|
||||
|
||||
const center = this.getCenterPosition();
|
||||
|
||||
this.createTitle(center);
|
||||
this.createStartButton(center);
|
||||
this.createSubtitle(center);
|
||||
}
|
||||
|
||||
/** 获取屏幕中心位置 */
|
||||
private getCenterPosition(): { x: number; y: number } {
|
||||
return {
|
||||
x: this.game.scale.width / 2,
|
||||
y: this.game.scale.height / 2,
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建标题文本 */
|
||||
private createTitle(center: { x: number; y: number }): void {
|
||||
this.titleText = this.add.text(
|
||||
center.x,
|
||||
center.y + MENU_CONFIG.positions.titleY,
|
||||
'Onitama',
|
||||
{
|
||||
fontSize: MENU_CONFIG.fontSize.title,
|
||||
fontFamily: 'Arial',
|
||||
color: MENU_CONFIG.colors.title,
|
||||
}
|
||||
).setOrigin(0.5);
|
||||
|
||||
// 标题入场动画
|
||||
this.titleText.setScale(0);
|
||||
this.tweens.add({
|
||||
targets: this.titleText,
|
||||
scale: 1,
|
||||
duration: 600,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
}
|
||||
|
||||
/** 创建开始按钮 */
|
||||
private createStartButton(center: { x: number; y: number }): void {
|
||||
const { button, colors } = MENU_CONFIG;
|
||||
|
||||
this.startButtonBg = this.add.rectangle(
|
||||
0,
|
||||
0,
|
||||
button.width,
|
||||
button.height,
|
||||
colors.buttonBg
|
||||
).setOrigin(0.5).setInteractive({ useHandCursor: true });
|
||||
|
||||
this.startButtonText = this.add.text(
|
||||
0,
|
||||
0,
|
||||
'Start Game',
|
||||
{
|
||||
fontSize: MENU_CONFIG.fontSize.button,
|
||||
fontFamily: 'Arial',
|
||||
color: colors.buttonText,
|
||||
}
|
||||
).setOrigin(0.5);
|
||||
|
||||
this.startButtonContainer = this.add.container(
|
||||
center.x,
|
||||
center.y + MENU_CONFIG.positions.buttonY,
|
||||
[this.startButtonBg, this.startButtonText]
|
||||
);
|
||||
|
||||
// 按钮交互
|
||||
this.setupButtonInteraction();
|
||||
}
|
||||
|
||||
/** 设置按钮交互效果 */
|
||||
private setupButtonInteraction(): void {
|
||||
this.startButtonBg.on('pointerover', () => {
|
||||
this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
|
||||
this.tweens.add({
|
||||
targets: this.startButtonContainer,
|
||||
scale: 1.05,
|
||||
duration: 100,
|
||||
});
|
||||
});
|
||||
|
||||
this.startButtonBg.on('pointerout', () => {
|
||||
this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
|
||||
this.tweens.add({
|
||||
targets: this.startButtonContainer,
|
||||
scale: 1,
|
||||
duration: 100,
|
||||
});
|
||||
});
|
||||
|
||||
this.startButtonBg.on('pointerdown', () => {
|
||||
this.startGame();
|
||||
});
|
||||
}
|
||||
|
||||
/** 创建副标题 */
|
||||
private createSubtitle(center: { x: number; y: number }): void {
|
||||
this.add.text(
|
||||
center.x,
|
||||
center.y + MENU_CONFIG.positions.subtitleY,
|
||||
'Click to start playing',
|
||||
{
|
||||
fontSize: MENU_CONFIG.fontSize.subtitle,
|
||||
fontFamily: 'Arial',
|
||||
color: MENU_CONFIG.colors.subtitle,
|
||||
}
|
||||
).setOrigin(0.5);
|
||||
}
|
||||
|
||||
/** 开始游戏 */
|
||||
private async startGame(): Promise<void> {
|
||||
await this.sceneController.launch('OnitamaScene');
|
||||
}
|
||||
}
|
||||
|
|
@ -18,9 +18,6 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
private infoText!: Phaser.GameObjects.Text;
|
||||
private winnerOverlay?: Phaser.GameObjects.Container;
|
||||
private cardLabelContainers: Map<string, Phaser.GameObjects.Text> = new Map();
|
||||
private menuButtonContainer!: Phaser.GameObjects.Container;
|
||||
private menuButtonBg!: Phaser.GameObjects.Rectangle;
|
||||
private menuButtonText!: Phaser.GameObjects.Text;
|
||||
|
||||
// UI State managed by MutableSignal
|
||||
public uiState!: MutableSignal<OnitamaUIState>;
|
||||
|
|
@ -60,11 +57,11 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
|
||||
// Info text
|
||||
this.infoText = this.add.text(
|
||||
40,
|
||||
20,
|
||||
BOARD_OFFSET.y,
|
||||
'',
|
||||
{
|
||||
fontSize: '16px',
|
||||
fontSize: '15px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#4b5563',
|
||||
}
|
||||
|
|
@ -77,12 +74,6 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
|
||||
// Input handling
|
||||
this.setupInput();
|
||||
|
||||
// Menu button
|
||||
this.createMenuButton();
|
||||
|
||||
// Start the game
|
||||
this.gameHost.start();
|
||||
}
|
||||
|
||||
private createCardLabels(): void {
|
||||
|
|
@ -94,7 +85,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
// Red cards label - 棋盘下方
|
||||
const redLabel = this.add.text(
|
||||
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
|
||||
boardBottom + 40,
|
||||
boardBottom + 10,
|
||||
"RED",
|
||||
{
|
||||
fontSize: '16px',
|
||||
|
|
@ -107,7 +98,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
// Black cards label - 棋盘上方
|
||||
const blackLabel = this.add.text(
|
||||
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
|
||||
boardTop - 40,
|
||||
boardTop - 10,
|
||||
"BLACK",
|
||||
{
|
||||
fontSize: '16px',
|
||||
|
|
@ -150,8 +141,8 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
g.strokePath();
|
||||
|
||||
this.add.text(
|
||||
40,
|
||||
40,
|
||||
20,
|
||||
20,
|
||||
'Onitama',
|
||||
{
|
||||
fontSize: '28px',
|
||||
|
|
@ -229,43 +220,6 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
|
|||
return pawnId ? this.state.pawns[pawnId] : null;
|
||||
}
|
||||
|
||||
/** 创建菜单按钮 */
|
||||
private createMenuButton(): void {
|
||||
const buttonX = 680;
|
||||
const buttonY = 40;
|
||||
|
||||
this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, 0x6b7280)
|
||||
.setInteractive({ useHandCursor: true });
|
||||
|
||||
this.menuButtonText = this.add.text(buttonX, buttonY, 'Menu', {
|
||||
fontSize: '18px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#ffffff',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.menuButtonContainer = this.add.container(buttonX, buttonY, [
|
||||
this.menuButtonBg,
|
||||
this.menuButtonText,
|
||||
]);
|
||||
|
||||
this.menuButtonBg.on('pointerover', () => {
|
||||
this.menuButtonBg.setFillStyle(0x4b5563);
|
||||
});
|
||||
|
||||
this.menuButtonBg.on('pointerout', () => {
|
||||
this.menuButtonBg.setFillStyle(0x6b7280);
|
||||
});
|
||||
|
||||
this.menuButtonBg.on('pointerdown', () => {
|
||||
this.goToMenu();
|
||||
});
|
||||
}
|
||||
|
||||
/** 跳转到菜单场景 */
|
||||
private async goToMenu(): Promise<void> {
|
||||
await this.sceneController.launch('MenuScene');
|
||||
}
|
||||
|
||||
private showWinner(winner: string): void {
|
||||
if (this.winnerOverlay) {
|
||||
this.winnerOverlay.destroy();
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
export { OnitamaScene } from './OnitamaScene';
|
||||
export { MenuScene } from './MenuScene';
|
||||
|
|
@ -5,10 +5,9 @@ import type { OnitamaScene } from '@/scenes/OnitamaScene';
|
|||
import { BOARD_OFFSET, CELL_SIZE } from './PawnSpawner';
|
||||
import { effect } from "@preact/signals-core";
|
||||
|
||||
export const CARD_WIDTH = 80;
|
||||
export const CARD_HEIGHT = 120;
|
||||
export const CARD_WIDTH = 100;
|
||||
export const CARD_HEIGHT = 140;
|
||||
const BOARD_SIZE = 5;
|
||||
const CARD_SPACING = 100; // 确保每张卡牌至少 80x80 区域
|
||||
|
||||
export interface CardSpawnData {
|
||||
cardId: string;
|
||||
|
|
@ -177,7 +176,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
|
|||
.setStrokeStyle(2, 0x6b7280);
|
||||
this.add(bg);
|
||||
|
||||
const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 16, card.id, {
|
||||
const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 15, card.id, {
|
||||
fontSize: '12px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#1f2937',
|
||||
|
|
@ -185,11 +184,11 @@ export class CardContainer extends Phaser.GameObjects.Container {
|
|||
this.add(title);
|
||||
|
||||
const grid = (this.scene as OnitamaScene).add.graphics();
|
||||
const cellSize = 14;
|
||||
const cellSize = 16;
|
||||
const gridWidth = 5 * cellSize;
|
||||
const gridHeight = 5 * cellSize;
|
||||
const gridStartX = -gridWidth / 2;
|
||||
const gridStartY = -gridHeight / 2 + 20;
|
||||
const gridStartY = -gridHeight / 2 + 30;
|
||||
|
||||
for (let row = 0; row < 5; row++) {
|
||||
for (let col = 0; col < 5; col++) {
|
||||
|
|
@ -210,7 +209,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
|
|||
}
|
||||
this.add(grid);
|
||||
|
||||
const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, {
|
||||
const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 15, card.startingPlayer, {
|
||||
fontSize: '10px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#6b7280',
|
||||
|
|
@ -256,20 +255,20 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
|
|||
if (data.position === 'red') {
|
||||
// 红方卡牌在棋盘下方，水平排列
|
||||
return {
|
||||
x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
|
||||
y: boardBottom + CARD_HEIGHT / 2 + 40,
|
||||
x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
|
||||
y: boardBottom + CARD_HEIGHT - 30,
|
||||
};
|
||||
} else if (data.position === 'black') {
|
||||
// 黑方卡牌在棋盘上方，水平排列
|
||||
return {
|
||||
x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
|
||||
y: boardTop - CARD_HEIGHT / 2 - 40,
|
||||
x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
|
||||
y: boardTop - CARD_HEIGHT + 30,
|
||||
};
|
||||
} else {
|
||||
// 备用卡牌在棋盘左侧，垂直居中
|
||||
const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
|
||||
return {
|
||||
x: boardLeft - CARD_WIDTH / 2 - 40,
|
||||
x: boardLeft - CARD_WIDTH,
|
||||
y: boardCenterY,
|
||||
};
|
||||
}
|
||||
|
|
@ -309,7 +308,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
|
|||
targets: obj,
|
||||
x: pos.x,
|
||||
y: pos.y,
|
||||
duration: 600,
|
||||
duration: 350,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
|
||||
|
|
@ -330,16 +329,8 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
|
|||
return emptyContainer;
|
||||
}
|
||||
|
||||
// 计算初始旋转角度
|
||||
const isBlackTurn = this.scene.state.currentPlayer === 'black';
|
||||
let initialRotation = 0;
|
||||
if (data.position === 'black') {
|
||||
initialRotation = -180;
|
||||
} else if (data.position === 'spare' && isBlackTurn) {
|
||||
initialRotation = -180;
|
||||
}
|
||||
|
||||
const container = new CardContainer(this.scene, data.cardId, card, initialRotation);
|
||||
// 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
|
||||
const container = new CardContainer(this.scene, data.cardId, card, 0);
|
||||
const pos = this.getCardPosition(data);
|
||||
container.x = pos.x;
|
||||
container.y = pos.y;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { OnitamaUIState } from '@/state';
|
|||
import { effect } from "@preact/signals-core";
|
||||
|
||||
export const CELL_SIZE = 80;
|
||||
export const BOARD_OFFSET = { x: 240, y: 240 };
|
||||
export const BOARD_OFFSET = { x: 240, y: 200 };
|
||||
export const BOARD_SIZE = 5;
|
||||
|
||||
export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,41 @@
|
|||
import {useComputed} from '@preact/signals';
|
||||
import { createGameHost } from 'boardgame-core';
|
||||
import Phaser from 'phaser';
|
||||
import { h } from 'preact';
|
||||
import { PhaserGame, PhaserScene } from 'boardgame-phaser';
|
||||
import {MenuScene} from "@/scenes/MenuScene";
|
||||
import {useMemo} from "preact/hooks";
|
||||
import * as gameModule from '../game/onitama';
|
||||
import {OnitamaScene} from "@/scenes/OnitamaScene";
|
||||
import {createGameHost, type GameModule} from "boardgame-core";
|
||||
import type {OnitamaState} from "@/game/onitama";
|
||||
|
||||
export default function App() {
|
||||
const gameHost = useMemo(() => createGameHost(gameModule as unknown as GameModule<OnitamaState>), []);
|
||||
const gameScene = useMemo(() => new OnitamaScene(), []);
|
||||
const menuScene = useMemo(() => new MenuScene(), []);
|
||||
export default function App(props: { gameModule: any, gameScene: { new(): Phaser.Scene } }) {
|
||||
|
||||
const gameHost = useComputed(() => {
|
||||
const gameHost = createGameHost(props.gameModule);
|
||||
return { gameHost };
|
||||
});
|
||||
|
||||
const scene = useComputed(() => new props.gameScene());
|
||||
|
||||
const handleReset = () => {
|
||||
gameHost.value.gameHost.start();
|
||||
};
|
||||
const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
|
||||
|
||||
const phaserConfig: Partial<Phaser.Types.Core.GameConfig> = {
|
||||
width: 700,
|
||||
height: 800,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen">
|
||||
<div className="p-4 bg-gray-100 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex relative justify-center items-center">
|
||||
<PhaserGame initialScene="MenuScene" config={{ width: 720, height: 840 }}>
|
||||
<PhaserScene sceneKey="MenuScene" scene={menuScene} />
|
||||
<PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
|
||||
<PhaserGame config={phaserConfig}>
|
||||
<PhaserScene sceneKey="OnitamaScene" scene={scene.value} autoStart data={gameHost.value} />
|
||||
</PhaserGame>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue