fertig-classic-games/public/src/games/blackjack/BlackjackGame.js

1303 lines
46 KiB
JavaScript

import * as Phaser from 'phaser';
import { GAME_WIDTH, GAME_HEIGHT, COLORS } from '../../config.js';
import { Button } from '../../ui/Button.js';
import { Modal } from '../../ui/Modal.js';
import { createOpponentPortrait, createPlayerPortrait } from '../../ui/Portrait.js';
import { api } from '../../services/api.js';
import {
buildShoe, handValue, isBlackjack, isBust, canDouble, canSplit,
createInitialState, prepareRound, applyBet, dealAllCards,
applyInsurance, resolveInsurance, applyHit, applyStand, applyDouble, applySplit,
runDealerTurn, resolveRound, nextActiveSeat, isPlayerDone,
} from './BlackjackLogic.js';
import { chooseBet, chooseAction, chooseInsurance } from './BlackjackAI.js';
// ─── Layout ───────────────────────────────────────────────────────────────────
const CX = GAME_WIDTH / 2;
const CARD_W = 90;
const CARD_H = 126;
const CARD_R = 8;
const CARD_SPREAD = 28; // horizontal offset between stacked cards
const DEALER_X = CX;
const DEALER_Y = 420; // ~1/3 down the table ellipse (top ≈190, bottom ≈890)
const SEAT_POS = [
{ x: CX, y: 860, portraitR: 72, portraitX: CX - 230, portraitY: 860 }, // Human
{ x: 380, y: 775, portraitR: 58, portraitX: 200, portraitY: 650 }, // Opp 1 bottom-left (outside ellipse)
{ x: 150, y: 490, portraitR: 58 }, // Opp 2 left (already outside ellipse)
{ x: 1770, y: 490, portraitR: 58 }, // Opp 3 right (already outside ellipse)
{ x: 1540, y: 775, portraitR: 58, portraitX: 1720, portraitY: 650 }, // Opp 4 bottom-right (outside ellipse)
];
const CHIP_COLORS = { 5: 0xe05c5c, 25: 0x5cb85c, 50: 0x4a90d9, 100: 0x2c2c2c };
const CHIP_TEXT_COLORS = { 5: '#ffffff', 25: '#ffffff', 50: '#ffffff', 100: '#ffffff' };
const CHIP_AMOUNTS = [5, 25, 50, 100];
const D = { bg: -1, table: 0, cards: 10, chips: 20, ui: 30, modal: 50 };
const RESULT_COLORS = {
win: '#5cb85c', lose: '#e05c5c', push: '#8a94a6',
blackjack: '#f5d020', bust: '#e05c5c',
};
// ─── Scene ────────────────────────────────────────────────────────────────────
export default class BlackjackGame extends Phaser.Scene {
constructor() { super('BlackjackGame'); }
init(data) {
this.gameDef = data.game;
this.opponents = data.opponents ?? [];
this.playfield = data.playfield ?? null;
this.cardBack = data.cardBack ?? null;
}
async create() {
this.shoe = buildShoe();
this.gs = null;
this.animating = false;
this.pendingBet = 0;
this.portraits = [];
this.cardGraphics = {}; // seat → array of Phaser.Container
this.dealerCardGraphics = [];
this.betGraphics = {}; // seat → Phaser.Container
this.bustedSeats = new Set();
this.actionBtns = [];
this.bettingUIGroup = [];
this.chipBtnGraphics = [];
this.betDisplayText = null;
this.balanceText = null;
this.scoreTxts = {};
this.dealerScoreTxt = null;
this.statusBadges = {};
this.nameTxts = {};
this.chipTxts = {};
this.bettingPromptGroup = [];
this.bettingPromptTimer = null;
this.chipPulseTweens = [];
this.add.rectangle(CX, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, COLORS.bg).setDepth(D.bg);
this.buildPlayfield();
this.buildTable();
this.buildDealerArea();
this.buildSeats();
this.buildBettingUI();
new Button(this, 80, GAME_HEIGHT - 44, 'Leave', () => this.scene.start('GameMenu'), {
variant: 'ghost', width: 140, fontSize: 20,
});
await this.loadPlayerChips();
this.initGame();
}
// ── Playfield background ─────────────────────────────────────────────────
buildPlayfield() {
const pf = this.playfield;
if (pf?.key && this.textures.exists(pf.key)) {
this.add.image(CX, GAME_HEIGHT / 2, pf.key)
.setDisplaySize(GAME_WIDTH, GAME_HEIGHT)
.setDepth(D.bg + 1);
}
}
// ── Table ─────────────────────────────────────────────────────────────────
buildTable() {
const g = this.add.graphics().setDepth(D.table);
g.fillStyle(0x1a5c2a, 1);
g.fillEllipse(CX, 540, 1500, 700);
g.lineStyle(8, 0x2e7d32, 1);
g.strokeEllipse(CX, 540, 1500, 700);
// Inner stripe
g.lineStyle(3, 0x4caf50, 0.4);
g.strokeEllipse(CX, 540, 1440, 640);
}
// ── Dealer area ───────────────────────────────────────────────────────────
buildDealerArea() {
this.add.text(CX, 60, 'Blackjack', {
fontFamily: 'system-ui, sans-serif', fontSize: '52px', color: COLORS.textHex,
}).setOrigin(0.5).setDepth(D.ui);
this.add.text(CX, 110, 'Dealer stands on all 17s · Blackjack pays 3:2', {
fontFamily: 'system-ui, sans-serif', fontSize: '18px', color: COLORS.mutedHex,
}).setOrigin(0.5).setDepth(D.ui);
this.dealerScoreTxt = this.add.text(CX, DEALER_Y - CARD_H / 2 - 22, '', {
fontFamily: 'system-ui, sans-serif', fontSize: '22px', color: COLORS.textHex,
}).setOrigin(0.5).setDepth(D.ui);
}
// ── Seat labels & portraits ───────────────────────────────────────────────
buildSeats() {
for (let seat = 0; seat < 5; seat++) {
const pos = SEAT_POS[seat];
const player = seat === 0
? { name: 'You', isHuman: true, active: true }
: { name: this.opponents[seat - 1]?.name ?? '', isHuman: false, active: seat <= this.opponents.length };
if (!player.active) continue;
let nameX, nameY, chipX, chipY, labelAnchorX;
if (seat === 0) {
// Human: labels to the left of portrait, right-aligned
const px = pos.portraitX;
const py = pos.portraitY;
nameX = px - pos.portraitR - 14; nameY = py - 14;
chipX = px - pos.portraitR - 14; chipY = py + 14;
labelAnchorX = 1;
} else {
// Opponents: labels beside their portrait circle
const px = pos.portraitX ?? pos.x;
const py = pos.portraitY ?? (pos.y - CARD_H / 2 - pos.portraitR - 68);
const isLeft = pos.x < CX;
const side = isLeft ? 1 : -1;
const labelX = px + side * (pos.portraitR + 14);
nameX = labelX; nameY = py - 14;
chipX = labelX; chipY = py + 14;
labelAnchorX = isLeft ? 0 : 1;
}
this.nameTxts[seat] = this.add.text(nameX, nameY, player.name, {
fontFamily: 'system-ui, sans-serif', fontSize: '20px', color: COLORS.textHex,
}).setOrigin(labelAnchorX, 0.5).setDepth(D.ui);
this.chipTxts[seat] = this.add.text(chipX, chipY, '', {
fontFamily: 'system-ui, sans-serif', fontSize: '18px', color: COLORS.mutedHex,
}).setOrigin(labelAnchorX, 0.5).setDepth(D.ui);
// Semi-transparent backing behind both text lines, depth below portrait images/videos
{
const maxTW = Math.max(this.nameTxts[seat].width, 130);
const rectW = maxTW + 20;
const rectH = (chipY - nameY) + 36;
// For right-anchored text the anchor is the RIGHT edge; for left-anchored it's the LEFT edge
const rectCX = labelAnchorX === 1 ? nameX - maxTW / 2 : nameX + maxTW / 2;
const rectCY = (nameY + chipY) / 2;
const bg = this.add.graphics().setDepth(D.ui - 1);
bg.fillStyle(0x000000, 0.60);
bg.fillRoundedRect(rectCX - rectW / 2, rectCY - rectH / 2, rectW, rectH, 6);
}
this.scoreTxts[seat] = this.add.text(pos.x, pos.y - CARD_H / 2 - 11, '', {
fontFamily: 'system-ui, sans-serif', fontSize: '20px', color: COLORS.textHex,
}).setOrigin(0.5).setDepth(D.ui);
// Portraits
const px = pos.portraitX ?? pos.x;
const py = pos.portraitY ?? (seat === 0 ? pos.y : pos.y - CARD_H / 2 - pos.portraitR - 68);
if (seat === 0) {
this.portraits[seat] = createPlayerPortrait(this, px, py, pos.portraitR, D.ui, 'BlackjackGame');
} else {
this.portraits[seat] = createOpponentPortrait(this, this.opponents[seat - 1], px, py, pos.portraitR, D.ui);
}
}
}
// ── Betting UI (human only) ───────────────────────────────────────────────
buildBettingUI() {
const y = GAME_HEIGHT - 80;
const cx = CX + 60; // shift right slightly to avoid portrait
// Chip buttons
CHIP_AMOUNTS.forEach((amt, i) => {
const bx = cx - 120 + i * 80;
const container = this.add.container(bx, y).setDepth(D.ui + 1);
const g = this.add.graphics();
g.lineStyle(3, 0xffffff, 0.4);
g.strokeCircle(0, 0, 28);
g.fillStyle(CHIP_COLORS[amt], 1);
g.fillCircle(0, 0, 28);
container.add(g);
container.setInteractive(new Phaser.Geom.Circle(0, 0, 28), Phaser.Geom.Circle.Contains);
container.on('pointerdown', () => this.onChipClick(amt));
container.on('pointerover', () => container.setAlpha(0.8));
container.on('pointerout', () => container.setAlpha(1));
const t = this.add.text(bx, y, `$${amt}`, {
fontFamily: 'system-ui, sans-serif', fontSize: '13px',
color: CHIP_TEXT_COLORS[amt], fontStyle: 'bold',
}).setOrigin(0.5).setDepth(D.ui + 2);
this.bettingUIGroup.push(g, t);
this.chipBtnGraphics.push(g);
});
this.betDisplayText = this.add.text(cx + 170, y, 'Bet: $0', {
fontFamily: 'system-ui, sans-serif', fontSize: '22px', color: COLORS.textHex,
}).setOrigin(0, 0.5).setDepth(D.ui + 1);
this.balanceText = this.add.text(cx + 170, y - 32, '', {
fontFamily: 'system-ui, sans-serif', fontSize: '18px', color: COLORS.mutedHex,
}).setOrigin(0, 0.5).setDepth(D.ui + 1);
const clearBtn = new Button(this, cx + 360, y, 'Clear', () => this.onClearBet(), {
width: 100, height: 50, fontSize: 18, variant: 'ghost',
});
this.dealBtn = new Button(this, cx + 470, y, 'Deal', () => this.onDealClick(), {
width: 110, height: 50, fontSize: 20,
});
this.dealBtn.setEnabled(false);
this.bettingUIGroup.push(this.betDisplayText, this.balanceText, clearBtn, this.dealBtn);
this.hideBettingUI();
}
showBettingUI() {
for (const o of this.bettingUIGroup) o.setVisible?.(true) || (o.visible = true);
this.chipBtnGraphics.forEach(g => g.setDepth(D.ui + 1));
this.startBettingPrompts();
}
hideBettingUI() {
for (const o of this.bettingUIGroup) o.setVisible?.(false) || (o.visible = false);
this.hideBettingPrompts();
}
startBettingPrompts() {
this.hideBettingPrompts();
// Wait 5 seconds before starting any animations
this.bettingPromptTimer = this.time.delayedCall(5000, () => {
if (!this.scene.isActive('BlackjackGame')) return;
if (this.pendingBet > 0) return; // Don't start if already betting
// Start subtle radius pulsing animation
this.chipBtnGraphics.forEach((chip, index) => {
const delay = index * 200;
const tween = this.tweens.add({
targets: chip,
scaleX: 1.25,
scaleY: 1.25,
duration: 1200,
ease: 'Sine.easeInOut',
yoyo: true,
repeat: -1,
delay: delay,
});
this.chipPulseTweens.push(tween);
});
// Show prompt text
this.showBettingPrompt();
});
}
showBettingPrompt() {
if (this.pendingBet > 0) return; // Don't show if already betting
const y = GAME_HEIGHT - 160;
const cx = CX;
// Create semi-transparent background
const bg = this.add.rectangle(cx + 100, y, 420, 60, 0x000000, 0.7)
.setOrigin(0.5, 0.5)
.setDepth(D.ui + 10)
.setAlpha(0);
// Create prompt text
const text = this.add.text(cx + 100, y, 'Choose an amount to bet and click Deal to begin', {
fontFamily: 'system-ui, sans-serif',
fontSize: '18px',
color: '#ffffff',
align: 'center',
})
.setOrigin(0.5, 0.5)
.setDepth(D.ui + 11)
.setAlpha(0);
this.bettingPromptGroup = [bg, text];
// Fade in
this.tweens.add({
targets: bg,
alpha: 0.7,
duration: 300,
ease: 'Power2',
});
this.tweens.add({
targets: text,
alpha: 1,
duration: 300,
ease: 'Power2',
delay: 100,
});
}
hideBettingPrompts() {
// Fade out prompt if visible
if (this.bettingPromptGroup && this.bettingPromptGroup.length > 0) {
this.tweens.add({
targets: this.bettingPromptGroup,
alpha: 0,
duration: 200,
ease: 'Power2',
onComplete: () => {
this.bettingPromptGroup.forEach(obj => obj.destroy());
this.bettingPromptGroup = [];
}
});
} else if (this.bettingPromptGroup.length > 0) {
this.bettingPromptGroup.forEach(obj => obj.destroy());
this.bettingPromptGroup = [];
}
// Stop chip pulsing
this.chipPulseTweens.forEach(tween => tween.destroy());
this.chipPulseTweens = [];
this.chipBtnGraphics.forEach(chip => {
chip.setScale(1, 1);
chip.setAlpha(1);
});
// Clear timer
if (this.bettingPromptTimer) {
this.bettingPromptTimer.remove();
this.bettingPromptTimer = null;
}
}
startBettingPromptsIfNoBet() {
// Only start prompts if no bet has been placed yet
if (this.pendingBet === 0) {
this.startBettingPrompts();
}
}
hideBettingUI() {
for (const o of this.bettingUIGroup) {
o.setVisible?.(false) || (o.visible = false);
}
this.hideBettingPrompts();
// Also hide chip containers from the betting UI
this.chipBtnGraphics.forEach(g => g.setVisible?.(false) || (g.visible = false));
this.chipBtnGraphics.forEach(g => g.setDepth(-100));
}
// ── Chip balance ──────────────────────────────────────────────────────────
async loadPlayerChips() {
try {
const { profile } = await api.get('/profile');
this._playerChips = profile.chips ?? 2000;
} catch {
this._playerChips = 2000;
}
}
// ── Game init ─────────────────────────────────────────────────────────────
initGame() {
this.gs = createInitialState(this.opponents, this._playerChips);
this.startNewRound();
}
startNewRound() {
if (this.shoe.length < 52) this.shoe = buildShoe();
this.pendingBet = 0;
this.bustedSeats = new Set();
this.gs = prepareRound(this.gs);
this.clearCardGraphics();
this.renderAll();
this.showBettingUI();
this.updateBetDisplay();
}
// ── Render ────────────────────────────────────────────────────────────────
renderAll() {
this.renderDealer();
for (let seat = 0; seat < 5; seat++) {
const p = this.gs.players[seat];
if (!p.active) continue;
this.renderSeatCards(seat);
this.renderSeatInfo(seat);
}
this.renderBetAreas();
}
renderDealer() {
// Destroy old dealer cards
for (const c of this.dealerCardGraphics) c.destroy();
this.dealerCardGraphics = [];
const hand = this.gs.dealer.hand;
if (hand.length === 0) {
this.dealerScoreTxt.setText('');
return;
}
hand.forEach((card, i) => {
const x = this.cardX(DEALER_X, i, hand.length);
const cont = this.add.container(x, DEALER_Y).setDepth(D.cards);
const faceUp = i === 0 || this.gs.dealer.revealed;
this.drawCard(cont, faceUp ? card : null, faceUp);
this.dealerCardGraphics.push(cont);
});
const revealed = this.gs.dealer.revealed;
const { score, soft } = handValue(revealed ? hand : [hand[0]]);
const bust = revealed && score > 21;
this.dealerScoreTxt.setText(
bust ? 'BUST' : `${soft && score < 21 ? 'Soft ' : ''}${score}`
);
this.dealerScoreTxt.setColor(bust ? COLORS.dangerHex : COLORS.textHex);
}
renderSeatCards(seat) {
if (this.cardGraphics[seat]) {
for (const c of this.cardGraphics[seat]) c.destroy();
}
this.cardGraphics[seat] = [];
const p = this.gs.players[seat];
const pos = SEAT_POS[seat];
// Main hand
const h1Offset = p.hand2 ? -80 : 0;
p.hand.forEach((card, i) => {
const x = this.cardX(pos.x + h1Offset, i, p.hand.length);
const cont = this.add.container(x, pos.y).setDepth(D.cards);
this.drawCard(cont, card, true);
this.cardGraphics[seat].push(cont);
});
// Split hand
if (p.hand2) {
p.hand2.forEach((card, i) => {
const x = this.cardX(pos.x + 80, i, p.hand2.length);
const cont = this.add.container(x, pos.y).setDepth(D.cards);
this.drawCard(cont, card, true);
this.cardGraphics[seat].push(cont);
});
}
// Score
const { score, soft } = handValue(p.hand);
const bust = score > 21;
const bj = isBlackjack(p.hand);
let scoreStr = bj ? 'BJ' : (bust ? 'BUST' : `${soft && score < 21 ? 'soft ' : ''}${score}`);
if (p.hand2) {
const { score: s2, soft: sf2 } = handValue(p.hand2);
const b2 = s2 > 21;
const bj2 = isBlackjack(p.hand2);
scoreStr += ` / ${bj2 ? 'BJ' : (b2 ? 'BUST' : `${sf2 && s2 < 21 ? 'soft ' : ''}${s2}`)}`;
}
if (this.scoreTxts[seat]) this.scoreTxts[seat].setText(p.hand.length ? scoreStr : '');
// Keep busted cards faded across re-renders
if (this.bustedSeats?.has(seat)) {
for (const c of this.cardGraphics[seat]) c.setAlpha(0.3);
}
}
renderSeatInfo(seat) {
const p = this.gs.players[seat];
if (this.chipTxts[seat]) this.chipTxts[seat].setText(`$${p.chips.toLocaleString()}`);
// Highlight current player
if (this.nameTxts[seat]) {
this.nameTxts[seat].setColor(p.seat === this.gs.currentSeat && this.gs.phase === 'player_turn'
? COLORS.accentHex : COLORS.textHex);
}
}
renderBetAreas() {
for (const g of Object.values(this.betGraphics)) g.destroy();
this.betGraphics = {};
for (let seat = 0; seat < 5; seat++) {
const p = this.gs.players[seat];
if (!p.active || p.bet === 0) continue;
const { x: betX, y: betY } = this.betCirclePos(seat);
const cont = this.add.container(betX, betY).setDepth(D.chips);
const circle = this.add.graphics();
circle.fillStyle(0x2a2a2a, 1);
circle.fillCircle(0, 0, 28);
circle.lineStyle(2, 0xf0e8d0, 0.8);
circle.strokeCircle(0, 0, 28);
const txt = this.add.text(0, 0, `$${p.bet}`, {
fontFamily: 'system-ui, sans-serif', fontSize: '14px', color: '#f0e8d0',
}).setOrigin(0.5);
cont.add([circle, txt]);
this.betGraphics[seat] = cont;
}
}
clearCardGraphics() {
for (const cards of Object.values(this.cardGraphics)) {
for (const c of cards) c.destroy();
}
this.cardGraphics = {};
for (const c of this.dealerCardGraphics) c.destroy();
this.dealerCardGraphics = [];
for (const g of Object.values(this.betGraphics)) g.destroy();
this.betGraphics = {};
}
// Returns the {x,y} of a seat's bet chip circle, placed 40% of the way
// from the portrait toward the table centre (CX, 540).
betCirclePos(seat) {
const pos = SEAT_POS[seat];
const px = pos.portraitX ?? pos.x;
const py = pos.portraitY ?? (seat === 0 ? pos.y : pos.y - CARD_H / 2 - pos.portraitR - 68);
const t = 0.40;
return {
x: Math.round(px + t * (CX - px)),
y: Math.round(py + t * (540 - py)),
};
}
// ── Card drawing ──────────────────────────────────────────────────────────
addCardBackToContainer(container) {
if (this.cardBack?.spriteIndex !== undefined && this.textures.exists('cardbacks')) {
container.add(
this.add.image(0, 0, 'cardbacks', this.cardBack.spriteIndex)
.setDisplaySize(CARD_W, CARD_H)
.setOrigin(0.5)
);
} else {
const g = this.add.graphics();
this.drawCardBack(g, -CARD_W / 2, -CARD_H / 2);
container.add(g);
}
}
cardX(centerX, idx, total) {
const totalW = total * CARD_SPREAD + (CARD_W - CARD_SPREAD);
return centerX - totalW / 2 + CARD_W / 2 + idx * CARD_SPREAD;
}
drawCard(container, card, faceUp) {
container.removeAll(true);
const x = -CARD_W / 2, y = -CARD_H / 2;
if (faceUp && card) {
const g = this.add.graphics();
g.fillStyle(0xffffff, 1);
g.fillRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
g.lineStyle(1, 0xcccccc, 1);
g.strokeRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
container.add(g);
const color = card.isRed ? '#c0392b' : '#1a1a2e';
const style = (sz, bold = false) => ({
fontFamily: 'system-ui, sans-serif', fontSize: `${sz}px`, color,
...(bold ? { fontStyle: 'bold' } : {}),
});
container.add(this.add.text(x + 7, y + 5, card.label, style(17, true)));
container.add(this.add.text(x + 7, y + 23, card.suitSymbol, style(13)));
container.add(this.add.text(0, 4, card.suitSymbol, style(40)).setOrigin(0.5));
container.add(this.add.text(x + CARD_W - 7, y + CARD_H - 8, card.label, style(17, true)).setOrigin(1, 1));
container.add(this.add.text(x + CARD_W - 7, y + CARD_H - 22, card.suitSymbol, style(13)).setOrigin(1, 1));
} else {
this.addCardBackToContainer(container);
}
}
drawCardBack(g, x, y) {
const color = this.cardBack?.fallbackColor
? parseInt(this.cardBack.fallbackColor.replace('#', ''), 16) : 0x1a3a6b;
g.fillStyle(color, 1);
g.fillRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
g.lineStyle(2, 0xffffff, 0.25);
g.strokeRoundedRect(x + 6, y + 6, CARD_W - 12, CARD_H - 12, CARD_R - 2);
g.lineStyle(1, 0xffffff, 0.1);
g.strokeRoundedRect(x + 10, y + 10, CARD_W - 20, CARD_H - 20, CARD_R - 4);
}
// ── Betting phase ─────────────────────────────────────────────────────────
onChipClick(amount) {
if (this.animating) return;
const human = this.gs.players[0];
if (this.pendingBet + amount > 100) return;
if (this.pendingBet + amount > human.chips) return;
this.pendingBet += amount;
this.updateBetDisplay();
this.hideBettingPrompts();
}
onClearBet() {
this.pendingBet = 0;
this.updateBetDisplay();
this.startBettingPromptsIfNoBet();
}
updateBetDisplay() {
if (this.betDisplayText) this.betDisplayText.setText(`Bet: $${this.pendingBet}`);
if (this.dealBtn) this.dealBtn.setEnabled(this.pendingBet >= 5);
const human = this.gs?.players[0];
if (this.balanceText && human) this.balanceText.setText(`Balance: $${human.chips.toLocaleString()}`);
}
onDealClick() {
if (this.animating || this.pendingBet < 5) return;
this.animating = true;
this.hideBettingUI();
this.hideBettingPrompts();
// Commit human bet
this.gs = applyBet(this.gs, 0, this.pendingBet);
// AI bets
for (let seat = 1; seat <= 4; seat++) {
const p = this.gs.players[seat];
if (!p.active) continue;
const bet = chooseBet(p);
this.gs = applyBet(this.gs, seat, Math.max(5, bet));
}
// Deal all cards
this.gs = dealAllCards(this.gs, this.shoe);
// Animate bets then deal
this.animateBets(() => {
this.animateDeal(() => {
this.animating = false;
this.renderAll();
this.checkInsuranceOrStartPlay();
});
});
}
// ── Animations ────────────────────────────────────────────────────────────
animateBets(onComplete) {
this.renderBetAreas();
let done = 0;
const active = this.gs.players.filter(p => p.active);
if (active.length === 0) { onComplete(); return; }
for (const p of active) {
const pos = SEAT_POS[p.seat];
const { x: betX, y: betY } = this.betCirclePos(p.seat);
const chip = this.add.graphics().setDepth(D.chips + 5);
chip.fillStyle(CHIP_COLORS[25], 1);
chip.fillCircle(0, 0, 16);
chip.x = pos.x; chip.y = pos.y;
this.tweens.add({
targets: chip, x: betX, y: betY, duration: 280, ease: 'Power2',
onComplete: () => {
chip.destroy();
done++;
if (done >= active.length) onComplete();
},
});
}
}
animateDeal(onComplete) {
// Build deal order: player0-c1, p1-c1, ..., dealer-upcard, p0-c2, p1-c2, ..., dealer-hole
const activePlayers = this.gs.players.filter(p => p.active);
const dealSeq = [];
for (const p of activePlayers) dealSeq.push({ type: 'player', seat: p.seat, cardIdx: 0 });
dealSeq.push({ type: 'dealer', cardIdx: 0 }); // upcard
for (const p of activePlayers) dealSeq.push({ type: 'player', seat: p.seat, cardIdx: 1 });
dealSeq.push({ type: 'dealer', cardIdx: 1 }); // hole card
// Hide all cards initially
for (const cards of Object.values(this.cardGraphics)) {
for (const c of cards) c.setAlpha(0);
}
for (const c of this.dealerCardGraphics) c.setAlpha(0);
let idx = 0;
const DECK_X = CX + 200, DECK_Y = 50;
const stagger = 90;
const dealNext = () => {
if (idx >= dealSeq.length) {
onComplete();
return;
}
const entry = dealSeq[idx++];
// Flying card-back
const flying = this.add.container(DECK_X, DECK_Y).setDepth(D.cards + 10);
this.addCardBackToContainer(flying);
let tx, ty;
if (entry.type === 'dealer') {
const total = this.gs.dealer.hand.length;
tx = this.cardX(DEALER_X, entry.cardIdx, total);
ty = DEALER_Y;
} else {
const pos = SEAT_POS[entry.seat];
const p = this.gs.players[entry.seat];
const h1Offset = p.hand2 ? -80 : 0;
const total = p.hand.length;
tx = this.cardX(pos.x + h1Offset, entry.cardIdx, total);
ty = pos.y;
}
this.tweens.add({
targets: flying, x: tx, y: ty, duration: 180, ease: 'Power2',
onComplete: () => {
flying.destroy();
// Reveal the card at destination
if (entry.type === 'dealer') {
const cont = this.dealerCardGraphics[entry.cardIdx];
if (cont) cont.setAlpha(1);
} else {
const cardConts = this.cardGraphics[entry.seat] ?? [];
if (cardConts[entry.cardIdx]) cardConts[entry.cardIdx].setAlpha(1);
}
this.time.delayedCall(stagger, dealNext);
},
});
};
dealNext();
}
animateDealerReveal(onComplete) {
const holeCard = this.dealerCardGraphics[1];
if (!holeCard) { this.gs.dealer.revealed = true; this.renderAll(); onComplete(); return; }
// Flip: scale X 1→0, redraw face-up, scale X 0→1
this.tweens.add({
targets: holeCard, scaleX: 0, duration: 120, ease: 'Linear',
onComplete: () => {
this.gs = { ...this.gs, dealer: { ...this.gs.dealer, revealed: true } };
this.drawCard(holeCard, this.gs.dealer.hand[1], true);
this.tweens.add({
targets: holeCard, scaleX: 1, duration: 120, ease: 'Linear',
onComplete: () => {
this.renderDealer();
onComplete();
},
});
},
});
}
animateSingleCard(seat, card, onComplete) {
const pos = SEAT_POS[seat];
const p = this.gs.players[seat];
const isH2 = p.activeHand === 1;
const hand = isH2 ? p.hand2 : p.hand;
const total = hand.length;
const cardIdx = total - 1;
const tx = this.cardX(pos.x, cardIdx, total);
const ty = pos.y;
// Flying card-back
const flying = this.add.container(CX + 200, 50).setDepth(D.cards + 10);
this.addCardBackToContainer(flying);
this.tweens.add({
targets: flying, x: tx, y: ty, duration: 200, ease: 'Power2',
onComplete: () => {
flying.destroy();
// Reveal the card face-up at the destination
const cardConts = this.cardGraphics[seat] ?? [];
const targetCont = cardConts[cardIdx];
if (targetCont) {
targetCont.setAlpha(1);
this.drawCard(targetCont, card, true);
}
onComplete();
},
});
}
// ── Per-seat result animation (text + chips + fireworks) ─────────────────
animateSeatResult(seat, onComplete) {
const p = this.gs.players[seat];
if (!p?.active || !p.result) { onComplete(); return; }
const result = p.result;
const pos = SEAT_POS[seat];
const isWin = result === 'win' || result === 'blackjack';
const isLose = result === 'lose' || result === 'bust';
if (seat > 0 && this.portraits[seat]) {
this.portraits[seat].playEmotion?.(isWin ? 'happy' : 'upset');
}
const LABELS = { win: 'Win!', blackjack: 'Blackjack!', push: 'Push', lose: 'Lose', bust: 'Bust' };
const COLORS = { win: '#f5d020', blackjack: '#ffe066', push: '#9aa5b4', lose: '#e05c5c', bust: '#e05c5c' };
const SIZES = { win: '54px', blackjack: '58px', push: '34px', lose: '48px', bust: '48px' };
const linger = isWin ? 1500 : isLose ? 1100 : 700;
const textY = pos.y - CARD_H / 2 - 60;
const badge = this.add.text(pos.x, textY, LABELS[result] ?? result, {
fontFamily: 'system-ui, sans-serif',
fontSize: SIZES[result] ?? '48px',
color: COLORS[result] ?? '#ffffff',
fontStyle: 'bold',
stroke: '#000000', strokeThickness: 5,
shadow: isWin
? { offsetX: 0, offsetY: 0, color: COLORS[result], blur: 24, fill: true }
: undefined,
}).setOrigin(0.5).setAlpha(0).setScale(1.4).setDepth(D.modal);
// Pop-in
this.tweens.add({
targets: badge, alpha: 1, scaleX: 1, scaleY: 1,
duration: 200, ease: 'Back.Out',
});
// Linger then fade up
this.time.delayedCall(linger, () => {
this.tweens.add({
targets: badge, alpha: 0, y: textY - 30,
duration: 380, ease: 'Power2',
onComplete: () => { badge.destroy(); onComplete(); },
});
});
// Chip movement (runs in parallel with text)
if (isWin) {
this.animateChipsFromDealer(seat, p.chipsWon ?? p.bet);
this.animateFireworks(pos.x, textY);
} else if (isLose) {
this.animateChipsToDealer(seat);
} else {
// Push — bet returns to player
this.animateChipReturn(seat);
}
}
animateChipsToDealer(seat) {
const { x: betX, y: betY } = this.betCirclePos(seat);
for (let i = 0; i < 4; i++) {
const chip = this.add.graphics().setDepth(D.chips + 5);
chip.fillStyle(CHIP_COLORS[25], 1); chip.fillCircle(0, 0, 14);
chip.lineStyle(2, 0xffffff, 0.3); chip.strokeCircle(0, 0, 14);
chip.x = betX + (Math.random() - 0.5) * 22;
chip.y = betY;
this.tweens.add({
targets: chip, x: DEALER_X, y: DEALER_Y,
duration: 440, delay: i * 55, ease: 'Power2',
onComplete: () => chip.destroy(),
});
}
}
animateChipsFromDealer(seat, amount) {
if (!amount || amount <= 0) return;
const pos = SEAT_POS[seat];
const count = Math.min(Math.ceil(amount / 25), 7);
for (let i = 0; i < count; i++) {
const chip = this.add.graphics().setDepth(D.chips + 5);
chip.fillStyle(CHIP_COLORS[25], 1); chip.fillCircle(0, 0, 14);
chip.lineStyle(2, 0xffffff, 0.3); chip.strokeCircle(0, 0, 14);
chip.x = DEALER_X + (Math.random() - 0.5) * 50;
chip.y = DEALER_Y;
this.tweens.add({
targets: chip,
x: pos.x + (Math.random() - 0.5) * 28,
y: pos.y,
duration: 460, delay: i * 55, ease: 'Power2',
onComplete: () => chip.destroy(),
});
}
}
animateChipReturn(seat) {
const pos = SEAT_POS[seat];
const { x: betX, y: betY } = this.betCirclePos(seat);
for (let i = 0; i < 3; i++) {
const chip = this.add.graphics().setDepth(D.chips + 5);
chip.fillStyle(CHIP_COLORS[25], 1); chip.fillCircle(0, 0, 14);
chip.lineStyle(2, 0xffffff, 0.3); chip.strokeCircle(0, 0, 14);
chip.x = betX + (Math.random() - 0.5) * 20;
chip.y = betY;
this.tweens.add({
targets: chip,
x: pos.x + (Math.random() - 0.5) * 20,
y: pos.y,
duration: 380, delay: i * 50, ease: 'Power2',
onComplete: () => chip.destroy(),
});
}
}
animateFireworks(cx, cy) {
const palette = [0xf5d020, 0xff8c00, 0x5cb85c, 0x4a90d9, 0xff69b4, 0xffffff, 0x00e5ff];
for (let burst = 0; burst < 3; burst++) {
this.time.delayedCall(burst * 380, () => {
if (!this.scene.isActive('BlackjackGame')) return;
const bx = cx + (Math.random() - 0.5) * 140;
const by = cy - 10 + (Math.random() - 0.5) * 80;
for (let i = 0; i < 10; i++) {
const angle = (i / 10) * Math.PI * 2 + Math.random() * 0.3;
const dist = 65 + Math.random() * 65;
const color = palette[Math.floor(Math.random() * palette.length)];
const dot = this.add.graphics().setDepth(D.modal + 5);
dot.fillStyle(color, 1);
dot.fillCircle(0, 0, 4 + Math.random() * 3);
dot.x = bx; dot.y = by;
this.tweens.add({
targets: dot,
x: bx + Math.cos(angle) * dist,
y: by + Math.sin(angle) * dist,
alpha: 0, scaleX: 0.1, scaleY: 0.1,
duration: 700 + Math.random() * 400,
delay: Math.random() * 100,
ease: 'Power2',
onComplete: () => dot.destroy(),
});
}
});
}
}
// ── Insurance ─────────────────────────────────────────────────────────────
checkInsuranceOrStartPlay() {
if (this.gs.phase === 'insurance') {
this.offerInsurance();
} else {
this.checkImmediateDealerBJ();
}
}
offerInsurance() {
// AI declines immediately
for (let seat = 1; seat <= 4; seat++) {
const p = this.gs.players[seat];
if (p.active) this.gs = applyInsurance(this.gs, seat, false);
}
// Offer human
const modal = this.add.container(CX, GAME_HEIGHT / 2).setDepth(D.modal);
const bg = this.add.rectangle(0, 0, 560, 200, COLORS.panel).setStrokeStyle(2, COLORS.accent);
const txt = this.add.text(0, -55, 'Dealer shows Ace\nTake insurance? (pays 2:1)', {
fontFamily: 'system-ui, sans-serif', fontSize: '24px', color: COLORS.textHex, align: 'center',
}).setOrigin(0.5);
modal.add([bg, txt]);
const yesBtn = new Button(this, CX - 120, GAME_HEIGHT / 2 + 30, 'Yes', () => {
modal.destroy();
yesBtn.destroy(); noBtn.destroy();
this.gs = applyInsurance(this.gs, 0, true);
this.checkImmediateDealerBJ();
}, { width: 120, height: 52, fontSize: 20 });
const noBtn = new Button(this, CX + 120, GAME_HEIGHT / 2 + 30, 'No', () => {
modal.destroy();
yesBtn.destroy(); noBtn.destroy();
this.gs = applyInsurance(this.gs, 0, false);
this.checkImmediateDealerBJ();
}, { width: 120, height: 52, fontSize: 20, variant: 'ghost' });
}
checkImmediateDealerBJ() {
if (isBlackjack(this.gs.dealer.hand)) {
// Dealer blackjack — resolve insurance then show result
this.gs = resolveInsurance(this.gs);
this.animateDealerReveal(() => {
this.gs = resolveRound(this.gs);
this.renderAll();
this.showAllResults(() => this.showNextRoundPrompt());
});
} else {
this.gs = resolveInsurance(this.gs);
this.startPlayerTurns();
}
}
// ── Player turns ──────────────────────────────────────────────────────────
startPlayerTurns() {
this.gs = { ...this.gs, phase: 'player_turn' };
// Mark first active player as 'playing'
const p = this.gs.players.find(pl => pl.active);
if (p) {
this.gs = { ...this.gs, currentSeat: p.seat };
}
this.advanceToPlayer(p?.seat ?? 0);
}
advanceToPlayer(seat) {
this.renderAll();
const p = this.gs.players[seat];
if (!p || !p.active) { this.startDealerTurn(); return; }
// Skip if already determined (blackjack on deal)
if (isPlayerDone(p)) {
const next = nextActiveSeat(this.gs);
if (next === null) { this.startDealerTurn(); return; }
this.gs = { ...this.gs, currentSeat: next };
this.advanceToPlayer(next);
return;
}
if (p.isHuman) {
this.showActionButtons();
} else {
this.time.delayedCall(900, () => this.runAITurn(seat));
}
}
showActionButtons() {
this.hideActionButtons();
const seat = this.gs.currentSeat;
const p = this.gs.players[seat];
const pos = SEAT_POS[seat];
const by = GAME_HEIGHT - 80;
const btns = [
new Button(this, CX - 180, by, 'Hit', () => this.onHit(), { width: 120, height: 52, fontSize: 20 }),
new Button(this, CX - 50, by, 'Stand', () => this.onStand(), { width: 120, height: 52, fontSize: 20 }),
];
if (canDouble(p)) {
btns.push(new Button(this, CX + 80, by, 'Double', () => this.onDouble(), { width: 130, height: 52, fontSize: 20 }));
}
if (canSplit(p) && p.chips >= p.bet) {
btns.push(new Button(this, CX + 220, by, 'Split', () => this.onSplit(), { width: 120, height: 52, fontSize: 20 }));
}
btns.forEach(btn => btn.setDepth(D.ui + 5));
this.actionBtns = btns;
}
hideActionButtons() {
for (const b of this.actionBtns) b.destroy?.();
this.actionBtns = [];
}
onPlayerBust(seat) {
this.bustedSeats.add(seat);
// Fade current card graphics (new renders will stay faded via bustedSeats)
for (const c of this.cardGraphics[seat] ?? []) {
this.tweens.add({ targets: c, alpha: 0.3, duration: 280, ease: 'Power2' });
}
// Chips fly to dealer immediately
this.animateChipsToDealer(seat);
// Opponent portrait: play upset once, Portrait.js auto-returns to idle on ended
if (seat > 0 && this.portraits[seat]) {
this.portraits[seat].playEmotion?.('upset');
}
}
onHit() {
this.hideActionButtons();
this.animating = true;
this.gs = applyHit(this.gs, this.gs.currentSeat, this.shoe);
const p = this.gs.players[this.gs.currentSeat];
const newCard = p.activeHand === 1
? p.hand2[p.hand2.length - 1]
: p.hand[p.hand.length - 1];
this.animateSingleCard(this.gs.currentSeat, newCard, () => {
this.renderSeatCards(this.gs.currentSeat);
this.time.delayedCall(200, () => {
this.animating = false;
if (isBust(p.activeHand === 1 ? p.hand2 : p.hand)) {
this.onPlayerBust(this.gs.currentSeat);
this.time.delayedCall(380, () => this.playerDone(this.gs.currentSeat));
} else {
this.showActionButtons();
}
});
});
}
onStand() {
this.hideActionButtons();
const seat = this.gs.currentSeat;
this.gs = applyStand(this.gs, seat);
const p = this.gs.players[seat];
// If split and now playing hand 2, stay on same seat
if (p.activeHand === 1 && p.status2 === null) {
this.showActionButtons();
return;
}
this.playerDone(seat);
}
onDouble() {
this.hideActionButtons();
this.animating = true;
this.gs = applyDouble(this.gs, this.gs.currentSeat, this.shoe);
this.renderSeatCards(this.gs.currentSeat);
this.renderBetAreas();
this.time.delayedCall(300, () => {
this.animating = false;
const p = this.gs.players[this.gs.currentSeat];
if (p.status === 'bust' || p.status2 === 'bust') {
this.onPlayerBust(this.gs.currentSeat);
this.time.delayedCall(380, () => this.playerDone(this.gs.currentSeat));
} else {
this.playerDone(this.gs.currentSeat);
}
});
}
onSplit() {
this.hideActionButtons();
this.animating = true;
this.gs = applySplit(this.gs, this.gs.currentSeat, this.shoe);
this.renderSeatCards(this.gs.currentSeat);
this.renderBetAreas();
this.time.delayedCall(400, () => {
this.animating = false;
const p = this.gs.players[this.gs.currentSeat];
// If ace split, both hands are immediately standing
if (isPlayerDone(p)) {
this.playerDone(this.gs.currentSeat);
} else {
this.showActionButtons();
}
});
}
playerDone(seat) {
const p = this.gs.players[seat];
// If split: check if hand 2 needs to be played
if (p.hand2 !== null && p.activeHand === 0 && !isPlayerDone(p)) {
this.gs = applyStand(this.gs, seat); // moves to hand 2
this.showActionButtons();
return;
}
const next = nextActiveSeat(this.gs);
if (next === null) {
this.startDealerTurn();
} else {
this.gs = { ...this.gs, currentSeat: next };
this.advanceToPlayer(next);
}
}
// ── AI turn ───────────────────────────────────────────────────────────────
runAITurn(seat) {
const p = this.gs.players[seat];
if (!p || !p.active || isPlayerDone(p)) {
this.playerDone(seat);
return;
}
const action = chooseAction(p, this.gs.dealer.hand[0]);
this.animating = true;
const doAction = () => {
switch (action) {
case 'hit':
this.gs = applyHit(this.gs, seat, this.shoe);
const pp = this.gs.players[seat];
const aiNewCard = pp.activeHand === 1
? pp.hand2[pp.hand2.length - 1]
: pp.hand[pp.hand.length - 1];
this.animateSingleCard(seat, aiNewCard, () => {
this.renderSeatCards(seat);
this.time.delayedCall(400, () => {
this.animating = false;
const pp2 = this.gs.players[seat];
if (isBust(pp2.activeHand === 1 ? pp2.hand2 : pp2.hand)) {
this.onPlayerBust(seat);
this.time.delayedCall(400, () => this.playerDone(seat));
} else {
this.time.delayedCall(600, () => this.runAITurn(seat));
}
});
});
break;
case 'double':
this.gs = applyDouble(this.gs, seat, this.shoe);
this.renderSeatCards(seat);
this.renderBetAreas();
this.time.delayedCall(600, () => {
this.animating = false;
const pp = this.gs.players[seat];
if (pp.status === 'bust' || pp.status2 === 'bust') {
this.onPlayerBust(seat);
this.time.delayedCall(400, () => this.playerDone(seat));
} else {
this.playerDone(seat);
}
});
break;
case 'split':
this.gs = applySplit(this.gs, seat, this.shoe);
this.renderSeatCards(seat);
this.renderBetAreas();
this.time.delayedCall(600, () => {
this.animating = false;
// Play each hand in turn
this.time.delayedCall(700, () => this.runAITurn(seat));
});
break;
case 'stand':
default:
this.gs = applyStand(this.gs, seat);
this.time.delayedCall(400, () => {
this.animating = false;
// Handle split hand 2
const pp = this.gs.players[seat];
if (pp.hand2 !== null && pp.activeHand === 1 && pp.status2 === null) {
this.time.delayedCall(600, () => this.runAITurn(seat));
} else {
this.playerDone(seat);
}
});
break;
}
};
doAction();
}
// ── Dealer turn ───────────────────────────────────────────────────────────
startDealerTurn() {
this.gs = { ...this.gs, phase: 'dealer_turn', currentSeat: -1 };
this.renderAll();
this.time.delayedCall(400, () => {
this.animateDealerReveal(() => {
this.runDealerHits();
});
});
}
runDealerHits() {
const { score } = handValue(this.gs.dealer.hand);
if (score >= 17) {
this.finishRound();
return;
}
const newCard = this.shoe.pop();
this.gs = { ...this.gs, dealer: { ...this.gs.dealer, hand: [...this.gs.dealer.hand, newCard] } };
this.renderDealer();
this.time.delayedCall(700, () => this.runDealerHits());
}
// ── Resolve ───────────────────────────────────────────────────────────────
finishRound() {
this.gs = resolveRound(this.gs);
this.renderAll();
this.showAllResults(() => {
this.updateServerChips();
this.showNextRoundPrompt();
});
}
showAllResults(onComplete) {
const active = this.gs.players.filter(p => p.active);
if (active.length === 0) { onComplete(); return; }
// Reveal right-to-left (descending seat x position)
const sorted = [...active].sort((a, b) => SEAT_POS[b.seat].x - SEAT_POS[a.seat].x);
let pending = sorted.length;
const done = () => { if (--pending <= 0) onComplete(); };
sorted.forEach((p, i) => {
this.time.delayedCall(i * 480, () => this.animateSeatResult(p.seat, done));
});
}
async updateServerChips() {
const human = this.gs.players[0];
const delta = human.chipsWon ?? 0;
if (delta === 0) return;
try {
await api.post('/profile/chips/adjust', { delta });
} catch { /* balance will resync next load */ }
}
showNextRoundPrompt() {
const human = this.gs.players[0];
this.renderAll();
if (human.chips <= 0) {
new Modal(this, 'Out of chips! Visit your profile to request a reset.', {
autoCloseMs: 4000,
});
this.time.delayedCall(4200, () => this.scene.start('GameMenu'));
return;
}
const btn = new Button(this, CX, GAME_HEIGHT / 2 + 40, 'Next Round', () => {
btn.destroy();
this.startNewRound();
}, { width: 220, height: 60, fontSize: 24 });
}
}