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

Rounded Tutorial Buttons

This commit is contained in:
Brian Fertig 2026-05-31 08:24:35 -06:00
parent 98e799bf25
commit b0d6817c54
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/scenes/GameMenuScene.js
View File

@ -8,16 +8,16 @@ import { TutorialModal } from '../ui/TutorialModal.js';
const CATEGORIES = [ const CATEGORIES = [
{ key: 'tabletop', label: 'Tabletop' }, { key: 'tabletop', label: 'Tabletop' },
{ key: 'cards', label: 'Cards' }, { key: 'cards', label: 'Cards' },
{ key: 'casino', label: 'Casino' }, { key: 'casino', label: 'Casino' },
{ key: 'word', label: 'Word' }, { key: 'word', label: 'Word' },
]; ];
const TAB_ICON_FRAMES = { tabletop: 0, cards: 1, casino: 2, word: 3 }; const TAB_ICON_FRAMES = { tabletop: 0, cards: 1, casino: 2, word: 3 };
const ICON_INACTIVE = 56; const ICON_INACTIVE = 56;
const ICON_ACTIVE = 72; const ICON_ACTIVE = 72;
const ICON_OVERSHOOT = 86; const ICON_OVERSHOOT = 86;
const ICON_X_OFFSET = -125; const ICON_X_OFFSET = -125;
export default class GameMenuScene extends Phaser.Scene { export default class GameMenuScene extends Phaser.Scene {
constructor() { super('GameMenu'); } constructor() { super('GameMenu'); }
@ -202,9 +202,9 @@ export default class GameMenuScene extends Phaser.Scene {
const drawQ = (hover) => { const drawQ = (hover) => {
qg.clear(); qg.clear();
qg.fillStyle(0x1e1a12, 0.9); qg.fillStyle(0x1e1a12, 0.9);
qg.fillRect(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE); qg.fillRoundedRect(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE, 8);
qg.lineStyle(2, hover ? COLORS.gold : COLORS.accent, 1); qg.lineStyle(2, hover ? COLORS.gold : COLORS.accent, 1);
qg.strokeRect(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE); qg.strokeRoundedRect(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE, 8);
}; };
drawQ(false); drawQ(false);
@ -217,8 +217,8 @@ export default class GameMenuScene extends Phaser.Scene {
new Phaser.Geom.Rectangle(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE), new Phaser.Geom.Rectangle(qx - QBTN_SIZE / 2, qy - QBTN_SIZE / 2, QBTN_SIZE, QBTN_SIZE),
Phaser.Geom.Rectangle.Contains, Phaser.Geom.Rectangle.Contains,
); );
qg.on('pointerover', () => { drawQ(true); showTooltip(`Tutorial for ${game.name}`); }); qg.on('pointerover', () => { drawQ(true); showTooltip(`Instructions: ${game.name}`); });
qg.on('pointerout', () => { drawQ(false); hideTooltip(); }); qg.on('pointerout', () => { drawQ(false); hideTooltip(); });
qg.on('pointerdown', () => new TutorialModal(game).open()); qg.on('pointerdown', () => new TutorialModal(game).open());
this._gameObjects.push(qg, qLabel); this._gameObjects.push(qg, qLabel);