949 lines
36 KiB
JavaScript
949 lines
36 KiB
JavaScript
import * as Phaser from 'phaser';
|
|
import { GAME_WIDTH, GAME_HEIGHT, COLORS } from '../../config.js';
|
|
import { Button } from '../../ui/Button.js';
|
|
import { auth } from '../../services/auth.js';
|
|
import { api } from '../../services/api.js';
|
|
import { createOpponentPortrait, createPlayerPortrait } from '../../ui/Portrait.js';
|
|
import { playSound, SFX } from '../../ui/Sounds.js';
|
|
import { MusicPlayer } from '../../ui/MusicPlayer.js';
|
|
import {
|
|
MEXICAN, createInitialState, getLegalMoves,
|
|
playTile, drawTile, canDraw, passTurn, startNextRound, getWinners,
|
|
} from './MexicanTrainLogic.js';
|
|
import { chooseMove } from './MexicanTrainAI.js';
|
|
|
|
const TARGET_SCORE = 100;
|
|
|
|
// ─── Layout ──────────────────────────────────────────────────────────────
|
|
const CX = GAME_WIDTH / 2;
|
|
const PORTRAIT_X = 84;
|
|
const PORTRAIT_R = 46;
|
|
const LABEL_X = 150;
|
|
const HUB_X = 320;
|
|
const TRACKS_LEFT = 392;
|
|
const TRACKS_RIGHT = GAME_WIDTH - 40;
|
|
const TRACKS_TOP = 170;
|
|
const TRACKS_BOTTOM = 812;
|
|
const TRACK_HALF = 38; // square half-cell for laid tiles
|
|
const TRACK_TILE_W = TRACK_HALF * 2;
|
|
const TRACK_PITCH = TRACK_TILE_W + 6;
|
|
const HAND_Y = 942;
|
|
const HAND_HALF = 50; // square half-cell for hand tiles
|
|
const HAND_PITCH = HAND_HALF + 14;
|
|
|
|
const BONEYARD_CX = 1600;
|
|
const BONEYARD_CY = 950;
|
|
const BONEYARD_HALF = 40; // half-cell for face-down pile tiles
|
|
// Fixed offsets so the pile looks like a casual scatter (deterministic)
|
|
const PILE_OFFSETS = [
|
|
{ dx: 0, dy: 0, angle: 2 },
|
|
{ dx: -11, dy: 7, angle: 13 },
|
|
{ dx: 13, dy: -6, angle: -9 },
|
|
{ dx: -15, dy: -5, angle: 20 },
|
|
{ dx: 10, dy: 12, angle:-16 },
|
|
{ dx: -5, dy:-13, angle: 7 },
|
|
{ dx: 19, dy: 4, angle:-24 },
|
|
{ dx:-20, dy: 9, angle: 26 },
|
|
];
|
|
|
|
const DEPTH = {
|
|
bg: -1, band: 0, spine: 1, tile: 2, tileFx: 5,
|
|
hub: 6, portrait: 10, ui: 20, hand: 22, toast: 50, modal: 60,
|
|
};
|
|
|
|
// pip offsets (col,row in {-1,0,1}) per face value 0-6
|
|
const PIPS = {
|
|
0: [],
|
|
1: [[0, 0]],
|
|
2: [[-1, -1], [1, 1]],
|
|
3: [[-1, -1], [0, 0], [1, 1]],
|
|
4: [[-1, -1], [1, -1], [-1, 1], [1, 1]],
|
|
5: [[-1, -1], [1, -1], [0, 0], [-1, 1], [1, 1]],
|
|
6: [[-1, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [1, 1]],
|
|
};
|
|
|
|
export default class MexicanTrainGame extends Phaser.Scene {
|
|
constructor() { super('MexicanTrainGame'); }
|
|
|
|
init(data) {
|
|
this.gameDef = data.game;
|
|
this.opponents = data.opponents ?? [];
|
|
this.playfield = data.playfield ?? null;
|
|
|
|
this.gs = null;
|
|
this.inputLocked = true;
|
|
this.humanDrew = false;
|
|
this.gameOverShown = false;
|
|
|
|
this.portraitCtrls = []; // [{ ring, controller, x, y }]
|
|
this.rowZones = {}; // trainKey -> Zone
|
|
this.rowMeta = []; // [{ key, y }]
|
|
this.handTileObjs = []; // [{ container, tileIndex }]
|
|
this.selectTileIndex = null;
|
|
this.labelTexts = {}; // trainKey -> Text
|
|
}
|
|
|
|
create() {
|
|
new MusicPlayer(this, this.cache.json.get('music').tracks);
|
|
this.add.rectangle(CX, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, COLORS.bg).setDepth(DEPTH.bg);
|
|
if (this.playfield?.key && this.textures.exists(this.playfield.key)) {
|
|
this.add.image(CX, GAME_HEIGHT / 2, this.playfield.key)
|
|
.setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(DEPTH.bg);
|
|
}
|
|
|
|
const playerNames = [
|
|
{ name: auth.user?.username ?? 'You', isAI: false },
|
|
...this.opponents.map((o) => ({ name: o.name ?? o.id ?? 'Bot', isAI: true, avatar: o })),
|
|
];
|
|
this.gs = createInitialState({ playerNames, target: TARGET_SCORE });
|
|
|
|
this.trackGfx = this.add.graphics().setDepth(DEPTH.tile);
|
|
this.bandGfx = this.add.graphics().setDepth(DEPTH.band);
|
|
this.railGfx = this.add.graphics().setDepth(DEPTH.spine);
|
|
this.spineGfx = this.add.graphics().setDepth(DEPTH.spine);
|
|
this.hubGfx = this.add.graphics().setDepth(DEPTH.hub);
|
|
this.markerGfx = this.add.graphics().setDepth(DEPTH.tileFx);
|
|
|
|
this.buildHeader();
|
|
this.buildPortraitsAndLabels();
|
|
this.buildRowZones();
|
|
this.buildBoneyard();
|
|
|
|
new Button(this, 86, GAME_HEIGHT - 44, 'Leave', () => this.scene.start('GameMenu'), {
|
|
variant: 'ghost', width: 150, fontSize: 20,
|
|
}).setDepth(DEPTH.ui);
|
|
|
|
this.refresh();
|
|
this.time.delayedCall(500, () => this.nextTurn());
|
|
}
|
|
|
|
// ─── Static UI ────────────────────────────────────────────────────────
|
|
buildHeader() {
|
|
this.add.text(CX, 44, 'Mexican Train', {
|
|
fontFamily: 'Righteous', fontSize: '46px', color: COLORS.textHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(14, 7);
|
|
|
|
this.roundText = this.add.text(CX, 86, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(12, 4);
|
|
|
|
this.statusText = this.add.text(CX, 118, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '24px', color: COLORS.accentHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(12, 5);
|
|
|
|
this.boneText = this.add.text(BONEYARD_CX, BONEYARD_CY + 76, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(10, 4);
|
|
}
|
|
|
|
rowY(i) {
|
|
const rows = this.gs.players.length + 1;
|
|
const gap = (TRACKS_BOTTOM - TRACKS_TOP) / rows;
|
|
return TRACKS_TOP + gap * (i + 0.5);
|
|
}
|
|
|
|
rowKeyFor(i) {
|
|
return i < this.gs.players.length ? String(i) : MEXICAN;
|
|
}
|
|
|
|
buildPortraitsAndLabels() {
|
|
const n = this.gs.players.length;
|
|
this._handDotGfx = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const y = this.rowY(i);
|
|
const ring = this.add.graphics().setDepth(DEPTH.portrait);
|
|
let controller;
|
|
if (i === 0) {
|
|
controller = createPlayerPortrait(this, PORTRAIT_X, y, PORTRAIT_R, DEPTH.portrait, 'MexicanTrainGame');
|
|
} else {
|
|
const opp = this.opponents[i - 1] ?? { id: 'bot', spriteIndex: 0 };
|
|
controller = createOpponentPortrait(this, opp, PORTRAIT_X, y, PORTRAIT_R, DEPTH.portrait);
|
|
}
|
|
this.portraitCtrls.push({ ring, controller, x: PORTRAIT_X, y });
|
|
|
|
const label = this.add.text(LABEL_X, y, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '17px', color: COLORS.textHex,
|
|
align: 'left', lineSpacing: 2,
|
|
}).setOrigin(0, 0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(8, 5);
|
|
this.labelTexts[String(i)] = label;
|
|
|
|
this._handDotGfx.push(this.add.graphics().setDepth(DEPTH.ui));
|
|
}
|
|
|
|
// Mexican train row label
|
|
const my = this.rowY(n);
|
|
const mlabel = this.add.text(LABEL_X - 60, my, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '17px', color: COLORS.goldHex,
|
|
align: 'left',
|
|
}).setOrigin(0, 0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(8, 5);
|
|
this.labelTexts[MEXICAN] = mlabel;
|
|
}
|
|
|
|
buildRowZones() {
|
|
const rows = this.gs.players.length + 1;
|
|
const gap = (TRACKS_BOTTOM - TRACKS_TOP) / rows;
|
|
for (let i = 0; i < rows; i++) {
|
|
const key = this.rowKeyFor(i);
|
|
const y = this.rowY(i);
|
|
const zone = this.add.zone(TRACKS_LEFT, y, TRACKS_RIGHT - TRACKS_LEFT, gap - 6)
|
|
.setOrigin(0, 0.5).setDepth(DEPTH.tileFx)
|
|
.setInteractive({ useHandCursor: true });
|
|
zone.on('pointerup', () => this.onRowClick(key));
|
|
this.rowZones[key] = zone;
|
|
this.rowMeta.push({ key, y });
|
|
}
|
|
}
|
|
|
|
// ─── Render ───────────────────────────────────────────────────────────
|
|
refresh() {
|
|
this.paintBands();
|
|
this.paintRails();
|
|
this.paintSpineAndHub();
|
|
this.paintTracks();
|
|
this.paintMarkers();
|
|
this.paintHand();
|
|
this.updatePortraitRings();
|
|
this.updateLabels();
|
|
this.updateStatus();
|
|
const hub = this.gs.hub.value;
|
|
this.roundText.setText(
|
|
`Round ${this.gs.round + 1} • Engine ${hub}-${hub} • First to ${this.gs.target} ends it — lowest score wins`,
|
|
);
|
|
this.updateBoneyard();
|
|
this.updateScoreBadges();
|
|
}
|
|
|
|
paintBands() {
|
|
const g = this.bandGfx;
|
|
g.clear();
|
|
const rows = this.gs.players.length + 1;
|
|
const gap = (TRACKS_BOTTOM - TRACKS_TOP) / rows;
|
|
for (let i = 0; i < rows; i++) {
|
|
const y = this.rowY(i);
|
|
const active = i < this.gs.players.length && i === this.gs.current;
|
|
g.fillStyle(0x0c1a10, active ? 0.55 : 0.92);
|
|
g.fillRoundedRect(TRACKS_LEFT - 8, y - gap / 2 + 4, TRACKS_RIGHT - TRACKS_LEFT + 16, gap - 8, 10);
|
|
}
|
|
}
|
|
|
|
paintRails() {
|
|
const g = this.railGfx;
|
|
g.clear();
|
|
const rows = this.gs.players.length + 1;
|
|
const railOff = 11; // px from lane center to each rail
|
|
const tieHalf = 15; // tie extends 4px beyond each rail
|
|
const tieStep = 22; // horizontal spacing between ties
|
|
|
|
for (let i = 0; i < rows; i++) {
|
|
const y = this.rowY(i);
|
|
// Ties (wood) — drawn first so rails appear on top
|
|
g.lineStyle(4, 0x4a3018, 0.55);
|
|
for (let x = TRACKS_LEFT; x <= TRACKS_RIGHT; x += tieStep) {
|
|
g.lineBetween(x, y - tieHalf, x, y + tieHalf);
|
|
}
|
|
// Rails (metal)
|
|
g.lineStyle(2.5, 0x908060, 0.7);
|
|
g.lineBetween(TRACKS_LEFT, y - railOff, TRACKS_RIGHT, y - railOff);
|
|
g.lineBetween(TRACKS_LEFT, y + railOff, TRACKS_RIGHT, y + railOff);
|
|
}
|
|
}
|
|
|
|
paintSpineAndHub() {
|
|
const g = this.spineGfx;
|
|
g.clear();
|
|
const rows = this.gs.players.length + 1;
|
|
const hubY = (this.rowY(0) + this.rowY(rows - 1)) / 2;
|
|
g.lineStyle(3, COLORS.muted, 0.7);
|
|
for (let i = 0; i < rows; i++) {
|
|
g.lineBetween(HUB_X, hubY, TRACKS_LEFT - 6, this.rowY(i));
|
|
}
|
|
|
|
this.hubGfx.clear();
|
|
const v = this.gs.hub.value;
|
|
this.paintDomino(this.hubGfx, HUB_X, hubY, 34, v, v, false, COLORS.gold);
|
|
if (!this._hubLabel) {
|
|
this._hubLabel = this.add.text(HUB_X, hubY - 58, 'ENGINE', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.goldHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.hub)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(8, 3);
|
|
} else {
|
|
this._hubLabel.setY(hubY - 58);
|
|
}
|
|
}
|
|
|
|
paintTracks() {
|
|
const g = this.trackGfx;
|
|
g.clear();
|
|
const rows = this.gs.players.length + 1;
|
|
const maxTiles = Math.floor((TRACKS_RIGHT - TRACKS_LEFT) / TRACK_PITCH);
|
|
for (let i = 0; i < rows; i++) {
|
|
const key = this.rowKeyFor(i);
|
|
const y = this.rowY(i);
|
|
const tiles = this.gs.trains[key].tiles;
|
|
const start = Math.max(0, tiles.length - maxTiles);
|
|
let drawX = TRACKS_LEFT + TRACK_HALF;
|
|
if (start > 0) {
|
|
this.maybeTruncMark(i, start);
|
|
drawX += 8;
|
|
} else {
|
|
this.clearTruncMark(i);
|
|
}
|
|
for (let t = start; t < tiles.length; t++) {
|
|
const tile = tiles[t];
|
|
const isDouble = tile.left === tile.right;
|
|
const isOpenDouble = this.gs.openDouble?.train === key && t === tiles.length - 1;
|
|
const border = isOpenDouble ? COLORS.danger : (isDouble ? COLORS.gold : COLORS.accent);
|
|
this.paintDomino(g, drawX, y, TRACK_HALF, tile.left, tile.right, isDouble, border);
|
|
drawX += TRACK_PITCH;
|
|
}
|
|
}
|
|
}
|
|
|
|
maybeTruncMark(i, hidden) {
|
|
this._truncMarks = this._truncMarks ?? {};
|
|
const y = this.rowY(i);
|
|
if (!this._truncMarks[i]) {
|
|
this._truncMarks[i] = this.add.text(TRACKS_LEFT - 2, y, '', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '15px', color: COLORS.mutedHex,
|
|
}).setOrigin(0, 0.5).setDepth(DEPTH.tileFx)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(5, 2);
|
|
}
|
|
this._truncMarks[i].setText(`+${hidden}«`).setVisible(true);
|
|
}
|
|
|
|
clearTruncMark(i) {
|
|
if (this._truncMarks?.[i]) this._truncMarks[i].setVisible(false);
|
|
}
|
|
|
|
paintMarkers() {
|
|
const g = this.markerGfx;
|
|
g.clear();
|
|
const rows = this.gs.players.length + 1;
|
|
for (let i = 0; i < rows; i++) {
|
|
const key = this.rowKeyFor(i);
|
|
if (key === MEXICAN) continue;
|
|
if (!this.gs.trains[key].marker) continue;
|
|
const y = this.rowY(i);
|
|
const tiles = this.gs.trains[key].tiles;
|
|
const x = TRACKS_LEFT + TRACK_HALF + Math.min(tiles.length, Math.floor((TRACKS_RIGHT - TRACKS_LEFT) / TRACK_PITCH)) * TRACK_PITCH + 6;
|
|
// little open-train flag
|
|
g.fillStyle(COLORS.danger, 1);
|
|
g.fillCircle(x, y, 9);
|
|
g.fillStyle(COLORS.text, 1);
|
|
g.fillRect(x - 1, y - 14, 2, 14);
|
|
}
|
|
}
|
|
|
|
paintHand() {
|
|
for (const o of this.handTileObjs) o.container.destroy();
|
|
this.handTileObjs = [];
|
|
|
|
const hand = this.gs.players[0].hand;
|
|
const legal = this.gs.players[0].isAI ? [] : getLegalMoves(this.gs, 0);
|
|
const legalByTile = new Map();
|
|
for (const m of legal) {
|
|
if (!legalByTile.has(m.tileIndex)) legalByTile.set(m.tileIndex, []);
|
|
legalByTile.get(m.tileIndex).push(m.train);
|
|
}
|
|
|
|
const total = hand.length;
|
|
const startX = CX - ((total - 1) * HAND_PITCH) / 2;
|
|
const humanTurn = this.gs.current === 0 && this.gs.phase === 'playing';
|
|
|
|
hand.forEach((tile, idx) => {
|
|
const x = startX + idx * HAND_PITCH;
|
|
const playable = humanTurn && legalByTile.has(idx);
|
|
const container = this.add.container(x, HAND_Y).setDepth(DEPTH.hand);
|
|
|
|
const g = this.add.graphics();
|
|
const selected = this.selectTileIndex === idx;
|
|
const border = selected ? COLORS.gold : (playable ? COLORS.accent : COLORS.muted);
|
|
this.paintDomino(g, 0, 0, HAND_HALF, tile.a, tile.b, true, border);
|
|
container.add(g);
|
|
container.setAlpha(playable || !humanTurn ? 1 : 0.45);
|
|
|
|
if (playable) {
|
|
const zone = this.add.zone(0, 0, HAND_HALF, HAND_HALF * 2).setOrigin(0.5)
|
|
.setInteractive({ useHandCursor: true });
|
|
zone.on('pointerup', () => this.onHandTileClick(idx, legalByTile.get(idx)));
|
|
container.add(zone);
|
|
if (selected) container.setY(HAND_Y - 16);
|
|
}
|
|
|
|
this.handTileObjs.push({ container, tileIndex: idx });
|
|
});
|
|
}
|
|
|
|
updatePortraitRings() {
|
|
for (let i = 0; i < this.portraitCtrls.length; i++) {
|
|
const { ring, x, y } = this.portraitCtrls[i];
|
|
ring.clear();
|
|
if (i === this.gs.current && this.gs.phase === 'playing') {
|
|
ring.lineStyle(4, COLORS.gold, 1);
|
|
ring.strokeCircle(x, y, PORTRAIT_R + 6);
|
|
}
|
|
}
|
|
}
|
|
|
|
updateLabels() {
|
|
const n = this.gs.players.length;
|
|
for (let i = 0; i < n; i++) {
|
|
const p = this.gs.players[i];
|
|
const marked = this.gs.trains[String(i)].marker;
|
|
this.labelTexts[String(i)].setText(`${p.name}\n${p.hand.length} tiles · ${p.score} pts${marked ? ' · OPEN' : ''}`);
|
|
this.labelTexts[String(i)].setColor(marked ? COLORS.dangerHex : COLORS.textHex);
|
|
}
|
|
this.labelTexts[MEXICAN].setText('Mexican Train');
|
|
this.updateHandDots();
|
|
}
|
|
|
|
updateScoreBadges() {
|
|
const scores = this.gs.players.map(p => p.score);
|
|
if (scores.every(s => s === 0)) {
|
|
this._scoreBadgeCtrs?.forEach(c => c.destroy());
|
|
this._scoreBadgeCtrs = [];
|
|
return;
|
|
}
|
|
const changed = !this._lastBadgeScores || scores.some((s, i) => s !== this._lastBadgeScores[i]);
|
|
if (!changed) return;
|
|
this._lastBadgeScores = [...scores];
|
|
|
|
this._scoreBadgeCtrs?.forEach(c => c.destroy());
|
|
this._scoreBadgeCtrs = [];
|
|
|
|
for (let i = 0; i < this.gs.players.length; i++) {
|
|
const score = scores[i];
|
|
const x = PORTRAIT_X;
|
|
const y = this.rowY(i) - PORTRAIT_R - 20;
|
|
const borderColor = score > 75 ? COLORS.danger
|
|
: score > 50 ? 0xe07030
|
|
: score > 25 ? COLORS.accent
|
|
: COLORS.gold;
|
|
|
|
const c = this.add.container(x, y).setDepth(DEPTH.portrait + 2).setScale(0.1);
|
|
const g = this.add.graphics();
|
|
g.fillStyle(0x1e1a30, 1);
|
|
g.fillCircle(0, 0, 22);
|
|
g.lineStyle(2.5, borderColor, 1);
|
|
g.strokeCircle(0, 0, 22);
|
|
g.lineStyle(1.5, 0xffffff, 0.25);
|
|
g.strokeCircle(0, 0, 17);
|
|
|
|
const fontSize = score >= 100 ? '11px' : '14px';
|
|
const t = this.add.text(0, 0, String(score), {
|
|
fontFamily: '"Julius Sans One"', fontSize, color: COLORS.textHex, fontStyle: 'bold',
|
|
}).setOrigin(0.5);
|
|
|
|
c.add([g, t]);
|
|
this._scoreBadgeCtrs.push(c);
|
|
this.tweens.add({ targets: c, scale: 1, duration: 260, ease: 'Back.Out' });
|
|
}
|
|
}
|
|
|
|
updateHandDots() {
|
|
if (!this._handDotGfx) return;
|
|
const n = this.gs.players.length;
|
|
const half = 7;
|
|
const normalPitch = half * 2 + 3;
|
|
const maxWidth = TRACKS_LEFT - LABEL_X - half; // drawable x range
|
|
for (let i = 0; i < n; i++) {
|
|
const g = this._handDotGfx[i];
|
|
g.clear();
|
|
const count = this.gs.players[i].hand.length;
|
|
if (count === 0) continue;
|
|
const y = this.rowY(i) + 30;
|
|
// Compress pitch if tiles would overflow the label area
|
|
const pitch = count > 1 ? Math.min(normalPitch, (maxWidth - half) / (count - 1)) : normalPitch;
|
|
for (let t = 0; t < count; t++) {
|
|
this.paintMiniDomino(g, LABEL_X + half + t * pitch, y, half, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
paintMiniDomino(g, cx, cy, half, faceUp = false) {
|
|
const w = half * 2;
|
|
const h = half;
|
|
g.fillStyle(faceUp ? COLORS.text : COLORS.panel, 1);
|
|
g.fillRoundedRect(cx - w / 2, cy - h / 2, w, h, 2);
|
|
g.lineStyle(1, faceUp ? COLORS.accent : COLORS.muted, faceUp ? 1 : 0.7);
|
|
g.strokeRoundedRect(cx - w / 2, cy - h / 2, w, h, 2);
|
|
g.lineStyle(1, COLORS.muted, faceUp ? 0.5 : 0.3);
|
|
g.lineBetween(cx, cy - h / 2 + 1, cx, cy + h / 2 - 1);
|
|
}
|
|
|
|
updateStatus() {
|
|
const cur = this.gs.players[this.gs.current];
|
|
if (this.gs.phase === 'gameover') { this.statusText.setText('Match over'); return; }
|
|
if (this.gs.phase === 'roundover') { this.statusText.setText('Round over'); return; }
|
|
if (this.gs.openDouble) {
|
|
const who = this.gs.current === 0 ? 'You' : cur.name;
|
|
this.statusText.setText(this.gs.current === 0 ? 'Cover the double!' : `${who} must cover the double`);
|
|
return;
|
|
}
|
|
this.statusText.setText(this.gs.current === 0 ? 'Your turn' : `${cur.name}'s turn`);
|
|
}
|
|
|
|
// ─── Domino painter ───────────────────────────────────────────────────
|
|
paintDomino(g, cx, cy, half, vA, vB, vertical, borderColor) {
|
|
const w = vertical ? half : half * 2;
|
|
const h = vertical ? half * 2 : half;
|
|
g.fillStyle(COLORS.text, 1);
|
|
g.fillRoundedRect(cx - w / 2, cy - h / 2, w, h, 6);
|
|
g.lineStyle(2.5, borderColor, 1);
|
|
g.strokeRoundedRect(cx - w / 2, cy - h / 2, w, h, 6);
|
|
|
|
// divider
|
|
g.lineStyle(2, COLORS.muted, 0.8);
|
|
if (vertical) g.lineBetween(cx - w / 2 + 4, cy, cx + w / 2 - 4, cy);
|
|
else g.lineBetween(cx, cy - h / 2 + 4, cx, cy + h / 2 - 4);
|
|
|
|
if (vertical) {
|
|
this.paintPips(g, cx, cy - half / 2, half, vA);
|
|
this.paintPips(g, cx, cy + half / 2, half, vB);
|
|
} else {
|
|
this.paintPips(g, cx - half / 2, cy, half, vA);
|
|
this.paintPips(g, cx + half / 2, cy, half, vB);
|
|
}
|
|
}
|
|
|
|
paintPips(g, cx, cy, half, value) {
|
|
const d = half * 0.27;
|
|
const r = Math.max(2, half * 0.11);
|
|
g.fillStyle(COLORS.textDark, 1);
|
|
for (const [col, row] of (PIPS[value] ?? [])) {
|
|
g.fillCircle(cx + col * d, cy + row * d, r);
|
|
}
|
|
}
|
|
|
|
// ─── Turn flow ────────────────────────────────────────────────────────
|
|
nextTurn() {
|
|
this.showBoneyardClickable(false);
|
|
if (this.gs.phase === 'gameover') { this.showGameOverModal(); return; }
|
|
if (this.gs.phase === 'roundover') { this.showRoundOverModal(); return; }
|
|
this.refresh();
|
|
if (this.gs.players[this.gs.current].isAI) this.runAITurn();
|
|
else this.beginHumanTurn();
|
|
}
|
|
|
|
beginHumanTurn() {
|
|
this.humanDrew = false;
|
|
this.selectTileIndex = null;
|
|
this.promptHuman();
|
|
}
|
|
|
|
promptHuman() {
|
|
this.refresh();
|
|
const moves = getLegalMoves(this.gs, 0);
|
|
if (moves.length > 0) {
|
|
this.inputLocked = false;
|
|
return;
|
|
}
|
|
// No legal play — draw one (once), else pass.
|
|
this.inputLocked = true;
|
|
if (!this.humanDrew && canDraw(this.gs)) {
|
|
this.statusText.setText('No tiles to play — click the boneyard to draw');
|
|
this.showBoneyardClickable(true);
|
|
} else {
|
|
this.statusText.setText('No play — passing');
|
|
this.time.delayedCall(750, () => {
|
|
this.gs = passTurn(this.gs);
|
|
this.afterAction();
|
|
});
|
|
}
|
|
}
|
|
|
|
onHandTileClick(tileIndex, trains) {
|
|
if (this.inputLocked) return;
|
|
if (trains.length === 1) {
|
|
this.applyMove({ tileIndex, train: trains[0] });
|
|
return;
|
|
}
|
|
// Multiple destinations: enter selection mode, highlight candidate rows.
|
|
this.selectTileIndex = tileIndex;
|
|
this._selectTrains = new Set(trains);
|
|
this.refresh();
|
|
this.statusText.setText('Choose a train for this tile');
|
|
this.highlightSelectableRows(true);
|
|
}
|
|
|
|
highlightSelectableRows(on) {
|
|
const rows = this.gs.players.length + 1;
|
|
const gap = (TRACKS_BOTTOM - TRACKS_TOP) / rows;
|
|
this._selectGfx?.clear();
|
|
if (!this._selectGfx) this._selectGfx = this.add.graphics().setDepth(DEPTH.tileFx);
|
|
if (!on) return;
|
|
for (let i = 0; i < rows; i++) {
|
|
const key = this.rowKeyFor(i);
|
|
if (!this._selectTrains.has(key)) continue;
|
|
const y = this.rowY(i);
|
|
this._selectGfx.lineStyle(3, COLORS.gold, 1);
|
|
this._selectGfx.strokeRoundedRect(TRACKS_LEFT - 8, y - gap / 2 + 4, TRACKS_RIGHT - TRACKS_LEFT + 16, gap - 8, 10);
|
|
}
|
|
}
|
|
|
|
onRowClick(key) {
|
|
if (this.inputLocked || this.selectTileIndex === null) return;
|
|
if (!this._selectTrains?.has(key)) return;
|
|
const tileIndex = this.selectTileIndex;
|
|
this.selectTileIndex = null;
|
|
this.highlightSelectableRows(false);
|
|
this.applyMove({ tileIndex, train: key });
|
|
}
|
|
|
|
applyMove(move) {
|
|
this.inputLocked = true;
|
|
this.selectTileIndex = null;
|
|
this.highlightSelectableRows(false);
|
|
|
|
const key = move.train;
|
|
const tile = this.gs.players[0].hand[move.tileIndex];
|
|
const obj = this.handTileObjs.find((o) => o.tileIndex === move.tileIndex);
|
|
const srcX = obj ? obj.container.x : CX;
|
|
const srcY = obj ? obj.container.y : HAND_Y;
|
|
if (obj) obj.container.setVisible(false);
|
|
|
|
const { x: destX, y: destY } = this.calcTrackEnd(key);
|
|
this.animateTilePlay(srcX, srcY, destX, destY, tile.a, tile.b, () => {
|
|
this.gs = playTile(this.gs, move);
|
|
playSound(this, SFX.PIECE_CLICK);
|
|
this.refresh();
|
|
this.flashTrainEnd(key);
|
|
this.humanDrew = false;
|
|
this.time.delayedCall(280, () => this.afterAction());
|
|
});
|
|
}
|
|
|
|
afterAction() {
|
|
if (this.gs.phase !== 'playing') { this.nextTurn(); return; }
|
|
if (this.gs.current === 0) { this.beginHumanTurnContinue(); return; }
|
|
this.nextTurn();
|
|
}
|
|
|
|
// Continue the human's turn (e.g. must cover a double they just laid).
|
|
beginHumanTurnContinue() {
|
|
this.humanDrew = false;
|
|
this.promptHuman();
|
|
}
|
|
|
|
async runAITurn() {
|
|
this.inputLocked = true;
|
|
let drew = false;
|
|
// Safety bound so a logic edge case can never hang the turn loop.
|
|
for (let guard = 0; guard < 60; guard++) {
|
|
if (this.gs.phase !== 'playing') break;
|
|
const startPlayer = this.gs.current;
|
|
const moves = getLegalMoves(this.gs, startPlayer);
|
|
if (moves.length > 0) {
|
|
await this.delay(350);
|
|
const move = chooseMove(this.gs, startPlayer);
|
|
const key = move.train;
|
|
const tile = this.gs.players[startPlayer].hand[move.tileIndex];
|
|
const src = this.portraitCtrls[startPlayer] ?? { x: PORTRAIT_X, y: this.rowY(startPlayer) };
|
|
const { x: destX, y: destY } = this.calcTrackEnd(key);
|
|
await new Promise((resolve) => this.animateTilePlay(src.x, src.y, destX, destY, tile.a, tile.b, resolve));
|
|
this.gs = playTile(this.gs, move);
|
|
playSound(this, SFX.PIECE_CLICK);
|
|
this.refresh();
|
|
this.flashTrainEnd(key);
|
|
drew = false;
|
|
if (this.gs.phase !== 'playing') break;
|
|
if (this.gs.current === startPlayer) continue; // laid a double, must cover
|
|
break;
|
|
}
|
|
if (!drew && canDraw(this.gs)) {
|
|
await this.delay(300);
|
|
const portraitSrc = this.portraitCtrls[startPlayer] ?? { x: PORTRAIT_X, y: this.rowY(startPlayer) };
|
|
await this.animateDrawFromPile(portraitSrc.x, portraitSrc.y);
|
|
this.gs = drawTile(this.gs);
|
|
this.refresh();
|
|
drew = true;
|
|
continue;
|
|
}
|
|
await this.delay(420);
|
|
this.gs = passTurn(this.gs);
|
|
break;
|
|
}
|
|
await this.delay(360);
|
|
this.nextTurn();
|
|
}
|
|
|
|
// ─── Effects ──────────────────────────────────────────────────────────
|
|
flashTrainEnd(key) {
|
|
const rows = this.gs.players.length + 1;
|
|
let i = key === MEXICAN ? rows - 1 : Number(key);
|
|
const y = this.rowY(i);
|
|
const tiles = this.gs.trains[key].tiles;
|
|
const maxTiles = Math.floor((TRACKS_RIGHT - TRACKS_LEFT) / TRACK_PITCH);
|
|
const shown = Math.min(tiles.length, maxTiles);
|
|
const x = TRACKS_LEFT + TRACK_HALF + (shown - 1) * TRACK_PITCH;
|
|
const lastTile = tiles[tiles.length - 1];
|
|
const isLastDouble = lastTile && lastTile.left === lastTile.right;
|
|
const fw = isLastDouble ? TRACK_HALF : TRACK_TILE_W;
|
|
const fh = isLastDouble ? TRACK_TILE_W : TRACK_HALF;
|
|
const fx = this.add.graphics().setDepth(DEPTH.tileFx);
|
|
fx.lineStyle(4, COLORS.gold, 1);
|
|
fx.strokeRoundedRect(x - fw / 2 - 3, y - fh / 2 - 3, fw + 6, fh + 6, 6);
|
|
this.tweens.add({ targets: fx, alpha: { from: 1, to: 0 }, duration: 500, onComplete: () => fx.destroy() });
|
|
}
|
|
|
|
calcTrackEnd(key) {
|
|
const rows = this.gs.players.length + 1;
|
|
const i = key === MEXICAN ? rows - 1 : Number(key);
|
|
const y = this.rowY(i);
|
|
const tiles = this.gs.trains[key].tiles;
|
|
const maxTiles = Math.floor((TRACKS_RIGHT - TRACKS_LEFT) / TRACK_PITCH);
|
|
const newIdx = Math.min(tiles.length, maxTiles - 1);
|
|
return { x: TRACKS_LEFT + TRACK_HALF + newIdx * TRACK_PITCH, y };
|
|
}
|
|
|
|
animateTilePlay(fromX, fromY, toX, toY, tileA, tileB, onComplete) {
|
|
const isDouble = tileA === tileB;
|
|
const g = this.add.graphics().setDepth(DEPTH.tileFx + 2);
|
|
this.paintDomino(g, 0, 0, TRACK_HALF, tileA, tileB, isDouble, COLORS.accent);
|
|
g.setPosition(fromX, fromY);
|
|
this.tweens.add({
|
|
targets: g,
|
|
x: toX,
|
|
y: toY,
|
|
duration: 380,
|
|
ease: 'Cubic.easeOut',
|
|
onComplete: () => { g.destroy(); if (onComplete) onComplete(); },
|
|
});
|
|
}
|
|
|
|
// ─── Boneyard pile ───────────────────────────────────────────────────
|
|
buildBoneyard() {
|
|
// Pre-create 8 face-down tile containers; show/hide based on boneyard count.
|
|
this._boneyardTiles = PILE_OFFSETS.map(({ dx, dy, angle }) => {
|
|
const g = this.add.graphics();
|
|
this.paintFaceDownDomino(g, 0, 0, BONEYARD_HALF);
|
|
const c = this.add.container(BONEYARD_CX + dx, BONEYARD_CY + dy, [g]);
|
|
c.setAngle(angle).setDepth(DEPTH.tile);
|
|
return c;
|
|
});
|
|
|
|
this.add.text(BONEYARD_CX, BONEYARD_CY - 72, 'BONEYARD', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '18px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.ui)
|
|
.setBackgroundColor('rgba(0,0,0,0.55)').setPadding(10, 4);
|
|
|
|
this._drawToast = this.add.text(BONEYARD_CX, BONEYARD_CY - 100, 'DRAW', {
|
|
fontFamily: 'Righteous', fontSize: '38px', color: COLORS.goldHex,
|
|
}).setOrigin(0.5).setAlpha(0).setDepth(DEPTH.toast);
|
|
|
|
this._boneyardZone = this.add.zone(BONEYARD_CX, BONEYARD_CY, BONEYARD_HALF * 2 + 60, BONEYARD_HALF * 2 + 30)
|
|
.setOrigin(0.5).setDepth(DEPTH.tileFx);
|
|
this._boneyardZoneActive = false;
|
|
this._boneyardZone.on('pointerup', () => this.onBoneyardClick());
|
|
}
|
|
|
|
updateBoneyard() {
|
|
if (!this._boneyardTiles) return;
|
|
const count = this.gs.boneyard.length;
|
|
const shown = Math.min(count, 8);
|
|
for (let i = 0; i < 8; i++) this._boneyardTiles[i].setVisible(i < shown);
|
|
this.boneText.setText(count > 0 ? `${count} tiles` : 'Empty');
|
|
}
|
|
|
|
paintFaceDownDomino(g, cx, cy, half) {
|
|
const w = half * 2;
|
|
const h = half;
|
|
g.fillStyle(COLORS.text, 1);
|
|
g.fillRoundedRect(cx - w / 2, cy - h / 2, w, h, 5);
|
|
g.lineStyle(2, COLORS.accent, 1);
|
|
g.strokeRoundedRect(cx - w / 2, cy - h / 2, w, h, 5);
|
|
g.lineStyle(1.5, COLORS.muted, 0.5);
|
|
g.lineBetween(cx, cy - h / 2 + 3, cx, cy + h / 2 - 3);
|
|
g.fillStyle(COLORS.muted, 0.4);
|
|
g.fillCircle(cx - half / 2, cy, 3);
|
|
g.fillCircle(cx + half / 2, cy, 3);
|
|
}
|
|
|
|
showBoneyardClickable(on) {
|
|
if (!this._boneyardZone) return;
|
|
this._boneyardZoneActive = on;
|
|
if (on) {
|
|
this._boneyardZone.setInteractive({ useHandCursor: true });
|
|
for (const c of this._boneyardTiles) {
|
|
if (c.visible) {
|
|
this.tweens.add({ targets: c, scale: 1.1, duration: 320, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });
|
|
}
|
|
}
|
|
} else {
|
|
this._boneyardZone.disableInteractive();
|
|
for (const c of this._boneyardTiles) {
|
|
this.tweens.killTweensOf(c);
|
|
c.setScale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
onBoneyardClick() {
|
|
if (!this._boneyardZoneActive) return;
|
|
this.showBoneyardClickable(false);
|
|
const hand = this.gs.players[0].hand;
|
|
const destX = CX + (hand.length * HAND_PITCH) / 2;
|
|
this.animateDrawFromPile(Math.min(destX, GAME_WIDTH - 150), HAND_Y).then(() => {
|
|
this.gs = drawTile(this.gs);
|
|
this.humanDrew = true;
|
|
this.promptHuman();
|
|
});
|
|
}
|
|
|
|
animateDrawFromPile(toX, toY) {
|
|
this.flashDrawToast();
|
|
playSound(this, SFX.CARD_DEAL);
|
|
return new Promise((resolve) => {
|
|
const g = this.add.graphics().setDepth(DEPTH.tileFx + 2);
|
|
this.paintFaceDownDomino(g, 0, 0, BONEYARD_HALF);
|
|
g.setPosition(BONEYARD_CX, BONEYARD_CY);
|
|
this.tweens.add({
|
|
targets: g,
|
|
x: toX,
|
|
y: toY,
|
|
duration: 420,
|
|
ease: 'Cubic.easeOut',
|
|
onComplete: () => { g.destroy(); resolve(); },
|
|
});
|
|
});
|
|
}
|
|
|
|
flashDrawToast() {
|
|
this.tweens.killTweensOf(this._drawToast);
|
|
this._drawToast.setAlpha(1).setY(BONEYARD_CY - 100);
|
|
this.tweens.add({
|
|
targets: this._drawToast,
|
|
alpha: 0,
|
|
y: BONEYARD_CY - 140,
|
|
duration: 900,
|
|
ease: 'Cubic.easeOut',
|
|
});
|
|
}
|
|
|
|
showToast(msg) {
|
|
const t = this.add.text(CX, 158, msg, {
|
|
fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.goldHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.toast);
|
|
this.tweens.add({ targets: t, alpha: { from: 1, to: 0 }, y: 132, duration: 1500, onComplete: () => t.destroy() });
|
|
}
|
|
|
|
// ─── Round over ───────────────────────────────────────────────────────
|
|
showRoundOverModal() {
|
|
this.refresh();
|
|
const n = this.gs.players.length;
|
|
const winnerName = this.gs.players[this.gs.roundWinner]?.name ?? '';
|
|
if (this.gs.roundWinner > 0) this.portraitCtrls[this.gs.roundWinner]?.controller?.playEmotion?.('happy');
|
|
|
|
const overlay = this.add.rectangle(CX, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.6)
|
|
.setInteractive().setDepth(DEPTH.modal);
|
|
const panelW = 720;
|
|
const panelH = 200 + n * 52;
|
|
const panel = this.add.rectangle(CX, GAME_HEIGHT / 2, panelW, panelH, COLORS.panel, 1)
|
|
.setStrokeStyle(2, COLORS.accent).setDepth(DEPTH.modal);
|
|
|
|
const top = GAME_HEIGHT / 2 - panelH / 2;
|
|
const els = [overlay, panel];
|
|
els.push(this.add.text(CX, top + 46, `Round ${this.gs.round + 1} — ${winnerName} went out`, {
|
|
fontFamily: 'Righteous', fontSize: '34px', color: COLORS.goldHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.modal));
|
|
els.push(this.add.text(CX, top + 84, 'round pips / total', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '16px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.modal));
|
|
|
|
let rowY = top + 124;
|
|
for (let p = 0; p < n; p++) {
|
|
els.push(this.add.text(CX - panelW / 2 + 40, rowY, this.gs.players[p].name, {
|
|
fontFamily: 'Righteous', fontSize: '22px', color: COLORS.textHex,
|
|
}).setOrigin(0, 0.5).setDepth(DEPTH.modal));
|
|
els.push(this.add.text(CX + panelW / 2 - 40, rowY, `+${this.gs.lastRoundScores[p]} / ${this.gs.players[p].score}`, {
|
|
fontFamily: 'Righteous', fontSize: '22px', color: COLORS.textHex,
|
|
}).setOrigin(1, 0.5).setDepth(DEPTH.modal));
|
|
rowY += 48;
|
|
}
|
|
|
|
const btn = new Button(this, CX, GAME_HEIGHT / 2 + panelH / 2 - 44, 'Next Round', () => {
|
|
els.forEach((e) => e.destroy());
|
|
btn.destroy();
|
|
this.gs = startNextRound(this.gs);
|
|
this.refresh();
|
|
this.time.delayedCall(400, () => this.nextTurn());
|
|
}, { width: 260, fontSize: 24 }).setDepth(DEPTH.modal);
|
|
}
|
|
|
|
// ─── Game over ────────────────────────────────────────────────────────
|
|
showGameOverModal() {
|
|
if (this.gameOverShown) return;
|
|
this.gameOverShown = true;
|
|
this.refresh();
|
|
this.postHistory().catch(() => {});
|
|
|
|
const winners = new Set(getWinners(this.gs));
|
|
const humanWon = winners.has(0);
|
|
if (winners.size === 1 && winners.has(0)) playSound(this, SFX.CASINO_WIN);
|
|
else if (!humanWon) playSound(this, SFX.CASINO_LOSE);
|
|
for (let i = 1; i < this.gs.players.length; i++) {
|
|
this.portraitCtrls[i]?.controller?.playEmotion?.(winners.has(i) ? 'happy' : 'upset');
|
|
}
|
|
|
|
this.add.rectangle(CX, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.68)
|
|
.setInteractive().setDepth(DEPTH.modal);
|
|
const n = this.gs.players.length;
|
|
const panelW = 720;
|
|
const panelH = 230 + n * 52;
|
|
this.add.rectangle(CX, GAME_HEIGHT / 2, panelW, panelH, COLORS.panel, 1)
|
|
.setStrokeStyle(2, COLORS.accent).setDepth(DEPTH.modal);
|
|
|
|
const top = GAME_HEIGHT / 2 - panelH / 2;
|
|
const heading = winners.size === 1 && humanWon ? 'You win!'
|
|
: humanWon ? 'Tied for the win' : `${this.gs.players[[...winners][0]].name} wins`;
|
|
this.add.text(CX, top + 50, heading, {
|
|
fontFamily: 'Righteous', fontSize: '44px', color: COLORS.goldHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.modal);
|
|
this.add.text(CX, top + 92, 'Final totals (lowest wins)', {
|
|
fontFamily: '"Julius Sans One"', fontSize: '17px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5).setDepth(DEPTH.modal);
|
|
|
|
const order = this.gs.players.map((p, i) => ({ i, p })).sort((a, b) => a.p.score - b.p.score);
|
|
let rowY = top + 134;
|
|
for (const { i, p } of order) {
|
|
const win = winners.has(i);
|
|
const color = win ? COLORS.goldHex : COLORS.textHex;
|
|
this.add.text(CX - panelW / 2 + 40, rowY, `${win ? '★ ' : ' '}${p.name}`, {
|
|
fontFamily: 'Righteous', fontSize: '24px', color,
|
|
}).setOrigin(0, 0.5).setDepth(DEPTH.modal);
|
|
this.add.text(CX + panelW / 2 - 40, rowY, String(p.score), {
|
|
fontFamily: 'Righteous', fontSize: '26px', color,
|
|
}).setOrigin(1, 0.5).setDepth(DEPTH.modal);
|
|
rowY += 48;
|
|
}
|
|
|
|
new Button(this, CX, GAME_HEIGHT / 2 + panelH / 2 - 46, 'Back to Menu',
|
|
() => this.scene.start('GameMenu'), { width: 280, fontSize: 24 }).setDepth(DEPTH.modal);
|
|
}
|
|
|
|
async postHistory() {
|
|
const totals = this.gs.players.map((p) => p.score);
|
|
const winners = new Set(getWinners(this.gs));
|
|
let result;
|
|
if (winners.has(0) && winners.size === 1) result = 'win';
|
|
else if (winners.has(0)) result = 'draw';
|
|
else result = 'loss';
|
|
await api.post('/history/single-player', {
|
|
slug: 'mexicantrain',
|
|
score: totals[0],
|
|
opponentScores: totals.slice(1),
|
|
result,
|
|
});
|
|
}
|
|
|
|
delay(ms) {
|
|
return new Promise((resolve) => this.time.delayedCall(ms, resolve));
|
|
}
|
|
}
|