328 lines
14 KiB
JavaScript
328 lines
14 KiB
JavaScript
// The world map view. It owns no game logic: the server generates and
|
|
// simulates the world, and this class rebuilds the terrain once from the shared
|
|
// seed and mirrors units, cities, territory and fog from each snapshot, then
|
|
// turns pointer input into selection and move orders. All rendering is done
|
|
// with ordinary DOM elements, as required.
|
|
//
|
|
// The behaviour is split across the modules in ./map_view/ and composed onto the
|
|
// prototype below, so each concern (terrain, entities, motion, input) stays in
|
|
// its own file.
|
|
|
|
import { terrainMethods } from "./map_view/terrain.js";
|
|
import { entityMethods } from "./map_view/entities.js";
|
|
import { motionMethods } from "./map_view/motion.js";
|
|
import { inputMethods } from "./map_view/input.js";
|
|
import { politicalMethods } from "./map_view/political.js";
|
|
import { modeMethods } from "./map_view/modes.js";
|
|
import { createGLMapRenderer } from "./map_view/webgl.js";
|
|
import { detectCapabilities } from "./capabilities.js";
|
|
import { CAMERA_TILT } from "./map_view/constants.js";
|
|
|
|
// Re-exported for tests and callers that use the border geometry directly.
|
|
export { inwardOffset } from "./map_view/utils.js";
|
|
|
|
export class MapView {
|
|
constructor($viewport, $world, layers, options = {}) {
|
|
this.$viewport = $viewport;
|
|
this.$world = $world;
|
|
this.$terrain = layers.terrain;
|
|
this.$roads = layers.roads && layers.roads.length
|
|
? layers.roads
|
|
: $("#layer-roads");
|
|
this.$borders = layers.borders;
|
|
this.$fog = layers.fog;
|
|
// The outline drawn over the selected or inspected tile. It sits above the
|
|
// terrain and fog but below the unit, target and city icons.
|
|
this.$highlight = layers.highlight && layers.highlight.length
|
|
? layers.highlight
|
|
: $("#layer-highlight");
|
|
if (!this.$highlight.length) {
|
|
this.$highlight = $('<div id="layer-highlight" class="layer"></div>');
|
|
if (this.$fog && this.$fog.length) this.$fog.after(this.$highlight);
|
|
else this.$world.append(this.$highlight);
|
|
}
|
|
this.$paths = layers.paths;
|
|
// Bombardment target lines and rings, drawn over the terrain and paths but
|
|
// under the unit and city icons.
|
|
this.$targets = layers.targets && layers.targets.length
|
|
? layers.targets
|
|
: $("#layer-targets");
|
|
// Resource storage nodes and delivery legs, drawn in the economic map
|
|
// modes so the delivery graph is never visible on the political map.
|
|
this.$resources = layers.resources && layers.resources.length
|
|
? layers.resources
|
|
: $("#layer-resources");
|
|
if (!this.$resources.length) {
|
|
this.$resources = $('<div id="layer-resources" class="layer"></div>');
|
|
if (this.$targets && this.$targets.length) this.$targets.after(this.$resources);
|
|
else this.$world.append(this.$resources);
|
|
}
|
|
this.resourceGraph = { nodes: [], links: [], edges: [] };
|
|
// The merchandise icons riding the delivery legs, repositioned every frame.
|
|
this._deliveryMovers = [];
|
|
// Sibling containers that mirror each icon layer at whole-period offsets so
|
|
// a cylindrical world is drawn repeated (see `_syncWrapCopies`).
|
|
this._wrapCopies = [];
|
|
// City-to-city migration over the last month, drawn instead of the delivery
|
|
// graph while the population map is active.
|
|
this.migrationGraph = { links: [] };
|
|
this.$entities = layers.entities;
|
|
// City names live on their own layer above the entities so they are never
|
|
// hidden behind a unit or city marker.
|
|
this.$labels = layers.labels && layers.labels.length
|
|
? layers.labels
|
|
: $("#layer-labels");
|
|
if (!this.$labels.length) {
|
|
this.$labels = $('<div id="layer-labels" class="layer city-label-layer"></div>');
|
|
this.$world.append(this.$labels);
|
|
}
|
|
// Country names for the political map live below the city labels, so a city
|
|
// name is never hidden behind a (much larger) country name.
|
|
this.$politicalLabels = layers.politicalLabels && layers.politicalLabels.length
|
|
? layers.politicalLabels
|
|
: $("#layer-political-labels");
|
|
if (!this.$politicalLabels.length) {
|
|
this.$politicalLabels = $('<div id="layer-political-labels" class="layer country-label-layer"></div>');
|
|
// Keep the names under the icon layers even when the layer was missing
|
|
// from the page: insert before the first overlay rather than on top.
|
|
if (this.$highlight && this.$highlight.length) {
|
|
this.$politicalLabels.insertBefore(this.$highlight);
|
|
} else {
|
|
this.$world.append(this.$politicalLabels);
|
|
}
|
|
}
|
|
|
|
// The orthographic camera tilts the ground plane, so the terrain and every
|
|
// ground overlay are scaled on Y while the sprite layers stay upright.
|
|
this.$viewport[0].style.setProperty("--camera-tilt", String(CAMERA_TILT));
|
|
for (const $layer of [
|
|
this.$terrain, this.$roads, this.$borders, this.$fog,
|
|
this.$highlight, this.$paths, this.$targets, this.$resources,
|
|
]) {
|
|
if ($layer && $layer.length) $layer.addClass("tilted");
|
|
}
|
|
|
|
this.seed = -1;
|
|
// Signature of the terrain currently built, so a snapshot with the same
|
|
// seed and config does not rebuild the world.
|
|
this._terrainSignature = null;
|
|
this.mapConfig = null;
|
|
this.topology = null;
|
|
this.tiles = {};
|
|
this.terrainStats = null;
|
|
this.explored = new Set();
|
|
this.visible = new Set();
|
|
this.territory = new Map();
|
|
// Each land tile's region, keyed "x,y" and mapped to the region's city id.
|
|
this.regions = new Map();
|
|
// Pre-generated and player-built road tiles, keyed "x,y".
|
|
this.roads = new Set();
|
|
// Player-built railway tiles, keyed "x,y". A tile is a road or a railway.
|
|
this.railways = new Set();
|
|
// Trenches, and military improvements keyed "x,y" -> { id, owner, hp }.
|
|
this.trenches = new Set();
|
|
this.tileImprovements = new Map();
|
|
this._warfareSignature = null;
|
|
this._warfareViews = new Map();
|
|
this.civilisations = [];
|
|
this.localCiv = -1;
|
|
this.protoUnits = [];
|
|
// Battlefield tiles, keyed "x,y" and mapped to { defender, attacker }.
|
|
this._battles = new Map();
|
|
// The active map mode, plus the effective fills derived from it. `political`
|
|
// is also true while terrain mode is zoomed far out; `economic` is true for
|
|
// the GDP/population modes and comes with a per-tile value map and range.
|
|
this.mapMode = options.mapMode || "terrain";
|
|
this.political = false;
|
|
this.economic = false;
|
|
this.economicKind = null;
|
|
this.economicValues = new Map();
|
|
this.economicRange = { min: 0, max: 0 };
|
|
// Value transform for the active economic mode (population reads logs).
|
|
this.economicScale = null;
|
|
// The viewer's trains-technology rail bonus, mirrored so predicted movement
|
|
// along railways matches the server.
|
|
this.railSpeed = 0;
|
|
this._economicSignatureDone = null;
|
|
// WebGL fog is rebuilt from the frame loop, coalesced (see `_flushFog`),
|
|
// and only for the band of rows on screen.
|
|
this._fogDirty = false;
|
|
this._fogBuiltAt = 0;
|
|
// The row band the fog mesh currently covers, so a pan inside it needs no
|
|
// rebuild.
|
|
this._fogCover = undefined;
|
|
// Tiles whose visibility changed since the last flush, patched per tile.
|
|
this._fogChanged = null;
|
|
// The colour scale shown while an economic mode is active.
|
|
this.$legend = $("#map-legend");
|
|
this.$legendGraph = $("#map-legend-graph");
|
|
this.$legendGraphTitle = $("#map-legend-graph-title");
|
|
this.$legendResources = $("#map-legend-resources");
|
|
this._labelSvg = null;
|
|
this._labelEntries = [];
|
|
this._countryLabels = [];
|
|
|
|
this.camera = { x: 0, y: 0, zoom: 1.0 };
|
|
this._centered = false;
|
|
this._selectedUnitIds = new Set();
|
|
this._selectedTile = null;
|
|
// Region (city id) of the selected/inspected tile, highlighted as a whole.
|
|
this._selectedRegion = null;
|
|
// Lazily built SVG outline for the selected/inspected tile.
|
|
this._highlightEl = null;
|
|
this._highlightPoly = null;
|
|
this._highlightSolid = null;
|
|
this._highlightHidden = null;
|
|
|
|
this._unitViews = new Map();
|
|
this._unitMotion = new Map();
|
|
this._unitData = new Map();
|
|
this._cityViews = new Map();
|
|
this._cityCiv = new Map();
|
|
this._battleViews = new Map();
|
|
// Reused nodes for the bombardment overlay, plus the throttle state that
|
|
// keeps it from being rebuilt every animation frame (see `_drawStrikeTargets`).
|
|
this._targetViews = new Map();
|
|
this._targetSvg = null;
|
|
this._strikeTick = null;
|
|
this._strikeSignature = "";
|
|
// In-flight pathfinding job, cancelled when a newer request supersedes it.
|
|
this._pathToken = null;
|
|
this._maxStepLength = 1.0;
|
|
|
|
this._territorySignature = "";
|
|
this._regionsSignature = null;
|
|
this._territoryVersion = undefined;
|
|
this._regionsVersion = undefined;
|
|
this._improvementsSignature = null;
|
|
this._exploredCount = -1;
|
|
this._visibleSignature = null;
|
|
|
|
// Cylindrical wrap state. `_period` is the horizontal pixel period (0 on a
|
|
// flat map); every entity is shifted to the copy nearest the camera.
|
|
this._period = 0;
|
|
this._textureRepeat = 0;
|
|
this._worldWidth = 0;
|
|
this._worldHeight = 0;
|
|
this._worldMinX = 0;
|
|
this._worldMinY = 0;
|
|
// Chunked detailed layers: only the chunks near the viewport exist as DOM.
|
|
// The tile wrappers are pooled so panning recycles nodes instead of
|
|
// allocating a fresh one for every tile that scrolls in.
|
|
this._chunkSize = 0;
|
|
this._chunkCols = 0;
|
|
this._chunkRows = 0;
|
|
this._chunks = new Map();
|
|
this._chunkCache = new Map();
|
|
this._chunkCacheLimit = 0;
|
|
this._chunkOriginCache = new Map();
|
|
this._chunkView = { x: null, y: null, zoom: null };
|
|
this._chunkDirty = true;
|
|
this._hexPool = [];
|
|
this._borderPool = [];
|
|
this._roadPool = [];
|
|
this._wrapperPool = [];
|
|
|
|
this.onUnitSelected = () => {};
|
|
this.onCitySelected = () => {};
|
|
this.onCityOpened = () => {};
|
|
this.onTileRequested = () => {};
|
|
this.onMoveOrdered = () => {};
|
|
this.onAttackOrdered = () => {};
|
|
this.onScheduleOrdered = () => {};
|
|
this.onStackMenu = () => {};
|
|
|
|
// The map (terrain, roads, borders, fog) is drawn on a WebGL canvas when
|
|
// the browser provides a context; the icon layers stay DOM.
|
|
// "dom" forces the classic renderer (tests, benchmark, troubleshooting).
|
|
this.glRenderer = null;
|
|
this.glCanvas = null;
|
|
this.rendererMode = options.renderer || "auto";
|
|
// Set when the GPU renderer is not used: "webgl-unavailable" (no context, a
|
|
// shader/limit failure) or "software" (a CPU rasteriser, slower than DOM).
|
|
this.rendererFallback = null;
|
|
// Lazily built capability report for the fallback notice (see
|
|
// `capabilityReport`); null until asked for.
|
|
this.capabilities = null;
|
|
if (this.rendererMode !== "dom") this._setupGLRenderer();
|
|
|
|
// The repeat copies are icon-layer siblings; set them up once the renderer
|
|
// (and therefore whether the ground repeats on its own) is known.
|
|
this._setupWrapCopies();
|
|
|
|
this._setupCameraInput();
|
|
}
|
|
|
|
_setupGLRenderer() {
|
|
// The viewport element survives between games; drop any canvas a previous
|
|
// MapView left behind so contexts do not accumulate.
|
|
const previous = this.$viewport[0].querySelector("#map-canvas");
|
|
if (previous) previous.remove();
|
|
const canvas = document.createElement("canvas");
|
|
canvas.id = "map-canvas";
|
|
const world = this.$world[0];
|
|
if (world.parentNode) world.parentNode.insertBefore(canvas, world);
|
|
const renderer = createGLMapRenderer(canvas);
|
|
if (!renderer) {
|
|
if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
|
|
this.rendererFallback = "webgl-unavailable";
|
|
return;
|
|
}
|
|
// A CPU rasteriser (no usable GPU) can be slower than the DOM renderer.
|
|
// In auto mode, keep the DOM path there; "webgl" forces the canvas.
|
|
if (this.rendererMode === "auto" && renderer.softwareRenderer()) {
|
|
renderer.dispose();
|
|
if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
|
|
this.rendererFallback = "software";
|
|
return;
|
|
}
|
|
this.glRenderer = renderer;
|
|
this.glCanvas = canvas;
|
|
this.$world.addClass("gl-render");
|
|
}
|
|
|
|
// A detailed, cached report of every WebGL/WASM feature this client needs.
|
|
// Only meaningful when the GPU renderer was not used; it probes a throwaway
|
|
// context, so it is built on demand (when the fallback notice appears) rather
|
|
// than in the constructor. `mapSize` sharpens the texture-size requirement to
|
|
// the map being played; it falls back to the world already built, if any.
|
|
capabilityReport(mapSize) {
|
|
if (!this.capabilities) {
|
|
const size = mapSize || (this.mapConfig && this.mapConfig.mapSize) || null;
|
|
this.capabilities = detectCapabilities({ mapSize: size });
|
|
}
|
|
return this.capabilities;
|
|
}
|
|
|
|
// Draws the map canvas from the current view state, if WebGL is active. Safe
|
|
// to call every frame: the renderer skips untouched camera/content state.
|
|
_glRender() {
|
|
if (!this.glRenderer) return;
|
|
this.glRenderer.render(this, this.$viewport.width(), this.$viewport.height());
|
|
}
|
|
|
|
// Whether the map is fully loaded and safe to reveal. The DOM renderer is
|
|
// ready as soon as its chunks are synced; the WebGL renderer waits until its
|
|
// terrain textures have finished uploading, so the loading screen does not
|
|
// lift onto a half-drawn map.
|
|
isReady() {
|
|
return !this.glRenderer || this.glRenderer.isReady();
|
|
}
|
|
|
|
// Texture-upload progress for the loading log, or null on the DOM renderer.
|
|
loadingProgress() {
|
|
if (!this.glRenderer) return null;
|
|
return { loaded: this.glRenderer.texLoaded, total: this.glRenderer.texTotal };
|
|
}
|
|
}
|
|
|
|
Object.assign(
|
|
MapView.prototype,
|
|
terrainMethods,
|
|
entityMethods,
|
|
motionMethods,
|
|
inputMethods,
|
|
politicalMethods,
|
|
modeMethods
|
|
);
|