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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/src/games/blokus/BlokusGame.js
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_X = 1035;
const TRAY_Y = 96; const TRAY_Y = 96;
const TRAY_COLS = 3; const TRAY_COLS = 3;
const TRAY_SLOT_W = 188; const TRAY_SLOT_W = 160;
const TRAY_SLOT_H = 92; const TRAY_SLOT_H = 92;
const TRAY_CELL = 15; 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 { export default class BlokusGame extends Phaser.Scene {
constructor() { super('BlokusGame'); } constructor() { super('BlokusGame'); }
@ -256,14 +256,14 @@ export default class BlokusGame extends Phaser.Scene {
buildScorePanels() { buildScorePanels() {
this.scorePanels = []; this.scorePanels = [];
for (let seat = 0; seat < this.gs.players.length; seat++) { 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 container = this.add.container(SIDE_X, y).setDepth(DEPTH.hud);
const bg = this.add.graphics(); const bg = this.add.graphics();
container.add(bg); container.add(bg);
const swatch = this.add.graphics(); const swatch = this.add.graphics();
container.add(swatch); container.add(swatch);
const name = this.add.text(-150, -18, '', { fontFamily: 'Righteous', fontSize: '20px', color: COLORS.textHex }).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(-150, 14, '', { fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex }).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); const score = this.add.text(150, 0, '', { fontFamily: 'Righteous', fontSize: '26px', color: COLORS.accentHex }).setOrigin(1, 0.5);
container.add([name, detail, score]); container.add([name, detail, score]);
this.scorePanels.push({ container, bg, swatch, name, detail, score }); this.scorePanels.push({ container, bg, swatch, name, detail, score });
@ -296,11 +296,11 @@ export default class BlokusGame extends Phaser.Scene {
} }
buildControls() { buildControls() {
this.rotateBtn = new Button(this, SIDE_X - 95, 560, '↻ Rotate', () => this.rotateSelection(), { width: 170, height: 48, fontSize: 20 }).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, 560, '↔ Flip', () => this.flipSelection(), { 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, 624, 'Pass', () => this.humanPass(), { variant: 'ghost', width: 360, 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, 700, 'New', () => this.scene.restart(), { variant: 'ghost', width: 170, height: 44, fontSize: 18 }).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, 700, 'Leave', () => this.scene.start('GameMenu'), { 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() { buildStatus() {