From aba035f2ecebb0ecf056c77cf308274a7940c429 Mon Sep 17 00:00:00 2001 From: hypercross Date: Sat, 4 Apr 2026 14:47:03 +0800 Subject: [PATCH] fix: details --- packages/boop-game/src/scenes/GameScene.ts | 119 +++++++++++++++------ packages/boop-game/src/ui/App.tsx | 2 +- packages/framework/src/ui/PhaserBridge.tsx | 6 +- 3 files changed, 93 insertions(+), 34 deletions(-) diff --git a/packages/boop-game/src/scenes/GameScene.ts b/packages/boop-game/src/scenes/GameScene.ts index c05f6bc..821765d 100644 --- a/packages/boop-game/src/scenes/GameScene.ts +++ b/packages/boop-game/src/scenes/GameScene.ts @@ -15,6 +15,10 @@ export class GameScene extends GameHostScene { private turnText!: Phaser.GameObjects.Text; private infoText!: Phaser.GameObjects.Text; private winnerOverlay?: Phaser.GameObjects.Container; + private whiteSupplyContainer!: Phaser.GameObjects.Container; + private blackSupplyContainer!: Phaser.GameObjects.Container; + private whiteSupplyBg!: Phaser.GameObjects.Rectangle; + private blackSupplyBg!: Phaser.GameObjects.Rectangle; private whiteSupplyText!: Phaser.GameObjects.Text; private blackSupplyText!: Phaser.GameObjects.Text; private pieceTypeSelector!: Phaser.GameObjects.Container; @@ -135,33 +139,29 @@ export class GameScene extends GameHostScene { const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2; const uiY = BOARD_OFFSET.y - 20; - // 白色玩家储备 - this.whiteSupplyText = this.add.text( - boardCenterX - 150, - uiY, - '', - { - fontSize: '16px', - fontFamily: 'Arial', - color: '#ffffff', - backgroundColor: '#000000', - padding: { x: 10, y: 5 }, - } - ).setOrigin(0.5).setDepth(100); + // 白色玩家容器 + this.whiteSupplyContainer = this.add.container(boardCenterX - 150, uiY); + this.whiteSupplyBg = this.add.rectangle(0, 0, 120, 50, 0x000000); + this.whiteSupplyText = this.add.text(0, 0, '', { + fontSize: '16px', + fontFamily: 'Arial', + color: '#ffffff', + align: 'center', + }).setOrigin(0.5); + this.whiteSupplyContainer.add([this.whiteSupplyBg, this.whiteSupplyText]); + this.whiteSupplyContainer.setDepth(100); - // 黑色玩家储备 - this.blackSupplyText = this.add.text( - boardCenterX + 150, - uiY, - '', - { - fontSize: '16px', - fontFamily: 'Arial', - color: '#ffffff', - backgroundColor: '#333333', - padding: { x: 10, y: 5 }, - } - ).setOrigin(0.5).setDepth(100); + // 黑色玩家容器 + this.blackSupplyContainer = this.add.container(boardCenterX + 150, uiY); + this.blackSupplyBg = this.add.rectangle(0, 0, 120, 50, 0x333333); + this.blackSupplyText = this.add.text(0, 0, '', { + fontSize: '16px', + fontFamily: 'Arial', + color: '#ffffff', + align: 'center', + }).setOrigin(0.5); + this.blackSupplyContainer.add([this.blackSupplyBg, this.blackSupplyText]); + this.blackSupplyContainer.setDepth(100); this.updateSupplyUI(); } @@ -178,10 +178,64 @@ export class GameScene extends GameHostScene { `⚫ BLACK\n🐾 ${black.kitten.supply} | 🐱 ${black.cat.supply}` ); - // 高亮当前玩家 + // 高亮当前玩家（使用动画） const isWhiteTurn = this.state.currentPlayer === 'white'; - this.whiteSupplyText.setStyle({ backgroundColor: isWhiteTurn ? '#fbbf24' : '#000000' }); - this.blackSupplyText.setStyle({ backgroundColor: !isWhiteTurn ? '#fbbf24' : '#333333' }); + + // 停止之前的动画 + this.tweens.killTweensOf(this.whiteSupplyContainer); + this.tweens.killTweensOf(this.blackSupplyContainer); + + if (isWhiteTurn) { + // 白色玩家弹跳 + 脉冲 + this.whiteSupplyBg.setFillStyle(0xfbbf24); + this.whiteSupplyContainer.setScale(1); + this.tweens.add({ + targets: this.whiteSupplyContainer, + scale: 1.15, + duration: 200, + ease: 'Back.easeOut', + yoyo: true, + hold: 400, + onComplete: () => { + this.tweens.add({ + targets: this.whiteSupplyContainer, + alpha: 0.6, + duration: 600, + ease: 'Sine.easeInOut', + yoyo: true, + repeat: -1, + }); + }, + }); + this.blackSupplyBg.setFillStyle(0x333333); + this.blackSupplyContainer.setAlpha(1); + this.blackSupplyContainer.setScale(1); + } else { + // 黑色玩家弹跳 + 脉冲 + this.blackSupplyBg.setFillStyle(0xfbbf24); + this.blackSupplyContainer.setScale(1); + this.tweens.add({ + targets: this.blackSupplyContainer, + scale: 1.15, + duration: 200, + ease: 'Back.easeOut', + yoyo: true, + hold: 400, + onComplete: () => { + this.tweens.add({ + targets: this.blackSupplyContainer, + alpha: 0.6, + duration: 600, + ease: 'Sine.easeInOut', + yoyo: true, + repeat: -1, + }); + }, + }); + this.whiteSupplyBg.setFillStyle(0x000000); + this.whiteSupplyContainer.setAlpha(1); + this.whiteSupplyContainer.setScale(1); + } } private createPieceTypeSelector(): void { @@ -191,15 +245,16 @@ export class GameScene extends GameHostScene { this.pieceTypeSelector = this.add.container(boardCenterX, selectorY); // 标签文字 - const label = this.add.text(-120, 0, '放置:', { + const label = this.add.text(-160, 0, '放置:', { fontSize: '18px', fontFamily: 'Arial', color: '#4b5563', }).setOrigin(0.5, 0.5); // 小猫按钮 - this.kittenButton = this.createPieceButton('kitten', '🐾 小猫', -30); - this.catButton = this.createPieceButton('cat', '🐱 大猫', 50); + this.kittenButton = this.createPieceButton('kitten', '🐾 小猫', -50); + // 大猫按钮 + this.catButton = this.createPieceButton('cat', '🐱 大猫', 70); this.pieceTypeSelector.add([label, this.kittenButton, this.catButton]); this.updatePieceTypeSelector(); diff --git a/packages/boop-game/src/ui/App.tsx b/packages/boop-game/src/ui/App.tsx index 182cfba..6913595 100644 --- a/packages/boop-game/src/ui/App.tsx +++ b/packages/boop-game/src/ui/App.tsx @@ -21,7 +21,7 @@ export default function App>(props: { gam return (
- +
diff --git a/packages/framework/src/ui/PhaserBridge.tsx b/packages/framework/src/ui/PhaserBridge.tsx index 6ca5945..45eda7c 100644 --- a/packages/framework/src/ui/PhaserBridge.tsx +++ b/packages/framework/src/ui/PhaserBridge.tsx @@ -23,7 +23,11 @@ export function PhaserGame(props: PhaserGameProps) { const gameSignal = useSignal(); useSignalEffect(() => { - const phaserGame = new Phaser.Game(props.config || defaultPhaserConfig); + const config: Phaser.Types.Core.GameConfig = { + ...defaultPhaserConfig, + ...props.config, + }; + const phaserGame = new Phaser.Game(config); gameSignal.value = phaserGame; return () => {