fix: render action callouts as DOM elements to overlay opponent videos

- Switch `animateActionText` from Phaser text to DOM container to ensure it renders above opponent portrait videos (which are DOM-based and thus always on top of the Phaser canvas)
- Apply text-shadow via inline CSS for better cross-browser compatibility with DOM text
- Increase depth to `D.modal + 100` to guarantee visibility over all other layers
This commit is contained in:
Brian Fertig 2026-05-24 16:26:17 -06:00
parent 02d10faa2d
commit e7827cec05
1 changed files with 20 additions and 10 deletions

View File

@ -882,23 +882,33 @@ export default class BlackjackGame extends Phaser.Scene {
const tx = (px + pos.x) / 2;
const ty = (py + pos.y) / 2;
const txt = this.add.text(tx, ty, label, {
fontFamily: '"Julius Sans One"',
fontSize: '44px',
color: ACTION_COLORS[action] ?? '#ffffff',
fontStyle: 'bold',
stroke: '#000000', strokeThickness: 5,
}).setOrigin(0.5).setAlpha(0).setScale(1.4).setDepth(D.modal);
// Rendered as a DOM element with a very high depth so it sits above
// everything, including the opponent portrait videos (which are DOM and
// therefore always drawn above the Phaser canvas).
const el = document.createElement('div');
el.textContent = label;
el.style.cssText = [
'font-family:"Julius Sans One",sans-serif',
'font-size:44px',
'font-weight:bold',
`color:${ACTION_COLORS[action] ?? '#ffffff'}`,
'text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,0 0 6px rgba(0,0,0,0.85)',
'white-space:nowrap',
'pointer-events:none',
'user-select:none',
].join(';');
const dom = this.add.dom(tx, ty, el).setDepth(D.modal + 100).setAlpha(0).setScale(1.4);
this.tweens.add({
targets: txt, alpha: 1, scaleX: 1, scaleY: 1,
targets: dom, alpha: 1, scaleX: 1, scaleY: 1,
duration: 180, ease: 'Back.Out',
});
this.time.delayedCall(1000, () => {
this.tweens.add({
targets: txt, alpha: 0, y: ty - 26,
targets: dom, alpha: 0, y: ty - 26,
duration: 350, ease: 'Power2',
onComplete: () => txt.destroy(),
onComplete: () => dom.destroy(),
});
});
}