brianfertig
/
fertig-classic-games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: adjust Battleship UI layout and positioning 

Repositions ship pips and placement buttons to prevent overlap and improve visual alignment. Updates Y-coordinates for Randomize, Clear, and Ready buttons to fit within the game area, and shifts ship labels left for better spacing.
This commit is contained in:
Brian Fertig 2026-05-31 13:01:05 -06:00
parent 81d3a28195
commit 651ef51633
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/src/games/battleship/BattleshipGame.js
View File

@ -235,11 +235,11 @@ export default class BattleshipGame extends Phaser.Scene {
const w = 26, gap = 8; const w = 26, gap = 8;
SHIPS.forEach((spec, i) => { SHIPS.forEach((spec, i) => {
const totalH = SHIPS.length * (w + gap); const totalH = SHIPS.length * (w + gap);
const y = top + 26 + i * (w + gap) - totalH / 2 + totalH / 2; const y = top + 46 + i * (w + gap);
const x = cx - (spec.len * 9); const x = cx - (spec.len * 9) - 65;
const g = this.add.graphics().setDepth(DEPTH.ui); const g = this.add.graphics().setDepth(DEPTH.ui);
this.drawPip(g, x, y, spec, 0); this.drawPip(g, x, y, spec, 0);
const t = this.add.text(cx + 84, y, spec.name, { const t = this.add.text(cx + 9, y, spec.name, {
fontFamily: '"Julius Sans One"', fontSize: '13px', color: COLORS.mutedHex, fontFamily: '"Julius Sans One"', fontSize: '13px', color: COLORS.mutedHex,
}).setOrigin(0, 0.5).setDepth(DEPTH.ui); }).setOrigin(0, 0.5).setDepth(DEPTH.ui);
pips.push({ g, t, spec, x, y }); pips.push({ g, t, spec, x, y });
@ -326,13 +326,17 @@ export default class BattleshipGame extends Phaser.Scene {
buildPlacementUI() { buildPlacementUI() {
const bx = EX / 2; const bx = EX / 2;
const bottom = GAME_HEIGHT - 40;
const readyY = bottom - 56;
const clearY = readyY - 70;
const randomY = clearY - 70;
this.placementUI = [ this.placementUI = [
new Button(this, bx, 470, 'Randomize', () => this.randomizePlacement(), new Button(this, bx, randomY, 'Randomize', () => this.randomizePlacement(),
{ width: 200, height: 50, fontSize: 22 }).setDepth(DEPTH.ui), { width: 200, height: 50, fontSize: 22 }).setDepth(DEPTH.ui),
new Button(this, bx, 540, 'Clear', () => this.clearPlacement(), new Button(this, bx, clearY, 'Clear', () => this.clearPlacement(),
{ variant: 'ghost', width: 200, height: 50, fontSize: 22 }).setDepth(DEPTH.ui), { variant: 'ghost', width: 200, height: 50, fontSize: 22 }).setDepth(DEPTH.ui),
]; ];
this.readyBtn = new Button(this, bx, 620, 'Ready', () => this.startBattle(), this.readyBtn = new Button(this, bx, readyY, 'Ready', () => this.startBattle(),
{ width: 200, height: 56, fontSize: 26 }).setDepth(DEPTH.ui); { width: 200, height: 56, fontSize: 26 }).setDepth(DEPTH.ui);
this.placementUI.push(this.readyBtn); this.placementUI.push(this.readyBtn);
this.updateReadyButton(); this.updateReadyButton();