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

refactor(dominion): redesign card hover popup to show card face 

- Replace text-only tooltip with a visual card preview popup
- Add background graphics and proper layout for card face and rules text
- Update popup dimensions and positioning logic
This commit is contained in:
Brian Fertig 2026-05-26 19:12:39 -06:00
parent c264cd9419
commit 1196d3ba5b
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
public/src/games/dominion/DominionGame.js
View File

@ -529,31 +529,41 @@ export default class DominionGame extends Phaser.Scene {
showHover(def) {
this.hoverPopup.removeAll(true);
const w = 360;
const pad = 16;
const title = this.add.text(0, 0, def.name, {
fontFamily: 'Righteous', fontSize: '26px', color: COLORS.goldHex,
}).setOrigin(0.5, 0);
const sub = this.add.text(0, 0, `${typeLine(def)} • Cost ${def.cost}`, {
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex,
}).setOrigin(0.5, 0);
const body = this.add.text(0, 0, def.text || '—', {
fontFamily: '"Julius Sans One"', fontSize: '18px', color: COLORS.textHex,
align: 'center', wordWrap: { width: w - pad * 2 },
}).setOrigin(0.5, 0);
title.setY(0);
sub.setY(title.height + 6);
body.setY(sub.y + sub.height + 12);
const h = body.y + body.height + pad;
const W_CARD = 264, H_CARD = 380;
const PAD = 20, GAP = 16;
const W_POP = W_CARD + PAD * 2;
const g = this.add.graphics();
g.fillStyle(0x0d1117, 0.97); g.fillRoundedRect(-w / 2, -pad, w, h + pad, 12);
g.lineStyle(2, COLORS.accent, 0.95); g.strokeRoundedRect(-w / 2, -pad, w, h + pad, 12);
const hasText = def.text && def.text.trim().length > 0;
const rulesText = hasText
? this.add.text(0, 0, def.text, {
fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.textHex,
align: 'center', wordWrap: { width: W_CARD },
}).setOrigin(0.5, 0)
: null;
this.hoverPopup.add([g, title, sub, body]);
this.hoverPopup.setData('w', w);
this.hoverPopup.setData('h', h + pad);
const totalH = PAD + H_CARD + (hasText ? GAP + rulesText.height + PAD : PAD);
const halfH = totalH / 2;
const bg = this.add.graphics();
bg.fillStyle(0x0d1117, 0.97);
bg.fillRoundedRect(-W_POP / 2, -halfH, W_POP, totalH, 14);
bg.lineStyle(2, COLORS.accent, 0.95);
bg.strokeRoundedRect(-W_POP / 2, -halfH, W_POP, totalH, 14);
const cardFace = this.buildCardFace(W_CARD, H_CARD, def);
this.hoverPopup.add(bg);
this.hoverPopup.add(cardFace);
cardFace.setPosition(0, -halfH + PAD + H_CARD / 2);
if (rulesText) {
this.hoverPopup.add(rulesText);
rulesText.setPosition(0, -halfH + PAD + H_CARD + GAP);
}
this.hoverPopup.setData('w', W_POP);
this.hoverPopup.setData('h', totalH);
this.hoverVisible = true;
this.hoverPopup.setVisible(true);
const p = this.lastPointer ?? { x: CX, y: GAME_HEIGHT / 2 };