998 lines
41 KiB
JavaScript
998 lines
41 KiB
JavaScript
// Super Kart — SNES-style Mode 7 kart racing starring the site's opponent
|
|
// roster. Views: menu → engine class → racer select → cup/track select →
|
|
// race → results → podium, all in one scene (view-state pattern).
|
|
//
|
|
// Data: data/superkart-racers.json (roster+stats), data/superkart-rules.json
|
|
// (classes/physics/items/themes), data/superkart-artwork.json (drop-in art),
|
|
// assets/gamedata/superkart/cups.json + track-NNN.json (content).
|
|
// Headless sim in SuperKartLogic.js; track math in SuperKartTrack.js.
|
|
//
|
|
// Debug keys during a race: O = overhead debug overlay, F = flip the ground
|
|
// shader's Y orientation, C = swap the track texture for a checkerboard.
|
|
|
|
import * as Phaser from 'phaser';
|
|
import { GAME_WIDTH, GAME_HEIGHT, COLORS } from '../../config.js';
|
|
import { Button } from '../../ui/Button.js';
|
|
import { MusicPlayer } from '../../ui/MusicPlayer.js';
|
|
import { playSound, SFX } from '../../ui/Sounds.js';
|
|
import { applyArcadeCRTOverlay } from '../../ui/ArcadeCRTOverlay.js';
|
|
import { enqueue as enqueueSpeech, resetQueue } from '../../ui/SpeechQueue.js';
|
|
import { createOpponentPortrait } from '../../ui/Portrait.js';
|
|
import { buildTrackModel } from './SuperKartTrack.js';
|
|
import {
|
|
createRace, step, finalizeRace, kartInputsNeutral, STEP_MS, COUNTDOWN_MS,
|
|
topSpeedOf, accelOf, turnRateOf, pointsFor,
|
|
} from './SuperKartLogic.js';
|
|
import {
|
|
rasterizeTrack, drawMinimapCanvas, buildKartSheetCanvas, buildItemSheetCanvas,
|
|
buildBackdropCanvas, buildDecorSheetCanvas,
|
|
} from './SuperKartRaster.js';
|
|
import { SuperKartMode7, Mode7Backdrop, MODE7 } from './SuperKartMode7.js';
|
|
|
|
const FONT = 'm6x11, "Julius Sans One"';
|
|
const TIMES_KEY = 'superkart-times';
|
|
const GAMEDATA = 'assets/gamedata/superkart';
|
|
|
|
const D = {
|
|
backdrop: -2, ground: -1, world: 10, playerKart: 900, hud: 1000,
|
|
banner: 1100, view: 1200, debug: 1500,
|
|
};
|
|
const ITEM_FRAME = { bolt: 0, seeker: 1, oil: 2, turbo: 3, overdrive: 4, emp: 5, coins: 6 };
|
|
const BOX_FRAME = 7;
|
|
const COIN_FRAME = 8;
|
|
|
|
export default class SuperKartGame extends Phaser.Scene {
|
|
constructor() { super('SuperKartGame'); }
|
|
|
|
init(data) {
|
|
this.gameDef = data.game ?? { slug: 'superkart', name: 'Super Kart' };
|
|
this.testTrack = data.testTrack ?? null; // editor test-play round trip
|
|
this.returnToEditor = !!data.returnToEditor;
|
|
this.trackCache = new Map(); // file -> track json
|
|
this.raceState = null;
|
|
this.mode7 = null;
|
|
this.gp = null;
|
|
this.chosen = { classIdx: 1, racerIdx: 0, mode: 'gp' };
|
|
this.viewObjs = [];
|
|
this.debugOn = false;
|
|
this.accum = 0;
|
|
this.lastTauntMs = 0;
|
|
}
|
|
|
|
create() {
|
|
this.rules = this.cache.json.get('superkart-rules');
|
|
this.racers = this.cache.json.get('superkart-racers')?.racers ?? [];
|
|
this.artwork = this.cache.json.get('superkart-artwork') ?? {};
|
|
this.cups = this.cache.json.get('superkart-cups') ?? { cups: [], tracks: [] };
|
|
|
|
try {
|
|
const music = this.cache.json.get('music');
|
|
if (music?.tracks) this.music = new MusicPlayer(this, music.tracks);
|
|
} catch (_) { /* optional */ }
|
|
|
|
this.crt = applyArcadeCRTOverlay(this, { accentTint: 0xffd028, curveAmount: 0.35 });
|
|
this.events.once('shutdown', () => {
|
|
this.crt.destroy();
|
|
resetQueue();
|
|
this.teardownRace();
|
|
});
|
|
|
|
this.bg = this.add.rectangle(GAME_WIDTH / 2, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x101018)
|
|
.setDepth(-10);
|
|
|
|
if (this.renderer.type !== Phaser.WEBGL) {
|
|
this.showWebGLNotice();
|
|
return;
|
|
}
|
|
|
|
// Roster details (portraits/speech) come from the shared opponents file.
|
|
this.opponentById = {};
|
|
fetch('data/opponents.json')
|
|
.then((r) => r.json())
|
|
.then((d) => {
|
|
for (const op of d.opponents ?? []) this.opponentById[op.id] = op;
|
|
})
|
|
.catch(() => {});
|
|
|
|
this.buildFallbackTextures();
|
|
this.bindKeys();
|
|
|
|
if (this.testTrack) {
|
|
this.chosen = { classIdx: 1, racerIdx: 0, mode: 'test' };
|
|
this.startRace({ json: this.testTrack, entry: { id: this.testTrack.id ?? 'editor-track', name: this.testTrack.name ?? 'Editor Track' } });
|
|
} else {
|
|
this.showMenu();
|
|
}
|
|
}
|
|
|
|
// ── Textures ──────────────────────────────────────────────────────────────
|
|
|
|
ensureCanvasSheet(key, canvas, fw, fh) {
|
|
if (this.textures.exists(key)) return;
|
|
const tex = this.textures.addCanvas(key, canvas);
|
|
const cols = Math.floor(canvas.width / fw);
|
|
for (let i = 0; i < cols; i += 1) tex.add(i, 0, i * fw, 0, fw, fh);
|
|
}
|
|
|
|
buildFallbackTextures() {
|
|
for (const racer of this.racers) {
|
|
const art = this.artwork.racerSheets?.[racer.id];
|
|
if (!(art?.key && this.textures.exists(art.key))) {
|
|
this.ensureCanvasSheet(`superkart-kart-fb-${racer.id}`, buildKartSheetCanvas(racer.color ?? '#e04838'), 64, 64);
|
|
}
|
|
}
|
|
if (!(this.artwork.itemSheet?.key && this.textures.exists(this.artwork.itemSheet.key))) {
|
|
this.ensureCanvasSheet('superkart-items-fb', buildItemSheetCanvas(), 48, 48);
|
|
}
|
|
for (const [id, theme] of Object.entries(this.rules.themes ?? {})) {
|
|
if (id.startsWith('_')) continue;
|
|
const bd = this.artwork.backdrops?.[id];
|
|
if (!(bd?.key && this.textures.exists(bd.key)) && !this.textures.exists(`superkart-bd-fb-${id}`)) {
|
|
this.textures.addCanvas(`superkart-bd-fb-${id}`, buildBackdropCanvas(theme));
|
|
}
|
|
const ts = this.artwork.themeSheets?.[id];
|
|
if (!(ts?.key && this.textures.exists(ts.key))) {
|
|
this.ensureCanvasSheet(`superkart-decor-fb-${id}`, buildDecorSheetCanvas(theme), 64, 64);
|
|
}
|
|
}
|
|
// Checkerboard for shader debugging (C key).
|
|
if (!this.textures.exists('superkart-checker')) {
|
|
const c = document.createElement('canvas');
|
|
c.width = c.height = 1024;
|
|
const ctx = c.getContext('2d');
|
|
for (let y = 0; y < 16; y += 1) {
|
|
for (let x = 0; x < 16; x += 1) {
|
|
ctx.fillStyle = (x + y) % 2 === 0 ? '#d0d0d0' : '#282838';
|
|
ctx.fillRect(x * 64, y * 64, 64, 64);
|
|
}
|
|
}
|
|
ctx.fillStyle = '#d42a20';
|
|
ctx.fillRect(0, 0, 1024, 24); // north edge marker
|
|
this.textures.addCanvas('superkart-checker', c);
|
|
}
|
|
}
|
|
|
|
kartTexKey(racerId) {
|
|
const art = this.artwork.racerSheets?.[racerId];
|
|
if (art?.key && this.textures.exists(art.key)) return art.key;
|
|
return `superkart-kart-fb-${racerId}`;
|
|
}
|
|
|
|
itemTexKey() {
|
|
const art = this.artwork.itemSheet;
|
|
if (art?.key && this.textures.exists(art.key)) return art.key;
|
|
return 'superkart-items-fb';
|
|
}
|
|
|
|
backdropTexKey(themeId) {
|
|
const bd = this.artwork.backdrops?.[themeId];
|
|
if (bd?.key && this.textures.exists(bd.key)) return bd.key;
|
|
return `superkart-bd-fb-${themeId}`;
|
|
}
|
|
|
|
decorTexKey(themeId) {
|
|
const ts = this.artwork.themeSheets?.[themeId];
|
|
if (ts?.key && this.textures.exists(ts.key)) return ts.key;
|
|
return `superkart-decor-fb-${themeId}`;
|
|
}
|
|
|
|
// ── Input ─────────────────────────────────────────────────────────────────
|
|
|
|
bindKeys() {
|
|
const K = Phaser.Input.Keyboard.KeyCodes;
|
|
this.keys = this.input.keyboard.addKeys({
|
|
up: K.UP, down: K.DOWN, left: K.LEFT, right: K.RIGHT,
|
|
w: K.W, a: K.A, s: K.S, d2: K.D,
|
|
hop: K.SPACE, item: K.SHIFT, itemX: K.X,
|
|
debug: K.O, flip: K.F, checker: K.C, esc: K.ESC,
|
|
});
|
|
this.input.keyboard.on('keydown-O', () => { this.debugOn = !this.debugOn; this.debugG?.setVisible(this.debugOn); });
|
|
this.input.keyboard.on('keydown-F', () => this.mode7?.setFlipY(!(this.mode7.ground.uniforms.uFlipY.value > 0)));
|
|
this.input.keyboard.on('keydown-C', () => {
|
|
if (!this.mode7) return;
|
|
this.checkerOn = !this.checkerOn;
|
|
this.mode7.ground.setChannel0(this.checkerOn ? 'superkart-checker' : this.trackTexKey);
|
|
});
|
|
this.input.keyboard.on('keydown-ESC', () => {
|
|
if (this.raceState) this.exitRace();
|
|
});
|
|
}
|
|
|
|
readInputs() {
|
|
const k = this.keys;
|
|
const inputs = kartInputsNeutral();
|
|
inputs.accel = k.up.isDown || k.w.isDown;
|
|
inputs.brake = k.down.isDown || k.s.isDown;
|
|
inputs.steer = (k.left.isDown || k.a.isDown ? -1 : 0) + (k.right.isDown || k.d2.isDown ? 1 : 0);
|
|
inputs.hop = k.hop.isDown;
|
|
inputs.item = k.item.isDown || k.itemX.isDown;
|
|
return inputs;
|
|
}
|
|
|
|
// ── View plumbing ─────────────────────────────────────────────────────────
|
|
|
|
clearView() {
|
|
for (const o of this.viewObjs) o?.destroy();
|
|
this.viewObjs = [];
|
|
}
|
|
|
|
vAdd(obj) {
|
|
this.viewObjs.push(obj);
|
|
return obj;
|
|
}
|
|
|
|
text(x, y, str, size, color = COLORS.textHex, origin = 0.5) {
|
|
const t = this.add.text(x, y, str, {
|
|
fontFamily: FONT, fontSize: `${size}px`, color,
|
|
}).setDepth(D.view);
|
|
if (typeof origin === 'object') t.setOrigin(origin.x, origin.y);
|
|
else t.setOrigin(origin);
|
|
return this.vAdd(t);
|
|
}
|
|
|
|
showWebGLNotice() {
|
|
this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2 - 40,
|
|
'SUPER KART NEEDS WEBGL', {
|
|
fontFamily: FONT, fontSize: '48px', color: COLORS.textHex,
|
|
}).setOrigin(0.5);
|
|
this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2 + 20,
|
|
'The Mode 7 track renderer requires a WebGL-capable browser.', {
|
|
fontFamily: FONT, fontSize: '24px', color: COLORS.mutedHex,
|
|
}).setOrigin(0.5);
|
|
new Button(this, GAME_WIDTH / 2, GAME_HEIGHT / 2 + 120, 'Leave', () => this.scene.start('GameMenu'));
|
|
}
|
|
|
|
// ── Menu / class / racer / cup / track views ──────────────────────────────
|
|
|
|
showMenu() {
|
|
this.teardownRace();
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.text(cx, 200, 'SUPER KART', 110, '#ffd028');
|
|
this.text(cx, 290, 'MODE 7 KART RACING • STARRING THE FERTIG GAMES CREW', 24, COLORS.mutedHex);
|
|
this.text(cx, 380,
|
|
'ARROWS / WASD DRIVE • SPACE HOP+DRIFT • SHIFT OR X FIRES ITEMS', 22, COLORS.mutedHex);
|
|
|
|
this.vAdd(new Button(this, cx, 520, 'Grand Prix', () => { this.chosen.mode = 'gp'; this.showClassSelect(); }, { width: 380 }));
|
|
this.vAdd(new Button(this, cx, 610, 'Time Trial', () => { this.chosen.mode = 'tt'; this.showClassSelect(); }, { width: 380 }));
|
|
this.vAdd(new Button(this, cx, 740, 'Leave', () => this.scene.start('GameMenu'), { variant: 'ghost' }));
|
|
}
|
|
|
|
showClassSelect() {
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.text(cx, 180, 'CHOOSE ENGINE CLASS', 56, '#ffd028');
|
|
this.rules.engineClasses.forEach((cls, i) => {
|
|
const y = 340 + i * 130;
|
|
this.vAdd(new Button(this, cx, y, cls.label, () => {
|
|
this.chosen.classIdx = i;
|
|
playSound(this, SFX.UI_PICK);
|
|
this.showRacerSelect();
|
|
}, { width: 480, height: 84, fontSize: 34 }));
|
|
this.text(cx, y + 56, cls.desc, 20, COLORS.mutedHex);
|
|
});
|
|
this.vAdd(new Button(this, cx, 820, 'Back', () => this.showMenu(), { variant: 'ghost' }));
|
|
}
|
|
|
|
showRacerSelect() {
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.text(cx, 120, 'CHOOSE YOUR RACER', 56, '#ffd028');
|
|
|
|
const cell = 250;
|
|
const gx0 = cx - cell;
|
|
const gy0 = 320;
|
|
const detail = { name: null, bars: null };
|
|
|
|
const drawDetail = (racer) => {
|
|
detail.name?.destroy();
|
|
detail.bars?.destroy();
|
|
const c = this.add.container(0, 0).setDepth(D.view);
|
|
this.vAdd(c);
|
|
detail.bars = c;
|
|
detail.name = this.text(cx, GAME_HEIGHT - 232, `${racer.id === this.playerRacer()?.id ? '' : ''}${(this.opponentById[racer.id]?.name ?? racer.id).toUpperCase()} — ${racer.archetype.toUpperCase()}`, 32, '#ffd028');
|
|
const stats = [
|
|
['SPEED', racer.stats.topSpeed], ['ACCEL', racer.stats.accel], ['TURN', racer.stats.handling],
|
|
['WEIGHT', racer.stats.weight], ['DRIFT', racer.stats.drift], ['OFFROAD', racer.stats.offroad],
|
|
];
|
|
stats.forEach(([label, v], i) => {
|
|
const bx = cx - 460 + (i % 3) * 320;
|
|
const by = GAME_HEIGHT - 180 + Math.floor(i / 3) * 44;
|
|
c.add(this.add.text(bx, by, label, { fontFamily: FONT, fontSize: '20px', color: COLORS.mutedHex }).setOrigin(0, 0.5));
|
|
c.add(this.add.rectangle(bx + 110, by, 160, 14, 0x2a2a34).setOrigin(0, 0.5));
|
|
c.add(this.add.rectangle(bx + 110, by, 160 * v, 14, 0xffd028).setOrigin(0, 0.5));
|
|
});
|
|
c.add(this.add.text(cx, GAME_HEIGHT - 90, racer.blurb, {
|
|
fontFamily: FONT, fontSize: '22px', color: COLORS.textHex,
|
|
}).setOrigin(0.5));
|
|
};
|
|
|
|
this.racerTiles = this.racers.map((racer, i) => {
|
|
const x = gx0 + (i % 3) * cell;
|
|
const y = gy0 + Math.floor(i / 3) * cell * 0.86;
|
|
const ring = this.vAdd(this.add.rectangle(x, y, 196, 196, 0x1c1c26)
|
|
.setStrokeStyle(3, i === this.chosen.racerIdx ? 0xffd028 : 0x3a3a46).setDepth(D.view - 1));
|
|
const op = this.opponentById[racer.id];
|
|
let face;
|
|
if (this.textures.exists('opponents')) {
|
|
face = this.add.image(x, y, 'opponents', op?.spriteIndex ?? 0).setDisplaySize(180, 180);
|
|
} else {
|
|
face = this.add.rectangle(x, y, 180, 180, Phaser.Display.Color.HexStringToColor(racer.color ?? '#888').color);
|
|
}
|
|
this.vAdd(face.setDepth(D.view));
|
|
const zone = this.vAdd(this.add.rectangle(x, y, 196, 196, 0xffffff, 0.001)
|
|
.setInteractive({ useHandCursor: true }).setDepth(D.view + 1));
|
|
zone.on('pointerover', () => drawDetail(racer));
|
|
zone.on('pointerdown', () => {
|
|
this.chosen.racerIdx = i;
|
|
playSound(this, SFX.UI_PICK);
|
|
this.racerTiles.forEach((t, j) => t.ring.setStrokeStyle(3, j === i ? 0xffd028 : 0x3a3a46));
|
|
drawDetail(racer);
|
|
const clip = op?.speech?.pick?.[0];
|
|
if (clip) { resetQueue(); enqueueSpeech(clip); }
|
|
});
|
|
return { ring };
|
|
});
|
|
drawDetail(this.racers[this.chosen.racerIdx]);
|
|
|
|
this.vAdd(new Button(this, cx - 170, GAME_HEIGHT - 34, 'Back', () => this.showClassSelect(),
|
|
{ variant: 'ghost', width: 200, height: 52 }));
|
|
this.vAdd(new Button(this, cx + 170, GAME_HEIGHT - 34, 'Continue', () => {
|
|
if (this.chosen.mode === 'gp') this.showCupSelect();
|
|
else this.showTrackSelect();
|
|
}, { width: 200, height: 52 }));
|
|
}
|
|
|
|
playerRacer() { return this.racers[this.chosen.racerIdx]; }
|
|
|
|
showCupSelect() {
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.text(cx, 150, 'CHOOSE A CUP', 56, '#ffd028');
|
|
this.cups.cups.forEach((cup, i) => {
|
|
const x = cx + (i - (this.cups.cups.length - 1) / 2) * 460;
|
|
this.vAdd(new Button(this, x, 320, cup.name, () => {
|
|
playSound(this, SFX.UI_ACTIVATE);
|
|
this.startGrandPrix(cup);
|
|
}, { width: 400, height: 90, fontSize: 32 }));
|
|
cup.tracks.forEach((tid, j) => {
|
|
const tr = this.trackEntry(tid);
|
|
this.text(x, 410 + j * 36, `${j + 1}. ${tr?.name ?? tid}`, 22, COLORS.mutedHex);
|
|
});
|
|
});
|
|
this.vAdd(new Button(this, cx, 820, 'Back', () => this.showRacerSelect(), { variant: 'ghost' }));
|
|
}
|
|
|
|
showTrackSelect() {
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.text(cx, 120, 'TIME TRIAL — CHOOSE A TRACK', 48, '#ffd028');
|
|
const cls = this.rules.engineClasses[this.chosen.classIdx];
|
|
(this.cups.tracks ?? []).forEach((tr, i) => {
|
|
const col = i % 2;
|
|
const row = Math.floor(i / 2);
|
|
const x = cx + (col === 0 ? -420 : 420);
|
|
const y = 230 + row * 100;
|
|
this.vAdd(new Button(this, x, y, tr.name, () => this.startTimeTrial(tr),
|
|
{ width: 560, height: 70, fontSize: 26 }));
|
|
const best = this.bestTimes(tr.id, cls.id)[0];
|
|
this.text(x, y + 46, best ? `BEST ${fmtTime(best)}` : 'NO RECORD', 18,
|
|
best ? COLORS.goldHex : COLORS.mutedHex);
|
|
});
|
|
this.vAdd(new Button(this, cx, GAME_HEIGHT - 60, 'Back', () => this.showRacerSelect(), { variant: 'ghost' }));
|
|
}
|
|
|
|
trackEntry(id) { return (this.cups.tracks ?? []).find((t) => t.id === id); }
|
|
|
|
// ── Race setup / teardown ─────────────────────────────────────────────────
|
|
|
|
startGrandPrix(cup) {
|
|
this.gp = { cup, raceIdx: 0, points: {} };
|
|
for (const r of this.racers) this.gp.points[r.id] = 0;
|
|
this.startCupRace();
|
|
}
|
|
|
|
startCupRace() {
|
|
const tid = this.gp.cup.tracks[this.gp.raceIdx];
|
|
const entry = this.trackEntry(tid);
|
|
this.startRace({ entry });
|
|
}
|
|
|
|
startTimeTrial(entry) {
|
|
this.gp = null;
|
|
this.startRace({ entry, tt: true });
|
|
}
|
|
|
|
async loadTrackJson(entry) {
|
|
if (this.trackCache.has(entry.file)) return this.trackCache.get(entry.file);
|
|
const res = await fetch(`${GAMEDATA}/${entry.file}`);
|
|
const json = await res.json();
|
|
this.trackCache.set(entry.file, json);
|
|
return json;
|
|
}
|
|
|
|
async startRace({ entry, json = null, tt = false }) {
|
|
this.clearView();
|
|
this.teardownRace();
|
|
const trackJson = json ?? await this.loadTrackJson(entry);
|
|
const model = buildTrackModel(trackJson);
|
|
const theme = this.rules.themes[model.theme] ?? Object.values(this.rules.themes).find((t) => typeof t === 'object');
|
|
const cls = this.rules.engineClasses[this.chosen.classIdx];
|
|
|
|
// Track texture (regenerated per race; canvas textures are cheap to drop).
|
|
this.trackTexKey = 'superkart-track';
|
|
if (this.textures.exists(this.trackTexKey)) this.textures.remove(this.trackTexKey);
|
|
this.textures.addCanvas(this.trackTexKey, rasterizeTrack(model, theme));
|
|
|
|
const fogC = Phaser.Display.Color.HexStringToColor(theme.fog);
|
|
this.mode7 = new SuperKartMode7(this, {
|
|
trackTextureKey: this.trackTexKey,
|
|
worldSize: model.world,
|
|
fogColor: { x: fogC.red / 255, y: fogC.green / 255, z: fogC.blue / 255 },
|
|
depthBase: D.ground,
|
|
});
|
|
this.backdrop = new Mode7Backdrop(this, this.backdropTexKey(model.theme), this.mode7.horizonY, D.backdrop);
|
|
this.checkerOn = false;
|
|
|
|
// Sim. Player's racer keeps their roster slot so GP fields are stable.
|
|
const mode = tt ? 'tt' : 'gp';
|
|
this.raceState = createRace({
|
|
trackModel: model,
|
|
rules: this.rules,
|
|
engineClass: cls,
|
|
racers: this.racers,
|
|
playerIndex: this.chosen.racerIdx,
|
|
mode,
|
|
seed: (Date.now() & 0xffff) | 1,
|
|
});
|
|
this.raceEntry = entry;
|
|
this.raceResultsShown = false;
|
|
this.accum = 0;
|
|
|
|
this.buildWorldSprites(model);
|
|
this.buildRaceHud(model, entry, cls);
|
|
this.mode7.follow(this.playerKartState(), true);
|
|
playSound(this, SFX.SCIFI_RISER);
|
|
}
|
|
|
|
playerKartState() { return this.raceState.karts[this.raceState.playerIndex]; }
|
|
|
|
teardownRace() {
|
|
this.raceState = null;
|
|
this.mode7?.destroy();
|
|
this.mode7 = null;
|
|
this.backdrop?.destroy();
|
|
this.backdrop = null;
|
|
for (const s of this.worldSprites ?? []) s.sprite.destroy();
|
|
this.worldSprites = null;
|
|
this.playerSprite?.destroy();
|
|
this.playerSprite = null;
|
|
this.hud?.destroy();
|
|
this.hud = null;
|
|
this.debugG?.destroy();
|
|
this.debugG = null;
|
|
this.minimapDots = null;
|
|
}
|
|
|
|
exitRace() {
|
|
this.teardownRace();
|
|
if (this.returnToEditor) this.scene.start('SuperKartEditor', { resume: true });
|
|
else this.showMenu();
|
|
}
|
|
|
|
// ── World sprites (projected each frame) ─────────────────────────────────
|
|
|
|
buildWorldSprites(model) {
|
|
const itemTex = this.itemTexKey();
|
|
const decorTex = this.decorTexKey(model.theme);
|
|
const themeDecorList = this.rules.themes[model.theme]?.decor ?? [];
|
|
this.worldSprites = [];
|
|
|
|
const add = (wx, wy, tex, frame, sizeMult, tag, ref) => {
|
|
const sprite = this.add.sprite(0, 0, tex, frame).setDepth(D.world).setVisible(false);
|
|
this.worldSprites.push({ sprite, wx, wy, sizeMult, tag, ref });
|
|
return sprite;
|
|
};
|
|
|
|
// AI karts (player kart is the fixed bottom-center sprite instead).
|
|
for (const kart of this.raceState.karts) {
|
|
if (kart.isPlayer) continue;
|
|
add(kart.x, kart.y, this.kartTexKey(kart.racer.id), 0, 1.0, 'kart', kart);
|
|
}
|
|
for (const box of this.raceState.itemBoxes) add(box.x, box.y, itemTex, BOX_FRAME, 0.85, 'box', box);
|
|
for (const coin of this.raceState.coins) add(coin.x, coin.y, itemTex, COIN_FRAME, 0.6, 'coin', coin);
|
|
for (const dec of model.decor) {
|
|
const frame = Math.max(0, themeDecorList.indexOf(dec.sprite)) % 8;
|
|
add(dec.x, dec.y, decorTex, frame, 2.2, 'decor', dec);
|
|
}
|
|
// Projectiles and dropped hazards appear mid-race; pools grow on demand.
|
|
this.dynamicPool = [];
|
|
|
|
// Player kart, fixed at the bottom center like the SNES original.
|
|
const pk = this.playerKartState();
|
|
this.playerSprite = this.add.sprite(GAME_WIDTH / 2, GAME_HEIGHT * 0.75,
|
|
this.kartTexKey(pk.racer.id), 0).setDepth(D.playerKart).setScale(3.1);
|
|
|
|
this.debugG = this.add.graphics().setDepth(D.debug).setVisible(this.debugOn);
|
|
}
|
|
|
|
dynamicSprite(i, tex, frame) {
|
|
while (this.dynamicPool.length <= i) {
|
|
this.dynamicPool.push(this.add.sprite(0, 0, tex, frame).setDepth(D.world).setVisible(false));
|
|
}
|
|
const s = this.dynamicPool[i];
|
|
s.setTexture(tex, frame);
|
|
return s;
|
|
}
|
|
|
|
// ── HUD ───────────────────────────────────────────────────────────────────
|
|
|
|
buildRaceHud(model, entry, cls) {
|
|
this.hud = this.add.container(0, 0).setDepth(D.hud);
|
|
const t = (x, y, str, size, color = COLORS.textHex, origin = 0.5) => {
|
|
const obj = this.add.text(x, y, str, { fontFamily: FONT, fontSize: `${size}px`, color }).setOrigin(origin);
|
|
this.hud.add(obj);
|
|
return obj;
|
|
};
|
|
|
|
t(GAME_WIDTH / 2, 28, `${entry?.name ?? model.name} • ${cls.label}`, 24, COLORS.mutedHex);
|
|
|
|
this.hudLap = t(40, 40, 'LAP 1/5', 40, '#ffd028', 0);
|
|
this.hudTimer = t(40, 92, '0:00.00', 30, COLORS.textHex, 0);
|
|
this.hudCoins = t(40, 136, '', 26, COLORS.goldHex, 0);
|
|
|
|
// Item panel.
|
|
const ip = this.add.rectangle(120, 250, 110, 110, 0x14141c, 0.85).setStrokeStyle(3, 0xffd028);
|
|
this.hud.add(ip);
|
|
this.hudItem = this.add.sprite(120, 250, this.itemTexKey(), BOX_FRAME).setScale(1.7).setVisible(false);
|
|
this.hud.add(this.hudItem);
|
|
|
|
// Position numeral.
|
|
this.hudPos = t(GAME_WIDTH - 130, GAME_HEIGHT - 120, '1', 170, '#ffd028');
|
|
this.hudPosSuffix = t(GAME_WIDTH - 60, GAME_HEIGHT - 80, 'ST', 44, '#ffd028');
|
|
|
|
// Minimap + live dots.
|
|
const mm = drawMinimapCanvas(model, 230);
|
|
if (this.textures.exists('superkart-minimap')) this.textures.remove('superkart-minimap');
|
|
this.textures.addCanvas('superkart-minimap', mm.canvas);
|
|
this.minimapToMap = mm.toMap;
|
|
const mapImg = this.add.image(GAME_WIDTH - 140, 150, 'superkart-minimap').setAlpha(0.92);
|
|
this.hud.add(mapImg);
|
|
this.minimapOrigin = { x: GAME_WIDTH - 140 - 115, y: 150 - 115 };
|
|
this.minimapDots = this.raceState.karts.map((kart) => {
|
|
const color = Phaser.Display.Color.HexStringToColor(kart.racer.color ?? '#ffffff').color;
|
|
const dot = this.add.circle(0, 0, kart.isPlayer ? 6 : 4.5, color)
|
|
.setStrokeStyle(1.5, kart.isPlayer ? 0xffffff : 0x000000);
|
|
this.hud.add(dot);
|
|
return dot;
|
|
});
|
|
|
|
// Mini rankings column.
|
|
this.hudRank = this.raceState.karts.map((_, i) => {
|
|
const y = 300 + i * 30;
|
|
const chip = this.add.rectangle(GAME_WIDTH - 250, y, 16, 16, 0xffffff);
|
|
const name = this.add.text(GAME_WIDTH - 232, y, '', { fontFamily: FONT, fontSize: '19px', color: COLORS.textHex }).setOrigin(0, 0.5);
|
|
this.hud.add(chip);
|
|
this.hud.add(name);
|
|
return { chip, name };
|
|
});
|
|
if (this.raceState.mode === 'tt') this.hudRank.forEach((r) => { r.chip.setVisible(false); r.name.setVisible(false); });
|
|
|
|
// Countdown lights.
|
|
this.hudLights = [0, 1, 2].map((i) => {
|
|
const l = this.add.circle(GAME_WIDTH / 2 + (i - 1) * 90, 200, 32, 0x33333d).setStrokeStyle(4, 0x101014);
|
|
this.hud.add(l);
|
|
return l;
|
|
});
|
|
this.hudGo = t(GAME_WIDTH / 2, 200, '', 90, '#38b048');
|
|
this.countTicked = new Set();
|
|
|
|
this.hud.add(this.add.text(GAME_WIDTH - 24, 12, 'ESC QUITS', { fontFamily: FONT, fontSize: '16px', color: COLORS.mutedHex }).setOrigin(1, 0));
|
|
}
|
|
|
|
// ── Frame update ──────────────────────────────────────────────────────────
|
|
|
|
update(time, delta) {
|
|
if (!this.raceState) return;
|
|
this.accum += Math.min(delta, 100);
|
|
const prevPhase = this.raceState.phase;
|
|
while (this.accum >= STEP_MS) {
|
|
this.accum -= STEP_MS;
|
|
step(this.raceState, this.readInputs());
|
|
this.processEvents(this.raceState.events);
|
|
}
|
|
this.renderRace();
|
|
if (this.raceState.phase === 'finished' && !this.raceResultsShown) {
|
|
this.raceResultsShown = true;
|
|
this.time.delayedCall(900, () => this.showResults());
|
|
} else if (prevPhase === 'countdown') {
|
|
this.renderCountdown();
|
|
}
|
|
}
|
|
|
|
renderCountdown() {
|
|
const ms = this.raceState.countdownMs;
|
|
const lit = ms < 2600 ? Math.min(3, Math.ceil((2600 - ms) / 800) + 0) : 0;
|
|
this.hudLights?.forEach((l, i) => l.setFillStyle(i < lit ? 0xd42a20 : 0x33333d));
|
|
for (const th of [2600, 1800, 1000]) {
|
|
if (ms < th && !this.countTicked.has(th)) {
|
|
this.countTicked.add(th);
|
|
playSound(this, SFX.COUNTDOWN_TICK);
|
|
}
|
|
}
|
|
}
|
|
|
|
renderRace() {
|
|
const state = this.raceState;
|
|
const player = this.playerKartState();
|
|
this.mode7.follow(player);
|
|
this.backdrop.update(this.mode7.cam.angle);
|
|
|
|
// Static + kart world sprites.
|
|
for (const ws of this.worldSprites) {
|
|
const { sprite, tag, ref } = ws;
|
|
let wx = ws.wx;
|
|
let wy = ws.wy;
|
|
let visible = true;
|
|
let frame = null;
|
|
if (tag === 'kart') {
|
|
wx = ref.x; wy = ref.y;
|
|
frame = this.mode7.angleFrame(ref.spinMs > 0 ? ref.heading + ref.spinSpin : ref.heading);
|
|
visible = ref.rescueMs <= 0;
|
|
} else if (tag === 'box') {
|
|
visible = ref.respawnAt <= state.timeMs;
|
|
} else if (tag === 'coin') {
|
|
visible = !ref.taken;
|
|
}
|
|
if (!visible) { sprite.setVisible(false); continue; }
|
|
const p = this.mode7.project(wx, wy);
|
|
if (!p) { sprite.setVisible(false); continue; }
|
|
sprite.setVisible(true);
|
|
let scale = p.scale * ws.sizeMult;
|
|
if (tag === 'kart') {
|
|
if (ref.empMs > 0) scale *= 0.55;
|
|
if (ref.squashMs > 0) sprite.setScale(scale * 1.25, scale * 0.45);
|
|
else sprite.setScale(scale);
|
|
sprite.setFrame(frame);
|
|
sprite.setAlpha(ref.invulnMs > 0 ? (Math.floor(state.timeMs / 80) % 2 ? 0.35 : 1) : 1);
|
|
if (ref.starMs > 0) sprite.setTint(starTint(state.timeMs));
|
|
else sprite.clearTint();
|
|
} else {
|
|
sprite.setScale(scale);
|
|
if (tag === 'box') sprite.setAngle(Math.sin(state.timeMs / 300 + wx) * 14);
|
|
sprite.setAlpha(1 - p.fog * 0.85);
|
|
}
|
|
sprite.setPosition(p.x, p.y - sprite.displayHeight * 0.42);
|
|
sprite.setDepth(D.world + Math.max(0, 800 - p.z));
|
|
}
|
|
|
|
// Projectiles + dropped hazards through the dynamic pool.
|
|
const itemTex = this.itemTexKey();
|
|
let di = 0;
|
|
for (const pr of state.projectiles) {
|
|
if (pr.dead) continue;
|
|
const p = this.mode7.project(pr.x, pr.y);
|
|
const s = this.dynamicSprite(di, itemTex, ITEM_FRAME[pr.id] ?? 0);
|
|
di += 1;
|
|
if (!p) { s.setVisible(false); continue; }
|
|
s.setVisible(true).setPosition(p.x, p.y - 10 * p.scale).setScale(p.scale * 0.7)
|
|
.setDepth(D.world + Math.max(0, 800 - p.z));
|
|
}
|
|
for (const hz of state.hazardsDropped) {
|
|
if (hz.dead) continue;
|
|
const p = this.mode7.project(hz.x, hz.y);
|
|
const s = this.dynamicSprite(di, itemTex, ITEM_FRAME.oil);
|
|
di += 1;
|
|
if (!p) { s.setVisible(false); continue; }
|
|
s.setVisible(true).setPosition(p.x, p.y).setScale(p.scale * 0.8, p.scale * 0.5)
|
|
.setDepth(D.world + Math.max(0, 800 - p.z));
|
|
}
|
|
for (let i = di; i < this.dynamicPool.length; i += 1) this.dynamicPool[i].setVisible(false);
|
|
|
|
this.renderPlayerKart(player);
|
|
this.renderHud(state, player);
|
|
if (this.debugOn) this.renderDebug(state);
|
|
}
|
|
|
|
renderPlayerKart(kart) {
|
|
const s = this.playerSprite;
|
|
const sheet = this.textures.get(this.kartTexKey(kart.racer.id));
|
|
const hasLean = sheet.frameTotal > 17;
|
|
const inputs = this.readInputs();
|
|
let frame = 0;
|
|
let angle = 0;
|
|
if (kart.spinMs > 0) {
|
|
frame = Math.floor((this.raceState.timeMs / 60)) % 16;
|
|
} else if (kart.drifting) {
|
|
frame = kart.driftDir > 0 ? 1 : 15;
|
|
angle = kart.driftDir * 6;
|
|
} else if (inputs.steer !== 0 && hasLean) {
|
|
frame = inputs.steer < 0 ? 16 : 17;
|
|
} else if (inputs.steer !== 0) {
|
|
angle = inputs.steer * 5;
|
|
}
|
|
s.setFrame(frame);
|
|
s.setAngle(angle);
|
|
let scale = 3.1;
|
|
if (kart.empMs > 0) scale *= 0.55;
|
|
if (kart.squashMs > 0) s.setScale(scale * 1.2, scale * 0.5);
|
|
else s.setScale(scale);
|
|
const hopH = kart.airborne ? Math.sin((1 - kart.hopMs / this.rules.physics.hopMs) * Math.PI) * 46 : 0;
|
|
s.setPosition(GAME_WIDTH / 2, GAME_HEIGHT * 0.75 - hopH);
|
|
s.setAlpha(kart.rescueMs > 0 ? 0.25 : kart.invulnMs > 0 ? (Math.floor(this.raceState.timeMs / 80) % 2 ? 0.35 : 1) : 1);
|
|
if (kart.starMs > 0) s.setTint(starTint(this.raceState.timeMs));
|
|
else s.clearTint();
|
|
}
|
|
|
|
renderHud(state, player) {
|
|
this.hudLap.setText(`LAP ${Math.min(player.lap, state.laps)}/${state.laps}`);
|
|
const raceMs = Math.max(0, state.timeMs - COUNTDOWN_MS);
|
|
this.hudTimer.setText(fmtTime(raceMs));
|
|
this.hudCoins.setText(state.mode === 'tt' ? '' : `COINS ${player.coins}`);
|
|
|
|
if (player.rouletteMs > 0) {
|
|
this.hudItem.setVisible(true).setFrame(Math.floor(state.timeMs / 80) % 7);
|
|
} else if (player.item) {
|
|
this.hudItem.setVisible(true).setFrame(ITEM_FRAME[player.item] ?? 0);
|
|
} else {
|
|
this.hudItem.setVisible(false);
|
|
}
|
|
|
|
const pos = player.position;
|
|
this.hudPos.setText(String(pos));
|
|
this.hudPosSuffix.setText(['ST', 'ND', 'RD'][pos - 1] ?? 'TH');
|
|
const posColor = pos === 1 ? '#ffd028' : pos <= 4 ? '#f2f2f2' : '#e06c75';
|
|
this.hudPos.setColor(posColor);
|
|
this.hudPosSuffix.setColor(posColor);
|
|
this.hudPos.setVisible(state.mode !== 'tt');
|
|
this.hudPosSuffix.setVisible(state.mode !== 'tt');
|
|
|
|
// Minimap dots.
|
|
state.karts.forEach((kart, i) => {
|
|
const [mx, my] = this.minimapToMap(kart.x, kart.y);
|
|
this.minimapDots[i].setPosition(this.minimapOrigin.x + mx, this.minimapOrigin.y + my);
|
|
});
|
|
|
|
// Rankings.
|
|
if (state.mode !== 'tt') {
|
|
const order = [...state.karts].sort((a, b) => a.position - b.position);
|
|
order.forEach((kart, i) => {
|
|
const row = this.hudRank[i];
|
|
row.chip.setFillStyle(Phaser.Display.Color.HexStringToColor(kart.racer.color ?? '#fff').color);
|
|
const nm = (this.opponentById[kart.racer.id]?.name ?? kart.racer.id).slice(0, 12).toUpperCase();
|
|
row.name.setText(`${i + 1} ${nm}${kart.isPlayer ? ' ◄' : ''}`);
|
|
row.name.setColor(kart.isPlayer ? '#ffd028' : COLORS.textHex);
|
|
});
|
|
}
|
|
|
|
if (state.phase !== 'countdown' && this.hudLights) {
|
|
if (state.timeMs - COUNTDOWN_MS < 900) {
|
|
this.hudLights.forEach((l) => l.setFillStyle(0x38b048));
|
|
this.hudGo.setText('GO!');
|
|
} else {
|
|
this.hudLights.forEach((l) => l.setVisible(false));
|
|
this.hudGo.setText('');
|
|
}
|
|
}
|
|
}
|
|
|
|
renderDebug(state) {
|
|
const g = this.debugG;
|
|
g.clear();
|
|
const sc = 0.16;
|
|
const ox = GAME_WIDTH / 2 - (state.model.world * sc) / 2;
|
|
const oy = GAME_HEIGHT / 2 - (state.model.world * sc) / 2;
|
|
g.fillStyle(0x000000, 0.55);
|
|
g.fillRect(ox, oy, state.model.world * sc, state.model.world * sc);
|
|
g.lineStyle(2, 0xffffff, 0.8);
|
|
g.beginPath();
|
|
state.model.samples.forEach((p, i) => {
|
|
if (i) g.lineTo(ox + p.x * sc, oy + p.y * sc);
|
|
else g.moveTo(ox + p.x * sc, oy + p.y * sc);
|
|
});
|
|
g.closePath();
|
|
g.strokePath();
|
|
for (const kart of state.karts) {
|
|
const color = Phaser.Display.Color.HexStringToColor(kart.racer.color ?? '#fff').color;
|
|
g.fillStyle(color, 1);
|
|
g.fillCircle(ox + kart.x * sc, oy + kart.y * sc, kart.isPlayer ? 6 : 4);
|
|
g.lineStyle(1.5, color, 1);
|
|
g.lineBetween(ox + kart.x * sc, oy + kart.y * sc,
|
|
ox + (kart.x + Math.cos(kart.heading) * 120) * sc,
|
|
oy + (kart.y + Math.sin(kart.heading) * 120) * sc);
|
|
}
|
|
}
|
|
|
|
// ── Events → sound + speech ───────────────────────────────────────────────
|
|
|
|
processEvents(events) {
|
|
const state = this.raceState;
|
|
const pIdx = state.playerIndex;
|
|
for (const ev of events) {
|
|
switch (ev.type) {
|
|
case 'go': playSound(this, SFX.COUNTDOWN_GO); break;
|
|
case 'item-box': if (ev.kart === pIdx) playSound(this, SFX.UI_FLIP); break;
|
|
case 'item-get': if (ev.kart === pIdx) playSound(this, SFX.UI_CHIME); break;
|
|
case 'item-use': if (ev.kart === pIdx) playSound(this, SFX.WOOSH); break;
|
|
case 'boost': if (ev.kart === pIdx) playSound(this, SFX.SCIFI_WOOSH); break;
|
|
case 'star': playSound(this, SFX.EIGHTBIT_ACTIVATE); break;
|
|
case 'emp': playSound(this, SFX.LASER_ZAP); break;
|
|
case 'spin': if (ev.kart === pIdx) playSound(this, SFX.SQUISH); this.taunt(ev.kart, ev.kart === pIdx); break;
|
|
case 'wallhit': if (ev.kart === pIdx) playSound(this, SFX.EIGHTBIT_MOVE); break;
|
|
case 'bump': if (ev.a === pIdx || ev.b === pIdx) playSound(this, SFX.PIECE_CLICK); break;
|
|
case 'coin': if (ev.kart === pIdx) playSound(this, SFX.COINS); break;
|
|
case 'lap': if (ev.kart === pIdx) playSound(this, SFX.UI_CHIME); break;
|
|
case 'splash': if (ev.kart === pIdx) playSound(this, 'sfx-water-splash'); break;
|
|
case 'shatter': playSound(this, SFX.EIGHTBIT_EXPLODE); break;
|
|
case 'finish':
|
|
if (ev.kart === pIdx) playSound(this, ev.place <= 3 ? SFX.VICTORY_SHORT : SFX.CASINO_LOSE);
|
|
break;
|
|
case 'player-position':
|
|
if (ev.to > ev.from) this.tauntFromLeader(ev.to);
|
|
break;
|
|
default: break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// A rival mouths off when the player gets passed / hit. Throttled hard.
|
|
taunt(kartIdx, playerWasVictim) {
|
|
if (!playerWasVictim || this.raceState.mode === 'tt') return;
|
|
this.tauntFromLeader(this.playerKartState().position);
|
|
}
|
|
|
|
tauntFromLeader(playerPos) {
|
|
const state = this.raceState;
|
|
if (state.timeMs - this.lastTauntMs < 10000) return;
|
|
const rival = state.karts.find((k) => !k.isPlayer && k.position === playerPos - 1);
|
|
const op = rival && this.opponentById[rival.racer.id];
|
|
const lines = op?.speech?.happy;
|
|
if (!lines?.length) return;
|
|
this.lastTauntMs = state.timeMs;
|
|
enqueueSpeech(lines[Math.floor(Math.random() * lines.length)]);
|
|
}
|
|
|
|
// ── Results / podium ──────────────────────────────────────────────────────
|
|
|
|
bestTimes(trackId, classId) {
|
|
try {
|
|
const all = JSON.parse(localStorage.getItem(TIMES_KEY) ?? '{}');
|
|
return all[`${trackId}|${classId}`] ?? [];
|
|
} catch (_) { return []; }
|
|
}
|
|
|
|
recordTime(trackId, classId, ms) {
|
|
try {
|
|
const all = JSON.parse(localStorage.getItem(TIMES_KEY) ?? '{}');
|
|
const key = `${trackId}|${classId}`;
|
|
const list = all[key] ?? [];
|
|
list.push(ms);
|
|
list.sort((a, b) => a - b);
|
|
all[key] = list.slice(0, 5);
|
|
localStorage.setItem(TIMES_KEY, JSON.stringify(all));
|
|
return list.indexOf(ms) === 0;
|
|
} catch (_) { return false; }
|
|
}
|
|
|
|
showResults() {
|
|
const state = this.raceState;
|
|
const results = finalizeRace(state);
|
|
const cls = this.rules.engineClasses[this.chosen.classIdx];
|
|
const player = this.playerKartState();
|
|
const cx = GAME_WIDTH / 2;
|
|
this.teardownRace();
|
|
this.clearView();
|
|
|
|
if (this.returnToEditor) {
|
|
this.text(cx, 240, 'TEST COMPLETE', 64, '#ffd028');
|
|
this.text(cx, 330, `TIME ${fmtTime(player.finishTimeMs - COUNTDOWN_MS)} BEST LAP ${fmtTime(player.bestLapMs)}`, 30);
|
|
this.vAdd(new Button(this, cx, 460, 'Back to Editor', () => this.scene.start('SuperKartEditor', { resume: true })));
|
|
return;
|
|
}
|
|
|
|
if (state.mode === 'tt') {
|
|
const ms = player.finishTimeMs - COUNTDOWN_MS;
|
|
const isRecord = this.recordTime(this.raceEntry.id, cls.id, ms);
|
|
this.text(cx, 180, isRecord ? 'NEW RECORD!' : 'RUN COMPLETE', 64, isRecord ? '#ffd028' : COLORS.textHex);
|
|
this.text(cx, 270, `TIME ${fmtTime(ms)} BEST LAP ${fmtTime(player.bestLapMs)}`, 34);
|
|
const times = this.bestTimes(this.raceEntry.id, cls.id);
|
|
this.text(cx, 360, 'BEST TIMES', 28, COLORS.mutedHex);
|
|
times.forEach((tms, i) => this.text(cx, 410 + i * 40, `${i + 1}. ${fmtTime(tms)}`, 26,
|
|
tms === ms ? '#ffd028' : COLORS.textHex));
|
|
this.vAdd(new Button(this, cx - 170, 760, 'Retry', () => this.startTimeTrial(this.raceEntry), { width: 220 }));
|
|
this.vAdd(new Button(this, cx + 170, 760, 'Tracks', () => this.showTrackSelect(), { width: 220, variant: 'ghost' }));
|
|
return;
|
|
}
|
|
|
|
// Grand Prix race results + cumulative standings.
|
|
for (const r of results) this.gp.points[r.racerId] += r.points;
|
|
const lastRace = this.gp.raceIdx >= this.gp.cup.tracks.length - 1;
|
|
this.text(cx, 110, `${this.raceEntry.name} — RESULTS`, 48, '#ffd028');
|
|
const header = (x, s) => this.text(x, 180, s, 22, COLORS.mutedHex);
|
|
header(cx - 420, 'POS');
|
|
header(cx - 240, 'RACER');
|
|
header(cx + 90, 'TIME');
|
|
header(cx + 260, 'PTS');
|
|
header(cx + 400, 'TOTAL');
|
|
results.forEach((r, i) => {
|
|
const y = 226 + i * 52;
|
|
const racer = this.racers.find((rc) => rc.id === r.racerId);
|
|
const isP = r.racerId === this.playerRacer().id;
|
|
const color = isP ? '#ffd028' : COLORS.textHex;
|
|
this.text(cx - 420, y, String(r.position), 28, color);
|
|
if (this.textures.exists('opponents')) {
|
|
this.vAdd(this.add.image(cx - 330, y, 'opponents', this.opponentById[r.racerId]?.spriteIndex ?? 0)
|
|
.setDisplaySize(44, 44).setDepth(D.view));
|
|
}
|
|
this.text(cx - 240, y, (this.opponentById[r.racerId]?.name ?? r.racerId).toUpperCase(), 26, color, { x: 0, y: 0.5 });
|
|
this.text(cx + 90, y, r.finished ? fmtTime(r.timeMs - COUNTDOWN_MS) : '—', 24, color);
|
|
this.text(cx + 260, y, `+${r.points}`, 24, color);
|
|
this.text(cx + 400, y, String(this.gp.points[r.racerId]), 26, color);
|
|
void racer;
|
|
});
|
|
this.vAdd(new Button(this, cx, GAME_HEIGHT - 90, lastRace ? 'Final Standings' : 'Next Race', () => {
|
|
if (lastRace) this.showPodium();
|
|
else { this.gp.raceIdx += 1; this.startCupRace(); }
|
|
}, { width: 340 }));
|
|
}
|
|
|
|
showPodium() {
|
|
this.clearView();
|
|
const cx = GAME_WIDTH / 2;
|
|
const standings = Object.entries(this.gp.points)
|
|
.sort((a, b) => b[1] - a[1]);
|
|
const playerId = this.playerRacer().id;
|
|
const playerPlace = standings.findIndex(([id]) => id === playerId) + 1;
|
|
|
|
this.text(cx, 100, `${this.gp.cup.name} — FINAL STANDINGS`, 48, '#ffd028');
|
|
this.text(cx, 170, playerPlace === 1 ? 'CHAMPION!' : `YOU FINISHED ${ordinal(playerPlace).toUpperCase()}`, 34,
|
|
playerPlace === 1 ? '#ffd028' : COLORS.textHex);
|
|
|
|
// Podium top 3 with live portraits (video/mood if assets exist).
|
|
const podX = [cx, cx - 330, cx + 330];
|
|
const podY = [340, 400, 430];
|
|
standings.slice(0, 3).forEach(([id], i) => {
|
|
const op = this.opponentById[id];
|
|
if (op) {
|
|
const portrait = createOpponentPortrait(this, op, podX[i], podY[i], i === 0 ? 110 : 85, D.view, { playIntro: false });
|
|
this.viewObjs.push(portrait);
|
|
}
|
|
this.text(podX[i], podY[i] + (i === 0 ? 150 : 125), `${i + 1}. ${(op?.name ?? id).toUpperCase()}`, 28,
|
|
id === playerId ? '#ffd028' : COLORS.textHex);
|
|
this.text(podX[i], podY[i] + (i === 0 ? 186 : 161), `${this.gp.points[id]} PTS`, 22, COLORS.mutedHex);
|
|
});
|
|
const winner = this.opponentById[standings[0][0]];
|
|
const clip = winner?.speech?.happy?.[0];
|
|
if (clip) { resetQueue(); enqueueSpeech(clip); }
|
|
|
|
standings.slice(3).forEach(([id, pts], i) => {
|
|
this.text(cx - 200 + Math.floor(i / 3) * 400, 660 + (i % 3) * 40,
|
|
`${i + 4}. ${(this.opponentById[id]?.name ?? id).toUpperCase()} ${pts} PTS`, 22,
|
|
id === playerId ? '#ffd028' : COLORS.mutedHex);
|
|
});
|
|
|
|
playSound(this, playerPlace === 1 ? SFX.CASINO_WIN : SFX.VICTORY_SHORT);
|
|
this.vAdd(new Button(this, cx - 180, GAME_HEIGHT - 70, 'Race Again', () => this.showCupSelect(), { width: 260 }));
|
|
this.vAdd(new Button(this, cx + 180, GAME_HEIGHT - 70, 'Main Menu', () => this.showMenu(), { width: 260, variant: 'ghost' }));
|
|
}
|
|
}
|
|
|
|
// ── Small helpers ─────────────────────────────────────────────────────────
|
|
|
|
function fmtTime(ms) {
|
|
if (!ms || ms < 0) ms = 0;
|
|
const m = Math.floor(ms / 60000);
|
|
const s = Math.floor((ms % 60000) / 1000);
|
|
const cs = Math.floor((ms % 1000) / 10);
|
|
return `${m}:${String(s).padStart(2, '0')}.${String(cs).padStart(2, '0')}`;
|
|
}
|
|
|
|
function ordinal(n) {
|
|
return `${n}${['st', 'nd', 'rd'][n - 1] ?? 'th'}`;
|
|
}
|
|
|
|
function starTint(timeMs) {
|
|
const hues = [0xffd028, 0xff6a90, 0x68d0ff, 0x8aff78];
|
|
return hues[Math.floor(timeMs / 90) % hues.length];
|
|
}
|