Blokus UI adjustments

This commit is contained in:
Brian Fertig 2026-05-31 21:10:41 -06:00
parent 50292b4a69
commit 3e975521fb
1 changed files with 10 additions and 10 deletions

View File

@ -22,10 +22,10 @@ const DEPTH = { felt: -1, grid: 0, corner: 1, piece: 10, ghost: 20, hud: 30, but
const TRAY_X = 1035;
const TRAY_Y = 96;
const TRAY_COLS = 3;
const TRAY_SLOT_W = 188;
const TRAY_SLOT_W = 160;
const TRAY_SLOT_H = 92;
const TRAY_CELL = 15;
const SIDE_X = 1750; // centre of the button / score column
const SIDE_X = 1710; // centre of the button / score column
export default class BlokusGame extends Phaser.Scene {
constructor() { super('BlokusGame'); }
@ -256,14 +256,14 @@ export default class BlokusGame extends Phaser.Scene {
buildScorePanels() {
this.scorePanels = [];
for (let seat = 0; seat < this.gs.players.length; seat++) {
const y = 96 + seat * 74;
const y = 146 + seat * 74;
const container = this.add.container(SIDE_X, y).setDepth(DEPTH.hud);
const bg = this.add.graphics();
container.add(bg);
const swatch = this.add.graphics();
container.add(swatch);
const name = this.add.text(-150, -18, '', { fontFamily: 'Righteous', fontSize: '20px', color: COLORS.textHex }).setOrigin(0, 0.5);
const detail = this.add.text(-150, 14, '', { fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex }).setOrigin(0, 0.5);
const name = this.add.text(-120, -18, '', { fontFamily: 'Righteous', fontSize: '20px', color: COLORS.textHex }).setOrigin(0, 0.5);
const detail = this.add.text(-120, 14, '', { fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex }).setOrigin(0, 0.5);
const score = this.add.text(150, 0, '', { fontFamily: 'Righteous', fontSize: '26px', color: COLORS.accentHex }).setOrigin(1, 0.5);
container.add([name, detail, score]);
this.scorePanels.push({ container, bg, swatch, name, detail, score });
@ -296,11 +296,11 @@ export default class BlokusGame extends Phaser.Scene {
}
buildControls() {
this.rotateBtn = new Button(this, SIDE_X - 95, 560, '↻ Rotate', () => this.rotateSelection(), { width: 170, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
this.flipBtn = new Button(this, SIDE_X + 95, 560, '↔ Flip', () => this.flipSelection(), { width: 170, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
this.passBtn = new Button(this, SIDE_X, 624, 'Pass', () => this.humanPass(), { variant: 'ghost', width: 360, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
new Button(this, SIDE_X - 95, 700, 'New', () => this.scene.restart(), { variant: 'ghost', width: 170, height: 44, fontSize: 18 }).setDepth(DEPTH.button);
new Button(this, SIDE_X + 95, 700, 'Leave', () => this.scene.start('GameMenu'), { variant: 'ghost', width: 170, height: 44, fontSize: 18 }).setDepth(DEPTH.button);
this.rotateBtn = new Button(this, SIDE_X - 95, 610, '↻ Rotate', () => this.rotateSelection(), { width: 170, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
this.flipBtn = new Button(this, SIDE_X + 95, 610, '↔ Flip', () => this.flipSelection(), { width: 170, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
this.passBtn = new Button(this, SIDE_X, 674, 'Pass', () => this.humanPass(), { variant: 'ghost', width: 360, height: 48, fontSize: 20 }).setDepth(DEPTH.button);
new Button(this, SIDE_X - 95, 750, 'New', () => this.scene.restart(), { variant: 'ghost', width: 170, height: 44, fontSize: 18 }).setDepth(DEPTH.button);
new Button(this, SIDE_X + 95, 750, 'Leave', () => this.scene.start('GameMenu'), { variant: 'ghost', width: 170, height: 44, fontSize: 18 }).setDepth(DEPTH.button);
}
buildStatus() {