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:
parent
02d10faa2d
commit
e7827cec05
|
|
@ -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(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue