434 lines
18 KiB
JavaScript
434 lines
18 KiB
JavaScript
// Master of Vega — modal screens and the shared sci-fi chrome they are built
|
||
// in. There is no repo-wide panel component (Civilization and Total Annihilation
|
||
// both roll their own), so `modalShell` is this game's version: a holographic
|
||
// frame with corner ticks, matching the clean bridge-console look rather than
|
||
// the arcade CRT treatment.
|
||
|
||
import * as Phaser from 'phaser';
|
||
import { GAME_HEIGHT, GAME_WIDTH } from '../../config.js';
|
||
import { Button } from '../../ui/Button.js';
|
||
import {
|
||
empireColonies, empireFleets, hireLeader, assignLeader, unassignLeader, leaderHireCost,
|
||
} from './VegaLogic.js';
|
||
import {
|
||
attitudeOf, moodOf, powerOf, canNegotiate,
|
||
} from './VegaDiplomacy.js';
|
||
import { leaderOffers } from './VegaLeaders.js';
|
||
|
||
import { makeSpeciesPortrait } from './VegaArt.js';
|
||
import { openAudienceScreen } from './VegaAudience.js';
|
||
|
||
export const FONT = '"Julius Sans One"';
|
||
// `colony` sits above `modal` so the colony screen can stack over the system
|
||
// view that opened it without either having to be torn down. `detail` is the
|
||
// ship pop-over, which opens from the star map's side panel AND from inside the
|
||
// colony screen, so it has to clear both. `intro` is the colony-founding
|
||
// vignette, which opens over the system view it was triggered from and must
|
||
// cover everything except the end-of-game overlay.
|
||
export const D = {
|
||
map: 1, hud: 30, modal: 60, colony: 70, detail: 76, intro: 78, toast: 80,
|
||
};
|
||
|
||
/**
|
||
* Orbit numerals. Worldgen rolls at most five planets, but
|
||
* `guaranteeNearbyWorlds` can append more to a star that needed help, so the
|
||
* list runs long and every caller still falls back to `orbit + 1`.
|
||
*/
|
||
export const ORBIT = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII'];
|
||
|
||
const ACCENT = 0x6fc4ff;
|
||
const PANEL = 0x0b1220;
|
||
|
||
/** The holographic frame every modal is built inside. */
|
||
export function modalShell(scene, title, onClose, { width = 1220, height = 800, closable = true } = {}) {
|
||
const layer = scene.add.container(0, 0).setDepth(D.modal);
|
||
|
||
const veil = scene.add.rectangle(0, 0, GAME_WIDTH, GAME_HEIGHT, 0x000914, 0.72)
|
||
.setOrigin(0, 0).setInteractive();
|
||
layer.add(veil);
|
||
|
||
const x = (GAME_WIDTH - width) / 2;
|
||
const y = (GAME_HEIGHT - height) / 2;
|
||
|
||
const panel = scene.add.rectangle(x, y, width, height, PANEL, 0.96).setOrigin(0, 0);
|
||
panel.setStrokeStyle(1.5, ACCENT, 0.55);
|
||
layer.add(panel);
|
||
|
||
// Corner ticks — cheap, and they do most of the work of making a rectangle
|
||
// read as a HUD element rather than a dialog box.
|
||
const ticks = scene.add.graphics();
|
||
ticks.lineStyle(2.5, ACCENT, 0.9);
|
||
const t = 26;
|
||
for (const [cx, cy, dx, dy] of [
|
||
[x, y, 1, 1], [x + width, y, -1, 1], [x, y + height, 1, -1], [x + width, y + height, -1, -1],
|
||
]) {
|
||
ticks.lineBetween(cx, cy, cx + dx * t, cy);
|
||
ticks.lineBetween(cx, cy, cx, cy + dy * t);
|
||
}
|
||
layer.add(ticks);
|
||
|
||
const head = scene.add.text(x + 30, y + 22, title.toUpperCase(), {
|
||
fontFamily: FONT, fontSize: '30px', color: '#cfe8ff',
|
||
});
|
||
layer.add(head);
|
||
const rule = scene.add.rectangle(x + 30, y + 64, width - 60, 1, ACCENT, 0.4).setOrigin(0, 0);
|
||
layer.add(rule);
|
||
|
||
// Some screens (a forced choice prompt, say) opt out of the ✕ entirely —
|
||
// closable defaults true so every existing caller is unaffected.
|
||
if (closable) {
|
||
const close = new Button(scene, x + width - 70, y + 40, '✕', () => {
|
||
layer.destroy();
|
||
onClose?.();
|
||
}, { width: 46, height: 40, variant: 'ghost' });
|
||
layer.add(close);
|
||
}
|
||
|
||
return {
|
||
layer, x, y, width, height,
|
||
body: { x: x + 30, y: y + 84, w: width - 60, h: height - 120 },
|
||
add: (obj) => layer.add(obj),
|
||
destroy: () => layer.destroy(),
|
||
};
|
||
}
|
||
|
||
/** A labelled horizontal slider. Returns { container, setValue }. */
|
||
export function slider(scene, x, y, w, label, value, onChange, colour = ACCENT) {
|
||
const c = scene.add.container(x, y);
|
||
const text = scene.add.text(0, 0, label, { fontFamily: FONT, fontSize: '17px', color: '#a8c4e0' });
|
||
c.add(text);
|
||
const pct = scene.add.text(w, 0, `${Math.round(value * 100)}%`, {
|
||
fontFamily: FONT, fontSize: '17px', color: '#e8f4ff',
|
||
}).setOrigin(1, 0);
|
||
c.add(pct);
|
||
|
||
const trackY = 28;
|
||
const track = scene.add.rectangle(0, trackY, w, 8, 0x1b2b42).setOrigin(0, 0.5);
|
||
c.add(track);
|
||
const fill = scene.add.rectangle(0, trackY, w * value, 8, colour).setOrigin(0, 0.5);
|
||
c.add(fill);
|
||
const knob = scene.add.circle(w * value, trackY, 9, 0xe8f4ff);
|
||
c.add(knob);
|
||
|
||
// The hit zone is a plain rectangle placed by its own top-left, NOT the
|
||
// container — a Container's origin is locked at 0.5 and its hit area is
|
||
// always centred, which is the classic way to get an unclickable widget here.
|
||
const zone = scene.add.rectangle(0, trackY, w, 30, 0xffffff, 0.001)
|
||
.setOrigin(0, 0.5).setInteractive({ useHandCursor: true, draggable: true });
|
||
c.add(zone);
|
||
|
||
// Modal shells are containers sitting at the origin, so the slider
|
||
// container's own x IS its world x and pointer maths needs no walk up the
|
||
// parent chain.
|
||
const apply = (px) => {
|
||
const v = Phaser.Math.Clamp(px / w, 0, 1);
|
||
fill.width = w * v;
|
||
knob.x = w * v;
|
||
pct.setText(`${Math.round(v * 100)}%`);
|
||
onChange?.(v);
|
||
};
|
||
zone.on('pointerdown', (p) => apply(p.x - c.x));
|
||
scene.input.setDraggable(zone);
|
||
zone.on('drag', (p) => apply(p.x - c.x));
|
||
|
||
return {
|
||
container: c,
|
||
setValue(v) {
|
||
fill.width = w * v;
|
||
knob.x = w * v;
|
||
pct.setText(`${Math.round(v * 100)}%`);
|
||
},
|
||
};
|
||
}
|
||
|
||
// --------------------------------------------------------------------------
|
||
// Research has its own file, VegaResearchScreen.js — it grew past this
|
||
// module's shared factory-function pattern the same way Audience and the
|
||
// colony-founding vignette already had.
|
||
|
||
export function openDiplomacyScreen(scene, rules, state, e, art, onClose, onChanged) {
|
||
const shell = modalShell(scene, 'Diplomacy', onClose, { width: 1280, height: 780 });
|
||
const emp = state.empires[e];
|
||
const others = state.empires.filter((o) => o.alive && o.idx !== e && emp.contacted[o.idx]);
|
||
|
||
if (!others.length) {
|
||
shell.add(scene.add.text(shell.body.x, shell.body.y, 'You have not yet met another empire.', {
|
||
fontFamily: FONT, fontSize: '20px', color: '#8fa8c0',
|
||
}));
|
||
return shell;
|
||
}
|
||
|
||
const rowH = Math.min(150, shell.body.h / others.length);
|
||
others.forEach((other, i) => {
|
||
const y = shell.body.y + i * rowH;
|
||
const spec = rules.species[other.speciesId];
|
||
|
||
shell.add(makeSpeciesPortrait(scene, rules, art, other.speciesId,
|
||
shell.body.x + 52, y + rowH / 2, 96));
|
||
|
||
const att = attitudeOf(state, other.idx, e);
|
||
const treaty = emp.treaties[other.idx] ?? 'none';
|
||
const name = scene.add.text(shell.body.x + 120, y + 18, `${spec.name}`, {
|
||
fontFamily: FONT, fontSize: '24px', color: other.color,
|
||
});
|
||
shell.add(name);
|
||
|
||
const status = scene.add.text(shell.body.x + 120, y + 52,
|
||
`${treaty === 'war' ? 'AT WAR' : treaty.toUpperCase()} · attitude ${att} (${moodOf(att)}) · `
|
||
+ `${empireColonies(state, other.idx).length} colonies · power ${Math.round(powerOf(rules, state, other.idx))}`, {
|
||
fontFamily: FONT, fontSize: '16px', color: '#9fb6cc',
|
||
});
|
||
shell.add(status);
|
||
|
||
const bio = scene.add.text(shell.body.x + 120, y + 78, spec.desc, {
|
||
fontFamily: FONT, fontSize: '14px', color: '#6f8aa3', wordWrap: { width: 620 },
|
||
});
|
||
shell.add(bio);
|
||
|
||
const bx = shell.body.x + shell.body.w - 150;
|
||
const canSeek = canNegotiate(rules, state, e, other.idx);
|
||
const b = new Button(scene, bx, y + rowH / 2 - 20, 'Seek Audience', () => {
|
||
shell.destroy();
|
||
openAudienceScreen(scene, rules, state, e, other.idx, art, onClose, onChanged);
|
||
}, { width: 200, height: 40 });
|
||
if (!canSeek) b.setEnabled(false);
|
||
shell.add(b);
|
||
});
|
||
return shell;
|
||
}
|
||
|
||
// --------------------------------------------------------------------------
|
||
|
||
export function openCouncilScreen(scene, rules, state, onClose) {
|
||
const shell = modalShell(scene, 'Galactic Council', onClose, { width: 900, height: 620 });
|
||
const r = state.council.lastResult;
|
||
if (!r) {
|
||
shell.add(scene.add.text(shell.body.x, shell.body.y, 'The Council has not yet convened.', {
|
||
fontFamily: FONT, fontSize: '20px', color: '#8fa8c0',
|
||
}));
|
||
return shell;
|
||
}
|
||
|
||
let y = shell.body.y;
|
||
const need = Math.ceil(r.totalPop * rules.council.winFraction);
|
||
shell.add(scene.add.text(shell.body.x, y,
|
||
`Session of ${2300 + r.turn} — ${need} votes of ${Math.round(r.totalPop)} needed`, {
|
||
fontFamily: FONT, fontSize: '18px', color: '#9fb6cc',
|
||
}));
|
||
y += 46;
|
||
|
||
for (const idx of r.candidates ?? []) {
|
||
const emp = state.empires[idx];
|
||
const v = r.votes[idx] ?? 0;
|
||
shell.add(scene.add.text(shell.body.x, y, emp.name, {
|
||
fontFamily: FONT, fontSize: '24px', color: emp.color,
|
||
}));
|
||
const bar = scene.add.rectangle(shell.body.x, y + 34, shell.body.w, 16, 0x1b2b42).setOrigin(0, 0);
|
||
shell.add(bar);
|
||
const fill = scene.add.rectangle(shell.body.x, y + 34,
|
||
shell.body.w * Phaser.Math.Clamp(v / Math.max(1, r.totalPop), 0, 1), 16,
|
||
Phaser.Display.Color.HexStringToColor(emp.color).color).setOrigin(0, 0);
|
||
shell.add(fill);
|
||
shell.add(scene.add.text(shell.body.x + shell.body.w, y + 4, `${Math.round(v)}`, {
|
||
fontFamily: FONT, fontSize: '20px', color: '#e8f4ff',
|
||
}).setOrigin(1, 0));
|
||
y += 76;
|
||
}
|
||
|
||
shell.add(scene.add.text(shell.body.x, y, `Abstained: ${Math.round(r.abstained)}`, {
|
||
fontFamily: FONT, fontSize: '17px', color: '#7f97b3',
|
||
}));
|
||
y += 40;
|
||
|
||
const verdict = r.winner >= 0
|
||
? `${state.empires[r.winner].name} is elected High Guardian of the Galaxy.`
|
||
: (r.refused
|
||
? 'The defeated candidate REFUSES TO SUBMIT. The election is void, and the matter will be settled by war.'
|
||
: 'No candidate reached the required majority. The Council adjourns.');
|
||
shell.add(scene.add.text(shell.body.x, y, verdict, {
|
||
fontFamily: FONT, fontSize: '19px', color: r.winner >= 0 ? '#ffd88a' : '#e08a8a',
|
||
wordWrap: { width: shell.body.w },
|
||
}));
|
||
return shell;
|
||
}
|
||
|
||
// --------------------------------------------------------------------------
|
||
|
||
/** "3× Cruiser, 2× Frigate (at Vega Prime)" / "(en route to Vega Prime)". */
|
||
function fleetLabel(rules, state, f) {
|
||
const ships = f.ships.filter((s) => s.count > 0)
|
||
.map((s) => `${s.count}× ${rules.hulls[s.hullId]?.name}`).join(', ') || 'empty fleet';
|
||
const where = f.starIdx >= 0
|
||
? `at ${state.galaxy.stars[f.starIdx]?.name}`
|
||
: `en route to ${state.galaxy.stars[f.toStar]?.name ?? '?'}`;
|
||
return `${ships} (${where})`;
|
||
}
|
||
|
||
/** A vertical list picker overlaid on `shell` — same mechanism as
|
||
* VegaAudience.js's pickFromList, generalised to any {label, onPick} list
|
||
* since this screen has no existing picker of its own. */
|
||
function openListPicker(scene, shell, title, items) {
|
||
const bx = GAME_WIDTH / 2;
|
||
const by = GAME_HEIGHT / 2;
|
||
const box = scene.add.container(0, 0);
|
||
shell.add(box);
|
||
const h = Math.min(520, 100 + Math.max(items.length, 1) * 34);
|
||
box.add(scene.add.rectangle(bx, by, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.001).setOrigin(0.5).setInteractive());
|
||
box.add(scene.add.rectangle(bx, by, 460, h, PANEL, 0.98).setStrokeStyle(2, ACCENT));
|
||
box.add(scene.add.text(bx, by - h / 2 + 26, title, { fontFamily: FONT, fontSize: '19px', color: '#ffd88a' }).setOrigin(0.5));
|
||
if (!items.length) {
|
||
box.add(scene.add.text(bx, by, 'Nothing available.', {
|
||
fontFamily: FONT, fontSize: '15px', color: '#6f8aa3',
|
||
}).setOrigin(0.5));
|
||
}
|
||
items.slice(0, 12).forEach(([label, fn], i) => {
|
||
const t = scene.add.text(bx, by - h / 2 + 66 + i * 34, label, {
|
||
fontFamily: FONT, fontSize: '16px', color: '#e8f4ff',
|
||
}).setOrigin(0.5).setInteractive({ useHandCursor: true });
|
||
t.on('pointerover', () => t.setColor('#ffd88a'));
|
||
t.on('pointerout', () => t.setColor('#e8f4ff'));
|
||
t.on('pointerdown', () => { box.destroy(true); fn(); });
|
||
box.add(t);
|
||
});
|
||
const cancel = new Button(scene, bx, by + h / 2 - 34, 'Cancel', () => box.destroy(true),
|
||
{ width: 160, height: 40, fontSize: 16, variant: 'ghost' });
|
||
box.add(cancel);
|
||
}
|
||
|
||
export function openLeaderScreen(scene, rules, state, e, art, onClose, onChanged) {
|
||
const shell = modalShell(scene, 'Leaders', onClose, { width: 1180, height: 760 });
|
||
const emp = state.empires[e];
|
||
|
||
shell.add(scene.add.text(shell.body.x, shell.body.y, 'AVAILABLE FOR HIRE', {
|
||
fontFamily: FONT, fontSize: '18px', color: '#cfe8ff',
|
||
}));
|
||
let y = shell.body.y + 34;
|
||
for (const offer of leaderOffers(rules, state, e)) {
|
||
const cost = leaderHireCost(rules, state, e, offer.id);
|
||
const affordable = emp.bc >= cost;
|
||
shell.add(scene.add.image(shell.body.x + 32, y + 30, art.leaders, offer.portraitFrame)
|
||
.setDisplaySize(60, 60));
|
||
shell.add(scene.add.text(shell.body.x + 76, y + 4, `${offer.name} — ${offer.kind}`, {
|
||
fontFamily: FONT, fontSize: '19px', color: '#e8f4ff',
|
||
}));
|
||
shell.add(scene.add.text(shell.body.x + 76, y + 30, offer.bio, {
|
||
fontFamily: FONT, fontSize: '14px', color: '#7f97b3', wordWrap: { width: 640 },
|
||
}));
|
||
shell.add(scene.add.text(shell.body.x + 76, y + 50,
|
||
Object.entries(offer.skills).map(([k, v]) => `${k} ${v}`).join(' · '), {
|
||
fontFamily: FONT, fontSize: '13px', color: '#7fd8a0',
|
||
}));
|
||
const b = new Button(scene, shell.body.x + shell.body.w - 130, y + 30,
|
||
`Hire ${cost} BC`, () => {
|
||
if (hireLeader(rules, state, e, offer.id)) {
|
||
shell.destroy();
|
||
openLeaderScreen(scene, rules, state, e, art, onClose, onChanged);
|
||
onChanged?.();
|
||
}
|
||
}, { width: 190, height: 38, variant: affordable ? 'solid' : 'ghost' });
|
||
shell.add(b);
|
||
y += 84;
|
||
}
|
||
|
||
y += 20;
|
||
shell.add(scene.add.text(shell.body.x, y, 'IN YOUR SERVICE', {
|
||
fontFamily: FONT, fontSize: '18px', color: '#cfe8ff',
|
||
}));
|
||
y += 34;
|
||
if (!emp.leaders.length) {
|
||
shell.add(scene.add.text(shell.body.x, y, 'None. Leaders take a posting before they do anything.', {
|
||
fontFamily: FONT, fontSize: '16px', color: '#6f8aa3',
|
||
}));
|
||
}
|
||
for (const l of emp.leaders) {
|
||
const def = rules.leaders[l.leaderId];
|
||
let where = 'unassigned';
|
||
if (l.assignKind === 'colony') {
|
||
const c = empireColonies(state, e).find((c2) => c2.id === l.assignId);
|
||
where = c ? `${c.name} (${state.galaxy.stars[c.starIdx]?.name})` : 'unassigned';
|
||
} else if (l.assignKind === 'fleet') {
|
||
const f = empireFleets(state, e).find((f2) => f2.id === l.assignId);
|
||
where = f ? fleetLabel(rules, state, f) : 'unassigned';
|
||
}
|
||
shell.add(scene.add.image(shell.body.x + 24, y + 18, art.leaders, def.portraitFrame)
|
||
.setDisplaySize(40, 40));
|
||
shell.add(scene.add.text(shell.body.x + 56, y + 6,
|
||
`${def.name} — ${def.kind} — ${where} — ${def.upkeep} BC/turn`, {
|
||
fontFamily: FONT, fontSize: '16px', color: '#c8dcf0',
|
||
wordWrap: { width: shell.body.w - 320 },
|
||
}));
|
||
|
||
// Posting picker: admins list colonies, captains list fleets. Re-opens
|
||
// the whole screen on pick/unassign, same refresh pattern the Hire
|
||
// button already uses above.
|
||
const refresh = () => {
|
||
shell.destroy();
|
||
openLeaderScreen(scene, rules, state, e, art, onClose, onChanged);
|
||
onChanged?.();
|
||
};
|
||
const openPicker = () => {
|
||
const targets = def.kind === 'admin'
|
||
? empireColonies(state, e).map((c) => [
|
||
`${c.name} (${state.galaxy.stars[c.starIdx]?.name})`,
|
||
() => { assignLeader(rules, state, e, l.leaderId, 'colony', c.id); refresh(); },
|
||
])
|
||
: empireFleets(state, e).filter((f) => f.starIdx >= 0 || f.toStar >= 0).map((f) => [
|
||
fleetLabel(rules, state, f),
|
||
() => { assignLeader(rules, state, e, l.leaderId, 'fleet', f.id); refresh(); },
|
||
]);
|
||
openListPicker(scene, shell, def.kind === 'admin' ? 'POST TO WHICH COLONY?' : 'POST TO WHICH FLEET?', targets);
|
||
};
|
||
shell.add(new Button(scene, shell.body.x + shell.body.w - 110, y + 20,
|
||
l.assignKind ? 'Reassign' : 'Assign', openPicker, { width: 118, height: 32, fontSize: 14 }));
|
||
if (l.assignKind) {
|
||
shell.add(new Button(scene, shell.body.x + shell.body.w - 250, y + 20, 'Unassign', () => {
|
||
unassignLeader(rules, state, e, l.leaderId);
|
||
refresh();
|
||
}, { width: 118, height: 32, fontSize: 14, variant: 'ghost' }));
|
||
}
|
||
y += 44;
|
||
}
|
||
return shell;
|
||
}
|
||
|
||
// --------------------------------------------------------------------------
|
||
|
||
export function showVictoryOverlay(scene, rules, state, onClose) {
|
||
const layer = scene.add.container(0, 0).setDepth(D.toast);
|
||
layer.add(scene.add.rectangle(0, 0, GAME_WIDTH, GAME_HEIGHT, 0x00060e, 0.9)
|
||
.setOrigin(0, 0).setInteractive());
|
||
|
||
const winner = state.winnerIdx >= 0 ? state.empires[state.winnerIdx] : null;
|
||
const human = state.humanIndex >= 0 ? state.empires[state.humanIndex] : null;
|
||
const won = winner && human && winner.idx === human.idx;
|
||
|
||
const title = won ? 'VICTORY' : 'DEFEAT';
|
||
layer.add(scene.add.text(GAME_WIDTH / 2, 300, title, {
|
||
fontFamily: FONT, fontSize: '92px', color: won ? '#ffd88a' : '#e08a8a',
|
||
}).setOrigin(0.5));
|
||
|
||
const kind = {
|
||
conquest: 'by conquest — the galaxy holds no rival',
|
||
council: 'by acclamation of the Galactic Council',
|
||
timeout: 'by dominance when the age ended',
|
||
}[state.victoryKind] ?? '';
|
||
|
||
layer.add(scene.add.text(GAME_WIDTH / 2, 400,
|
||
winner ? `${winner.name} ${kind}` : 'The galaxy is empty.', {
|
||
fontFamily: FONT, fontSize: '28px', color: '#cfe8ff',
|
||
}).setOrigin(0.5));
|
||
|
||
layer.add(scene.add.text(GAME_WIDTH / 2, 470,
|
||
`Year ${2300 + state.turn}`, {
|
||
fontFamily: FONT, fontSize: '22px', color: '#7f97b3',
|
||
}).setOrigin(0.5));
|
||
|
||
// Buttons in this repo draw centred, so they are positioned by their centre.
|
||
const b = new Button(scene, GAME_WIDTH / 2, 560, 'Return to menu', () => {
|
||
layer.destroy();
|
||
onClose?.();
|
||
}, { width: 220, height: 52 });
|
||
layer.add(b);
|
||
return layer;
|
||
}
|