From 71ccb8732e5450bcd2c7f34b6a4f371abd4b1f91 Mon Sep 17 00:00:00 2001 From: hypercross Date: Wed, 8 Apr 2026 14:21:33 +0800 Subject: [PATCH] refactor: some manual changes --- .../onitama-game/src/scenes/OnitamaScene.ts | 55 ++++++------------- .../onitama-game/src/spawners/CardSpawner.ts | 29 +++++----- .../onitama-game/src/spawners/PawnSpawner.ts | 2 +- packages/onitama-game/src/ui/App.tsx | 4 +- 4 files changed, 34 insertions(+), 56 deletions(-) diff --git a/packages/onitama-game/src/scenes/OnitamaScene.ts b/packages/onitama-game/src/scenes/OnitamaScene.ts index 286d64f..57c5670 100644 --- a/packages/onitama-game/src/scenes/OnitamaScene.ts +++ b/packages/onitama-game/src/scenes/OnitamaScene.ts @@ -57,15 +57,15 @@ export class OnitamaScene extends GameHostScene { // Info text this.infoText = this.add.text( - BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, - BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30, + 20, + BOARD_OFFSET.y, '', { - fontSize: '20px', + fontSize: '15px', fontFamily: 'Arial', color: '#4b5563', } - ).setOrigin(0.5); + ); // Update info text when UI state changes this.addEffect(() => { @@ -80,12 +80,13 @@ export class OnitamaScene extends GameHostScene { const boardLeft = BOARD_OFFSET.x; const boardTop = BOARD_OFFSET.y; const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE; + const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE; - // Red cards label + // Red cards label - 棋盘下方 const redLabel = this.add.text( - boardLeft - CARD_WIDTH - 60 + CARD_WIDTH / 2, - boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10, - "RED's Cards", + boardLeft + (BOARD_SIZE * CELL_SIZE) / 2, + boardBottom + 10, + "RED", { fontSize: '16px', fontFamily: 'Arial', @@ -94,47 +95,27 @@ export class OnitamaScene extends GameHostScene { ).setOrigin(0.5, 0); this.cardLabelContainers.set('red', redLabel); - // Black cards label + // Black cards label - 棋盘上方 const blackLabel = this.add.text( - boardRight + 60 + CARD_WIDTH / 2, - boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10, - "BLACK's Cards", + boardLeft + (BOARD_SIZE * CELL_SIZE) / 2, + boardTop - 10, + "BLACK", { fontSize: '16px', fontFamily: 'Arial', color: '#3b82f6', } - ).setOrigin(0.5, 0); + ).setOrigin(0.5, 1); this.cardLabelContainers.set('black', blackLabel); - - // Spare card label - const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2; - const spareLabel = this.add.text( - boardCenterX, - boardTop - 50, - 'Spare Card', - { - fontSize: '16px', - fontFamily: 'Arial', - color: '#6b7280', - } - ).setOrigin(0.5, 0); - this.cardLabelContainers.set('spare', spareLabel); } private updateInfoText(): void { const currentPlayer = this.state.currentPlayer; - const selectedCard = this.uiState.value.selectedCard; - const selectedPiece = this.uiState.value.selectedPiece; if (this.state.winner) { this.infoText.setText(`${this.state.winner} wins!`); - } else if (!selectedCard) { - this.infoText.setText(`${currentPlayer}'s turn - Select a card first`); - } else if (!selectedPiece) { - this.infoText.setText(`Card: ${selectedCard} - Select a piece to move`); } else { - this.infoText.setText(`${currentPlayer}'s turn (Turn ${this.state.turn + 1})`); + this.infoText.setText(`Turn ${this.state.turn + 1}\n\n${currentPlayer}`); } } @@ -160,15 +141,15 @@ export class OnitamaScene extends GameHostScene { g.strokePath(); this.add.text( - BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, - BOARD_OFFSET.y - 40, + 20, + 20, 'Onitama', { fontSize: '28px', fontFamily: 'Arial', color: '#1f2937', } - ).setOrigin(0.5); + ); } private setupInput(): void { diff --git a/packages/onitama-game/src/spawners/CardSpawner.ts b/packages/onitama-game/src/spawners/CardSpawner.ts index 7c0e844..d7f4cff 100644 --- a/packages/onitama-game/src/spawners/CardSpawner.ts +++ b/packages/onitama-game/src/spawners/CardSpawner.ts @@ -250,21 +250,26 @@ export class CardSpawner implements Spawner { const boardTop = BOARD_OFFSET.y; const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE; const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2; + const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE; if (data.position === 'red') { + // 红方卡牌在棋盘下方，水平排列 return { - x: boardLeft - CARD_WIDTH - 60 + 60, - y: boardTop + 80 + data.index * (CARD_HEIGHT + 15), + 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: boardRight + 60 + 40, - y: boardTop + 80 + data.index * (CARD_HEIGHT + 15), + 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: boardCenterX, - y: boardTop - CARD_HEIGHT - 20, + x: boardLeft - CARD_WIDTH, + y: boardCenterY, }; } } @@ -324,16 +329,8 @@ export class CardSpawner implements Spawner { return emptyContainer; } - // 计算旋转角度 - const isBlackTurn = this.scene.state.currentPlayer === 'black'; - let rotation = 0; - if (data.position === 'black') { - rotation = 180; // 黑方卡牌始终旋转 - } else if (data.position === 'spare' && isBlackTurn) { - rotation = 180; // 备用卡牌在黑方回合旋转 - } - - const container = new CardContainer(this.scene, data.cardId, card, rotation); + // 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理 + const container = new CardContainer(this.scene, data.cardId, card, 0); const pos = this.getCardPosition(data); container.x = pos.x; container.y = pos.y; diff --git a/packages/onitama-game/src/spawners/PawnSpawner.ts b/packages/onitama-game/src/spawners/PawnSpawner.ts index dd991ba..5566356 100644 --- a/packages/onitama-game/src/spawners/PawnSpawner.ts +++ b/packages/onitama-game/src/spawners/PawnSpawner.ts @@ -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: 200, y: 180 }; +export const BOARD_OFFSET = { x: 240, y: 200 }; export const BOARD_SIZE = 5; export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } { diff --git a/packages/onitama-game/src/ui/App.tsx b/packages/onitama-game/src/ui/App.tsx index 7a6cb6f..9347a0f 100644 --- a/packages/onitama-game/src/ui/App.tsx +++ b/packages/onitama-game/src/ui/App.tsx @@ -19,8 +19,8 @@ export default function App(props: { gameModule: any, gameScene: { new(): Phaser const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start'); const phaserConfig: Partial = { - width: 800, - height: 700, + width: 700, + height: 800, }; return (