diff --git a/public/assets/images/game-icons.png b/public/assets/images/game-icons.png index 10b9568..4ad3943 100644 Binary files a/public/assets/images/game-icons.png and b/public/assets/images/game-icons.png differ diff --git a/public/assets/images/game-icons.psd b/public/assets/images/game-icons.psd index c437413..3c583ac 100644 Binary files a/public/assets/images/game-icons.psd and b/public/assets/images/game-icons.psd differ diff --git a/public/assets/images/tab-icons.png b/public/assets/images/tab-icons.png index 823b361..3c8904f 100644 Binary files a/public/assets/images/tab-icons.png and b/public/assets/images/tab-icons.png differ diff --git a/public/assets/images/tab-icons.psd b/public/assets/images/tab-icons.psd index 8ca1e7c..2bcf848 100644 Binary files a/public/assets/images/tab-icons.psd and b/public/assets/images/tab-icons.psd differ diff --git a/public/src/scenes/GameMenuScene.js b/public/src/scenes/GameMenuScene.js index aaae5eb..f5f213a 100644 --- a/public/src/scenes/GameMenuScene.js +++ b/public/src/scenes/GameMenuScene.js @@ -32,12 +32,12 @@ export default class GameMenuScene extends Phaser.Scene { this.add.image(cx, GAME_HEIGHT / 2, 'bg-menu').setDisplaySize(GAME_WIDTH, GAME_HEIGHT); addFullscreenButton(this); - const titleText = this.add.text(cx, 120, 'Choose a game', { + const titleText = this.add.text(cx, 60, 'Choose a game', { fontFamily: 'Righteous', fontSize: '64px', color: COLORS.textHex, }).setOrigin(0.5).setDepth(1); - this.add.rectangle(cx, 120, titleText.width + 64, titleText.height + 28, 0x000000, 0.7); + this.add.rectangle(cx, 60, titleText.width + 64, titleText.height + 28, 0x000000, 0.7); const loadingText = this.add.text(cx, 540, 'Loading game list…', { fontSize: '24px', color: COLORS.mutedHex, @@ -61,12 +61,20 @@ export default class GameMenuScene extends Phaser.Scene { this._gameObjects = []; this._tabs = {}; - const activeCats = CATEGORIES.filter(({ key }) => this._gamesByCategory[key].length > 0); - const tabSpacing = Math.min(420, 1800 / activeCats.length); - const tabStartX = cx - (tabSpacing * (activeCats.length - 1)) / 2; + // Two-row tab layout: row 1 has 4 categories, row 2 has the rest + const ROW1_KEYS = ['tabletop', 'cards', 'casino', 'word']; + const ROW2_KEYS = ['logic']; + const ROW1 = CATEGORIES.filter(c => ROW1_KEYS.includes(c.key)); + const ROW2 = CATEGORIES.filter(c => ROW2_KEYS.includes(c.key)); + const activeRow1 = ROW1.filter(({ key }) => this._gamesByCategory[key].length > 0); + const activeRow2 = ROW2.filter(({ key }) => this._gamesByCategory[key].length > 0); - activeCats.forEach(({ key, label }, i) => { - const btn = new Button(this, tabStartX + i * tabSpacing, 230, label, () => this.showCategory(key), { + const tabSpacing = Math.min(420, 1800 / activeRow1.length); + const tabStartX = cx - (tabSpacing * (activeRow1.length - 1)) / 2; + + // Row 1 tabs + activeRow1.forEach(({ key, label }, i) => { + const btn = new Button(this, tabStartX + i * tabSpacing, 170, label, () => this.showCategory(key), { width: 390, variant: 'ghost', }); @@ -74,8 +82,23 @@ export default class GameMenuScene extends Phaser.Scene { this._tabs[key] = btn; }); + // Row 2 tabs (centered) + if (activeRow2.length > 0) { + const row2Spacing = Math.min(420, 1800 / activeRow2.length); + const row2StartX = cx - (row2Spacing * (activeRow2.length - 1)) / 2; + activeRow2.forEach(({ key, label }, i) => { + const btn = new Button(this, row2StartX + i * row2Spacing, 250, label, () => this.showCategory(key), { + width: 390, + variant: 'ghost', + }); + btn.text.setX(40); + this._tabs[key] = btn; + }); + } + this._tabIcons = {}; - activeCats.forEach(({ key }) => { + const allActiveCats = [...activeRow1, ...activeRow2]; + allActiveCats.forEach(({ key }) => { const btn = this._tabs[key]; const icon = this.add.image(btn.x + ICON_X_OFFSET, btn.y, 'tab-icons', TAB_ICON_FRAMES[key]) .setDisplaySize(ICON_INACTIVE, ICON_INACTIVE); @@ -83,7 +106,7 @@ export default class GameMenuScene extends Phaser.Scene { this._tabIcons[key] = icon; }); - const startKey = activeCats.find(c => c.key === _lastCategory) ? _lastCategory : activeCats[0].key; + const startKey = allActiveCats.find(c => c.key === _lastCategory) ? _lastCategory : allActiveCats[0].key; this.showCategory(startKey); new Button(this, cx, GAME_HEIGHT - 100, 'Back', () => this.scene.start('Landing'), { variant: 'ghost' }); @@ -152,7 +175,7 @@ export default class GameMenuScene extends Phaser.Scene { const COLS = 3; const COL_SPACING = 520; const ROW_SPACING = 90; - const GRID_TOP = 340; + const GRID_TOP = 370; const BTN_WIDTH = 360; const PADDING = 52; const QBTN_SIZE = 44;