add visual skip overlay for skipped opponents

- Create a red "X" overlay that animates onto the portrait of a skipped opponent
- Implement `showSkipOverlay` to render the effect using Phaser DOM objects
- Trigger the overlay when a player is skipped to provide clearer visual feedback
This commit is contained in:
Brian Fertig 2026-05-19 20:17:23 -06:00
parent d6588405a4
commit 6b819e00b0
1 changed files with 31 additions and 0 deletions

View File

@ -1088,6 +1088,7 @@ export default class UnoGame extends Phaser.Scene {
const e = after.log[i];
if (e.kind === 'skip') {
this.opponentPortraits[e.seat]?.playEmotion('upset');
this.showSkipOverlay(e.seat);
this.showBanner(`${this.opponentName(e.seat)} is skipped!`);
this.time.delayedCall(900, () => this.hideBanner());
} else if (e.kind === 'reverse') {
@ -1271,6 +1272,36 @@ export default class UnoGame extends Phaser.Scene {
});
}
showSkipOverlay(skippedSeat) {
const slot = this.slotForSeat[skippedSeat];
const layout = slotLayout(slot, this.gs.players.length);
const { x: px, y: py, r: pr } = layout.portrait;
const r = pr + 8;
const size = r * 2;
const strokeW = Math.round(r * 0.09);
const slashW = Math.round(r * 0.13);
// Build as a DOM element so it renders above the portrait video layer.
const el = document.createElement('div');
el.style.cssText = `width:${size}px;height:${size}px;border-radius:50%;background:transparent;border:${strokeW}px solid rgba(204,0,0,0.95);box-sizing:border-box;position:relative;overflow:hidden;`;
const slash = document.createElement('div');
slash.style.cssText = `position:absolute;width:${slashW}px;height:${Math.round(size * 1.1)}px;background:rgba(204,0,0,0.95);border-radius:${Math.round(slashW / 2)}px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);`;
el.appendChild(slash);
const domObj = this.add.dom(DISCARD_POS.x, DISCARD_POS.y, el);
domObj.setDepth(D.banner);
domObj.setScale(0.2);
this.transientObjs.push(domObj);
this.tweens.add({
targets: domObj,
x: px, y: py,
scaleX: 1, scaleY: 1,
duration: 1500,
ease: 'Back.easeOut',
});
}
// ── Color picker modal ────────────────────────────────────────────────────
openColorPicker(onPick) {