933 lines
35 KiB
JavaScript
933 lines
35 KiB
JavaScript
import * as Phaser from 'phaser';
|
|
import { GAME_WIDTH, GAME_HEIGHT, COLORS } from '../../config.js';
|
|
import { Button } from '../../ui/Button.js';
|
|
import { createOpponentPortrait, createPlayerPortrait } from '../../ui/Portrait.js';
|
|
import { auth } from '../../services/auth.js';
|
|
import { api } from '../../services/api.js';
|
|
import { playSound, SFX } from '../../ui/Sounds.js';
|
|
import { MusicPlayer } from '../../ui/MusicPlayer.js';
|
|
import {
|
|
WORK_PILE_COUNT,
|
|
DEFAULT_TARGET_SCORE,
|
|
createInitialState,
|
|
canPlayOnFoundation,
|
|
playToFoundation,
|
|
playToWork,
|
|
flipStock,
|
|
endRound,
|
|
allStuck,
|
|
nertsTop,
|
|
wasteTop,
|
|
workTop,
|
|
validRunFromIndex,
|
|
reshuffleAllStocks,
|
|
} from './NertsLogic.js';
|
|
import { chooseAction, nextThinkDelay } from './NertsAI.js';
|
|
|
|
const CX = GAME_WIDTH / 2;
|
|
const CY = GAME_HEIGHT / 2;
|
|
|
|
const CARD_W = 84;
|
|
const CARD_H = 118;
|
|
const CARD_R = 8;
|
|
const FAN_Y = 26; // vertical fan offset for work piles
|
|
const WASTE_FAN = 30; // horizontal fan for the waste's visible cards
|
|
|
|
const D = {
|
|
felt: -1, pile: 5, card: 10, drag: 40, ui: 30, fly: 50, panel: 28, modal: 80,
|
|
};
|
|
|
|
// Per-seat owner colors — used as a rim on foundation cards so contributions read.
|
|
const SEAT_COLORS = [0xf2c14e, 0x4dabf7, 0xe06c75, 0x69db7c];
|
|
const SEAT_COLOR_HEX = ['#f2c14e', '#4dabf7', '#e06c75', '#69db7c'];
|
|
|
|
// ── Foundation layout ──────────────────────────────────────────────────────
|
|
const FOUND_PER_ROW = 8;
|
|
const FOUND_GAP_X = 18;
|
|
const FOUND_ROW_Y = [286, 286 + CARD_H + 24];
|
|
|
|
// ── Local tableau layout ─────────────────────────────────────────────────────
|
|
// x values are recomputed in buildFoundations() based on player count; NERTS x mirrors STOCK x
|
|
let NERTS_POS = { x: 340, y: 640 - CARD_H - 16 };
|
|
let WORK_TOP_Y = 540;
|
|
const WORK_X = [540, 720, 900, 1080];
|
|
let STOCK_POS = { x: 1470, y: 640 };
|
|
let WASTE_POS = { x: 1600, y: 640 };
|
|
const LOCAL_PORTRAIT = { x: 130, y: 820, r: 58 };
|
|
|
|
// ── Opponent panel layout ─────────────────────────────────────────────────────
|
|
const PANEL_W = 320;
|
|
const PANEL_H = 160;
|
|
const PANEL_POSITIONS = {
|
|
1: [{ x: 960, y: 120 }],
|
|
2: [{ x: 620, y: 120 }, { x: 1300, y: 120 }],
|
|
3: [{ x: 430, y: 120 }, { x: 960, y: 120 }, { x: 1490, y: 120 }],
|
|
};
|
|
|
|
export default class NertsGame extends Phaser.Scene {
|
|
constructor() { super('NertsGame'); }
|
|
|
|
init(data) {
|
|
this.gameDef = data.game;
|
|
this.opponents = data.opponents ?? [];
|
|
this.playfield = data.playfield ?? null;
|
|
this.cardBack = data.cardBack ?? null;
|
|
this.targetScore = data.game?.targetScore ?? DEFAULT_TARGET_SCORE;
|
|
|
|
this.playerCount = 1 + this.opponents.length;
|
|
this.gs = null;
|
|
this.totals = new Array(this.playerCount).fill(0);
|
|
|
|
this.localCardObjs = new Map(); // card.id → container (local tableau)
|
|
this.localExtraObjs = []; // non-keyed local sprites (face-down backs)
|
|
this.foundationCardObjs = []; // foundation top-card sprites
|
|
this.foundationPos = []; // idx → {x,y}
|
|
this.foundationSlotRects = [];
|
|
this.oppPanelPos = []; // seat → {x,y} (portrait pos, for fly origin)
|
|
this.oppDynamic = []; // seat → { nertsText, scoreText }
|
|
this.opponentPortraits = [];
|
|
this.aiTimers = [];
|
|
this.foundationCooldowns = []; // idx → Phaser time when slot becomes AI-playable again
|
|
|
|
this.lastMoveSeconds = 0;
|
|
this.lastMoveTimer = null;
|
|
this.lastMoveCountText = null;
|
|
this.shuffleBtn = null;
|
|
this.resignBtn = null;
|
|
|
|
this.potentialDrag = null;
|
|
this.dragState = null;
|
|
this.dropHighlight = null;
|
|
this.roundEnding = false;
|
|
this.panelObjs = [];
|
|
}
|
|
|
|
create() {
|
|
try {
|
|
const music = this.cache.json.get('music');
|
|
if (music?.tracks) new MusicPlayer(this, music.tracks);
|
|
} catch (_) { /* music optional */ }
|
|
|
|
this.buildPlayfield();
|
|
this.buildFoundations();
|
|
this.buildLocalArea();
|
|
this.buildOpponentPanels();
|
|
this.buildHUD();
|
|
this.buildLastMovePanel();
|
|
this.setupDragHandlers();
|
|
|
|
this.events.once('shutdown', () => this.stopAITimers());
|
|
|
|
this.startRound();
|
|
}
|
|
|
|
// ── Static layout ────────────────────────────────────────────────────────
|
|
|
|
buildPlayfield() {
|
|
const pf = this.playfield;
|
|
if (pf?.key && this.textures.exists(pf.key)) {
|
|
this.add.image(CX, CY, pf.key).setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.felt);
|
|
} else {
|
|
const color = pf?.fallbackColor ? parseInt(pf.fallbackColor.replace('#', ''), 16) : 0x14532d;
|
|
this.add.rectangle(CX, CY, GAME_WIDTH, GAME_HEIGHT, color).setDepth(D.felt);
|
|
}
|
|
}
|
|
|
|
buildFoundations() {
|
|
const total = 4 * this.playerCount;
|
|
const countInRow0 = Math.min(FOUND_PER_ROW, total);
|
|
const rowW = countInRow0 * CARD_W + (countInRow0 - 1) * FOUND_GAP_X;
|
|
const PAD = 14;
|
|
STOCK_POS.x = CX + rowW / 2 + PAD + CARD_W / 2 - 150;
|
|
NERTS_POS.x = STOCK_POS.x;
|
|
WASTE_POS.x = STOCK_POS.x + CARD_W + FOUND_GAP_X;
|
|
|
|
const yOffset = this.opponents.length >= 2 ? 100 : 0;
|
|
WORK_TOP_Y = 540 + yOffset;
|
|
STOCK_POS.y = 640 + yOffset;
|
|
WASTE_POS.y = 640 + yOffset;
|
|
NERTS_POS.y = 640 - CARD_H - 16 + yOffset;
|
|
|
|
for (let idx = 0; idx < total; idx++) {
|
|
const row = Math.floor(idx / FOUND_PER_ROW);
|
|
const col = idx % FOUND_PER_ROW;
|
|
const countInRow = Math.min(FOUND_PER_ROW, total - row * FOUND_PER_ROW);
|
|
const rowW = countInRow * CARD_W + (countInRow - 1) * FOUND_GAP_X;
|
|
const startX = CX - rowW / 2 + CARD_W / 2;
|
|
const x = startX + col * (CARD_W + FOUND_GAP_X);
|
|
const y = FOUND_ROW_Y[row];
|
|
this.foundationPos[idx] = { x, y };
|
|
const r = this.add.rectangle(x, y, CARD_W + 4, CARD_H + 4, 0x000000, 0.22)
|
|
.setStrokeStyle(2, COLORS.muted, 0.5).setDepth(D.pile);
|
|
this.foundationSlotRects[idx] = r;
|
|
}
|
|
this.add.text(CX, FOUND_ROW_Y[0] - CARD_H / 2 - 26, 'FOUNDATIONS — play Aces here, build up by suit', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '18px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
}
|
|
|
|
buildLocalArea() {
|
|
// Nerts pile
|
|
this.add.rectangle(NERTS_POS.x, NERTS_POS.y, CARD_W + 8, CARD_H + 8, 0x000000, 0.4)
|
|
.setStrokeStyle(3, COLORS.accent).setDepth(D.pile);
|
|
this.add.text(NERTS_POS.x, NERTS_POS.y - CARD_H / 2 - 40, 'NERTS', {
|
|
fontFamily: 'Righteous', fontSize: '20px', color: COLORS.accentHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.localNertsText = this.add.text(NERTS_POS.x, NERTS_POS.y - CARD_H / 2 - 18, '13 left', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.textHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
|
|
// Work pile placeholders
|
|
for (let i = 0; i < WORK_PILE_COUNT; i++) {
|
|
this.add.rectangle(WORK_X[i], WORK_TOP_Y, CARD_W + 4, CARD_H + 4, 0x000000, 0.2)
|
|
.setStrokeStyle(1, COLORS.muted, 0.5).setDepth(D.pile);
|
|
}
|
|
|
|
// Stock + waste
|
|
const stockRect = this.add.rectangle(STOCK_POS.x, STOCK_POS.y, CARD_W + 8, CARD_H + 8, 0x000000, 0.4)
|
|
.setStrokeStyle(2, COLORS.muted).setDepth(D.pile).setInteractive({ useHandCursor: true });
|
|
stockRect.on('pointerdown', () => this.onStockClick());
|
|
this.add.text(STOCK_POS.x, STOCK_POS.y - CARD_H / 2 - 18, 'STOCK', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.localStockText = this.add.text(STOCK_POS.x, STOCK_POS.y + CARD_H / 2 + 16, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '14px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
|
|
// Local portrait + name + score
|
|
createPlayerPortrait(this, LOCAL_PORTRAIT.x, LOCAL_PORTRAIT.y, LOCAL_PORTRAIT.r, D.ui, 'NertsGame');
|
|
this.add.text(LOCAL_PORTRAIT.x, LOCAL_PORTRAIT.y + LOCAL_PORTRAIT.r + 16, auth.user?.username ?? 'You', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.textHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.localScoreText = this.add.text(LOCAL_PORTRAIT.x, LOCAL_PORTRAIT.y + LOCAL_PORTRAIT.r + 44, 'Score: 0', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '18px', color: COLORS.accentHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
}
|
|
|
|
buildOpponentPanels() {
|
|
const positions = PANEL_POSITIONS[this.opponents.length] ?? [];
|
|
for (let i = 0; i < this.opponents.length; i++) {
|
|
const seat = i + 1;
|
|
const opp = this.opponents[i];
|
|
const pos = positions[i] ?? { x: 960, y: 120 };
|
|
|
|
this.add.rectangle(pos.x, pos.y, PANEL_W, PANEL_H, COLORS.panel, 0.82)
|
|
.setStrokeStyle(2, SEAT_COLORS[seat] ?? COLORS.muted).setDepth(D.panel);
|
|
|
|
const portX = pos.x - PANEL_W / 2 + 56;
|
|
this.opponentPortraits[seat] = createOpponentPortrait(this, opp, portX, pos.y, 46, D.panel + 1);
|
|
this.oppPanelPos[seat] = { x: portX, y: pos.y };
|
|
|
|
const textX = portX + 64;
|
|
this.add.text(textX, pos.y - 56, opp.name ?? `Player ${seat + 1}`, {
|
|
fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.textHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.panel + 1);
|
|
|
|
this.buildSkillPips(textX, pos.y - 26, opp.skill ?? 3);
|
|
|
|
const nertsText = this.add.text(textX, pos.y + 8, 'Nerts: 13', {
|
|
fontFamily: 'Righteous', fontSize: '24px', color: SEAT_COLOR_HEX[seat] ?? COLORS.textHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.panel + 1);
|
|
const scoreText = this.add.text(textX, pos.y + 40, 'Score: 0', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '17px', color: COLORS.mutedHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.panel + 1);
|
|
|
|
this.oppDynamic[seat] = { nertsText, scoreText, panelPos: { x: pos.x, y: pos.y }, nertsCard: null, stockCard: null, wasteCards: [] };
|
|
}
|
|
}
|
|
|
|
buildSkillPips(x, y, skill) {
|
|
this.add.text(x, y, 'SKILL', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '12px', color: COLORS.mutedHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.panel + 1);
|
|
const pipX = x + 52;
|
|
for (let i = 0; i < 5; i++) {
|
|
const filled = i < skill;
|
|
this.add.circle(pipX + i * 18, y, 6, filled ? COLORS.accent : COLORS.muted, filled ? 1 : 0.35)
|
|
.setStrokeStyle(1, COLORS.accent, filled ? 1 : 0.4).setDepth(D.panel + 1);
|
|
}
|
|
}
|
|
|
|
buildHUD() {
|
|
this.statusText = this.add.text(24, 36, `Nerts — first to ${this.targetScore} points`, {
|
|
fontFamily: 'Righteous', fontSize: '26px', color: COLORS.textHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.ui);
|
|
|
|
new Button(this, GAME_WIDTH - 90, GAME_HEIGHT - 50, 'Leave',
|
|
() => this.scene.start('GameMenu'),
|
|
{ variant: 'ghost', width: 130, height: 40, fontSize: 18 }).setDepth(D.ui);
|
|
}
|
|
|
|
buildLastMovePanel() {
|
|
this.add.rectangle(130, 460, 180, 200, 0x000000, 0.55).setDepth(D.ui).setOrigin(0.5);
|
|
this.add.text(130, 390, 'Last Move', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.lastMoveCountText = this.add.text(130, 440, '00', {
|
|
fontFamily: 'Righteous', fontSize: '64px', color: '#ffffff',
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.add.text(130, 500, 'seconds', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(D.ui);
|
|
this.shuffleBtn = new Button(this, 130, 545, 'Shuffle Stock',
|
|
() => this.onShuffleStock(),
|
|
{ width: 160, height: 38, fontSize: 15 }
|
|
).setDepth(D.ui).setVisible(false);
|
|
this.resignBtn = new Button(this, 130, 591, 'Resign',
|
|
() => this.onResign(),
|
|
{ width: 160, height: 38, fontSize: 15, variant: 'ghost' }
|
|
).setDepth(D.ui).setVisible(false);
|
|
}
|
|
|
|
startLastMoveTimer() {
|
|
if (this.lastMoveTimer) { this.lastMoveTimer.remove(false); this.lastMoveTimer = null; }
|
|
this.lastMoveSeconds = 0;
|
|
this.lastMoveCountText?.setText('00');
|
|
this.shuffleBtn?.setVisible(false);
|
|
this.lastMoveTimer = this.time.addEvent({
|
|
delay: 1000, loop: true, callback: this.onLastMoveTick, callbackScope: this,
|
|
});
|
|
}
|
|
|
|
onLastMoveTick() {
|
|
if (this.roundEnding) return;
|
|
this.lastMoveSeconds += 1;
|
|
const s = this.lastMoveSeconds;
|
|
this.lastMoveCountText?.setText(String(s).padStart(2, '0'));
|
|
const color = s > 60 ? '#ff2222' : s > 45 ? '#ff8800' : s > 30 ? '#ffee00' : '#ffffff';
|
|
this.lastMoveCountText?.setColor(color);
|
|
if (s >= 60) this.shuffleBtn?.setVisible(true);
|
|
if (s >= 90) this.resignBtn?.setVisible(true);
|
|
}
|
|
|
|
resetLastMoveTimer() {
|
|
this.lastMoveSeconds = 0;
|
|
this.lastMoveCountText?.setText('00');
|
|
this.lastMoveCountText?.setColor('#ffffff');
|
|
this.shuffleBtn?.setVisible(false);
|
|
this.resignBtn?.setVisible(false);
|
|
}
|
|
|
|
onResign() {
|
|
if (!this.isPlayable()) return;
|
|
this.finishRound();
|
|
}
|
|
|
|
onShuffleStock() {
|
|
if (!this.isPlayable()) return;
|
|
reshuffleAllStocks(this.gs);
|
|
playSound(this, SFX.CARD_SHUFFLE);
|
|
this.resetLastMoveTimer();
|
|
this.renderAll();
|
|
}
|
|
|
|
// ── Round lifecycle ────────────────────────────────────────────────────────
|
|
|
|
startRound() {
|
|
this.roundEnding = false;
|
|
this.foundationCooldowns = [];
|
|
this.gs = createInitialState({
|
|
playerCount: this.playerCount,
|
|
targetScore: this.targetScore,
|
|
totals: this.totals,
|
|
});
|
|
playSound(this, SFX.CARD_SHUFFLE);
|
|
this.renderAll();
|
|
this.startAITimers();
|
|
this.startLastMoveTimer();
|
|
}
|
|
|
|
startAITimers() {
|
|
this.stopAITimers();
|
|
for (let seat = 1; seat < this.playerCount; seat++) {
|
|
this.scheduleAITick(seat);
|
|
}
|
|
}
|
|
|
|
scheduleAITick(seat) {
|
|
const skill = this.opponents[seat - 1]?.skill ?? 3;
|
|
this.aiTimers[seat] = this.time.delayedCall(nextThinkDelay(skill), () => this.aiTick(seat));
|
|
}
|
|
|
|
stopAITimers() {
|
|
for (const t of this.aiTimers) { if (t) t.remove(false); }
|
|
this.aiTimers = [];
|
|
}
|
|
|
|
aiTick(seat) {
|
|
if (this.roundEnding || !this.gs || this.gs.phase !== 'playing') return;
|
|
|
|
const skill = this.opponents[seat - 1]?.skill ?? 3;
|
|
const action = chooseAction(this.gs, seat, skill);
|
|
if (action) this.applyAIAction(seat, action);
|
|
|
|
if (this.checkEnd()) return;
|
|
this.scheduleAITick(seat);
|
|
}
|
|
|
|
markFoundationCooldown(idx) {
|
|
this.foundationCooldowns[idx] = this.time.now + 2000;
|
|
}
|
|
|
|
applyAIAction(seat, action) {
|
|
if (action.kind === 'foundation') {
|
|
if (this.time.now < (this.foundationCooldowns[action.dest] ?? 0)) return;
|
|
const card = this.actionCard(seat, action);
|
|
const log = playToFoundation(this.gs, seat, action.source, action.dest);
|
|
if (log) {
|
|
this.markFoundationCooldown(action.dest);
|
|
this.resetLastMoveTimer();
|
|
const dest = this.foundationPos[action.dest];
|
|
const origin = this.oppPanelPos[seat];
|
|
if (card && dest && origin) this.spawnFly(card, origin.x, origin.y, dest.x, dest.y, seat);
|
|
playSound(this, SFX.CARD_PLACE);
|
|
if (action.source.type === 'nerts' && Math.random() < 0.5) {
|
|
this.opponentPortraits[seat]?.playEmotion('happy');
|
|
}
|
|
}
|
|
} else if (action.kind === 'work') {
|
|
const wlog = playToWork(this.gs, seat, action.source, action.dest);
|
|
if (wlog && action.source.type === 'nerts') this.resetLastMoveTimer();
|
|
} else if (action.kind === 'flip') {
|
|
flipStock(this.gs, seat);
|
|
playSound(this, SFX.CARD_SHOW);
|
|
}
|
|
this.renderFoundations();
|
|
this.renderOpponents();
|
|
}
|
|
|
|
actionCard(seat, action) {
|
|
const s = action.source;
|
|
if (s.type === 'nerts') return nertsTop(this.gs, seat);
|
|
if (s.type === 'waste') return wasteTop(this.gs, seat);
|
|
if (s.type === 'work') return workTop(this.gs, seat, s.idx);
|
|
return null;
|
|
}
|
|
|
|
checkEnd() {
|
|
if (this.roundEnding) return true;
|
|
if (this.gs.nertsCaller !== null || allStuck(this.gs)) {
|
|
this.finishRound();
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
finishRound() {
|
|
this.roundEnding = true;
|
|
this.stopAITimers();
|
|
if (this.lastMoveTimer) { this.lastMoveTimer.remove(false); this.lastMoveTimer = null; }
|
|
this.shuffleBtn?.setVisible(false);
|
|
this.resignBtn?.setVisible(false);
|
|
this._clearDrag();
|
|
|
|
const summary = endRound(this.gs);
|
|
this.totals = this.gs.players.map((p) => p.totalScore);
|
|
this.renderAll();
|
|
|
|
const winner = this.gs.winner;
|
|
if (this.gs.phase === 'matchover') {
|
|
const youWon = this.gs.matchWinner === 0;
|
|
this.recordHistory(youWon);
|
|
}
|
|
// Portrait reactions
|
|
for (let s = 1; s < this.playerCount; s++) {
|
|
this.opponentPortraits[s]?.playEmotion?.(winner === s ? 'happy' : 'upset');
|
|
}
|
|
playSound(this, winner === 0 ? SFX.CASINO_WIN : SFX.CARD_PLACE);
|
|
|
|
this.showRoundPanel(summary);
|
|
}
|
|
|
|
// ── Rendering ────────────────────────────────────────────────────────────
|
|
|
|
renderAll() {
|
|
this.renderLocal();
|
|
this.renderFoundations();
|
|
this.renderOpponents();
|
|
}
|
|
|
|
clearLocalCards() {
|
|
for (const c of this.localCardObjs.values()) c.destroy();
|
|
this.localCardObjs.clear();
|
|
for (const o of this.localExtraObjs) o.destroy();
|
|
this.localExtraObjs = [];
|
|
}
|
|
|
|
renderLocal() {
|
|
this.clearLocalCards();
|
|
const p = this.gs.players[0];
|
|
|
|
// Nerts pile: a back beneath (if >1) and the face-up top.
|
|
if (p.nerts.length > 1) {
|
|
this.localExtraObjs.push(
|
|
this.makeCardSprite({ id: 'nerts-back' }, NERTS_POS.x, NERTS_POS.y, { faceUp: false, store: false })
|
|
);
|
|
}
|
|
const nt = p.nerts[p.nerts.length - 1];
|
|
if (nt) {
|
|
const c = this.makeCardSprite(nt, NERTS_POS.x, NERTS_POS.y, { faceUp: true });
|
|
this.makeDraggable(c, { kind: 'nerts' });
|
|
}
|
|
this.localNertsText.setText(`${p.nerts.length} left`);
|
|
|
|
// Work piles: fan downward; cards starting a valid run are draggable.
|
|
for (let i = 0; i < WORK_PILE_COUNT; i++) {
|
|
const pile = p.work[i];
|
|
for (let k = 0; k < pile.length; k++) {
|
|
const card = pile[k];
|
|
const x = WORK_X[i];
|
|
const y = WORK_TOP_Y + k * FAN_Y;
|
|
const c = this.makeCardSprite(card, x, y, { faceUp: true });
|
|
if (validRunFromIndex(pile, k)) this.makeDraggable(c, { kind: 'work', idx: i, k });
|
|
}
|
|
}
|
|
|
|
// Stock (face-down) + count.
|
|
if (p.stockDraw.length > 0) {
|
|
this.localExtraObjs.push(
|
|
this.makeCardSprite({ id: 'stock-back' }, STOCK_POS.x, STOCK_POS.y, { faceUp: false, store: false })
|
|
);
|
|
}
|
|
this.localStockText.setText(
|
|
p.stockDraw.length > 0 ? `${p.stockDraw.length} (click to flip 3)` : 'click to recycle'
|
|
);
|
|
|
|
// Waste: show up to the last 3, fanned right; top is draggable.
|
|
const wasteShown = p.stockWaste.slice(-3);
|
|
wasteShown.forEach((card, i) => {
|
|
const x = WASTE_POS.x + i * WASTE_FAN;
|
|
const isTop = i === wasteShown.length - 1;
|
|
const c = this.makeCardSprite(card, x, WASTE_POS.y, { faceUp: true });
|
|
if (isTop) this.makeDraggable(c, { kind: 'waste' });
|
|
});
|
|
|
|
this.localScoreText.setText(`Score: ${this.gs.players[0].totalScore}`);
|
|
}
|
|
|
|
renderFoundations() {
|
|
for (const c of this.foundationCardObjs) c.destroy();
|
|
this.foundationCardObjs = [];
|
|
for (let idx = 0; idx < this.gs.foundations.length; idx++) {
|
|
const slot = this.gs.foundations[idx];
|
|
const complete = slot && slot.cards.length > 0 && slot.cards[slot.cards.length - 1].rank === 'K';
|
|
this.foundationSlotRects[idx]?.setFillStyle(complete ? 0x111111 : 0x000000, complete ? 0.5 : 0.22);
|
|
if (!slot || slot.cards.length === 0) continue;
|
|
const top = slot.cards[slot.cards.length - 1];
|
|
const pos = this.foundationPos[idx];
|
|
const c = this.makeCardSprite(top, pos.x, pos.y, {
|
|
faceUp: true, rim: SEAT_COLORS[top.owner], store: false,
|
|
});
|
|
if (complete) c.setAlpha(0.4);
|
|
this.foundationCardObjs.push(c);
|
|
}
|
|
}
|
|
|
|
renderOpponents() {
|
|
for (let seat = 1; seat < this.playerCount; seat++) {
|
|
const dyn = this.oppDynamic[seat];
|
|
if (!dyn) continue;
|
|
dyn.nertsText.setText(`Nerts: ${this.gs.players[seat].nerts.length}`);
|
|
dyn.scoreText.setText(`Score: ${this.gs.players[seat].totalScore}`);
|
|
|
|
if (dyn.nertsCard) { dyn.nertsCard.destroy(); dyn.nertsCard = null; }
|
|
if (dyn.stockCard) { dyn.stockCard.destroy(); dyn.stockCard = null; }
|
|
for (const wc of dyn.wasteCards) wc.destroy();
|
|
dyn.wasteCards = [];
|
|
|
|
const { x: px, y: py } = dyn.panelPos;
|
|
const cardX = px + PANEL_W / 2 + 20 - CARD_W * 0.35;
|
|
const cardY = py + PANEL_H / 2 + 20 - CARD_H * 0.35;
|
|
|
|
// Nerts top card (scale 0.7)
|
|
const top = nertsTop(this.gs, seat);
|
|
if (top) {
|
|
dyn.nertsCard = this.makeCardSprite(top, cardX, cardY, {
|
|
faceUp: true, rim: SEAT_COLORS[seat] ?? null, store: false,
|
|
}).setScale(0.7).setDepth(D.panel + 2);
|
|
}
|
|
|
|
// Stock + waste above the nerts card (scale 0.55)
|
|
const SMALL = 0.55;
|
|
const smallHalfW = CARD_W * SMALL / 2;
|
|
const smallHalfH = CARD_H * SMALL / 2;
|
|
const stockX = cardX + CARD_W * 0.35 - smallHalfW;
|
|
const stockY = cardY - CARD_H * 0.35 - smallHalfH - 6;
|
|
|
|
if (this.gs.players[seat].stockDraw.length > 0) {
|
|
dyn.stockCard = this.makeCardSprite({ id: `opp-stock-${seat}` }, stockX, stockY, {
|
|
faceUp: false, store: false,
|
|
}).setScale(SMALL).setDepth(D.panel + 2);
|
|
}
|
|
|
|
const wasteShown = this.gs.players[seat].stockWaste.slice(-3);
|
|
const wasteBaseX = stockX + smallHalfW * 2 + 4;
|
|
wasteShown.forEach((card, i) => {
|
|
const wc = this.makeCardSprite(card, wasteBaseX + i * WASTE_FAN * SMALL, stockY, {
|
|
faceUp: true, rim: SEAT_COLORS[seat] ?? null, store: false,
|
|
}).setScale(SMALL).setDepth(D.panel + 2 + i);
|
|
dyn.wasteCards.push(wc);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ── Card sprites ─────────────────────────────────────────────────────────
|
|
|
|
makeCardSprite(card, x, y, { faceUp = true, rim = null, store = true } = {}) {
|
|
const c = this.add.container(x, y).setDepth(D.card);
|
|
this.renderCardFace(c, card, faceUp, rim);
|
|
c.card = card;
|
|
c.homeX = x;
|
|
c.homeY = y;
|
|
if (store && card && card.id !== undefined) this.localCardObjs.set(card.id, c);
|
|
return c;
|
|
}
|
|
|
|
renderCardFace(container, card, faceUp, rim) {
|
|
container.removeAll(true);
|
|
const x = -CARD_W / 2, y = -CARD_H / 2;
|
|
|
|
if (!faceUp) {
|
|
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();
|
|
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, COLORS.accent, 0.6);
|
|
g.strokeRoundedRect(x + 6, y + 6, CARD_W - 12, CARD_H - 12, CARD_R - 2);
|
|
container.add(g);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const g = this.add.graphics();
|
|
g.fillStyle(0xfbf6e7, 1);
|
|
g.fillRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
|
|
g.lineStyle(rim ? 4 : 2, rim ?? 0xcc803a, rim ? 1 : 0.5);
|
|
g.strokeRoundedRect(x + 2, y + 2, CARD_W - 4, CARD_H - 4, CARD_R - 1);
|
|
container.add(g);
|
|
|
|
const colorHex = card.isRed ? '#c0392b' : '#1a1208';
|
|
const label = card.label;
|
|
const sym = card.suitSymbol;
|
|
container.add(this.add.text(x + 7, y + 5, label, {
|
|
fontFamily: 'Righteous', fontSize: '20px', color: colorHex,
|
|
}));
|
|
container.add(this.add.text(x + 8, y + 28, sym, {
|
|
fontFamily: 'sans-serif', fontSize: '18px', color: colorHex,
|
|
}));
|
|
container.add(this.add.text(0, 4, sym, {
|
|
fontFamily: 'sans-serif', fontSize: '40px', color: colorHex,
|
|
}).setOrigin(0.5));
|
|
container.add(this.add.text(x + CARD_W - 7, y + CARD_H - 5, label, {
|
|
fontFamily: 'Righteous', fontSize: '20px', color: colorHex,
|
|
}).setOrigin(1, 1));
|
|
}
|
|
|
|
makeDraggable(container, descriptor) {
|
|
container.setInteractive(
|
|
new Phaser.Geom.Rectangle(-CARD_W / 2, -CARD_H / 2, CARD_W, CARD_H),
|
|
Phaser.Geom.Rectangle.Contains
|
|
);
|
|
container.input.cursor = 'grab';
|
|
container.on('pointerdown', (pointer) => this.onCardDown(descriptor, container, pointer));
|
|
}
|
|
|
|
/** A short throwaway sprite that flies from->to for AI foundation plays. */
|
|
spawnFly(card, fromX, fromY, toX, toY, ownerSeat) {
|
|
const c = this.add.container(fromX, fromY).setDepth(D.fly);
|
|
this.renderCardFace(c, card, true, SEAT_COLORS[ownerSeat]);
|
|
c.setScale(0.7);
|
|
this.tweens.add({
|
|
targets: c, x: toX, y: toY, scale: 1, duration: 300, ease: 'Cubic.easeOut',
|
|
onComplete: () => c.destroy(),
|
|
});
|
|
}
|
|
|
|
// ── Local input: stock / drag-drop ───────────────────────────────────────
|
|
|
|
isPlayable() {
|
|
return this.gs && this.gs.phase === 'playing' && !this.roundEnding;
|
|
}
|
|
|
|
onStockClick() {
|
|
if (!this.isPlayable() || this.dragState) return;
|
|
const log = flipStock(this.gs, 0);
|
|
if (log) {
|
|
playSound(this, log.type === 'recycle' ? SFX.CARD_SHUFFLE : SFX.CARD_SHOW);
|
|
this.renderLocal();
|
|
}
|
|
}
|
|
|
|
onCardDown(descriptor, container, pointer) {
|
|
if (!this.isPlayable() || this.dragState) return;
|
|
const sprites = this.dragSpritesFor(descriptor);
|
|
if (sprites.length === 0) return;
|
|
this.potentialDrag = {
|
|
descriptor,
|
|
sprites: sprites.map((obj) => ({ obj, offX: obj.x - pointer.x, offY: obj.y - pointer.y })),
|
|
startX: pointer.x, startY: pointer.y,
|
|
};
|
|
}
|
|
|
|
dragSpritesFor(descriptor) {
|
|
if (descriptor.kind === 'nerts') {
|
|
const c = nertsTop(this.gs, 0);
|
|
return c ? [this.localCardObjs.get(c.id)].filter(Boolean) : [];
|
|
}
|
|
if (descriptor.kind === 'waste') {
|
|
const c = wasteTop(this.gs, 0);
|
|
return c ? [this.localCardObjs.get(c.id)].filter(Boolean) : [];
|
|
}
|
|
if (descriptor.kind === 'work') {
|
|
const pile = this.gs.players[0].work[descriptor.idx];
|
|
return pile.slice(descriptor.k).map((card) => this.localCardObjs.get(card.id)).filter(Boolean);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
setupDragHandlers() {
|
|
this.input.on('pointermove', (pointer) => {
|
|
if (!pointer.isDown) return;
|
|
if (this.dragState) {
|
|
this.updateDrag(pointer);
|
|
} else if (this.potentialDrag) {
|
|
const dx = pointer.x - this.potentialDrag.startX;
|
|
const dy = pointer.y - this.potentialDrag.startY;
|
|
if (dx * dx + dy * dy > 64) this.promoteDrag();
|
|
}
|
|
});
|
|
this.input.on('pointerup', () => {
|
|
if (this.dragState) this.endDrag();
|
|
else if (this.potentialDrag) {
|
|
const pd = this.potentialDrag;
|
|
this.potentialDrag = null;
|
|
this.onCardClick(pd.descriptor); // tap = try auto-play to a foundation
|
|
}
|
|
});
|
|
}
|
|
|
|
promoteDrag() {
|
|
const pd = this.potentialDrag;
|
|
this.potentialDrag = null;
|
|
pd.sprites.forEach(({ obj }, i) => {
|
|
obj.setDepth(D.drag + i);
|
|
this.tweens.add({ targets: obj, scaleX: 1.06, scaleY: 1.06, duration: 90 });
|
|
});
|
|
this.dragState = pd;
|
|
}
|
|
|
|
updateDrag(pointer) {
|
|
for (const { obj, offX, offY } of this.dragState.sprites) {
|
|
obj.x = pointer.x + offX;
|
|
obj.y = pointer.y + offY;
|
|
}
|
|
const primary = this.dragState.sprites[0].obj;
|
|
this.updateDropHighlight(this.getDropTargetAt(primary.x, primary.y));
|
|
}
|
|
|
|
getDropTargetAt(x, y) {
|
|
for (let f = 0; f < this.foundationPos.length; f++) {
|
|
const pos = this.foundationPos[f];
|
|
if (Math.abs(x - pos.x) < CARD_W * 0.7 && Math.abs(y - pos.y) < CARD_H * 0.7) {
|
|
return { type: 'foundation', idx: f };
|
|
}
|
|
}
|
|
if (y > WORK_TOP_Y - 70) {
|
|
for (let i = 0; i < WORK_PILE_COUNT; i++) {
|
|
if (Math.abs(x - WORK_X[i]) < CARD_W * 0.7) return { type: 'work', idx: i };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
updateDropHighlight(target) {
|
|
if (this.dropHighlight) { this.dropHighlight.destroy(); this.dropHighlight = null; }
|
|
if (!target) return;
|
|
const pos = target.type === 'foundation' ? this.foundationPos[target.idx]
|
|
: { x: WORK_X[target.idx], y: WORK_TOP_Y };
|
|
const color = target.type === 'foundation' ? 0xffd700 : 0x4dabf7;
|
|
this.dropHighlight = this.add.rectangle(pos.x, pos.y, CARD_W + 16, CARD_H + 16, color, 0.18)
|
|
.setStrokeStyle(3, color, 0.9).setDepth(D.card - 1);
|
|
}
|
|
|
|
endDrag() {
|
|
const ds = this.dragState;
|
|
this.dragState = null;
|
|
if (this.dropHighlight) { this.dropHighlight.destroy(); this.dropHighlight = null; }
|
|
|
|
const primary = ds.sprites[0].obj;
|
|
const target = this.getDropTargetAt(primary.x, primary.y);
|
|
const committed = target ? this.commitDrop(ds.descriptor, target) : false;
|
|
// On success the sprites are torn down by the re-render; only animate them
|
|
// back home when the drop was rejected.
|
|
if (!committed) {
|
|
ds.sprites.forEach(({ obj }) => {
|
|
this.tweens.add({
|
|
targets: obj, x: obj.homeX, y: obj.homeY, scaleX: 1, scaleY: 1,
|
|
duration: 240, ease: 'Back.easeOut',
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
sourceFor(descriptor) {
|
|
if (descriptor.kind === 'nerts') return { type: 'nerts' };
|
|
if (descriptor.kind === 'waste') return { type: 'waste' };
|
|
const pile = this.gs.players[0].work[descriptor.idx];
|
|
return { type: 'work', idx: descriptor.idx, count: pile.length - descriptor.k };
|
|
}
|
|
|
|
commitDrop(descriptor, target) {
|
|
const source = this.sourceFor(descriptor);
|
|
let log = null;
|
|
if (target.type === 'foundation') {
|
|
if ((source.count ?? 1) > 1) return false; // foundations take single cards only
|
|
log = playToFoundation(this.gs, 0, source, target.idx);
|
|
if (log) { this.markFoundationCooldown(target.idx); this.resetLastMoveTimer(); }
|
|
} else {
|
|
log = playToWork(this.gs, 0, source, target.idx);
|
|
if (log && source.type === 'nerts') this.resetLastMoveTimer();
|
|
}
|
|
if (!log) return false;
|
|
playSound(this, SFX.CARD_PLACE);
|
|
this.afterLocalMove();
|
|
return true;
|
|
}
|
|
|
|
onCardClick(descriptor) {
|
|
if (!this.isPlayable()) return;
|
|
// Tap = try to play the single top card onto the first legal foundation.
|
|
if (descriptor.kind === 'work') {
|
|
const pile = this.gs.players[0].work[descriptor.idx];
|
|
if (descriptor.k !== pile.length - 1) return; // only the visible top can quick-play
|
|
}
|
|
const source = this.sourceFor(descriptor);
|
|
if ((source.count ?? 1) > 1) return;
|
|
const card = descriptor.kind === 'nerts' ? nertsTop(this.gs, 0)
|
|
: descriptor.kind === 'waste' ? wasteTop(this.gs, 0)
|
|
: workTop(this.gs, 0, descriptor.idx);
|
|
if (!card) return;
|
|
for (let f = 0; f < this.gs.foundations.length; f++) {
|
|
if (canPlayOnFoundation(this.gs, card, f)) {
|
|
if (playToFoundation(this.gs, 0, source, f)) {
|
|
this.markFoundationCooldown(f);
|
|
this.resetLastMoveTimer();
|
|
playSound(this, SFX.CARD_PLACE);
|
|
this.afterLocalMove();
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
afterLocalMove() {
|
|
this.renderLocal();
|
|
this.renderFoundations();
|
|
this.renderOpponents();
|
|
this.checkEnd();
|
|
}
|
|
|
|
_clearDrag() {
|
|
if (this.dropHighlight) { this.dropHighlight.destroy(); this.dropHighlight = null; }
|
|
this.dragState = null;
|
|
this.potentialDrag = null;
|
|
}
|
|
|
|
// ── Round / match summary panel ──────────────────────────────────────────
|
|
|
|
showRoundPanel(summary) {
|
|
const matchOver = this.gs.phase === 'matchover';
|
|
const winner = this.gs.winner;
|
|
const overlay = this.add.rectangle(CX, CY, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.68)
|
|
.setInteractive().setDepth(D.modal);
|
|
this.panelObjs.push(overlay);
|
|
|
|
const panelW = 760;
|
|
const panelH = 120 + this.playerCount * 52 + 90;
|
|
const panel = this.add.rectangle(CX, CY, panelW, panelH, COLORS.panel, 1)
|
|
.setStrokeStyle(2, COLORS.accent).setDepth(D.modal);
|
|
this.panelObjs.push(panel);
|
|
|
|
const title = matchOver
|
|
? (this.gs.matchWinner === 0 ? 'You win the match!'
|
|
: this.gs.matchWinner === -1 ? "It's a tie!"
|
|
: `${this.nameForSeat(this.gs.matchWinner)} wins the match!`)
|
|
: (winner === 0 ? 'Nerts! You won the round' : `${this.nameForSeat(winner)} called Nerts!`);
|
|
const t = this.add.text(CX, CY - panelH / 2 + 44, title, {
|
|
fontFamily: 'Righteous', fontSize: '38px',
|
|
color: (matchOver ? this.gs.matchWinner : winner) === 0 ? COLORS.goldHex : COLORS.textHex,
|
|
}).setOrigin(0.5).setDepth(D.modal + 1);
|
|
this.panelObjs.push(t);
|
|
|
|
// Scoreboard rows
|
|
const rowTop = CY - panelH / 2 + 96;
|
|
summary.forEach((s, i) => {
|
|
const y = rowTop + i * 52;
|
|
const name = this.nameForSeat(s.seat);
|
|
const deltaSign = s.roundScore >= 0 ? '+' : '';
|
|
const line = `${name}: ${s.founded} on foundations, ${s.nertsLeft} left in Nerts (${deltaSign}${s.roundScore})`;
|
|
this.panelObjs.push(this.add.text(CX - panelW / 2 + 50, y, line, {
|
|
fontFamily: '"Julius Sans One"', fontSize: '20px',
|
|
color: s.seat === winner ? COLORS.accentHex : COLORS.textHex,
|
|
}).setOrigin(0, 0.5).setDepth(D.modal + 1));
|
|
this.panelObjs.push(this.add.text(CX + panelW / 2 - 50, y, `Total: ${s.totalScore}`, {
|
|
fontFamily: 'Righteous', fontSize: '22px', color: SEAT_COLOR_HEX[s.seat] ?? COLORS.textHex,
|
|
}).setOrigin(1, 0.5).setDepth(D.modal + 1));
|
|
});
|
|
|
|
const btnY = CY + panelH / 2 - 50;
|
|
if (matchOver) {
|
|
const b1 = new Button(this, CX - 130, btnY, 'Play again', () => this.restartMatch(),
|
|
{ width: 220, fontSize: 22 }).setDepth(D.modal + 1);
|
|
this.panelObjs.push(b1);
|
|
} else {
|
|
const b1 = new Button(this, CX - 130, btnY, 'Next round', () => this.nextRound(),
|
|
{ width: 220, fontSize: 22, bg: COLORS.accent, textColor: COLORS.textDarkHex }).setDepth(D.modal + 1);
|
|
this.panelObjs.push(b1);
|
|
}
|
|
const b2 = new Button(this, CX + 130, btnY, 'Leave', () => this.scene.start('GameMenu'),
|
|
{ variant: 'ghost', width: 220, fontSize: 22 }).setDepth(D.modal + 1);
|
|
this.panelObjs.push(b2);
|
|
}
|
|
|
|
clearPanel() {
|
|
for (const o of this.panelObjs) o.destroy();
|
|
this.panelObjs = [];
|
|
}
|
|
|
|
nextRound() {
|
|
this.clearPanel();
|
|
this.startRound();
|
|
}
|
|
|
|
restartMatch() {
|
|
this.totals = new Array(this.playerCount).fill(0);
|
|
this.clearPanel();
|
|
this.startRound();
|
|
}
|
|
|
|
nameForSeat(seat) {
|
|
if (seat === 0) return auth.user?.username ?? 'You';
|
|
if (seat < 0) return 'Nobody';
|
|
return this.opponents[seat - 1]?.name ?? `Player ${seat + 1}`;
|
|
}
|
|
|
|
async recordHistory(youWon) {
|
|
try {
|
|
await api.post('/history/single-player', {
|
|
slug: 'nerts',
|
|
score: this.totals[0],
|
|
opponentScores: this.totals.slice(1),
|
|
result: youWon ? 'win' : 'loss',
|
|
});
|
|
} catch (err) {
|
|
console.warn('[nerts] failed to record history', err);
|
|
}
|
|
}
|
|
}
|