feat: add game icons to menu and animated dock arrows to Battleship
- Replace `gameicons` spritesheet with `game-icons` and load it in PreloadScene - Add `iconFrame` support to game registry and render icons next to menu buttons - Introduce animated dock arrows in Battleship to improve ship placement UI - Clean up arrow lifecycle management in Battleship scene
This commit is contained in:
parent
63df39442c
commit
da0dc25cdd
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 558 KiB |
Binary file not shown.
|
|
@ -305,7 +305,7 @@ export default class BattleshipGame extends Phaser.Scene {
|
|||
container.add(body);
|
||||
const piece = {
|
||||
spec, body, container, horizontal: true, placed: false,
|
||||
r: 0, c: 0, dockX: 0, dockY: 0, dockScale: scale,
|
||||
r: 0, c: 0, dockX: 0, dockY: 0, dockScale: scale, arrow: null,
|
||||
};
|
||||
this.drawPiece(piece, 'fleet');
|
||||
this.setPieceHit(piece);
|
||||
|
|
@ -322,6 +322,33 @@ export default class BattleshipGame extends Phaser.Scene {
|
|||
container.on('pointerdown', (p) => { if (p.rightButtonDown()) this.rotatePiece(piece); });
|
||||
return piece;
|
||||
});
|
||||
this.buildDockArrows();
|
||||
}
|
||||
|
||||
buildDockArrows() {
|
||||
for (const piece of this.shipPieces) {
|
||||
const shipW = piece.spec.len * CELL * piece.dockScale;
|
||||
const cx = piece.dockX + shipW / 2;
|
||||
const startY = piece.dockY - 34;
|
||||
const hw = 14, hh = 12;
|
||||
|
||||
const g = this.add.graphics().setDepth(DEPTH.ui + 1);
|
||||
g.fillStyle(0xffd24a, 1);
|
||||
g.fillTriangle(cx - hw, startY - hh, cx + hw, startY - hh, cx, startY + hh);
|
||||
g.lineStyle(2, 0xffedaa, 0.7);
|
||||
g.strokeTriangle(cx - hw, startY - hh, cx + hw, startY - hh, cx, startY + hh);
|
||||
|
||||
this.tweens.add({
|
||||
targets: g, y: 8, alpha: 0.72, duration: 580,
|
||||
ease: 'Sine.easeInOut', yoyo: true, repeat: -1,
|
||||
});
|
||||
|
||||
piece.arrow = g;
|
||||
}
|
||||
}
|
||||
|
||||
_destroyArrow(piece) {
|
||||
if (piece.arrow) { piece.arrow.destroy(); piece.arrow = null; }
|
||||
}
|
||||
|
||||
buildPlacementUI() {
|
||||
|
|
@ -399,6 +426,7 @@ export default class BattleshipGame extends Phaser.Scene {
|
|||
this.activeShip = piece;
|
||||
if (piece.placed) { piece.placed = false; this.syncFleetFromPieces(); this.updateReadyButton(); }
|
||||
piece.container.setScale(1).setDepth(DEPTH.missile);
|
||||
this._destroyArrow(piece);
|
||||
}
|
||||
|
||||
onShipDrag(piece, pointer) {
|
||||
|
|
@ -475,12 +503,13 @@ export default class BattleshipGame extends Phaser.Scene {
|
|||
if (!piece) return;
|
||||
piece.horizontal = !piece.horizontal;
|
||||
this.drawPiece(piece, piece.dragCell?.valid === false ? 'invalid' : 'fleet');
|
||||
this.setPieceHit(piece);
|
||||
// Re-evaluate the live preview at the current pointer.
|
||||
// Don't call setPieceHit here — calling setInteractive mid-drag corrupts
|
||||
// Phaser's drag state; placePiece/returnToDock will update it after drop.
|
||||
this.onShipDrag(piece, this.lastPointer);
|
||||
}
|
||||
|
||||
randomizePlacement() {
|
||||
for (const piece of this.shipPieces) this._destroyArrow(piece);
|
||||
const layout = placeShipsRandom();
|
||||
for (const piece of this.shipPieces) {
|
||||
const ship = layout.find((s) => s.name === piece.spec.name);
|
||||
|
|
@ -521,6 +550,7 @@ export default class BattleshipGame extends Phaser.Scene {
|
|||
|
||||
startBattle() {
|
||||
if (this.gs.fleets.player1.length !== SHIPS.length) return;
|
||||
for (const piece of this.shipPieces) this._destroyArrow(piece);
|
||||
// Lock the player's fleet (no more dragging) and place the AI's.
|
||||
for (const piece of this.shipPieces) { piece.container.disableInteractive(); this.input.setDraggable(piece.container, false); }
|
||||
this.placementUI.forEach((b) => b.destroy());
|
||||
|
|
|
|||
|
|
@ -151,6 +151,8 @@ export default class GameMenuScene extends Phaser.Scene {
|
|||
const PADDING = 52;
|
||||
const QBTN_SIZE = 44;
|
||||
const QBTN_GAP = 10;
|
||||
const ICON_SIZE = 44;
|
||||
const ICON_PAD = 12;
|
||||
|
||||
const rows = Math.ceil(games.length / COLS);
|
||||
const panelH = (rows - 1) * ROW_SPACING + PADDING * 2;
|
||||
|
|
@ -197,6 +199,14 @@ export default class GameMenuScene extends Phaser.Scene {
|
|||
const btn = new Button(this, x, y, game.name, () => this.openGame(game), { width: BTN_WIDTH });
|
||||
this._gameObjects.push(btn);
|
||||
|
||||
if (game.iconFrame != null && this.textures.exists('game-icons')) {
|
||||
const iconX = x - BTN_WIDTH / 2 + ICON_PAD + ICON_SIZE / 2;
|
||||
const icon = this.add.image(iconX, y, 'game-icons', game.iconFrame)
|
||||
.setDisplaySize(ICON_SIZE, ICON_SIZE);
|
||||
this._gameObjects.push(icon);
|
||||
btn.text.setX(28);
|
||||
}
|
||||
|
||||
if (game.hasTutorial) {
|
||||
const qx = x + BTN_WIDTH / 2 + QBTN_GAP + QBTN_SIZE / 2;
|
||||
const qy = y;
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ export default class PreloadScene extends Phaser.Scene {
|
|||
this.load.spritesheet('ttr-cards', '/assets/images/tickettoride-cards.png', { frameWidth: 270, frameHeight: 390 });
|
||||
this.load.spritesheet('gofish-cards', '/assets/images/gofish-cards.png', { frameWidth: 270, frameHeight: 390 });
|
||||
this.load.spritesheet('tab-icons', '/assets/images/tab-icons.png', { frameWidth: 128, frameHeight: 128 });
|
||||
this.load.spritesheet('game-icons', '/assets/images/game-icons.png', { frameWidth: 44, frameHeight: 44 });
|
||||
}
|
||||
|
||||
async create() {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export function registerGame(definition) {
|
|||
minOpponents: definition.minOpponents ?? 1,
|
||||
maxOpponents: definition.maxOpponents ?? 1,
|
||||
hasTutorial: definition.hasTutorial ?? false,
|
||||
iconFrame: definition.iconFrame ?? null,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -24,38 +25,38 @@ export function getGame(slug) {
|
|||
}
|
||||
|
||||
// Built-in catalog so the menu has something to show.
|
||||
registerGame({ slug: 'backgammon', name: 'Backgammon', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true });
|
||||
registerGame({ slug: 'parchisi', name: 'Parchisi', category: 'tabletop', minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3 });
|
||||
registerGame({ slug: 'blackjack', name: 'Blackjack', category: 'casino', cardGame: true, minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6 });
|
||||
registerGame({ slug: 'holdem', name: "Texas Hold 'Em", category: 'casino', cardGame: true, minPlayers: 2, maxPlayers: 8, minOpponents: 3, maxOpponents: 7 });
|
||||
registerGame({ slug: 'yatzi', name: 'Yatzi', category: 'tabletop', minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'skipbo', name: 'Skip-Bo', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'phase10', name: 'Phase 10', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'chinesecheckers', name: 'Chinese Checkers', category: 'tabletop', minPlayers: 6, maxPlayers: 6, minOpponents: 5, maxOpponents: 5 });
|
||||
registerGame({ slug: 'gofish', name: 'Go Fish', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3 });
|
||||
registerGame({ slug: 'uno', name: 'Uno', category: 'cards', cardGame: false, minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3 });
|
||||
registerGame({ slug: 'craps', name: 'Craps', category: 'casino', minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6 });
|
||||
registerGame({ slug: 'roulette', name: 'Roulette', category: 'casino', minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6 });
|
||||
registerGame({ slug: 'mexicantrain', name: 'Mexican Train', category: 'tabletop', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'hearts', name: 'Hearts', category: 'cards', cardGame: true, minPlayers: 4, maxPlayers: 4, minOpponents: 3, maxOpponents: 3 });
|
||||
registerGame({ slug: 'catan', name: 'Settlers of Catan', category: 'tabletop', cardGame: true, minPlayers: 3, maxPlayers: 4, minOpponents: 2, maxOpponents: 3, hasTutorial: true });
|
||||
registerGame({ slug: 'tickettoride', name: 'Ticket to Ride', category: 'tabletop', cardGame: true, minPlayers: 2, maxPlayers: 5, minOpponents: 1, maxOpponents: 4, hasTutorial: true });
|
||||
registerGame({ slug: 'nerts', name: 'Nerts', category: 'cards', cardGame: true, minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'bingo', name: 'Bingo', category: 'casino', minPlayers: 2, maxPlayers: 11, minOpponents: 1, maxOpponents: 10 });
|
||||
registerGame({ slug: 'baccarat', name: 'Baccarat', category: 'casino', cardGame: true, minPlayers: 2, maxPlayers: 7, minOpponents: 1, maxOpponents: 6 });
|
||||
registerGame({ slug: 'dominion', name: 'Dominion', category: 'cards', cardGame: true, minPlayers: 3, maxPlayers: 4, minOpponents: 2, maxOpponents: 3, hasTutorial: true });
|
||||
registerGame({ slug: 'checkers', name: 'Checkers', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'chess', name: 'Chess', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'wordle', name: 'Wordle', category: 'word', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'scrabble', name: 'Scrabble', category: 'word', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'ghost', name: 'Ghost', category: 'word', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'wordladder', name: 'Word Ladder', category: 'word', minPlayers: 1, maxPlayers: 2, minOpponents: 0, maxOpponents: 1 });
|
||||
registerGame({ slug: 'wordsearch', name: 'Word Search', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0 });
|
||||
registerGame({ slug: 'hangman', name: 'Hangman', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0 });
|
||||
registerGame({ slug: 'sudoku', name: 'Sudoku', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0 });
|
||||
registerGame({ slug: 'othello', name: 'Othello', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'go', name: 'Go', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'battleship', name: 'Battleship', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true });
|
||||
registerGame({ slug: 'mastermind', name: 'Mastermind', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true });
|
||||
registerGame({ slug: 'connect4', name: 'Connect 4', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1 });
|
||||
registerGame({ slug: 'boggle', name: 'Boggle', category: 'word', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3 });
|
||||
registerGame({ slug: 'backgammon', name: 'Backgammon', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true, iconFrame: 0 });
|
||||
registerGame({ slug: 'parchisi', name: 'Parchisi', category: 'tabletop', minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3, iconFrame: 1 });
|
||||
registerGame({ slug: 'blackjack', name: 'Blackjack', category: 'casino', cardGame: true, minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6, iconFrame: 2 });
|
||||
registerGame({ slug: 'holdem', name: "Texas Hold 'Em", category: 'casino', cardGame: true, minPlayers: 2, maxPlayers: 8, minOpponents: 3, maxOpponents: 7, iconFrame: 3 });
|
||||
registerGame({ slug: 'yatzi', name: 'Yatzi', category: 'tabletop', minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 4 });
|
||||
registerGame({ slug: 'skipbo', name: 'Skip-Bo', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 5 });
|
||||
registerGame({ slug: 'phase10', name: 'Phase 10', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 6 });
|
||||
registerGame({ slug: 'chinesecheckers', name: 'Chinese Checkers', category: 'tabletop', minPlayers: 6, maxPlayers: 6, minOpponents: 5, maxOpponents: 5, iconFrame: 7 });
|
||||
registerGame({ slug: 'gofish', name: 'Go Fish', category: 'cards', cardGame: true, minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3, iconFrame: 8 });
|
||||
registerGame({ slug: 'uno', name: 'Uno', category: 'cards', cardGame: false, minPlayers: 1, maxPlayers: 4, minOpponents: 3, maxOpponents: 3, iconFrame: 9 });
|
||||
registerGame({ slug: 'craps', name: 'Craps', category: 'casino', minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6, iconFrame: 10 });
|
||||
registerGame({ slug: 'roulette', name: 'Roulette', category: 'casino', minPlayers: 1, maxPlayers: 7, minOpponents: 0, maxOpponents: 6, iconFrame: 11 });
|
||||
registerGame({ slug: 'mexicantrain', name: 'Mexican Train', category: 'tabletop', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 12 });
|
||||
registerGame({ slug: 'hearts', name: 'Hearts', category: 'cards', cardGame: true, minPlayers: 4, maxPlayers: 4, minOpponents: 3, maxOpponents: 3, iconFrame: 13 });
|
||||
registerGame({ slug: 'catan', name: 'Settlers of Catan', category: 'tabletop', cardGame: true, minPlayers: 3, maxPlayers: 4, minOpponents: 2, maxOpponents: 3, hasTutorial: true, iconFrame: 14 });
|
||||
registerGame({ slug: 'tickettoride', name: 'Ticket to Ride', category: 'tabletop', cardGame: true, minPlayers: 2, maxPlayers: 5, minOpponents: 1, maxOpponents: 4, hasTutorial: true, iconFrame: 15 });
|
||||
registerGame({ slug: 'nerts', name: 'Nerts', category: 'cards', cardGame: true, minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 16 });
|
||||
registerGame({ slug: 'bingo', name: 'Bingo', category: 'casino', minPlayers: 2, maxPlayers: 11, minOpponents: 1, maxOpponents: 10, iconFrame: 17 });
|
||||
registerGame({ slug: 'baccarat', name: 'Baccarat', category: 'casino', cardGame: true, minPlayers: 2, maxPlayers: 7, minOpponents: 1, maxOpponents: 6, iconFrame: 18 });
|
||||
registerGame({ slug: 'dominion', name: 'Dominion', category: 'cards', cardGame: true, minPlayers: 3, maxPlayers: 4, minOpponents: 2, maxOpponents: 3, hasTutorial: true, iconFrame: 19 });
|
||||
registerGame({ slug: 'checkers', name: 'Checkers', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 20 });
|
||||
registerGame({ slug: 'chess', name: 'Chess', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 21 });
|
||||
registerGame({ slug: 'wordle', name: 'Wordle', category: 'word', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 22 });
|
||||
registerGame({ slug: 'scrabble', name: 'Scrabble', category: 'word', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 23 });
|
||||
registerGame({ slug: 'ghost', name: 'Ghost', category: 'word', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 24 });
|
||||
registerGame({ slug: 'wordladder', name: 'Word Ladder', category: 'word', minPlayers: 1, maxPlayers: 2, minOpponents: 0, maxOpponents: 1, iconFrame: 25 });
|
||||
registerGame({ slug: 'wordsearch', name: 'Word Search', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0, iconFrame: 26 });
|
||||
registerGame({ slug: 'hangman', name: 'Hangman', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0, iconFrame: 27 });
|
||||
registerGame({ slug: 'sudoku', name: 'Sudoku', category: 'word', minPlayers: 1, maxPlayers: 1, minOpponents: 0, maxOpponents: 0, iconFrame: 28 });
|
||||
registerGame({ slug: 'othello', name: 'Othello', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 29 });
|
||||
registerGame({ slug: 'go', name: 'Go', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 30 });
|
||||
registerGame({ slug: 'battleship', name: 'Battleship', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true, iconFrame: 31 });
|
||||
registerGame({ slug: 'mastermind', name: 'Mastermind', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, hasTutorial: true, iconFrame: 32 });
|
||||
registerGame({ slug: 'connect4', name: 'Connect 4', category: 'tabletop', minPlayers: 2, maxPlayers: 2, minOpponents: 1, maxOpponents: 1, iconFrame: 33 });
|
||||
registerGame({ slug: 'boggle', name: 'Boggle', category: 'word', minPlayers: 2, maxPlayers: 4, minOpponents: 1, maxOpponents: 3, iconFrame: 34 });
|
||||
|
|
|
|||
Loading…
Reference in New Issue