391 lines
16 KiB
JavaScript
391 lines
16 KiB
JavaScript
// Master of Vega — the Research screen.
|
|
//
|
|
// Left: a 2:3 ambient loop of the viewing empire's own species at work (or a
|
|
// letterboxed portrait fallback until that clip exists). Right, top: a 2x3
|
|
// grid of tech-field boxes — name, a lockable allocation slider, and the
|
|
// current target's name/description/progress. Right, bottom: once a box is
|
|
// clicked, that field's full tech ladder (researched / available / locked to
|
|
// this species) in a much larger, scrollable, tooltip-enabled list than the
|
|
// old single-shell version ever had room for.
|
|
//
|
|
// Split out of VegaScreens.js once this screen grew past the shared
|
|
// modalShell+slider factory-function pattern those simpler screens still
|
|
// use — the same jump in complexity that pulled VegaAudience.js and
|
|
// VegaColonyIntro.js out earlier. FONT/D/modalShell/slider are borrowed back
|
|
// from there, same as those two files do.
|
|
|
|
import * as Phaser from 'phaser';
|
|
import { FONT, D, modalShell, slider } from './VegaScreens.js';
|
|
import { techCost, techCostFactor } from './VegaRules.js';
|
|
import {
|
|
setResearchAlloc, nextResearchTarget, setResearchTarget, canResearch,
|
|
} from './VegaLogic.js';
|
|
import {
|
|
makeSpeciesPortrait, sourceWidth, speciesResearchVideoKey, hasSpeciesResearchVideo,
|
|
} from './VegaArt.js';
|
|
import { Tooltip } from '../../ui/Tooltip.js';
|
|
import { describeTechTooltip } from './VegaTooltips.js';
|
|
|
|
const ACCENT = 0x6fc4ff;
|
|
const PANEL = 0x0b1220;
|
|
|
|
/** Source resolution the research clips are recorded at — 2:3 portrait. */
|
|
const RESEARCH_VIDEO_SRC_W = 640;
|
|
|
|
function researchVideoPath(scene, speciesId) {
|
|
return scene.cache.json.get('mastervega-artwork')?.researchVideos?.[speciesId]?.path ?? null;
|
|
}
|
|
|
|
// --------------------------------------------------------------------------
|
|
// JIT loading — one-for-one with VegaAudience.js's warmBytes/
|
|
// ensureOneAudienceVideo pair, minus the mood dimension: Research only ever
|
|
// shows the VIEWING empire's own species, one clip, so there is nothing to
|
|
// warm speculatively and nothing to swap between.
|
|
|
|
const warmed = new WeakMap();
|
|
function warmBytes(scene, key, path) {
|
|
let store = warmed.get(scene);
|
|
if (!store) { store = new Map(); warmed.set(scene, store); }
|
|
if (store.has(key)) return;
|
|
try {
|
|
const el = document.createElement('video');
|
|
el.preload = 'auto';
|
|
el.muted = true;
|
|
el.setAttribute('playsinline', 'playsinline');
|
|
el.src = path;
|
|
el.load();
|
|
store.set(key, el);
|
|
} catch (err) { /* prefetch is an optimisation, never a requirement */ }
|
|
}
|
|
|
|
const inFlight = new WeakMap();
|
|
function pendingFor(scene) {
|
|
let set = inFlight.get(scene);
|
|
if (!set) { set = new Set(); inFlight.set(scene, set); }
|
|
return set;
|
|
}
|
|
|
|
function ensureOneResearchVideo(scene, speciesId, onDone) {
|
|
const key = speciesResearchVideoKey(speciesId);
|
|
const path = researchVideoPath(scene, speciesId);
|
|
if (path) warmBytes(scene, key, path);
|
|
if (hasSpeciesResearchVideo(scene, speciesId) || !path) { onDone?.(); return; }
|
|
|
|
const pending = pendingFor(scene);
|
|
const doneEvent = `filecomplete-video-${key}`;
|
|
if (onDone) {
|
|
let onLoad;
|
|
let onError;
|
|
const settle = () => {
|
|
scene.load.off(doneEvent, onLoad);
|
|
scene.load.off(Phaser.Loader.Events.FILE_LOAD_ERROR, onError);
|
|
onDone();
|
|
};
|
|
onLoad = () => settle();
|
|
onError = (file) => { if (file?.key === key) settle(); };
|
|
scene.load.once(doneEvent, onLoad);
|
|
scene.load.on(Phaser.Loader.Events.FILE_LOAD_ERROR, onError);
|
|
}
|
|
if (pending.has(key)) return;
|
|
pending.add(key);
|
|
let clearDone;
|
|
let clearError;
|
|
const clear = () => {
|
|
scene.load.off(doneEvent, clearDone);
|
|
scene.load.off(Phaser.Loader.Events.FILE_LOAD_ERROR, clearError);
|
|
pending.delete(key);
|
|
};
|
|
clearDone = () => clear();
|
|
clearError = (file) => { if (file?.key === key) clear(); };
|
|
scene.load.once(doneEvent, clearDone);
|
|
scene.load.on(Phaser.Loader.Events.FILE_LOAD_ERROR, clearError);
|
|
scene.load.video(key, path, true); // noAudio: true — ambient loop, silent
|
|
if (!scene.load.isLoading()) scene.load.start();
|
|
}
|
|
|
|
// --------------------------------------------------------------------------
|
|
// The species video panel. Letterboxed by WIDTH per this game's universal
|
|
// video convention (never setDisplaySize, never crop) — a square portrait
|
|
// centred inside the taller 2:3 frame until a real research clip loads, then
|
|
// the clip itself scaled the same way.
|
|
|
|
function buildVideoPanel(scene, rules, art, speciesId, x, y, w, h) {
|
|
const container = scene.add.container(x, y);
|
|
|
|
function showFallback() {
|
|
container.removeAll(true);
|
|
const spec = rules.species[speciesId];
|
|
const barColor = Phaser.Display.Color.HexStringToColor(spec.color).color;
|
|
container.add(scene.add.rectangle(w / 2, h / 2, w, h, barColor, 0.18));
|
|
container.add(makeSpeciesPortrait(scene, rules, art, speciesId, w / 2, h / 2, w));
|
|
}
|
|
|
|
function showVideo() {
|
|
container.removeAll(true);
|
|
const v = scene.add.video(w / 2, h / 2, speciesResearchVideoKey(speciesId));
|
|
v.setMute(true);
|
|
v.setLoop(true);
|
|
// A fresh Video reports a placeholder width (not 0) until its first frame
|
|
// decodes — sourceWidth() is the documented guard for that trap, so the
|
|
// fit is re-applied once the real texture exists rather than only once.
|
|
const fit = () => v.setScale(w / sourceWidth(v, RESEARCH_VIDEO_SRC_W));
|
|
fit();
|
|
v.on('created', fit);
|
|
v.on('playing', fit);
|
|
v.play(true);
|
|
v.once('error', () => { if (v.scene) showFallback(); });
|
|
container.add(v);
|
|
}
|
|
|
|
showFallback();
|
|
ensureOneResearchVideo(scene, speciesId, () => {
|
|
if (!container.scene) return; // screen closed before the fetch landed
|
|
if (hasSpeciesResearchVideo(scene, speciesId)) showVideo();
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
// --------------------------------------------------------------------------
|
|
|
|
export function openResearchScreen(scene, rules, state, e, art, onClose) {
|
|
const emp = state.empires[e];
|
|
// A game saved before the research-lock padlock existed has no
|
|
// allocLocked at all — VegaLogic.deserialize() back-fills this for the
|
|
// normal load path, but guard here too rather than trust every caller.
|
|
emp.allocLocked ??= {};
|
|
const spec = rules.species[emp.speciesId];
|
|
const fields = rules.techFieldList;
|
|
|
|
const tooltip = new Tooltip(scene, { depth: D.modal + 5 });
|
|
|
|
const shell = modalShell(scene, 'Research', () => {
|
|
tooltip.destroy();
|
|
maskG?.destroy();
|
|
onClose?.();
|
|
}, { width: 1500, height: 880 });
|
|
|
|
// --- layout -------------------------------------------------------------
|
|
const videoH = shell.body.h;
|
|
const videoW = Math.round(videoH * (2 / 3));
|
|
const rightX = shell.body.x + videoW + 24;
|
|
const rightW = shell.body.w - videoW - 24;
|
|
|
|
const GAP = 16;
|
|
const boxW = (rightW - 2 * GAP) / 3;
|
|
const boxH = 200;
|
|
const gridY = shell.body.y;
|
|
const gridBottom = gridY + 2 * boxH + GAP;
|
|
const headingY = gridBottom + 6;
|
|
const detailY = gridBottom + 34;
|
|
const detailH = shell.body.h - (detailY - shell.body.y);
|
|
const detailX = rightX;
|
|
const detailW = rightW;
|
|
|
|
shell.add(buildVideoPanel(scene, rules, art, emp.speciesId, shell.body.x, shell.body.y, videoW, videoH));
|
|
|
|
let selectedField = fields[0].id;
|
|
let gridLayer = null;
|
|
let detailLayer = null;
|
|
let maskG = null;
|
|
const sliders = []; // [{fieldId, slider}], rebuilt with the grid
|
|
|
|
// --- category grid --------------------------------------------------
|
|
function buildCategoryBox(field, i) {
|
|
const row = Math.floor(i / 3);
|
|
const col = i % 3;
|
|
const bx = rightX + col * (boxW + GAP);
|
|
const by = gridY + row * (boxH + GAP);
|
|
const selected = field.id === selectedField;
|
|
|
|
// The background is the field-select click zone, added FIRST so the
|
|
// padlock and slider (added after) win Phaser's default topOnly input
|
|
// priority over their own smaller areas — same add-order mechanism
|
|
// VegaColonyView.js already relies on for its nested lock box + slider.
|
|
const bg = scene.add.rectangle(bx + boxW / 2, by + boxH / 2, boxW, boxH, PANEL, selected ? 0.85 : 0.5)
|
|
.setStrokeStyle(selected ? 2.5 : 1, ACCENT, selected ? 0.95 : 0.35)
|
|
.setInteractive({ useHandCursor: true });
|
|
bg.on('pointerup', () => {
|
|
if (selectedField === field.id) return;
|
|
selectedField = field.id;
|
|
buildGrid();
|
|
buildDetail();
|
|
});
|
|
gridLayer.add(bg);
|
|
|
|
gridLayer.add(scene.add.text(bx + 12, by + 8, field.name.toUpperCase(), {
|
|
fontFamily: FONT, fontSize: '18px', color: '#cfe8ff',
|
|
}));
|
|
|
|
// Padlock — VegaColonyView.js:323-349's exact semantics, transposed onto
|
|
// emp.allocLocked: can't lock the last unlocked field, since
|
|
// setResearchAlloc would have nothing left to renormalise into.
|
|
const locked = !!emp.allocLocked[field.id];
|
|
const lockedCount = fields.filter((f) => emp.allocLocked[f.id]).length;
|
|
const lockable = locked || lockedCount < fields.length - 1;
|
|
const lockBox = scene.add.rectangle(bx + boxW - 22, by + 20, 22, 22,
|
|
locked ? 0x2a3550 : 0x16253c).setStrokeStyle(1, ACCENT, lockable ? 0.55 : 0.18);
|
|
gridLayer.add(lockBox);
|
|
gridLayer.add(scene.add.text(bx + boxW - 22, by + 19, locked ? '■' : '□', {
|
|
fontFamily: FONT, fontSize: '14px', color: locked ? '#ffd88a' : (lockable ? '#8fa8c0' : '#3c4c60'),
|
|
}).setOrigin(0.5));
|
|
if (lockable) {
|
|
lockBox.setInteractive({ useHandCursor: true });
|
|
lockBox.on('pointerup', () => {
|
|
if (locked) delete emp.allocLocked[field.id];
|
|
else emp.allocLocked[field.id] = true;
|
|
buildGrid();
|
|
});
|
|
}
|
|
|
|
const s = slider(scene, bx + 14, by + 42, boxW - 28, 'Alloc', emp.alloc[field.id] ?? 0, (v) => {
|
|
setResearchAlloc(rules, state, e, field.id, v);
|
|
// Every field's share shifts, so redraw them all — INCLUDING this one,
|
|
// which may have been clipped by the room locked fields left (same
|
|
// trap VegaColonyView.js's identical callback calls out). Only the
|
|
// slider widgets move here; the progress/target text below them is
|
|
// deliberately left alone until the next full rebuild (lock toggle or
|
|
// box click), matching how the old single-shell screen already
|
|
// avoided rebuilding on every drag tick.
|
|
sliders.forEach(({ fieldId, slider: other }) => other.setValue(emp.alloc[fieldId] ?? 0));
|
|
});
|
|
gridLayer.add(s.container);
|
|
sliders.push({ fieldId: field.id, slider: s });
|
|
|
|
let y = by + 96;
|
|
const targetId = emp.researching[field.id] ?? nextResearchTarget(rules, state, e, field.id);
|
|
if (targetId) {
|
|
const tech = rules.techs[targetId];
|
|
const cost = techCost(rules, tech, emp.knownInField[field.id], techCostFactor(spec, field.id));
|
|
const have = emp.beakers[field.id] ?? 0;
|
|
const nameT = scene.add.text(bx + 14, y, tech.name, {
|
|
fontFamily: FONT, fontSize: '15px', color: '#ffd88a', wordWrap: { width: boxW - 28 },
|
|
});
|
|
gridLayer.add(nameT);
|
|
y += nameT.height + 3;
|
|
const descT = scene.add.text(bx + 14, y, tech.desc, {
|
|
fontFamily: FONT, fontSize: '12px', color: '#8fa8c0', wordWrap: { width: boxW - 28 },
|
|
});
|
|
gridLayer.add(descT);
|
|
y += descT.height + 6;
|
|
const barW = boxW - 28;
|
|
gridLayer.add(scene.add.rectangle(bx + 14, y, barW, 6, 0x1b2b42).setOrigin(0, 0));
|
|
gridLayer.add(scene.add.rectangle(bx + 14, y, barW * Phaser.Math.Clamp(have / cost, 0, 1), 6, 0xffd88a)
|
|
.setOrigin(0, 0));
|
|
y += 12;
|
|
gridLayer.add(scene.add.text(bx + 14, y, `${Math.round(have)} / ${cost} RP`, {
|
|
fontFamily: FONT, fontSize: '12px', color: '#7f97b3',
|
|
}));
|
|
} else {
|
|
gridLayer.add(scene.add.text(bx + 14, y, 'Nothing further available', {
|
|
fontFamily: FONT, fontSize: '13px', color: '#6b7f96', wordWrap: { width: boxW - 28 },
|
|
}));
|
|
}
|
|
}
|
|
|
|
function buildGrid() {
|
|
gridLayer?.destroy();
|
|
gridLayer = scene.add.container(0, 0);
|
|
shell.add(gridLayer);
|
|
sliders.length = 0;
|
|
fields.forEach((field, i) => buildCategoryBox(field, i));
|
|
}
|
|
|
|
// --- detail pane: the selected field's full tech ladder, much larger
|
|
// font than the old screen's 14px columns, masked+scrollable since ten
|
|
// techs at this size can run past the pane's height. Mirrors
|
|
// VegaAudience.js's chat-log masked-scroll shape.
|
|
function buildDetail() {
|
|
detailLayer?.destroy();
|
|
maskG?.destroy();
|
|
detailLayer = scene.add.container(0, 0);
|
|
shell.add(detailLayer);
|
|
|
|
const field = rules.techFields[selectedField];
|
|
detailLayer.add(scene.add.text(detailX, headingY, `${field.name.toUpperCase()} — RESEARCH LADDER`, {
|
|
fontFamily: FONT, fontSize: '18px', color: '#cfe8ff',
|
|
}));
|
|
|
|
const bg = scene.add.rectangle(detailX + detailW / 2, detailY + detailH / 2, detailW, detailH, 0x000000, 0.35)
|
|
.setStrokeStyle(1, ACCENT, 0.3).setInteractive();
|
|
detailLayer.add(bg);
|
|
|
|
const ladder = scene.add.container(0, 0);
|
|
detailLayer.add(ladder);
|
|
maskG = scene.make.graphics({ x: 0, y: 0, add: false });
|
|
maskG.fillStyle(0xffffff);
|
|
maskG.fillRect(detailX, detailY, detailW, detailH);
|
|
ladder.setMask(maskG.createGeometryMask());
|
|
|
|
let rowY = detailY + 16;
|
|
let scrollUp = 0;
|
|
let overflow = 0;
|
|
const applyScroll = () => {
|
|
overflow = Math.max(0, rowY - (detailY + detailH - 16));
|
|
scrollUp = Phaser.Math.Clamp(scrollUp, 0, overflow);
|
|
ladder.y = -overflow + scrollUp;
|
|
};
|
|
bg.on('wheel', (pointer, dx, dy) => { scrollUp -= dy * 0.5; applyScroll(); });
|
|
|
|
// The field's current research target — same lookup the category box
|
|
// uses for its own progress bar — gets the same yellow as that bar, and
|
|
// the list opens scrolled to bring it as close to the pane's centre as
|
|
// the ladder's length allows.
|
|
const targetId = emp.researching[selectedField] ?? nextResearchTarget(rules, state, e, selectedField);
|
|
let targetRowTop = null;
|
|
let targetRowHeight = 0;
|
|
|
|
for (const tech of rules.techsByField[selectedField]) {
|
|
const known = !!emp.known[tech.id];
|
|
const avail = !!emp.available[tech.id];
|
|
const isCurrent = tech.id === targetId;
|
|
// A branched rung can have more than one open (□) tech at once — this
|
|
// is what makes it clickable: canResearch is the same gate
|
|
// setResearchTarget itself checks, so "clickable" and "would actually
|
|
// succeed" never disagree.
|
|
const selectable = !known && canResearch(rules, state, e, tech);
|
|
const colour = isCurrent ? '#ffd88a' : (known ? '#7fd8a0' : (avail ? '#9fb6cc' : '#5a4450'));
|
|
const mark = known ? '■' : (avail ? '□' : '✕');
|
|
const row = scene.add.text(detailX + 16, rowY, `${mark} ${tech.name}`, {
|
|
fontFamily: FONT, fontSize: '26px', color: colour, wordWrap: { width: detailW - 32 },
|
|
}).setInteractive({ useHandCursor: selectable });
|
|
ladder.add(row);
|
|
tooltip.attachTo(row, () => describeTechTooltip(rules, state, emp, tech));
|
|
if (selectable) {
|
|
row.on('pointerup', () => {
|
|
if (!setResearchTarget(rules, state, e, selectedField, tech.id)) return;
|
|
// The row this listener is on is about to be destroyed by the
|
|
// rebuild below — Tooltip only clears itself on pointerout, which
|
|
// never fires for a destroyed object, so hide it explicitly first.
|
|
tooltip.hide();
|
|
buildGrid();
|
|
buildDetail();
|
|
});
|
|
}
|
|
if (isCurrent) { targetRowTop = rowY; targetRowHeight = row.height; }
|
|
rowY += row.height + 10;
|
|
}
|
|
|
|
// First pass establishes `overflow` from the final rowY (and harmlessly
|
|
// clamps the still-default scrollUp); the second pass then aims for
|
|
// dead-centre on the target row, with applyScroll's own clamp pulling
|
|
// that back to the nearest reachable position when the target sits too
|
|
// close to either end of the list to actually reach centre.
|
|
applyScroll();
|
|
scrollUp = targetRowTop !== null
|
|
? (detailY + detailH / 2 - (targetRowTop + targetRowHeight / 2)) + overflow
|
|
: overflow; // nothing in progress in this field — open at the top
|
|
applyScroll();
|
|
}
|
|
|
|
shell.add(scene.add.text(shell.body.x, shell.y + shell.height - 34,
|
|
'■ researched □ available ✕ not available to your species — acquire by trade, espionage or conquest', {
|
|
fontFamily: FONT, fontSize: '14px', color: '#6b7f96',
|
|
}));
|
|
|
|
buildGrid();
|
|
buildDetail();
|
|
|
|
return shell;
|
|
}
|