import { TestCase } from "./framework/test_case.js";
import { GLMapRenderer } from "../client/js/map_view/webgl.js";
import { CORNERS, EDGE_SEGMENTS, latticeKey } from "../client/js/map_view/distortion.js";
import { createHeightField } from "../client/js/map_view/heightmap.js";
import { TERRAIN_LODS } from "../client/js/map_view/constants.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._uploads = [];
  renderer._subUploads = [];
  renderer.gl = {
    DYNAMIC_DRAW: 0,
    createBuffer: () => ({}),
    bindBuffer: () => {},
    bufferData: (_target, data) => { renderer._uploads.push(data); },
    bufferSubData: (_target, _offset, data) => { renderer._subUploads.push(data); },
  };
  renderer.captured = {};
  renderer.borders = { name: "borders" };
  renderer.roads = { name: "roads" };
  renderer.railways = { name: "railways" };
  renderer.flatTransport = { name: "flatTransport" };
  renderer.regionOverlay = { name: "region" };
  renderer.politicalFill = { name: "political" };
  renderer.economicFill = { name: "economic" };
  renderer._upload = function (pass, arr, usage, floats) {
    this.captured[pass.name] = arr;
    pass.floats = floats;
    pass.count = arr.length / (floats || 8);
  };
  return renderer;
}

function view(renderer, { size = 3, territory, regions, selectedRegion = null, roads = new Set(), railways = 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,
    railways,
    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_the_closest_level_subdivides_each_fan_triangle() {
    const renderer = makeRenderer();
    const state = view(renderer);
    let verts = 0;
    renderer._upload = (pass, arr) => { verts = arr.length / 17; };
    renderer._buildTerrainPass(state, 0);
    const lod = TERRAIN_LODS[0];
    const trianglesPerTile = CORNERS.length * lod.segments * 4 ** (lod.subdivisions || 0);
    this.assertEqual(verts, 9 * trianglesPerTile * 3, "each fan triangle is split in four");
  }

  async test_linked_road_tiles_are_bands_not_straight_caps() {
    // A lone road tile is a single textured cap; adjacent tiles are drawn as a
    // continuous band with no straight tile stamped at the junction.
    const renderer = makeRenderer();
    renderer.buildRoads(view(renderer, { roads: new Set(["0,0"]) }));
    const lone = renderer.captured.roads.length;
    this.assertEqual(lone % 9, 0, "nine floats per transport vertex");
    this.assertEqual(lone, 6 * 9, "a lone tile is one quad");

    const paired = makeRenderer();
    paired.buildRoads(view(paired, { roads: new Set(["0,0", "1,0"]) }));
    const link = paired.captured.roads.length;
    this.assertEqual(link % 9, 0, "nine floats per transport vertex");
    this.assertGreater(link, lone, "the link is a band, not caps");
  }

  async test_road_and_railway_halves_meet_at_a_mixed_link() {
    const renderer = makeRenderer();
    renderer.buildRoads(view(renderer, {
      roads: new Set(["0,0"]),
      railways: new Set(["1,0"]),
    }));
    const road = renderer.captured.roads;
    const rail = renderer.captured.railways;
    this.assertGreater(road.length, 0, "the road half is drawn");
    this.assertGreater(rail.length, 0, "the rail half is drawn");
    const pointKeys = (arr) => {
      const set = new Set();
      for (let i = 0; i < arr.length; i += 9) {
        set.add(`${arr[i].toFixed(4)},${arr[i + 1].toFixed(4)}`);
      }
      return set;
    };
    const roadPoints = pointKeys(road);
    let shared = 0;
    for (const k of pointKeys(rail)) if (roadPoints.has(k)) shared += 1;
    this.assertGreater(shared, 0, "both halves share the border vertices");
  }

  async test_flat_transport_is_solid_straight_strokes() {
    const renderer = makeRenderer();
    renderer.buildRoads(view(renderer, {
      roads: new Set(["0,0", "1,0"]),
      railways: new Set(["-1,0"]),
    }));
    const flat = renderer.captured.flatTransport;
    this.assertGreater(flat.length, 0, "the flat transport is built");
    this.assertEqual(flat.length % 8, 0, "eight floats per flat vertex");
    const colours = new Set();
    for (let i = 0; i < flat.length; i += 8) {
      colours.add(flat[i + 4].toFixed(4));
      this.assertEqual(flat[i + 2], 0, "the flat map ignores the relief");
    }
    this.assertTrue(colours.has((0x3a / 255).toFixed(4)), "roads are dark grey");
    this.assertTrue(colours.has((0x8a / 255).toFixed(4)), "railways are brown");
  }

  async test_a_bent_road_is_a_curve_not_straight_stubs() {
    const renderer = makeRenderer();
    const topo = new MapTopology({ x: 5, y: 5 }, false);
    const a = { x: 0, y: 0 };
    const b = { x: 1, y: 0 };
    const A = mapToLocal(a.x, a.y);
    const B = mapToLocal(b.x, b.y);
    // The neighbour of b that bends the most away from the a->b line.
    let bend = null;
    let bestDeviation = -1;
    for (const n of topo.neighbours(b.x, b.y)) {
      if (n.x === a.x && n.y === a.y) continue;
      const C = mapToLocal(n.x, n.y);
      const dx = B.x - A.x;
      const dy = B.y - A.y;
      const deviation = Math.abs((C.x - A.x) * -dy + (C.y - A.y) * dx) / Math.hypot(dx, dy);
      if (deviation > bestDeviation) {
        bestDeviation = deviation;
        bend = n;
      }
    }
    this.assertGreater(bestDeviation, 5, "the map has a real bend");
    const roads = new Set([key(a.x, a.y), key(b.x, b.y), key(bend.x, bend.y)]);
    renderer.buildRoads(view(renderer, { size: 5, roads }));
    const arr = renderer.captured.roads;
    this.assertGreater(arr.length, 0, "the bend is drawn");

    // Recover the band's centreline from each quad: corner0/corner3 average to
    // the link's start centre and corner1/corner2 to its end centre.
    const distanceToSegment = (p, s, e) => {
      const dx = e.x - s.x;
      const dy = e.y - s.y;
      const len2 = dx * dx + dy * dy || 1;
      let t = ((p.x - s.x) * dx + (p.y - s.y) * dy) / len2;
      t = Math.max(0, Math.min(1, t));
      return Math.hypot(p.x - (s.x + dx * t), p.y - (s.y + dy * t));
    };
    const C = mapToLocal(bend.x, bend.y);
    let worst = 0;
    for (let i = 0; i + 45 <= arr.length; i += 54) {
      const p = { x: (arr[i] + arr[i + 45]) / 2, y: (arr[i + 1] + arr[i + 46]) / 2 };
      const q = { x: (arr[i + 9] + arr[i + 18]) / 2, y: (arr[i + 10] + arr[i + 19]) / 2 };
      for (const point of [p, q]) {
        const off = Math.min(
          distanceToSegment(point, A, B),
          distanceToSegment(point, B, C)
        );
        worst = Math.max(worst, off);
      }
    }
    this.assertGreater(worst, 1, "the centreline bows off the straight corners");
  }

  async test_road_continuation_uses_the_opposite_neighbour() {
    const renderer = makeRenderer();
    const coordsOf = new Map([
      ["a", { x: 0, y: 0 }],
      ["b", { x: 1, y: 0 }],
      ["c", { x: 2, y: 0 }],
    ]);
    const topo = { pixelDelta: (from, to) => ({ x: to.x - from.x, y: to.y - from.y }) };
    this.assertEqual(
      renderer._continuationKey(["a", "b", "c"], "b", "c", coordsOf, topo),
      "a",
      "continues through the tile behind"
    );
    this.assertNull(
      renderer._continuationKey(["c"], "b", "c", coordsOf, topo),
      "a dead end has no continuation"
    );
  }

  async test_seam_road_links_stay_local_and_do_not_span_the_world() {
    const renderer = makeRenderer();
    const topology = new MapTopology({ x: 20, y: 6 }, true);
    const a = { x: topology.originX, y: 0 };
    const A = mapToLocal(a.x, a.y);
    // The neighbour that lies on the far side of the wrap: raw mapToLocal puts
    // it a whole world away, but pixelDelta knows it is one step.
    let wrap = null;
    let rawDistance = 0;
    for (const n of topology.neighbours(a.x, a.y)) {
      const d = Math.hypot(mapToLocal(n.x, n.y).x - A.x, mapToLocal(n.x, n.y).y - A.y);
      if (d > rawDistance) {
        rawDistance = d;
        wrap = n;
      }
    }
    this.assertGreater(rawDistance, 400, "a neighbour wraps the seam");
    const tiles = {};
    for (let y = topology.originY; y < topology.originY + 6; y++) {
      for (let x = topology.originX; x < topology.originX + 20; x++) {
        tiles[key(x, y)] = { col: 0, terrainType: "Land" };
      }
    }
    renderer.buildRoads({
      seed: 1,
      topology,
      tiles,
      roads: new Set([key(a.x, a.y), key(wrap.x, wrap.y)]),
      territory: new Map(),
      regions: new Map(),
      civilisations: [{ primaryColour: "#ff0000" }],
    });
    const arr = renderer.captured.roads;
    this.assertGreater(arr.length, 0, "the seam link is drawn");
    const xs = [];
    for (let i = 0; i < arr.length; i += 9) xs.push(arr[i]);
    this.assertLess(Math.max(...xs) - Math.min(...xs), 200, "the link stays at the seam");
  }

  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 += 9) {
      if (arr[i + 4] > 0) lifted = true;
    }
    this.assertTrue(lifted, "road vertices ride the heightmap");
  }

  async test_sea_tiles_are_left_out_of_the_terrain_mesh() {
    // The sea is drawn by the single ocean quad, so no terrain vertex may still
    // carry the water flag (the terrain layout puts it at index 10).
    const renderer = makeRenderer();
    let captured = null;
    renderer._upload = (pass, arr, usage, floats) => {
      captured = arr;
      pass.floats = floats;
    };
    const state = view(renderer, { terrainAt: (x) => (x === 0 ? "Land" : "Sea") });
    renderer._buildTerrainPass(state, 0);
    this.assertGreater(captured.length, 0, "the land tiles are still built");
    for (let i = 0; i < captured.length; i += 17) {
      this.assertEqual(captured[i + 10], 0, "no sea tile is drawn as water");
    }
  }

  async test_the_ocean_is_one_flat_quad() {
    const renderer = makeRenderer();
    renderer.ocean = { name: "ocean" };
    const state = view(renderer, { terrainAt: (x) => (x === 0 ? "Land" : "Sea") });
    state._worldMinX = -31.5;
    state._worldMinY = -56;
    state._worldWidth = 100;
    state._worldHeight = 80;
    renderer.buildOcean(state);
    const arr = renderer.captured.ocean;
    this.assertEqual(arr.length, 6 * 17, "one quad is two triangles");
    for (let i = 0; i < arr.length; i += 17) {
      this.assertEqual(arr[i + 6], 0, "the ocean surface is flat");
      this.assertEqual(arr[i + 10], 1, "the water flag is set");
      this.assertEqual(arr[i + 15], 0, "the ocean has no slope");
      this.assertEqual(arr[i + 16], 0, "the ocean has no slope");
    }
  }

  async test_border_strokes_ride_the_relief() {
    const renderer = makeRenderer();
    const state = view(renderer, {
      territory: [["0,0", 0], ["1,0", 1]],
      terrainAt: (x) => (x === 0 ? "Mountain" : "Land"),
    });
    renderer.buildBorders(state);
    const arr = renderer.captured.borders;
    let lifted = false;
    for (let i = 0; i < arr.length; i += 8) {
      if (arr[i + 2] > 0) lifted = true;
    }
    this.assertTrue(lifted, "border vertices ride the heightmap");
  }

  async test_political_and_economic_borders_are_flat() {
    for (const mode of ["political", "economic"]) {
      const renderer = makeRenderer();
      const state = view(renderer, {
        territory: [["0,0", 0], ["1,0", 1]],
        terrainAt: (x) => (x === 0 ? "Mountain" : "Land"),
      });
      state[mode] = true;
      renderer.buildBorders(state);
      const arr = renderer.captured.borders;
      this.assertGreater(arr.length, 0, `${mode} borders are built`);
      for (let i = 0; i < arr.length; i += 8) {
        this.assertEqual(arr[i + 2], 0, `${mode} borders ignore the relief`);
      }
    }
  }

  async test_the_political_fill_paints_owned_tiles_only() {
    const renderer = makeRenderer();
    const state = view(renderer, { territory: [["0,0", 0], ["1,0", 1]] });
    renderer._warp = renderer._buildWarpSet(state);
    renderer.buildPolitical(state);
    this.assertEmpty(renderer.captured.political, "the terrain map has no political fill");

    state.political = true;
    renderer.buildPolitical(state);
    const arr = renderer.captured.political;
    // The 3x3 map is all land, so every tile is painted: owned tiles in their
    // country's colour, the rest in the neutral land colour. Six triangles and
    // 8 floats a vertex.
    this.assertEqual(arr.length, 9 * 6 * 3 * 8, "every land tile is painted");
    const colours = new Set();
    for (let i = 0; i < arr.length; i += 8) {
      colours.add([arr[i + 4], arr[i + 5], arr[i + 6]].join(","));
      this.assertTrue(Number.isFinite(arr[i + 2]), "every political vertex is finite");
      this.assertEqual(arr[i + 2], 0, "the political fill is flat");
    }
    this.assertTrue(colours.has([1, 0, 0].join(",")), "an owned tile uses its country colour");
    this.assertTrue(colours.size >= 2, "unclaimed land is a second colour");
  }

  async test_the_economic_fill_paints_every_valued_tile() {
    const renderer = makeRenderer();
    const state = view(renderer);
    renderer._warp = renderer._buildWarpSet(state);
    renderer.buildEconomic(state);
    this.assertEmpty(renderer.captured.economic, "no figures means no economic fill");

    state.economic = true;
    state.economicValues = new Map([["0,0", 10], ["1,0", 20], ["0,1", 30]]);
    state.economicRange = { min: 0, max: 30 };
    renderer.buildEconomic(state);
    const arr = renderer.captured.economic;
    this.assertEqual(arr.length, 3 * 6 * 3 * 8, "one flat hexagon per valued tile");
    for (const value of arr) {
      this.assertTrue(Number.isFinite(value), "every economic vertex is finite");
    }
    for (let i = 0; i < arr.length; i += 8) {
      this.assertEqual(arr[i + 2], 0, "the economic fill is flat");
    }
  }

  async test_sea_edges_are_straight_except_against_land() {
    const renderer = makeRenderer();
    const state = view(renderer, { terrainAt: (x) => (x === 0 ? "Sea" : "Land") });
    const wavy = renderer.edgeWaviness(state, 0, 0);
    this.assertSize(wavy, 6, "one flag per edge");
    this.assertTrue(wavy.some((flag) => flag === false), "open-water edges are straight");
    this.assertTrue(wavy.some((flag) => flag === true), "coastal edges stay wavy");
    this.assertNull(renderer.edgeWaviness(state, 1, 0), "land tiles keep the all-wavy default");
  }

  async test_a_ridge_in_front_hides_a_border_point() {
    const renderer = makeRenderer();
    const flat = { at: () => 0.1 };
    this.assertFalse(renderer._isOccluded(flat, 0, 0), "flat ground hides nothing");
    const ridge = { at: (x, y) => (y > 0 ? 0.9 : 0.1) };
    this.assertTrue(renderer._isOccluded(ridge, 0, 0), "a rise to the south hides the point");
    const gentle = { at: (x, y) => (y > 0 ? 0.15 : 0.1) };
    this.assertFalse(renderer._isOccluded(gentle, 0, 0), "a gentle rise does not");
  }

  async test_is_occluded_reads_the_relief_field() {
    const renderer = makeRenderer();
    this.assertFalse(renderer.isOccluded(0, 0), "no field hides nothing");
    renderer.heightField = { at: (x, y) => (y > 0 ? 0.9 : 0.1) };
    this.assertTrue(renderer.isOccluded(0, 0), "a ridge to the south hides the point");
  }

  async test_hidden_border_runs_are_dotted() {
    const renderer = makeRenderer();
    const line = [{ x: 0, y: 0, h: 0 }, { x: 100, y: 0, h: 0 }];
    const solid = [];
    renderer._stroke(solid, line, 3, [0, 0, 0, 1], false);
    const dotted = [];
    renderer._stroke(dotted, line, 3, [0, 0, 0, 1], false, [true, true]);
    this.assertGreater(dotted.length, solid.length, "a hidden run breaks into dashes");
    this.assertEqual(dotted.length % 8, 0, "flat-colour vertices");
  }

  async test_point_height_reads_the_relief_field() {
    const renderer = makeRenderer();
    const state = view(renderer, {
      terrainAt: (x, y) => (x === 0 && y === 0 ? "Mountain" : "Land"),
    });
    this.assertEqual(renderer.pointHeight(0, 0), 0, "no field means flat");
    renderer.heightField = createHeightField(state);
    const centre = mapToLocal(0, 0);
    this.assertGreater(renderer.pointHeight(centre.x, centre.y), 0.3, "the mountain lifts its centre");
  }

  async test_open_water_hexagons_stay_regular() {
    const renderer = makeRenderer();
    const state = view(renderer, { terrainAt: () => "Sea" });
    renderer._warp = renderer._buildWarpSet(state);
    this.assertSize(renderer._warp, 0, "open water has no warped vertices");
    const centre = mapToLocal(0, 0);
    const boundary = renderer.tileBoundary(state, 0, 0);
    for (let i = 0; i < CORNERS.length; i++) {
      const point = boundary[i * EDGE_SEGMENTS];
      this.assertApprox(point.x, centre.x + CORNERS[i].x, 1e-9, "regular corner x");
      this.assertApprox(point.y, centre.y + CORNERS[i].y, 1e-9, "regular corner y");
    }
  }

  async test_land_vertices_are_still_warped() {
    const renderer = makeRenderer();
    const state = view(renderer, { terrainAt: (x) => (x === 0 ? "Land" : "Sea") });
    renderer._warp = renderer._buildWarpSet(state);
    this.assertGreater(renderer._warp.size, 0, "land vertices are warped");
    const centre = mapToLocal(0, 0);
    const boundary = renderer.tileBoundary(state, 0, 0);
    let moved = false;
    for (let i = 0; i < CORNERS.length; i++) {
      const point = boundary[i * EDGE_SEGMENTS];
      const ideal = { x: centre.x + CORNERS[i].x, y: centre.y + CORNERS[i].y };
      if (Math.hypot(point.x - ideal.x, point.y - ideal.y) > 1e-6) moved = true;
    }
    this.assertTrue(moved, "a land tile keeps its warped outline");
  }

  async test_fog_build_is_a_noop_before_the_world_exists() {
    const renderer = makeRenderer();
    renderer.fog = { name: "fog" };
    renderer._warp = null;
    // The frame loop runs before the first snapshot has built the world, so
    // there is no topology yet. This must not throw, or the exception escapes
    // `animate` and the animation loop never schedules another frame.
    renderer.buildKnowledge({ seed: 1, tiles: {} });
    this.assertEqual(renderer.captured.fog.length, 0, "no fog is built without a topology");
    this.assertEqual(renderer.fog.rowStart, null, "the row table is cleared");
    this.assertEqual(renderer.fog.bandStart, undefined, "no band is claimed");
  }

  async test_fog_builds_only_the_requested_rows() {
    const renderer = makeRenderer();
    renderer.fog = { name: "fog" };
    renderer._warp = null;
    const state = view(renderer, { size: 6 });
    // Explored-but-not-visible ground is fogged, so every tile contributes.
    state.explored = new Set(Object.keys(state.tiles));
    state.visible = new Set();

    renderer.buildKnowledge(state);
    const slot = renderer._fogSlot;
    const rowFloats = renderer._fogRowFloats;
    this.assertGreater(slot, 0, "a tile owns a fixed slot");
    this.assertEqual(renderer._fogBuffer.length, 6 * 6 * slot, "the buffer holds every tile");

    // A band build rewrites only its rows and re-uploads only those rows.
    renderer._fogBuffer.fill(-1);
    renderer._subUploads.length = 0;
    renderer.buildKnowledge(state, { start: 1, end: 2 });
    const row0 = renderer._fogBuffer.subarray(0, rowFloats);
    const row1 = renderer._fogBuffer.subarray(1 * rowFloats, 2 * rowFloats);
    this.assertTrue(row0.every((v) => v === -1), "rows outside the band are untouched");
    this.assertTrue(row1.some((v) => v > 0), "the requested rows are rebuilt");
    this.assertTrue(renderer._subUploads.length > 0, "only the rebuilt rows are re-uploaded");
    // The row table stays full length with fixed offsets the draw can index.
    this.assertEqual(renderer.fog.rowStart.length, state.topology.height + 1);
    this.assertEqual(renderer.fog.rowStart[0], 0, "row zero starts at zero");
    this.assertEqual(renderer.fog.rowStart[1], rowFloats / 7, "rows carry fixed offsets");
  }

  async test_fog_patches_only_the_changed_tiles() {
    const renderer = makeRenderer();
    renderer.fog = { name: "fog" };
    renderer._warp = null;
    const state = view(renderer, { size: 6 });
    state.explored = new Set(Object.keys(state.tiles));
    state.visible = new Set();
    renderer.buildKnowledge(state);
    const slot = renderer._fogSlot;
    const before = Float32Array.from(renderer._fogBuffer);
    const index = (r, c) => (r * 6 + c) * slot;
    const revealed = key(state.topology.originX + 3, state.topology.originY + 3);
    state.visible = new Set([revealed]);
    renderer.buildFogTiles(state, new Set([revealed]));
    this.assertTrue(
      renderer._fogBuffer.subarray(index(3, 3), index(3, 3) + slot)
        .some((v, i) => v !== before[index(3, 3) + i]),
      "the revealed tile is rebuilt"
    );
    this.assertTrue(
      renderer._fogBuffer.subarray(index(0, 0), index(0, 0) + slot)
        .every((v, i) => v === before[index(0, 0) + i]),
      "a distant tile is left alone"
    );
  }
}