v0.27.0 (#44): LLM-placed named map point markers

- shared: 8 MarkerTypes + MARKER_TYPE_INFO (label/color/glyph); MapMarker; GameState.markers (required, [] at init); TurnResult.markers {add,remove}; MarkerSpec/MarkerInfo; FNV-1a 4-char markerId; MAX_MARKERS=400. - data: new public/region-centroids.json (1,800 anchors = largest-part centroid + spread ~0.1x min-bbox) built by new idempotent scripts/build-region-centroids.mjs. - server: regions.ts centroid loader (public/ then dist/); engine applyTurnResult marker ops (remove -> owner-recompute -> add, jitter, cap, never throws); prompt documents the contract; buildUserPrompt carries markers; stub marker-free. - client: WorldMap symbol layer rendered as canvas per-type icons (glyph CDN dead); hover tooltip shows name; click focuses owning nation. - tests: 168 -> 189 (centroids script, regions centroids, db legacy, engine markers).
2026-10-14 22:37:29 +00:00
parent aa1bd3c5aa
commit a129c2ab81
19 changed files with 10437 additions and 45 deletions
@@ -10,12 +10,14 @@ import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
 maplibregl.setWorkerUrl(workerUrl);
 import {
  mapFeatureOwner,
+  MARKER_TYPE_INFO,
+  nationColor,
  regionFillStyle,
  unownedTooltipLabel,
  type RegionMap,
  type RegionOwner,
 } from '@shared/protocol';
-import type { Nation } from '@shared/types';
+import { MARKER_TYPES, type MapMarker, type Nation } from '@shared/types';
 import { cn } from '@/lib/utils';
 import { idToKey } from '@/lib/regions';

@@ -45,8 +47,16 @@ type GeoSource = maplibregl.GeoJSONSource;
 // looked black, and `styledata` was gated on fetching a remote document. An
 // inline object loads instantly, so `isStyleLoaded()` / `styledata` fire
 // immediately and the choropleth is guaranteed to paint. (The OFM `ne2sr`
-// raster has no vector tiles, so no glyphs endpoint is needed — we don't add
-// label layers; the choropleth provides the borders.)
+// raster has no vector tiles, so the basemap itself needs no label layers —
+// the choropleth provides the borders.)
+//
+// No `glyphs` URL: the map needs no MapLibre *text* rendering. The basemap is
+// raster (its labels are baked into the PNG tiles), and the LLM-placed map
+// markers (v0.27, #44) are drawn as canvas-generated icon images in a symbol
+// layer — fully self-contained, so they render offline and deterministically
+// without depending on any external font/glyph endpoint (the OpenFreeMap
+// `fonts/` path is a dead nginx 404, and the basemap's apparent labels come
+// from the raster, not from glyphs).
 const NE2SR_TILES = ['https://tiles.openfreemap.org/natural_earth/ne2sr/{z}/{x}/{y}.png'];

 const INLINE_STYLE: maplibregl.StyleSpecification = {
@@ -88,6 +98,8 @@ const PLAYER_LINE = 'player-line';
 const FLASH_LINE = 'flash-line';
 const HOVER_FILL = 'hover-fill';
 const HOVER_LINE = 'hover-line';
+const MARKERS_SOURCE = 'markers';
+const MARKER_SYMBOL = 'markers-symbol';

 /** Sensible per-scenario initial camera: Europe for the WWII scenarios, wider for the global ones. */
 function cameraForPreset(presetId: string): { center: [number, number]; zoom: number } {
@@ -195,6 +207,186 @@ function featuresByRegionKeys(
  return { type: 'FeatureCollection', features: JSON.parse(JSON.stringify(features)) };
 }

+// --- Map markers (v0.27, #44) ------------------------------------------------
+//
+// The LLM places named point markers (cities, factories, armies, ports,
+// capitals, fleets, rocket sites, gatherings) anchored to a region key. The
+// engine positions each at its region's centroid (deterministic small offset)
+// and recomputes its owner from the region's current owner every turn. The
+// map renders them as a single top-most symbol layer: a per-type glyph
+// character in front of the name, per-type color, dark-theme halo.
+
+/**
+ * The GeoJSON behind the marker symbol layer: one Point per marker at
+ * `[lon, lat]`, carrying the stable id, type, name, its type's glyph, and the
+ * current owner's name + stable color (empty when the region is unowned).
+ * Pure; the caller passes the current marker list + nations record, so a
+ * renamed/removed owner is picked up on the next paint.
+ */
+function buildMarkersFC(markers: MapMarker[], nations: Record<string, Nation>): FeatureCollection {
+  const features = markers.map((m) => {
+    const owner = m.ownerNationId ? nations[m.ownerNationId] : undefined;
+    return {
+      type: 'Feature' as const,
+      geometry: { type: 'Point' as const, coordinates: [m.lon, m.lat] as [number, number] },
+      properties: {
+        id: m.id,
+        type: m.type,
+        name: m.name,
+        glyph: MARKER_TYPE_INFO[m.type]?.glyph ?? '',
+        owner: owner?.name ?? '',
+        ownerId: owner?.id ?? '',
+        ownerColor: owner ? nationColor(owner.id) : '',
+      },
+    };
+  });
+  return { type: 'FeatureCollection', features };
+}
+
+// Small canvas-path helpers for the marker icons (self-contained shapes — no
+// unicode/font dependency, so they render identically in any environment).
+function roundRectPath(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): void {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+function starPath(
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  spikes: number,
+  outer: number,
+  inner: number,
+): void {
+  let rot = (Math.PI / 2) * -1;
+  const step = Math.PI / spikes;
+  ctx.beginPath();
+  ctx.moveTo(cx + Math.cos(rot) * outer, cy + Math.sin(rot) * outer);
+  for (let i = 0; i < spikes; i++) {
+    rot += step;
+    ctx.lineTo(cx + Math.cos(rot) * inner, cy + Math.sin(rot) * inner);
+    rot += step;
+    ctx.lineTo(cx + Math.cos(rot) * outer, cy + Math.sin(rot) * outer);
+  }
+  ctx.closePath();
+}
+
+/**
+ * (v0.27, #44) Draw one marker-type icon into an offscreen canvas: a distinct
+ * shape per type, filled with the type's color from the shared
+ * `MARKER_TYPE_INFO` contract, with a dark outline for legibility on any
+ * choropleth fill. Added to the map as a named image and referenced by the
+ * symbol layer's `icon-image` — a real symbol layer, per-type color + form,
+ * with zero external font/glyph dependency.
+ */
+function drawMarkerIcon(type: MapMarker['type']): ImageData {
+  const S = 44;
+  const c = document.createElement('canvas');
+  c.width = S;
+  c.height = S;
+  const ctx = c.getContext('2d')!;
+  const cx = S / 2;
+  const cy = S / 2;
+  ctx.fillStyle = MARKER_TYPE_INFO[type]?.color ?? '#cbd5e1';
+  ctx.strokeStyle = '#0b1220';
+  ctx.lineWidth = 2.5;
+  ctx.lineJoin = 'round';
+  switch (type) {
+    case 'city':
+      ctx.beginPath();
+      ctx.arc(cx, cy, S * 0.3, 0, Math.PI * 2);
+      break;
+    case 'factory': {
+      const h = S * 0.5;
+      roundRectPath(ctx, cx - h / 2, cy - h / 2, h, h, 5);
+      break;
+    }
+    case 'army': {
+      const r = S * 0.34;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy - r);
+      ctx.lineTo(cx + r, cy + r * 0.8);
+      ctx.lineTo(cx - r, cy + r * 0.8);
+      ctx.closePath();
+      break;
+    }
+    case 'port': {
+      const r = S * 0.36;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy - r);
+      ctx.lineTo(cx + r, cy);
+      ctx.lineTo(cx, cy + r);
+      ctx.lineTo(cx - r, cy);
+      ctx.closePath();
+      break;
+    }
+    case 'capital':
+      starPath(ctx, cx, cy, 5, S * 0.36, S * 0.15);
+      break;
+    case 'fleet':
+    case 'gathering':
+      ctx.beginPath();
+      ctx.arc(cx, cy, S * 0.32, 0, Math.PI * 2);
+      break;
+    case 'rocket': {
+      const w = S * 0.14;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy - S * 0.36);
+      ctx.lineTo(cx + S * 0.22, cy - S * 0.04);
+      ctx.lineTo(cx + w, cy - S * 0.04);
+      ctx.lineTo(cx + w, cy + S * 0.34);
+      ctx.lineTo(cx - w, cy + S * 0.34);
+      ctx.lineTo(cx - w, cy - S * 0.04);
+      ctx.lineTo(cx - S * 0.22, cy - S * 0.04);
+      ctx.closePath();
+      break;
+    }
+  }
+  ctx.fill();
+  ctx.stroke();
+  // fleet and gathering share a circle base; an inner mark tells them apart
+  // (fleet = a dark porthole dot, gathering = a white bullseye dot).
+  if (type === 'fleet' || type === 'gathering') {
+    ctx.beginPath();
+    ctx.arc(cx, cy, S * 0.13, 0, Math.PI * 2);
+    ctx.fillStyle = type === 'fleet' ? '#0b1220' : '#ffffff';
+    ctx.fill();
+  }
+  // Hand MapLibre the raw pixels (an untainted canvas, so getImageData is safe)
+  // rather than the canvas element — `addImage` accepts ImageData directly.
+  return ctx.getImageData(0, 0, S, S);
+}
+
+/** The hover tooltip for a marker: its type label + name, then the owner chip. */
+function markerTooltipHtml(
+  type: string,
+  name: string,
+  owner: string,
+  ownerColor: string,
+): string {
+  const label = MARKER_TYPE_INFO[type as MapMarker['type']]?.label ?? 'Marker';
+  const ownerLine = owner
+    ? `<div class="hm-popup-owner"><span class="hm-chip" style="background:${ownerColor}"></span>${esc(owner)}</div>`
+    : '<div class="hm-popup-sub">No owner</div>';
+  return `<div class="hm-popup"><div class="hm-popup-title">${esc(label)}: ${esc(name)}</div>${ownerLine}</div>`;
+}
+
 const esc = (s: string) =>
  s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] as string));

@@ -254,6 +446,13 @@ interface Props {
   * component doc for the full behavior.
   */
  onFocusNation?: (id: string, info?: { name?: string }) => void;
+  /**
+   * (v0.27, #44) The game's named map markers (`GameState.markers`): the LLM
+   * places/removes them over time, the engine positions each at its region's
+   * centroid and keeps its owner in sync with the region's owner. Rendered as
+   * a top-most symbol layer (per-type glyph + name, per-type color).
+   */
+  markers?: MapMarker[];
 }

 /**
@@ -286,6 +485,18 @@ interface Props {
 * a plain "No owner" sub-line. The colors/labels come from the shared
 * `regionFillStyle` / `unownedTooltipLabel` contract in @shared/protocol.
 *
+ * (v0.27, #44) LLM-placed **map markers** (`markers` prop = `GameState.markers`)
+ * render on a top-most symbol layer: each is its type's canvas-generated icon
+ * (a distinct shape, per-type color from the shared `MARKER_TYPE_INFO`
+ * contract, dark-outlined) at the engine-derived position (region centroid +
+ * small deterministic offset). The icons are drawn into named map images
+ * (`marker-<type>`), so there is no external font/glyph dependency and markers
+ * render offline and deterministically. Hovering a marker shows a tooltip
+ * (type label + name + owner chip); clicking one switches the dossier to the
+ * owning nation (no-op when the marker's region is unowned). The region
+ * hover/click handlers detect a marker under the cursor (MapLibre layer events
+ * have no propagation) and act on the marker's data.
+ *
 * Zoom and pan are driven directly by the user (MapLibre wheel/trackpad + drag)
 * — no floating control and no external API.
 */
@@ -297,6 +508,7 @@ export default function WorldMap({
  className,
  unowned,
  onFocusNation,
+  markers,
 }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<maplibregl.Map | null>(null);
@@ -311,12 +523,14 @@ export default function WorldMap({
  const presetRef = useRef(presetId);
  const unownedRef = useRef<Set<string>>(new Set(unowned ?? []));
  const onFocusNationRef = useRef(onFocusNation);
+  const markersRef = useRef<MapMarker[]>(markers ?? []);
  regionsRef.current = regions;
  nationsRef.current = nations;
  playerRef.current = playerNationId;
  presetRef.current = presetId;
  unownedRef.current = new Set(unowned ?? []);
  onFocusNationRef.current = onFocusNation;
+  markersRef.current = markers ?? [];

  // Diffing state for the transient territory-change flash (owned by this component
  // so a resync with identical data never re-flashes).
@@ -424,6 +638,39 @@ export default function WorldMap({
    const onHover = (e: maplibregl.MapLayerMouseEvent) => {
      const f = e.features?.[0];
      if (!f) return;
+      // (v0.27, #44) A marker rendered on top of this region wins the hover.
+      // The region polygon is always beneath a marker, so this FILL_LAYER
+      // delegate fires in both cases; if a marker icon is under the cursor,
+      // show the marker's tooltip (name + type + owner) instead of the
+      // region's. `e.point` is the cursor's pixel position, so querying the
+      // marker layer there tests the icon's (small) hit area, not the whole
+      // region.
+      const markerHits = map.queryRenderedFeatures(e.point, { layers: [MARKER_SYMBOL] });
+      if (markerHits.length > 0) {
+        const mp = (markerHits[0].properties ?? {}) as {
+          type?: string;
+          name?: string;
+          owner?: string;
+          ownerColor?: string;
+        };
+        hoverPopup
+          .setLngLat(e.lngLat)
+          .setHTML(
+            markerTooltipHtml(
+              typeof mp.type === 'string' ? mp.type : '',
+              typeof mp.name === 'string' ? mp.name : '',
+              typeof mp.owner === 'string' ? mp.owner : '',
+              typeof mp.ownerColor === 'string' ? mp.ownerColor : '',
+            ),
+          )
+          .addTo(map);
+        map.getCanvas().style.cursor = 'pointer';
+        // A marker has no region outline to highlight; clear the previous one
+        // (and reset lastHoverId so moving back onto a region re-triggers it).
+        lastHoverId = null;
+        (map.getSource(HOVER_SOURCE) as GeoSource | undefined)?.setData(emptyFC());
+        return;
+      }
      const p = f.properties as { name?: string; regionId?: string };
      const subId = typeof p?.regionId === 'string' ? p.regionId : '';
      if (subId && subId !== lastHoverId) {
@@ -466,6 +713,19 @@ export default function WorldMap({
    const onClick = (e: maplibregl.MapLayerMouseEvent) => {
      const f = e.features?.[0];
      if (!f) return;
+      // (v0.27, #44) A marker under the cursor: focus its owning nation
+      // (identical to its region's owner — the engine keeps a marker's owner in
+      // sync with the region) and carry the marker's name into the dossier.
+      const markerHits = map.queryRenderedFeatures(e.point, { layers: [MARKER_SYMBOL] });
+      if (markerHits.length > 0) {
+        const mp = (markerHits[0].properties ?? {}) as { ownerId?: string; name?: string };
+        const owner = typeof mp.ownerId === 'string' ? mp.ownerId : '';
+        if (owner) {
+          const info = typeof mp.name === 'string' ? { name: mp.name } : undefined;
+          onFocusNationRef.current?.(owner, info);
+        }
+        return;
+      }
      const region = mapFeatureOwner(regionsRef.current, f);
      if (!region?.ownerId) return;
      // Carry the clicked sub-region's name so the dossier can show which region
@@ -497,6 +757,9 @@ export default function WorldMap({
      if (!map.getSource(FLASH_SOURCE)) {
        map.addSource(FLASH_SOURCE, { type: 'geojson', data: emptyFC() });
      }
+      if (!map.getSource(MARKERS_SOURCE)) {
+        map.addSource(MARKERS_SOURCE, { type: 'geojson', data: emptyFC() });
+      }
    };

    // Stamp ownership + colors onto the regions source (no-op until both the
@@ -509,6 +772,26 @@ export default function WorldMap({
      src.setData(applyRegions(geo, regionsRef.current, playerRef.current, idKey, unownedRef.current));
    };

+    // Stamp the current markers onto the marker source (v0.27, #44).
+    const paintMarkers = () => {
+      const src = map.getSource(MARKERS_SOURCE) as GeoSource | undefined;
+      if (!src) return;
+      src.setData(buildMarkersFC(markersRef.current, nationsRef.current));
+    };
+
+    // Register the eight canvas-generated marker-type icon images (v0.27, #44).
+    // Images are cleared on a style (re)load, so this is (re)run from
+    // `ensureLayers` (which fires on every `styledata`). Self-contained — no
+    // external font/glyph endpoint — so markers render offline and
+    // deterministically.
+    const ensureMarkerImages = async () => {
+      for (const type of MARKER_TYPES) {
+        const id = `marker-${type}`;
+        if (map.getImage(id)) continue;
+        await map.addImage(id, drawMarkerIcon(type));
+      }
+    };
+
    const ensureLayers = async () => {
      if (cancelled) return;
      ensureSources();
@@ -528,6 +811,7 @@ export default function WorldMap({
      }
      if (cancelled) return;
      paintRegions();
+      paintMarkers();
      if (!map.getLayer(FILL_LAYER)) {
        // The choropleth is the star: a high opacity so the vivid per-nation
        // colors read clearly even on the dark background / over the terrain.
@@ -554,8 +838,9 @@ export default function WorldMap({
      }
      // NOTE: layers are added in bottom→top order (each appends on top). The
      // stack is: fill, base borders, player border, territory-change flash,
-      // hover brighten, hover outline. Do not use a `beforeId` here — it throws
-      // if that layer does not exist yet on a fresh style load.
+      // hover brighten, hover outline, and (top-most) the LLM-placed map
+      // markers' symbol layer (v0.27, #44). Do not use a `beforeId` here — it
+      // throws if that layer does not exist yet on a fresh style load.
      if (!map.getLayer(PLAYER_LINE)) {
        map.addLayer({
          id: PLAYER_LINE,
@@ -589,6 +874,36 @@ export default function WorldMap({
          paint: { 'line-color': '#ffffff', 'line-width': 1.6, 'line-opacity': 0.9 },
        });
      }
+      // (v0.27, #44) The LLM-placed map markers: a top-most symbol layer.
+      // Each marker renders its type's canvas-generated icon (a distinct shape,
+      // per-type color from the shared MARKER_TYPE_INFO contract) with a dark
+      // outline for legibility on any choropleth fill. The icon images are
+      // self-contained (no external font/glyph endpoint), so markers render
+      // offline and deterministically. `icon-image` is `marker-<type>`, the
+      // named canvas images registered by `ensureMarkerImages` above.
+      await ensureMarkerImages();
+      if (!map.getLayer(MARKER_SYMBOL)) {
+        map.addLayer({
+          id: MARKER_SYMBOL,
+          type: 'symbol',
+          source: MARKERS_SOURCE,
+          layout: {
+            'icon-image': ['concat', 'marker-', ['get', 'type']],
+            'icon-size': 0.8,
+            'icon-allow-overlap': true,
+            'icon-ignore-placement': true,
+          },
+        });
+      }
+      // Marker interactions: the markers sit above the choropleth, but they
+      // deliberately share the region (FILL_LAYER) handlers registered below.
+      // MapLibre layer-scoped events are independent per-layer delegates (no
+      // propagation, no stopPropagation), so a marker-on-region would fire
+      // both a marker and a region handler. Instead the region handlers detect
+      // a marker under the cursor (see onHover/onClick) and act on the
+      // marker's data; clicking a marker focuses its owning nation via the
+      // same path as clicking its region (the marker's owner == its region's
+      // owner).
      map.off('mousemove', FILL_LAYER, onHover);
      map.off('mouseout', FILL_LAYER, onHoverOut);
      map.off('click', FILL_LAYER, onClick);
@@ -646,6 +961,19 @@ export default function WorldMap({
    }
  }, [regions, playerNationId, unowned]);

+  // (v0.27, #44) Repaint the marker symbol layer whenever the marker list
+  // changes (a turn placed/removed markers) or the nations record changes
+  // (a confirmed rename/merge changes an owner's display name). No-op until
+  // the map + source exist (the mount effect's ensureLayers applies the
+  // current data once the layer structure is in place).
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const src = map.getSource(MARKERS_SOURCE) as GeoSource | undefined;
+    if (!src) return;
+    src.setData(buildMarkersFC(markers ?? [], nations));
+  }, [markers, nations]);
+
  // Full-viewport, edge-to-edge background layer. `position: fixed` is set
  // inline because MapLibre's own stylesheet sets `.maplibregl-map` to
  // `position: relative`, which would otherwise win over a Tailwind class.