Battle-for-Tismo/client/js/map_view.js

// 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 { createGLMapRenderer } from "./map_view/webgl.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");
    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);
    }

    // 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,
    ]) {
      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 road tiles, keyed "x,y".
    this.roads = new Set();
    this.civilisations = [];
    this.localCiv = -1;
    this.protoUnits = [];
    // Battlefield tiles, keyed "x,y" and mapped to { defender, attacker }.
    this._battles = new Map();

    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._unitViews = new Map();
    this._unitMotion = new Map();
    this._unitData = new Map();
    this._cityViews = new Map();
    this._cityCiv = new Map();
    this._battleViews = new Map();
    // In-flight pathfinding job, cancelled when a newer request supersedes it.
    this._pathToken = null;
    this._maxStepLength = 1.0;

    this._territorySignature = "";
    this._regionsSignature = null;
    this._roadsSignature = 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.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";
    if (this.rendererMode !== "dom") this._setupGLRenderer();

    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);
      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);
      return;
    }
    this.glRenderer = renderer;
    this.glCanvas = canvas;
    this.$world.addClass("gl-render");
  }

  // 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());
  }
}

Object.assign(
  MapView.prototype,
  terrainMethods,
  entityMethods,
  motionMethods,
  inputMethods
);