940 lines
38 KiB
JavaScript
940 lines
38 KiB
JavaScript
// Master of Vega — the star map.
|
|
//
|
|
// Layer order (each one a SEPARATE root container, because a Phaser Container
|
|
// renders its children in insertion order and ignores their depth — putting
|
|
// these in one container and setting .depth would silently do nothing):
|
|
//
|
|
// nebula -> parallax starfield -> territory field -> starlanes
|
|
// -> range darkness -> stars -> fleets -> labels
|
|
//
|
|
// Everything from `territory` down lives inside `this.root`, which is the one
|
|
// object that gets scaled and moved for pan and zoom. The nebula and the
|
|
// parallax layers are screen-space and move at their own rates.
|
|
|
|
import * as Phaser from 'phaser';
|
|
import { GAME_HEIGHT, GAME_WIDTH } from '../../config.js';
|
|
import { Tooltip } from '../../ui/Tooltip.js';
|
|
import { playSound, SFX } from '../../ui/Sounds.js';
|
|
import { makeNebula } from './VegaNebula.js';
|
|
import { PARSEC_PX, parsecs, mulberry32 } from './VegaGalaxyGen.js';
|
|
import {
|
|
coloniesAt, empireColonies, fleetEta, habitableForEmpire,
|
|
} from './VegaLogic.js';
|
|
import { starFrame } from './VegaArt.js';
|
|
import { buildZoomLadder, DEFAULT_ZOOM_INDEX } from './VegaZoom.js';
|
|
import { delaunayTriangulate, triangulationEdges } from './VegaDelaunay.js';
|
|
import { describeStarTooltip } from './VegaTooltips.js';
|
|
import { ORBIT } from './VegaScreens.js';
|
|
|
|
const FONT = '"Julius Sans One"';
|
|
|
|
// Per-empire colony roster block drawn up-left of a colonized star. Sizing
|
|
// is tuned to clear both the star's own ownership ring and the in-transit
|
|
// fleet marker/comet trail, which already occupies the same upper-left
|
|
// quadrant at (star.x - 26, star.y - 22).
|
|
const COLONY_INFO_GAP_X = 112;
|
|
const COLONY_INFO_GAP_Y = 36;
|
|
const COLONY_INFO_BAR_H = 12;
|
|
const COLONY_INFO_BAR_TEXT_GAP = 8;
|
|
const COLONY_INFO_GROUP_GAP = 20;
|
|
const COLONY_INFO_MIN_BAR_W = 80;
|
|
const COLONY_INFO_TEXT_SIZE = 26;
|
|
|
|
// Docked-fleet marker fan: index 0 keeps the original single-fleet anchor
|
|
// (up-right of the star). Later indices zigzag further up-right so several
|
|
// fleets parked at one star (different empires, or a garrison split from
|
|
// the mobile stack) never sit exactly on top of one another and each stays
|
|
// its own independently clickable hit target.
|
|
const FLEET_STAGGER_DX = 26;
|
|
const FLEET_STAGGER_DY0 = -22;
|
|
const FLEET_STAGGER_ZIGZAG = 16;
|
|
const FLEET_STAGGER_STEP = 28;
|
|
|
|
// Extra pan room beyond the galaxy's own edge, in screen pixels, so any star
|
|
// can be dragged clear of screen-space chrome that docks over the map —
|
|
// chiefly the 400px-wide right-hand command panel (VegaSidePanel.js) — at
|
|
// every zoom level, including the fully-zoomed-out one where the map exactly
|
|
// fills the viewport and previously had zero pan room at all.
|
|
const PAN_SLACK = 420;
|
|
|
|
// Range-darkness corridors between the player's own colonies (see
|
|
// redrawRange) use a band slightly narrower than the per-star clear discs.
|
|
const RANGE_CORRIDOR_FACTOR = 0.8;
|
|
|
|
// The range and territory fields are painted into low-resolution
|
|
// RenderTextures and scaled up. A huge galaxy is 5400px wide — past the safe
|
|
// single-texture size — and the upscale blur is exactly the soft edge both
|
|
// effects want anyway, so the low resolution is a feature, not a compromise.
|
|
const FIELD_DIV = 6;
|
|
|
|
function ensureSoftDisc(scene, key, size) {
|
|
if (scene.textures.exists(key)) return key;
|
|
const tex = scene.textures.createCanvas(key, size, size);
|
|
const ctx = tex.getContext();
|
|
const g = ctx.createRadialGradient(size / 2, size / 2, size * 0.04, size / 2, size / 2, size / 2);
|
|
g.addColorStop(0, 'rgba(255,255,255,1)');
|
|
g.addColorStop(0.55, 'rgba(255,255,255,0.85)');
|
|
g.addColorStop(1, 'rgba(255,255,255,0)');
|
|
ctx.fillStyle = g;
|
|
ctx.fillRect(0, 0, size, size);
|
|
tex.refresh();
|
|
return key;
|
|
}
|
|
|
|
export default class VegaStarMap {
|
|
constructor(scene, rules, state, artKeys, callbacks = {}) {
|
|
this.scene = scene;
|
|
this.rules = rules;
|
|
this.state = state;
|
|
this.art = artKeys;
|
|
this.cb = callbacks;
|
|
this.viewerIdx = state.humanIndex;
|
|
|
|
this.zooms = buildZoomLadder(state.galaxy.width, state.galaxy.height);
|
|
this.zoomIndex = Math.min(DEFAULT_ZOOM_INDEX, this.zooms.length - 1);
|
|
this.zoom = this.zooms[this.zoomIndex];
|
|
this.selectedStar = -1;
|
|
this.selectedFleet = null;
|
|
this.routePreview = null;
|
|
this.hoverStar = -1;
|
|
this.rangeDirty = true;
|
|
this.territoryDirty = true;
|
|
this.time = 0;
|
|
|
|
const galaxy = state.galaxy;
|
|
this.worldW = galaxy.width;
|
|
this.worldH = galaxy.height;
|
|
|
|
ensureSoftDisc(scene, 'vega-soft-disc', 256);
|
|
|
|
this.tooltip = new Tooltip(scene, { depth: 70 });
|
|
|
|
// --- screen-space backdrop
|
|
this.bgLayer = scene.add.container(0, 0).setDepth(0);
|
|
this.nebula = makeNebula(scene, this.bgLayer, {
|
|
seed: galaxy.seed, shapeId: galaxy.shapeId, density: 1,
|
|
});
|
|
|
|
this.starfield = scene.add.container(0, 0).setDepth(1);
|
|
this.parallax = [];
|
|
this.buildParallax(galaxy.seed);
|
|
|
|
// --- world-space
|
|
this.root = scene.add.container(0, 0).setDepth(2);
|
|
|
|
this.fieldW = Math.max(2, Math.ceil(this.worldW / FIELD_DIV));
|
|
this.fieldH = Math.max(2, Math.ceil(this.worldH / FIELD_DIV));
|
|
|
|
this.territoryRT = scene.add.renderTexture(0, 0, this.fieldW, this.fieldH)
|
|
.setOrigin(0, 0).setScale(FIELD_DIV).setAlpha(0.5)
|
|
.setBlendMode(Phaser.BlendModes.ADD);
|
|
this.root.add(this.territoryRT);
|
|
|
|
this.laneGfx = scene.add.graphics();
|
|
this.root.add(this.laneGfx);
|
|
|
|
// Range darkness has to reach past the galaxy's own edge to cover
|
|
// PAN_SLACK too, or panning into that slack would reveal bare starfield
|
|
// instead of the same dark fill. Sized for the worst case — the bottom
|
|
// zoom rung, where a screen pixel of slack costs the most world pixels —
|
|
// so every other rung ends up with a little extra coverage, never a gap.
|
|
this.rangeMargin = Math.ceil(PAN_SLACK / this.zooms[0]);
|
|
const rangeFieldW = this.fieldW + Math.ceil((this.rangeMargin * 2) / FIELD_DIV);
|
|
const rangeFieldH = this.fieldH + Math.ceil((this.rangeMargin * 2) / FIELD_DIV);
|
|
this.rangeRT = scene.add.renderTexture(-this.rangeMargin, -this.rangeMargin, rangeFieldW, rangeFieldH)
|
|
.setOrigin(0, 0).setScale(FIELD_DIV);
|
|
this.root.add(this.rangeRT);
|
|
|
|
// Sits behind starLayer (insertion order) so every star sprite paints
|
|
// over the connecting lines this layer draws to its own center.
|
|
this.colonyInfoLayer = scene.add.container(0, 0);
|
|
this.root.add(this.colonyInfoLayer);
|
|
|
|
this.starLayer = scene.add.container(0, 0);
|
|
this.root.add(this.starLayer);
|
|
// The selection reticle sits above the stars and below the fleet markers,
|
|
// so a fleet parked over its own star is never hidden by its own highlight.
|
|
this.selGfx = scene.add.graphics();
|
|
this.root.add(this.selGfx);
|
|
this.routeGfx = scene.add.graphics();
|
|
this.root.add(this.routeGfx);
|
|
this.fleetLayer = scene.add.container(0, 0);
|
|
this.root.add(this.fleetLayer);
|
|
this.labelLayer = scene.add.container(0, 0);
|
|
this.root.add(this.labelLayer);
|
|
|
|
this.buildStars();
|
|
this.drawLanes();
|
|
this.refresh();
|
|
this.centerOn(state.galaxy.homeIdx[Math.max(0, this.viewerIdx)] ?? 0);
|
|
|
|
this.bindInput();
|
|
}
|
|
|
|
// Semantic zoom is keyed to the LADDER INDEX, not an absolute scale. The same
|
|
// scale means different things in different galaxies now that the ladder is
|
|
// built per galaxy — 0.74 is fully zoomed out on a small map and mid-range on
|
|
// a huge one — so an absolute threshold would put the two in different modes
|
|
// while showing the same amount of sky.
|
|
get isFarZoom() { return this.zoomIndex === 0 && this.zooms.length > 1; }
|
|
get isNearZoom() { return this.zoomIndex >= this.zooms.length - 2; }
|
|
|
|
// ------------------------------------------------------------------ setup
|
|
|
|
buildParallax(seed) {
|
|
const rnd = mulberry32(seed * 7919 + 13);
|
|
// Four layers at different rates. The nearest layer is sparse and bright,
|
|
// the far ones dense and dim, which is what sells depth on a pan.
|
|
const layers = [
|
|
{ count: 260, rate: 0.08, size: 1.0, alpha: 0.35 },
|
|
{ count: 180, rate: 0.16, size: 1.4, alpha: 0.5 },
|
|
{ count: 110, rate: 0.28, size: 1.9, alpha: 0.7 },
|
|
{ count: 45, rate: 0.44, size: 2.6, alpha: 0.9 },
|
|
];
|
|
for (const spec of layers) {
|
|
const g = this.scene.add.graphics();
|
|
const stars = [];
|
|
for (let i = 0; i < spec.count; i += 1) {
|
|
const x = rnd() * GAME_WIDTH * 1.6 - GAME_WIDTH * 0.3;
|
|
const y = rnd() * GAME_HEIGHT * 1.6 - GAME_HEIGHT * 0.3;
|
|
const tone = 0.65 + rnd() * 0.35;
|
|
stars.push({ x, y, tone });
|
|
}
|
|
for (const s of stars) {
|
|
const c = Math.round(255 * s.tone);
|
|
g.fillStyle((c << 16) | (c << 8) | 255, spec.alpha);
|
|
g.fillCircle(s.x, s.y, spec.size);
|
|
}
|
|
this.starfield.add(g);
|
|
this.parallax.push({ g, rate: spec.rate, baseX: 0, baseY: 0 });
|
|
}
|
|
}
|
|
|
|
buildStars() {
|
|
const { rules, state, scene } = this;
|
|
this.starSprites = [];
|
|
for (const star of state.galaxy.stars) {
|
|
const cls = rules.starClasses[star.classId];
|
|
const container = scene.add.container(star.x, star.y);
|
|
|
|
const frame = Math.max(0, starFrame(rules, star.classId));
|
|
const body = scene.add.image(0, 0, this.art.stars, frame);
|
|
const scale = (cls.radius * 5.5) / 192;
|
|
body.setScale(scale);
|
|
body.setBlendMode(cls.special === 'blackhole' ? Phaser.BlendModes.NORMAL : Phaser.BlendModes.ADD);
|
|
container.add(body);
|
|
|
|
// Binary companion and pulsar beam are animated in update().
|
|
let companion = null;
|
|
if (cls.special === 'binary') {
|
|
companion = scene.add.image(0, 0, this.art.stars, frame);
|
|
companion.setScale(scale * 0.55).setBlendMode(Phaser.BlendModes.ADD);
|
|
container.add(companion);
|
|
}
|
|
|
|
// Ownership ring, drawn only when the system is settled.
|
|
const ring = scene.add.graphics();
|
|
container.add(ring);
|
|
|
|
// Generous hit area — these are small targets at low zoom.
|
|
const hit = scene.add.circle(0, 0, 30, 0xffffff, 0.001).setInteractive({ useHandCursor: true });
|
|
hit.on('pointerover', () => { this.hoverStar = star.idx; this.cb.onStarHover?.(star.idx); });
|
|
hit.on('pointerout', () => { if (this.hoverStar === star.idx) this.hoverStar = -1; this.cb.onStarHover?.(-1); });
|
|
hit.on('pointerup', (p) => { if (!this.dragged) this.cb.onStarClick?.(star.idx, p); });
|
|
this.tooltip.attachTo(hit, () => {
|
|
const viewer = this.viewerIdx >= 0 ? this.state.empires[this.viewerIdx] : null;
|
|
return describeStarTooltip(this.rules, this.state, viewer, star.idx);
|
|
});
|
|
container.add(hit);
|
|
|
|
this.starLayer.add(container);
|
|
this.starSprites.push({ star, container, body, companion, ring, cls, phase: star.companionAngle });
|
|
}
|
|
}
|
|
|
|
drawLanes() {
|
|
const g = this.laneGfx;
|
|
g.clear();
|
|
for (const lane of this.state.galaxy.lanes) {
|
|
const a = this.state.galaxy.stars[lane.a];
|
|
const b = this.state.galaxy.stars[lane.b];
|
|
// Long lanes fade out — they are geometrically real but visually noise.
|
|
const alpha = Math.max(0.05, 0.3 - lane.parsecs * 0.012);
|
|
g.lineStyle(1.5, 0x4b6fa8, alpha);
|
|
g.lineBetween(a.x, a.y, b.x, b.y);
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------- the fields
|
|
|
|
// "Explored as light": the galaxy is covered in darkness, and each star the
|
|
// player has actually explored (colonised, or had a fleet visit) gets a soft
|
|
// patch erased around it. Deliberately NOT fuel range — reachability is left
|
|
// for the player to work out by trial and error rather than telegraphed on
|
|
// the map.
|
|
// A scratch image reused for every stamp. RenderTexture.erase()/draw() honour
|
|
// a game object's scale and tint, but NOT a bare texture key's — a key is
|
|
// always stamped at its native 256px. Everything here needs a radius that
|
|
// varies, so it all goes through this one object.
|
|
stamp(scale, tint = null, alpha = 1) {
|
|
if (!this._stamp) {
|
|
this._stamp = this.scene.make.image({ key: 'vega-soft-disc', add: false }).setOrigin(0.5, 0.5);
|
|
}
|
|
this._stamp.setScale(scale).setAlpha(alpha);
|
|
if (tint === null) this._stamp.clearTint();
|
|
else this._stamp.setTint(tint);
|
|
return this._stamp;
|
|
}
|
|
|
|
redrawRange() {
|
|
this.rangeDirty = false;
|
|
const rt = this.rangeRT;
|
|
rt.clear();
|
|
if (this.viewerIdx < 0) return; // observer mode sees the whole galaxy
|
|
rt.fill(0x04050b, 0.8);
|
|
|
|
const emp = this.state.empires[this.viewerIdx];
|
|
if (!emp) return;
|
|
// One soft disc per explored star — sized to clear just that star's own
|
|
// neighbourhood, not to bridge gaps into a blanket "sphere of influence"
|
|
// the way the old fuel-range version did (that would re-imply territory
|
|
// the player hasn't actually scouted). The one deliberate exception is
|
|
// below: corridors between the player's OWN colonies specifically.
|
|
const radius = PARSEC_PX * 1.1;
|
|
const img = this.stamp((radius * 2) / 256 / FIELD_DIV);
|
|
for (const star of this.state.galaxy.stars) {
|
|
if (!emp.explored[star.idx]) continue;
|
|
// Stamp coordinates are local to the RT's own buffer, whose origin sits
|
|
// rangeMargin before world (0,0) now — offset to compensate.
|
|
rt.erase(img, (star.x + this.rangeMargin) / FIELD_DIV, (star.y + this.rangeMargin) / FIELD_DIV);
|
|
}
|
|
|
|
// "Controlled space": a Delaunay triangulation of the player's own
|
|
// colonized stars ONLY (never AI, never mere exploration) clears a
|
|
// corridor between geometric neighbors, plus the interior of any
|
|
// resulting triangular face. Recomputed from scratch every redraw off
|
|
// current colony ownership, so a colony that's lost simply drops out —
|
|
// its corridors and any triangles through it vanish with it, with no
|
|
// separate bookkeeping needed.
|
|
const colonized = [...new Set(empireColonies(this.state, emp.idx).map((c) => c.starIdx))]
|
|
.map((idx) => this.state.galaxy.stars[idx]);
|
|
if (colonized.length === 2) {
|
|
this.stampRangeCorridor(rt, colonized[0], colonized[1], radius);
|
|
} else if (colonized.length >= 3) {
|
|
const tris = delaunayTriangulate(colonized.map((s) => ({ x: s.x, y: s.y })));
|
|
for (const [ai, bi, ci] of tris) {
|
|
this.fillRangeTriangle(rt, colonized[ai], colonized[bi], colonized[ci]);
|
|
}
|
|
for (const [ai, bi] of triangulationEdges(tris)) {
|
|
this.stampRangeCorridor(rt, colonized[ai], colonized[bi], radius);
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Soft-edged erased band between two colonies, at RANGE_CORRIDOR_FACTOR
|
|
* of the star discs' own radius — a brush stroke of overlapping stamps of
|
|
* the same soft-disc image the star discs use, for a consistent look. */
|
|
stampRangeCorridor(rt, a, b, starRadius) {
|
|
const corridorRadius = starRadius * RANGE_CORRIDOR_FACTOR;
|
|
const img = this.stamp((corridorRadius * 2) / 256 / FIELD_DIV);
|
|
const dx = b.x - a.x;
|
|
const dy = b.y - a.y;
|
|
const len = Math.hypot(dx, dy);
|
|
const steps = Math.max(1, Math.ceil(len / corridorRadius));
|
|
for (let i = 0; i <= steps; i += 1) {
|
|
const t = i / steps;
|
|
const x = a.x + dx * t + this.rangeMargin;
|
|
const y = a.y + dy * t + this.rangeMargin;
|
|
rt.erase(img, x / FIELD_DIV, y / FIELD_DIV);
|
|
}
|
|
}
|
|
|
|
/** Hard-edged erased fill for one triangular face of the colony mesh. The
|
|
* overlapping soft corridor stamps along its own edges (drawn separately)
|
|
* feather the otherwise-sharp boundary. */
|
|
fillRangeTriangle(rt, a, b, c) {
|
|
if (!this._rangeTriGfx) this._rangeTriGfx = this.scene.make.graphics({ add: false });
|
|
const g = this._rangeTriGfx.clear().fillStyle(0xffffff, 1);
|
|
const m = this.rangeMargin;
|
|
g.fillTriangle(
|
|
(a.x + m) / FIELD_DIV, (a.y + m) / FIELD_DIV,
|
|
(b.x + m) / FIELD_DIV, (b.y + m) / FIELD_DIV,
|
|
(c.x + m) / FIELD_DIV, (c.y + m) / FIELD_DIV,
|
|
);
|
|
rt.erase(g, 0, 0);
|
|
}
|
|
|
|
// Soft empire colour fields instead of hard borders.
|
|
redrawTerritory() {
|
|
this.territoryDirty = false;
|
|
const rt = this.territoryRT;
|
|
rt.clear();
|
|
const viewer = this.viewerIdx >= 0 ? this.state.empires[this.viewerIdx] : null;
|
|
for (const colony of this.state.colonies) {
|
|
const emp = this.state.empires[colony.empireIdx];
|
|
if (!emp) continue;
|
|
if (viewer && !viewer.explored[colony.starIdx]) continue;
|
|
const star = this.state.galaxy.stars[colony.starIdx];
|
|
// Bigger colonies project further, so a homeworld anchors a region and an
|
|
// outpost only tints its own system.
|
|
const spread = Phaser.Math.Clamp(0.7 + colony.pop / 90, 0.7, 2.4);
|
|
const radius = PARSEC_PX * 1.8 * spread;
|
|
const img = this.stamp((radius * 2) / 256 / FIELD_DIV,
|
|
Phaser.Display.Color.HexStringToColor(emp.color).color, 0.85);
|
|
rt.draw(img, star.x / FIELD_DIV, star.y / FIELD_DIV);
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------- rendering
|
|
|
|
refresh() {
|
|
this.redrawRange();
|
|
this.redrawTerritory();
|
|
this.refreshStars();
|
|
this.refreshColonyInfo();
|
|
this.refreshFleets();
|
|
this.refreshLabels();
|
|
}
|
|
|
|
refreshStars() {
|
|
const { state, rules } = this;
|
|
const viewer = this.viewerIdx >= 0 ? state.empires[this.viewerIdx] : null;
|
|
for (const s of this.starSprites) {
|
|
const explored = !viewer || viewer.explored[s.star.idx];
|
|
// Unexplored stars stay visible (dimmed) at every zoom level so there is
|
|
// always something to hover/click for the UNEXPLORED tooltip and a scout
|
|
// target — only their name, ring and system contents are hidden.
|
|
s.container.setVisible(true);
|
|
s.body.setAlpha(explored ? 1 : 0.25);
|
|
|
|
const cols = coloniesAt(state, s.star.idx);
|
|
s.ring.clear();
|
|
if (!cols.length || !explored) continue;
|
|
const owner = state.empires[cols[0].empireIdx];
|
|
const colour = Phaser.Display.Color.HexStringToColor(owner.color).color;
|
|
s.ring.lineStyle(2.5, colour, 0.95);
|
|
s.ring.strokeCircle(0, 0, s.cls.radius * 2.2 + 8);
|
|
if (cols.some((c) => c.capital)) {
|
|
s.ring.lineStyle(1.5, colour, 0.6);
|
|
s.ring.strokeCircle(0, 0, s.cls.radius * 2.2 + 14);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Per-empire colony roster stacked up-left of a colonized star: a thick
|
|
* owner-colored bar over a "name (pop. N)" list, one group per empire that
|
|
* holds a colony at the star, each with its own line running to the star's
|
|
* center. Full text only at the closest zoom tier — same density tier as
|
|
* the "N worlds · M habitable" subtext — to keep the mid-zoom map legible;
|
|
* the two tiers below that still show the bar+line (ownership at a glance)
|
|
* with the text dropped, and the whole block disappears at the farthest
|
|
* tier.
|
|
*/
|
|
refreshColonyInfo() {
|
|
this.colonyInfoLayer.removeAll(true);
|
|
if (this.isFarZoom) return;
|
|
const { state } = this;
|
|
const viewer = this.viewerIdx >= 0 ? state.empires[this.viewerIdx] : null;
|
|
const showText = this.isNearZoom;
|
|
const textSize = Math.round(COLONY_INFO_TEXT_SIZE / Math.max(0.7, this.zoom));
|
|
|
|
for (const s of this.starSprites) {
|
|
if (viewer && !viewer.explored[s.star.idx]) continue;
|
|
const cols = coloniesAt(state, s.star.idx);
|
|
if (!cols.length) continue;
|
|
|
|
const groups = [];
|
|
for (const emp of state.empires) {
|
|
const own = cols.filter((c) => c.empireIdx === emp.idx).sort((a, b) => a.orbit - b.orbit);
|
|
if (!own.length) continue;
|
|
const text = showText ? this.scene.add.text(0, 0, own.map((c) => (
|
|
`${c.name ?? `${s.star.name} ${ORBIT[c.orbit] ?? c.orbit + 1}`} (pop. ${Math.round(c.pop)})`
|
|
)).join('\n'), {
|
|
fontFamily: FONT, fontSize: `${textSize}px`, color: '#f0f4fa', lineSpacing: 2,
|
|
}).setOrigin(1, 0) : null;
|
|
groups.push({ emp, text });
|
|
}
|
|
if (!groups.length) continue;
|
|
|
|
const barWidth = Math.max(COLONY_INFO_MIN_BAR_W, ...groups.map((g) => (g.text ? g.text.width : 0)));
|
|
const blockRightX = s.star.x - COLONY_INFO_GAP_X;
|
|
const totalHeight = groups.reduce((h, g) => (
|
|
h + COLONY_INFO_BAR_H + (g.text ? COLONY_INFO_BAR_TEXT_GAP + g.text.height : 0)
|
|
), 0) + COLONY_INFO_GROUP_GAP * (groups.length - 1);
|
|
let y = s.star.y - COLONY_INFO_GAP_Y - totalHeight;
|
|
|
|
const lines = this.scene.add.graphics();
|
|
this.colonyInfoLayer.add(lines);
|
|
for (const g of groups) {
|
|
const colour = Phaser.Display.Color.HexStringToColor(g.emp.color).color;
|
|
const bar = this.scene.add.rectangle(
|
|
blockRightX - barWidth / 2, y + COLONY_INFO_BAR_H / 2, barWidth, COLONY_INFO_BAR_H, colour,
|
|
).setStrokeStyle(2, 0x000000, 0.85);
|
|
this.colonyInfoLayer.add(bar);
|
|
lines.lineStyle(3, colour, 0.7);
|
|
lines.lineBetween(blockRightX, y + COLONY_INFO_BAR_H / 2, s.star.x, s.star.y);
|
|
|
|
let groupHeight = COLONY_INFO_BAR_H;
|
|
if (g.text) {
|
|
g.text.setPosition(blockRightX, y + COLONY_INFO_BAR_H + COLONY_INFO_BAR_TEXT_GAP);
|
|
this.colonyInfoLayer.add(g.text);
|
|
groupHeight += COLONY_INFO_BAR_TEXT_GAP + g.text.height;
|
|
}
|
|
|
|
y += groupHeight + COLONY_INFO_GROUP_GAP;
|
|
}
|
|
}
|
|
}
|
|
|
|
refreshFleets() {
|
|
this.fleetLayer.removeAll(true);
|
|
const { state, rules } = this;
|
|
const viewer = this.viewerIdx >= 0 ? state.empires[this.viewerIdx] : null;
|
|
this.fleetMarkers = [];
|
|
|
|
// Fleets docked at a star (starIdx >= 0) are grouped per star and sorted
|
|
// by empire so a given species' icon(s) land adjacent in the fan — see
|
|
// refreshFleets' position math below.
|
|
const dockedByStar = new Map();
|
|
for (const fleet of state.fleets) {
|
|
if (fleet.starIdx < 0) continue;
|
|
if (!dockedByStar.has(fleet.starIdx)) dockedByStar.set(fleet.starIdx, []);
|
|
dockedByStar.get(fleet.starIdx).push(fleet);
|
|
}
|
|
for (const group of dockedByStar.values()) group.sort((a, b) => a.empireIdx - b.empireIdx);
|
|
|
|
for (const fleet of state.fleets) {
|
|
const emp = state.empires[fleet.empireIdx];
|
|
if (!emp) continue;
|
|
const own = fleet.empireIdx === this.viewerIdx;
|
|
let x;
|
|
let y;
|
|
if (fleet.starIdx >= 0) {
|
|
const star = state.galaxy.stars[fleet.starIdx];
|
|
if (viewer && !own && !viewer.explored[fleet.starIdx]) continue;
|
|
const slot = dockedByStar.get(fleet.starIdx).indexOf(fleet);
|
|
x = star.x + FLEET_STAGGER_DX + (slot % 2 === 1 ? FLEET_STAGGER_ZIGZAG : 0);
|
|
y = star.y + FLEET_STAGGER_DY0 - slot * FLEET_STAGGER_STEP;
|
|
} else {
|
|
const a = state.galaxy.stars[fleet.fromStar];
|
|
const b = state.galaxy.stars[fleet.toStar];
|
|
if (!a || !b) continue;
|
|
if (viewer && !own && !viewer.explored[fleet.toStar]) continue;
|
|
const t = fleet.total > 0 ? Phaser.Math.Clamp(fleet.progress / fleet.total, 0, 1) : 0;
|
|
// Offset up-left of the lane so a fleet just leaving its origin star
|
|
// doesn't sit directly on top of it and block the star's own click target.
|
|
x = a.x + (b.x - a.x) * t - 26;
|
|
y = a.y + (b.y - a.y) * t - 22;
|
|
}
|
|
|
|
const colour = Phaser.Display.Color.HexStringToColor(emp.color).color;
|
|
const c = this.scene.add.container(x, y);
|
|
|
|
// Fleets in transit render as a comet: a bright head with a trail back
|
|
// along the lane, plus tick marks for the turns still to run.
|
|
if (fleet.starIdx < 0) {
|
|
const a = state.galaxy.stars[fleet.fromStar];
|
|
const b = state.galaxy.stars[fleet.toStar];
|
|
const ang = Math.atan2(b.y - a.y, b.x - a.x);
|
|
const trail = this.scene.add.graphics();
|
|
for (let i = 1; i <= 8; i += 1) {
|
|
trail.fillStyle(colour, 0.42 * (1 - i / 9));
|
|
trail.fillCircle(-Math.cos(ang) * i * 7, -Math.sin(ang) * i * 7, 5 - i * 0.45);
|
|
}
|
|
c.add(trail);
|
|
if (own) {
|
|
const eta = fleetEta(rules, state, fleet);
|
|
const label = this.scene.add.text(0, -20, `${Number.isFinite(eta) ? eta : '—'}`, {
|
|
fontFamily: FONT, fontSize: '15px', color: '#cfe3ff',
|
|
}).setOrigin(0.5);
|
|
c.add(label);
|
|
}
|
|
}
|
|
|
|
const head = this.scene.add.graphics();
|
|
head.fillStyle(colour, 1);
|
|
head.fillCircle(0, 0, 6);
|
|
head.lineStyle(1.5, 0xffffff, 0.75);
|
|
head.strokeCircle(0, 0, 6);
|
|
c.add(head);
|
|
|
|
const hit = this.scene.add.circle(0, 0, 16, 0xffffff, 0.001).setInteractive({ useHandCursor: true });
|
|
hit.on('pointerup', () => { if (!this.dragged) this.cb.onFleetClick?.(fleet); });
|
|
hit.on('pointerover', () => this.cb.onFleetHover?.(fleet));
|
|
hit.on('pointerout', () => this.cb.onFleetHover?.(null));
|
|
c.add(hit);
|
|
|
|
this.fleetLayer.add(c);
|
|
this.fleetMarkers.push({ fleet, container: c });
|
|
}
|
|
}
|
|
|
|
refreshLabels() {
|
|
this.labelLayer.removeAll(true);
|
|
const { state } = this;
|
|
const viewer = this.viewerIdx >= 0 ? state.empires[this.viewerIdx] : null;
|
|
// At the widest zoom the map shows empire names over their territory
|
|
// instead of a fog of unreadable star labels.
|
|
if (this.isFarZoom) {
|
|
for (const emp of state.empires) {
|
|
if (!emp.alive) continue;
|
|
const cols = empireColonies(state, emp.idx);
|
|
if (!cols.length) continue;
|
|
if (viewer && emp.idx !== viewer.idx && !viewer.contacted[emp.idx]) continue;
|
|
const cx = cols.reduce((t, c) => t + state.galaxy.stars[c.starIdx].x, 0) / cols.length;
|
|
const cy = cols.reduce((t, c) => t + state.galaxy.stars[c.starIdx].y, 0) / cols.length;
|
|
const t = this.scene.add.text(cx, cy, emp.name.toUpperCase(), {
|
|
fontFamily: FONT, fontSize: `${Math.round(46 / this.zoom)}px`, color: emp.color,
|
|
}).setOrigin(0.5).setAlpha(0.55);
|
|
this.labelLayer.add(t);
|
|
}
|
|
return;
|
|
}
|
|
|
|
for (const s of this.starSprites) {
|
|
if (viewer && !viewer.explored[s.star.idx]) continue;
|
|
const cols = coloniesAt(state, s.star.idx);
|
|
const owner = cols.length ? state.empires[cols[0].empireIdx] : null;
|
|
const label = this.scene.add.text(s.star.x, s.star.y + s.cls.radius * 2.2 + 14, s.star.name, {
|
|
fontFamily: FONT, fontSize: `${Math.round(17 / Math.max(0.7, this.zoom))}px`,
|
|
color: owner ? owner.color : '#9fb3cc',
|
|
}).setOrigin(0.5, 0);
|
|
this.labelLayer.add(label);
|
|
|
|
// Closest zoom adds the system's contents.
|
|
if (this.isNearZoom) {
|
|
// "Habitable" here means settleable at the viewer's CURRENT
|
|
// planetology, not just the planet type's static ceiling — a Radiated
|
|
// world is colonizable in principle but still shows as 0/1 until tech
|
|
// catches up, matching what the system view's colonize button says.
|
|
const habitable = viewer
|
|
? s.star.planets.filter((p, orbit) => habitableForEmpire(this.rules, state, viewer.idx, s.star.idx, orbit)).length
|
|
: s.star.planets.filter((p) => this.rules.planetTypes[p.typeId].colonizable).length;
|
|
if (s.star.planets.length) {
|
|
const sub = this.scene.add.text(
|
|
s.star.x, s.star.y + s.cls.radius * 2.2 + 32,
|
|
`${s.star.planets.length} worlds · ${habitable} habitable`,
|
|
{ fontFamily: FONT, fontSize: '13px', color: '#6f8199' },
|
|
).setOrigin(0.5, 0);
|
|
this.labelLayer.add(sub);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------- selection
|
|
|
|
/** Ring the system the command panel is currently talking about. -1 clears. */
|
|
setSelectedStar(idx) {
|
|
this.selectedStar = idx ?? -1;
|
|
this.selectedFleet = null;
|
|
this.clearRoutePreview();
|
|
this.drawSelection();
|
|
}
|
|
|
|
/**
|
|
* Ring a specific fleet marker instead of the star it happens to be at.
|
|
* A fleet that is already underway (or has a standing order) gets the same
|
|
* flowing route drawn to its live destination — tracked by reference so it
|
|
* keeps pace with the fleet as it moves, not a snapshot of where it was.
|
|
*/
|
|
setSelectedFleet(fleet) {
|
|
this.selectedFleet = fleet ?? null;
|
|
this.selectedStar = -1;
|
|
if (fleet && fleet.toStar >= 0) {
|
|
this.routePreview = { fleet };
|
|
} else {
|
|
this.routePreview = null;
|
|
}
|
|
this.routeGfx.clear();
|
|
this.drawSelection();
|
|
if (this.routePreview) this.drawRoutePreview();
|
|
}
|
|
|
|
/** Flowing dashes from `fromIdx` to `toIdx` — the route a pending order will fly. */
|
|
setRoutePreview(fromIdx, toIdx) {
|
|
if (fromIdx == null || toIdx == null || fromIdx < 0 || toIdx < 0) {
|
|
this.clearRoutePreview();
|
|
return;
|
|
}
|
|
this.routePreview = { from: fromIdx, to: toIdx };
|
|
this.drawRoutePreview();
|
|
}
|
|
|
|
clearRoutePreview() {
|
|
this.routePreview = null;
|
|
this.routeGfx.clear();
|
|
}
|
|
|
|
/** Resolve the preview's start/end points — either a fixed star pair (a
|
|
* pending click-to-order) or a live fleet reference (an underway fleet
|
|
* tracked to its destination as it flies). */
|
|
resolveRouteEndpoints() {
|
|
const rp = this.routePreview;
|
|
if (!rp) return null;
|
|
if (rp.fleet) {
|
|
const f = rp.fleet;
|
|
if (!this.state.fleets.includes(f) || f.toStar < 0) return null;
|
|
const dest = this.state.galaxy.stars[f.toStar];
|
|
if (!dest) return null;
|
|
let ax;
|
|
let ay;
|
|
if (f.starIdx >= 0) {
|
|
// Read the marker's actual on-screen position rather than
|
|
// recomputing the offset — docked fleets are staggered per-star, so
|
|
// the offset depends on how many other fleets share that star.
|
|
const marker = this.fleetMarkers?.find((m) => m.fleet === f);
|
|
if (!marker) return null;
|
|
ax = marker.container.x;
|
|
ay = marker.container.y;
|
|
} else {
|
|
const from = this.state.galaxy.stars[f.fromStar];
|
|
if (!from) return null;
|
|
const t = f.total > 0 ? Phaser.Math.Clamp(f.progress / f.total, 0, 1) : 0;
|
|
ax = from.x + (dest.x - from.x) * t - 26;
|
|
ay = from.y + (dest.y - from.y) * t - 22;
|
|
}
|
|
return {
|
|
ax, ay, bx: dest.x, by: dest.y,
|
|
};
|
|
}
|
|
const from = this.state.galaxy.stars[rp.from];
|
|
const to = this.state.galaxy.stars[rp.to];
|
|
if (!from || !to) return null;
|
|
return {
|
|
ax: from.x, ay: from.y, bx: to.x, by: to.y,
|
|
};
|
|
}
|
|
|
|
drawRoutePreview() {
|
|
const g = this.routeGfx;
|
|
g.clear();
|
|
const pts = this.resolveRouteEndpoints();
|
|
if (!pts) return;
|
|
const a = { x: pts.ax, y: pts.ay };
|
|
const b = { x: pts.bx, y: pts.by };
|
|
const dx = b.x - a.x;
|
|
const dy = b.y - a.y;
|
|
const len = Math.hypot(dx, dy);
|
|
if (len < 1) return;
|
|
const ux = dx / len;
|
|
const uy = dy / len;
|
|
|
|
// Marching dashes: a fixed dash/gap pattern whose phase slides toward the
|
|
// destination, reading as a current flowing along the route rather than a
|
|
// static line — the "ship will fly this way" cue the ring around the
|
|
// target star used to give less directly.
|
|
const dash = 22;
|
|
const gap = 16;
|
|
const period = dash + gap;
|
|
const speed = 90;
|
|
// d advances with time (not -phase) so the dashes drift from `a` toward
|
|
// `b` — matching the ship's actual direction of travel, not the reverse.
|
|
const phase = ((this.time / 1000) * speed) % period;
|
|
g.lineStyle(3, 0x9fd8ff, 0.85);
|
|
for (let d = phase - period; d < len; d += period) {
|
|
const s = Math.max(d, 0);
|
|
const e = Math.min(d + dash, len);
|
|
if (e <= s) continue;
|
|
g.beginPath();
|
|
g.moveTo(a.x + ux * s, a.y + uy * s);
|
|
g.lineTo(a.x + ux * e, a.y + uy * e);
|
|
g.strokePath();
|
|
}
|
|
|
|
// Arrowhead planted on the destination star, pointing along the route.
|
|
const ang = Math.atan2(dy, dx);
|
|
const ah = 11;
|
|
const tip = { x: b.x - ux * 6, y: b.y - uy * 6 };
|
|
g.fillStyle(0x9fd8ff, 0.9);
|
|
g.beginPath();
|
|
g.moveTo(tip.x, tip.y);
|
|
g.lineTo(tip.x - Math.cos(ang - 2.6) * ah, tip.y - Math.sin(ang - 2.6) * ah);
|
|
g.lineTo(tip.x - Math.cos(ang + 2.6) * ah, tip.y - Math.sin(ang + 2.6) * ah);
|
|
g.closePath();
|
|
g.fillPath();
|
|
}
|
|
|
|
drawSelection() {
|
|
const g = this.selGfx;
|
|
g.clear();
|
|
let cx;
|
|
let cy;
|
|
let r;
|
|
if (this.selectedFleet) {
|
|
const marker = this.fleetMarkers?.find((m) => m.fleet === this.selectedFleet);
|
|
if (!marker) return;
|
|
cx = marker.container.x;
|
|
cy = marker.container.y;
|
|
r = 20;
|
|
} else {
|
|
const s = this.starSprites?.[this.selectedStar];
|
|
if (!s) return;
|
|
cx = s.star.x;
|
|
cy = s.star.y;
|
|
r = s.cls.radius * 2.2 + 20;
|
|
}
|
|
// Four arcs rather than a circle: a broken reticle stays legible on top of
|
|
// an ownership ring, which a second full circle would not.
|
|
const spin = (this.time / 1000) * 0.5;
|
|
g.lineStyle(2, 0x9fd8ff, 0.95);
|
|
for (let i = 0; i < 4; i += 1) {
|
|
const a = spin + (i * Math.PI) / 2;
|
|
g.beginPath();
|
|
g.arc(cx, cy, r, a, a + 0.7);
|
|
g.strokePath();
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------- animation
|
|
|
|
update(_time, delta) {
|
|
this.time += delta;
|
|
const t = this.time / 1000;
|
|
|
|
if (this.selectedStar >= 0 || this.selectedFleet) this.drawSelection();
|
|
if (this.routePreview) this.drawRoutePreview();
|
|
|
|
for (const s of this.starSprites) {
|
|
if (s.cls.special === 'pulsar') {
|
|
s.body.setRotation(t * 1.4);
|
|
} else if (s.cls.special === 'binary' && s.companion) {
|
|
const a = s.phase + t * 0.7;
|
|
const r = s.cls.radius * 1.9;
|
|
s.companion.setPosition(Math.cos(a) * r, Math.sin(a) * r * 0.55);
|
|
s.body.setPosition(-Math.cos(a) * r * 0.35, -Math.sin(a) * r * 0.2);
|
|
} else if (s.cls.special === 'blackhole') {
|
|
s.body.setRotation(-t * 0.35);
|
|
} else {
|
|
// A slow breath so the map is never completely static.
|
|
s.body.setAlpha(0.88 + Math.sin(t * 1.2 + s.star.idx) * 0.12);
|
|
}
|
|
}
|
|
|
|
// Parallax follows the camera, each layer at its own rate.
|
|
for (const layer of this.parallax) {
|
|
layer.g.setPosition(this.root.x * layer.rate, this.root.y * layer.rate);
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------- camera
|
|
|
|
// Keep the viewport close to the galaxy, with PAN_SLACK of give on every
|
|
// side. An earlier version clamped with zero slack, which was airtight but
|
|
// meant the map's edge sat pinned exactly at the screen edge at the bottom
|
|
// of the zoom ladder — right where the command panel docks — so an edge
|
|
// star there could never be dragged out from under the panel. PAN_SLACK
|
|
// fixes that while still bounding how much empty space beyond the galaxy
|
|
// can ever be revealed.
|
|
clampPan() {
|
|
const w = this.worldW * this.zoom;
|
|
const h = this.worldH * this.zoom;
|
|
this.root.x = w + PAN_SLACK * 2 >= GAME_WIDTH
|
|
? Phaser.Math.Clamp(this.root.x, GAME_WIDTH - w - PAN_SLACK, PAN_SLACK)
|
|
: (GAME_WIDTH - w) / 2;
|
|
this.root.y = h + PAN_SLACK * 2 >= GAME_HEIGHT
|
|
? Phaser.Math.Clamp(this.root.y, GAME_HEIGHT - h - PAN_SLACK, PAN_SLACK)
|
|
: (GAME_HEIGHT - h) / 2;
|
|
}
|
|
|
|
applyZoom(newIndex, focusX = GAME_WIDTH / 2, focusY = GAME_HEIGHT / 2) {
|
|
const idx = Phaser.Math.Clamp(newIndex, 0, this.zooms.length - 1);
|
|
if (idx === this.zoomIndex) return;
|
|
playSound(this.scene, idx > this.zoomIndex ? SFX.VEGA_ZOOMIN : SFX.VEGA_ZOOMOUT);
|
|
const old = this.zoom;
|
|
const next = this.zooms[idx];
|
|
// Keep whatever is under the cursor under the cursor.
|
|
const worldX = (focusX - this.root.x) / old;
|
|
const worldY = (focusY - this.root.y) / old;
|
|
this.zoomIndex = idx;
|
|
this.zoom = next;
|
|
this.root.setScale(next);
|
|
this.root.x = focusX - worldX * next;
|
|
this.root.y = focusY - worldY * next;
|
|
this.clampPan();
|
|
this.refreshLabels();
|
|
this.refreshStars();
|
|
this.refreshColonyInfo();
|
|
this.cb.onZoom?.(next);
|
|
}
|
|
|
|
centerOn(starIdx) {
|
|
const star = this.state.galaxy.stars[starIdx];
|
|
if (!star) return;
|
|
this.root.setScale(this.zoom);
|
|
this.root.x = GAME_WIDTH / 2 - star.x * this.zoom;
|
|
this.root.y = GAME_HEIGHT / 2 - star.y * this.zoom;
|
|
this.clampPan();
|
|
}
|
|
|
|
panToStar(starIdx, duration = 420) {
|
|
const star = this.state.galaxy.stars[starIdx];
|
|
if (!star) return;
|
|
const targetX = GAME_WIDTH / 2 - star.x * this.zoom;
|
|
const targetY = GAME_HEIGHT / 2 - star.y * this.zoom;
|
|
this.scene.tweens.add({
|
|
targets: this.root,
|
|
x: targetX,
|
|
y: targetY,
|
|
duration,
|
|
ease: 'Sine.easeInOut',
|
|
onComplete: () => this.clampPan(),
|
|
});
|
|
}
|
|
|
|
bindInput() {
|
|
const scene = this.scene;
|
|
this.dragged = false;
|
|
let dragging = false;
|
|
let startX = 0;
|
|
let startY = 0;
|
|
let originX = 0;
|
|
let originY = 0;
|
|
|
|
scene.input.on('pointerdown', (p) => {
|
|
// A drag that starts on the command panel scrolls nothing — otherwise
|
|
// dialling a ship count would pan the galaxy out from under the panel.
|
|
if (this.cb.blockPointer?.(p)) return;
|
|
dragging = true;
|
|
this.dragged = false;
|
|
startX = p.x; startY = p.y;
|
|
originX = this.root.x; originY = this.root.y;
|
|
});
|
|
scene.input.on('pointermove', (p) => {
|
|
if (!dragging) return;
|
|
const dx = p.x - startX;
|
|
const dy = p.y - startY;
|
|
// An 8px threshold so a slightly shaky click still selects a star.
|
|
if (Math.abs(dx) > 8 || Math.abs(dy) > 8) this.dragged = true;
|
|
if (!this.dragged) return;
|
|
this.root.x = originX + dx;
|
|
this.root.y = originY + dy;
|
|
this.clampPan();
|
|
});
|
|
// Phaser emits the game objects' own pointerup handlers first and then this
|
|
// one, with everything under the cursor in `objs` — so an empty list is a
|
|
// genuine click on the void, which is how the panel gets dismissed.
|
|
scene.input.on('pointerup', (p, objs) => {
|
|
dragging = false;
|
|
if (!this.dragged && (!objs || objs.length === 0) && !this.cb.blockPointer?.(p)) {
|
|
this.cb.onEmptyClick?.(p);
|
|
}
|
|
});
|
|
scene.input.on('wheel', (p, _objs, _dx, dy) => {
|
|
if (this.cb.blockWheel?.(p) || this.cb.blockPointer?.(p)) return;
|
|
this.applyZoom(this.zoomIndex + (dy > 0 ? -1 : 1), p.x, p.y);
|
|
});
|
|
}
|
|
|
|
setViewer(idx) { this.viewerIdx = idx; this.rangeDirty = true; this.refresh(); }
|
|
|
|
destroy() {
|
|
this.tooltip.destroy();
|
|
this.nebula?.destroy();
|
|
this.bgLayer.destroy();
|
|
this.starfield.destroy();
|
|
this.root.destroy();
|
|
}
|
|
}
|