Battle-for-Tismo/tests/webgl_geometry_test.js

import { TestCase } from "./framework/test_case.js";
import { GLMapRenderer } from "../client/js/map_view/webgl.js";
import { CORNERS, latticeKey } from "../client/js/map_view/distortion.js";
import { MapTopology, key, mapToLocal } from "../shared/hex.js";

// Minimal stand-in for a GLMapRenderer: the prototype supplies the pure
// geometry helpers, and only the two GL touch-points (`_upload`, `this.gl`) are
// stubbed so the builders can run without a context.
function makeRenderer() {
  const renderer = Object.create(GLMapRenderer.prototype);
  renderer.gl = { DYNAMIC_DRAW: 0 };
  renderer.captured = {};
  renderer.borders = { name: "borders" };
  renderer.roads = { name: "roads" };
  renderer.regionOverlay = { name: "region" };
  renderer._upload = function (pass, arr) {
    this.captured[pass.name] = arr;
    pass.count = arr.length / 8;
  };
  return renderer;
}

function view(renderer, { size = 3, territory, regions, selectedRegion = null, roads = new Set(), terrainAt = null } = {}) {
  const topology = new MapTopology({ x: size, y: size }, false);
  const tiles = {};
  for (let y = topology.originY; y < topology.originY + size; y++) {
    for (let x = topology.originX; x < topology.originX + size; x++) {
      tiles[key(x, y)] = { col: 0, terrainType: terrainAt ? terrainAt(x, y) : "Land" };
    }
  }
  return {
    seed: 4242,
    topology,
    tiles,
    roads,
    territory: new Map(territory),
    regions: new Map(regions),
    civilisations: [{ primaryColour: "#ff0000" }, { primaryColour: "#00ff00" }],
    _selectedRegion: selectedRegion,
  };
}

export class WebglGeometryTest extends TestCase {
  async test_chains_stitch_edges_across_tiles() {
    const renderer = makeRenderer();
    const edges = [
      { points: [{ x: 0, y: 0 }, { x: 1, y: 0 }], startKey: "0", endKey: "1" },
      { points: [{ x: 1, y: 0 }, { x: 2, y: 0 }], startKey: "1", endKey: "2" },
      { points: [{ x: 9, y: 9 }, { x: 8, y: 9 }], startKey: "8", endKey: "7" },
    ];
    const chains = renderer._chainEdges(edges);
    this.assertSize(chains, 2, "two disjoint runs");
    const run = chains.find((chain) => chain.points.length === 3);
    this.assertNotNull(run, "the joined run has three points");
    this.assertFalse(run.closed, "a run with two open ends is not closed");
    this.assertEqual(run.points[0], { x: 0, y: 0 }, "the shared corner is only listed once");
  }

  async test_closed_boundary_is_one_chain() {
    const renderer = makeRenderer();
    const edges = [
      { points: [{ x: 0, y: 0 }, { x: 1, y: 0 }], startKey: "0", endKey: "1" },
      { points: [{ x: 1, y: 0 }, { x: 1, y: 1 }], startKey: "1", endKey: "2" },
      { points: [{ x: 1, y: 1 }, { x: 0, y: 0 }], startKey: "2", endKey: "0" },
    ];
    const chains = renderer._chainEdges(edges);
    this.assertSize(chains, 1, "the loop is a single chain");
    this.assertTrue(chains[0].closed, "the loop closes");
    this.assertSize(chains[0].points, 3, "the repeated closing point is dropped");
  }

  async test_border_strokes_are_finite() {
    const renderer = makeRenderer();
    const territory = [
      ["-1,-1", 0], ["0,-1", 0], ["-1,0", 0], ["0,0", 0],
      ["1,0", 1], ["1,1", 1],
    ];
    const state = view(renderer, { territory });
    renderer.buildBorders(state);
    const arr = renderer.captured.borders;
    this.assertGreater(arr.length, 0, "borders are built");
    for (const value of arr) {
      this.assertTrue(Number.isFinite(value), "every vertex coordinate is finite");
    }
  }

  async test_a_nations_whole_outline_is_one_closed_chain() {
    // A 3x3 block owned by a single nation has no open ends, so its border must
    // chain into one loop rather than a handful of per-tile strokes.
    const renderer = makeRenderer();
    const territory = [];
    for (let y = -1; y <= 1; y++) {
      for (let x = -1; x <= 1; x++) territory.push([key(x, y), 0]);
    }
    const state = view(renderer, { territory });
    const edges = [];
    for (const [k, owner] of state.territory) {
      const coords = k.split(",").map(Number);
      const centre = mapToLocal(coords[0], coords[1]);
      const neighbours = renderer._edgeNeighbours(state, coords[0], coords[1]);
      for (let e = 0; e < CORNERS.length; e++) {
        const neighbour = neighbours[e];
        if (!neighbour) continue;
        const nk = key(neighbour.x, neighbour.y);
        if (state.territory.get(nk) === owner) continue;
        const a = { x: centre.x + CORNERS[e].x, y: centre.y + CORNERS[e].y };
        const next = CORNERS[(e + 1) % CORNERS.length];
        const b = { x: centre.x + next.x, y: centre.y + next.y };
        const dx = b.x - a.x;
        const dy = b.y - a.y;
        const mx = (a.x + b.x) / 2;
        const my = (a.y + b.y) / 2;
        const ownerIsLeft = (centre.x - mx) * -dy + (centre.y - my) * dx >= 0;
        edges.push(ownerIsLeft
          ? { points: [a, b], startKey: latticeKey(a.x, a.y), endKey: latticeKey(b.x, b.y) }
          : { points: [b, a], startKey: latticeKey(b.x, b.y), endKey: latticeKey(a.x, a.y) });
      }
    }
    const chains = renderer._chainEdges(edges);
    this.assertSize(chains, 1, "the whole coastline is one run");
    this.assertTrue(chains[0].closed, "the block's border wraps all the way round");
  }

  async test_region_border_is_suppressed_on_a_national_border() {
    const selected = 0;
    const sharedDifferentOwner = [
      ["0,0", 0], ["1,0", 1],
    ];
    const sharedSameOwner = [
      ["0,0", 0], ["1,0", 0],
    ];
    const regions = [["0,0", 0], ["1,0", 1]];

    const splitRenderer = makeRenderer();
    splitRenderer.buildRegionOverlay(
      view(splitRenderer, { territory: sharedDifferentOwner, regions, selectedRegion: selected })
    );
    const split = splitRenderer.captured.region.length;

    const joinedRenderer = makeRenderer();
    joinedRenderer.buildRegionOverlay(
      view(joinedRenderer, { territory: sharedSameOwner, regions, selectedRegion: selected })
    );
    const joined = joinedRenderer.captured.region.length;

    // Only the selected tile (0,0) contributes; its six-edge fill is 24 tris.
    const fill = 24 * 3 * 8;
    this.assertEqual(split, fill, "no dotted line is drawn over the national border");
    this.assertGreater(joined, fill, "a same-owner region border is still dotted");
  }

  async test_roads_join_at_a_bend_without_a_notch() {
    const renderer = makeRenderer();
    const state = view(renderer, { roads: new Set(["-1,0", "0,0", "1,0"]) });
    renderer.buildRoads(state);
    const arr = renderer.captured.roads;
    this.assertGreater(arr.length, 0, "roads are built");
    for (const value of arr) {
      this.assertTrue(Number.isFinite(value), "every road vertex is finite");
    }
  }

  async test_terrain_vertices_carry_the_relief() {
    const renderer = makeRenderer();
    let captured = null;
    renderer._upload = (pass, arr, usage, floats) => {
      captured = arr;
      pass.floats = floats;
    };
    const state = view(renderer, {
      terrainAt: (x, y) => (x === 0 && y === 0 ? "Mountain" : "Land"),
    });
    renderer._buildTerrainPass(state, 0);
    this.assertEqual(captured.length % 17, 0, "seventeen floats per terrain vertex");
    let max = 0;
    for (let i = 0; i < captured.length; i += 17) {
      const height = captured[i + 6];
      this.assertTrue(Number.isFinite(height), "height is finite");
      this.assertTrue(height >= 0 && height <= 1, "height is normalised");
      this.assertTrue(Number.isFinite(captured[i + 15]), "slope x is finite");
      this.assertTrue(Number.isFinite(captured[i + 16]), "slope y is finite");
      max = Math.max(max, height);
    }
    this.assertGreater(max, 0.4, "the mountain lifts its vertices high");
  }

  async test_a_coarser_level_of_detail_uses_fewer_vertices() {
    const renderer = makeRenderer();
    const state = view(renderer);
    let counts = [];
    renderer._upload = (pass, arr) => { counts.push(arr.length); };
    renderer._buildTerrainPass(state, 0);
    renderer._buildTerrainPass(state, 2);
    this.assertGreater(counts[0], counts[1], "the far level has less geometry");
  }

  async test_flat_layers_carry_the_relief_too() {
    const renderer = makeRenderer();
    const state = view(renderer, { roads: new Set(["0,0"]) });
    renderer.buildRoads(state);
    const arr = renderer.captured.roads;
    let lifted = false;
    for (let i = 0; i < arr.length; i += 8) {
      if (arr[i + 2] > 0) lifted = true;
    }
    this.assertTrue(lifted, "road vertices ride the heightmap");
  }
}