Render AHBG tiles as Seed of Life centerpoints

Each tile is a centerpoint. Circles have radius equal to adjacent-center
distance and pass through neighboring tiles. Hex polygons are removed.

Author: erinepshovel-code

ahbg/README.md

@@ -20,8 +20,8 @@ Owns visual implementation:
 Grok does not define game mechanics.
 
 Current Grok surface: [`presentation/`](presentation/) renders a
-`ahbg.presentation.snapshot` (seven-tile hex neighborhood, A0 marker, feed,
-tile inspect). That snapshot is not plane state.
+`ahbg.presentation.snapshot` (Seed of Life circles, tile = centerpoint, A0
+marker, feed, inspect). That snapshot is not plane state.
 
 ### Codex — game engine / runtime
 

ahbg/presentation/README.md

@@ -9,9 +9,10 @@ is not identity.
 
 ## Boundary
 
-- Included: hex neighborhood rendering, unit marker, selection highlight, human feed
+- Included: Seed of Life circle rendering, tile-as-centerpoint, unit marker, selection, human feed
 - Excluded: turns, movement, construction, War, loyalty, DM rolls, legal observation
 - Codex owns engine state. This snapshot is `ahbg.presentation.snapshot`, not plane state.
+- A tile is the centerpoint. The circle around it is geometry, not the tile.
 
 ## Usage
 
@@ -45,6 +46,6 @@ Unknown mechanic fields are ignored. Missing required visual fields fail closed.
 
 ## hmmm
 
-- exact sacred-geometry vocabulary of the board (hex is a presentation choice)
+- whether later Flower-of-Life rings are presentation-only extensions of this Seed
 - whether Codex plane state will map 1:1 onto this snapshot
 - animation of motion/construction once the engine emits events

ahbg/presentation/board.css

@@ -46,21 +46,33 @@ svg {
   align-self: center;
 }
 
-.hex {
-  fill: var(--tile);
+.seed-circle {
+  fill: none;
   stroke: var(--tile-stroke);
-  stroke-width: 2;
-  cursor: pointer;
+  stroke-width: 1.5;
+  pointer-events: none;
+}
+
+.tile-point {
+  fill: var(--tile-stroke);
+  stroke: var(--paper);
+  stroke-width: 1.5;
+  pointer-events: none;
 }
 
-.hex.selected {
+.tile-point.selected {
+  fill: var(--selected);
   stroke: var(--selected);
-  stroke-width: 4;
 }
 
-.hex-label {
+.tile-hit {
+  fill: transparent;
+  cursor: pointer;
+}
+
+.tile-label {
   fill: var(--ink);
-  font-size: 12px;
+  font-size: 11px;
   pointer-events: none;
   text-anchor: middle;
 }
@@ -72,6 +84,13 @@ svg {
   pointer-events: none;
 }
 
+.unit-label {
+  fill: var(--paper);
+  font-size: 10px;
+  pointer-events: none;
+  text-anchor: middle;
+}
+
 .feed {
   background: #efe7d6;
   border-left: 1px solid var(--tile-stroke);

ahbg/presentation/board.html

@@ -10,8 +10,8 @@
     <main>
       <section class="board-wrap">
         <h1>AHBG plane</h1>
-        <p class="note">Presentation only. Not mechanics. Click a tile to inspect it.</p>
-        <svg id="board" role="img" aria-label="seven-tile hex neighborhood with A0"></svg>
+        <p class="note">Presentation only. Not mechanics. Each tile is a centerpoint. Circles are Seed of Life geometry through neighboring centers. Click a center to inspect.</p>
+        <svg id="board" role="img" aria-label="Seed of Life tiles as centerpoints with A0"></svg>
       </section>
       <aside class="feed">
         <h2>Feed</h2>

ahbg/presentation/board.js

@@ -17,24 +17,17 @@ const EMBEDDED_SNAPSHOT = {
   feed: [{ turn: 0, text: "plane loaded; A0 at origin" }],
 };
 
-const SIZE = 42;
+// Circle radius equals center-to-center distance. The tile is the centerpoint.
+const RADIUS = 64;
+const TILE_POINT = 6;
 
 function axialToPixel(q, r) {
   return {
-    x: SIZE * Math.sqrt(3) * (q + r / 2),
-    y: SIZE * (3 / 2) * r,
+    x: RADIUS * (q + r / 2),
+    y: RADIUS * (Math.sqrt(3) / 2) * r,
   };
 }
 
-function hexPoints(cx, cy) {
-  const points = [];
-  for (let i = 0; i < 6; i += 1) {
-    const angle = (Math.PI / 180) * (60 * i - 30);
-    points.push(`${cx + SIZE * Math.cos(angle)},${cy + SIZE * Math.sin(angle)}`);
-  }
-  return points.join(" ");
-}
-
 function validateSnapshot(snapshot) {
   if (snapshot.kind !== "ahbg.presentation.snapshot") {
     throw new Error("kind must be ahbg.presentation.snapshot");
@@ -62,10 +55,10 @@ function render(snapshot) {
   feed.replaceChildren();
 
   const pixels = snapshot.tiles.map((tile) => axialToPixel(tile.q, tile.r));
-  const minX = Math.min(...pixels.map((p) => p.x)) - SIZE * 2;
-  const minY = Math.min(...pixels.map((p) => p.y)) - SIZE * 2;
-  const maxX = Math.max(...pixels.map((p) => p.x)) + SIZE * 2;
-  const maxY = Math.max(...pixels.map((p) => p.y)) + SIZE * 2;
+  const minX = Math.min(...pixels.map((p) => p.x)) - RADIUS * 1.2;
+  const minY = Math.min(...pixels.map((p) => p.y)) - RADIUS * 1.2;
+  const maxX = Math.max(...pixels.map((p) => p.x)) + RADIUS * 1.2;
+  const maxY = Math.max(...pixels.map((p) => p.y)) + RADIUS * 1.2;
   svg.setAttribute("viewBox", `${minX} ${minY} ${maxX - minX} ${maxY - minY}`);
 
   const byId = Object.fromEntries(snapshot.tiles.map((tile) => [tile.id, tile]));
@@ -74,29 +67,55 @@ function render(snapshot) {
   function paintInspect() {
     const tile = byId[selected];
     const occupants = (snapshot.units || []).filter((unit) => unit.tile === selected);
-    inspect.textContent = `${tile.label || tile.id} (${tile.q},${tile.r})${
+    inspect.textContent = `tile ${tile.label || tile.id} center (${tile.q},${tile.r})${
       occupants.length ? ` — ${occupants.map((unit) => unit.label || unit.id).join(", ")}` : ""
     }`;
   }
 
+  function paintSelection() {
+    svg.querySelectorAll(".tile-point").forEach((node) => {
+      node.setAttribute("class", node.dataset.tile === selected ? "tile-point selected" : "tile-point");
+    });
+    paintInspect();
+  }
+
   snapshot.tiles.forEach((tile) => {
     const { x, y } = axialToPixel(tile.q, tile.r);
-    const poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    poly.setAttribute("points", hexPoints(x, y));
-    poly.setAttribute("class", tile.id === selected ? "hex selected" : "hex");
-    poly.dataset.tile = tile.id;
-    poly.addEventListener("click", () => {
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", x);
+    circle.setAttribute("cy", y);
+    circle.setAttribute("r", RADIUS);
+    circle.setAttribute("class", "seed-circle");
+    svg.appendChild(circle);
+  });
+
+  snapshot.tiles.forEach((tile) => {
+    const { x, y } = axialToPixel(tile.q, tile.r);
+    const point = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    point.setAttribute("cx", x);
+    point.setAttribute("cy", y);
+    point.setAttribute("r", TILE_POINT);
+    point.setAttribute("class", tile.id === selected ? "tile-point selected" : "tile-point");
+    point.dataset.tile = tile.id;
+    point.addEventListener("click", () => {
+      selected = tile.id;
+      paintSelection();
+    });
+    svg.appendChild(point);
+    const hit = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    hit.setAttribute("cx", x);
+    hit.setAttribute("cy", y);
+    hit.setAttribute("r", RADIUS * 0.28);
+    hit.setAttribute("class", "tile-hit");
+    hit.addEventListener("click", () => {
       selected = tile.id;
-      svg.querySelectorAll(".hex").forEach((node) => {
-        node.setAttribute("class", node.dataset.tile === selected ? "hex selected" : "hex");
-      });
-      paintInspect();
+      paintSelection();
     });
-    svg.appendChild(poly);
+    svg.appendChild(hit);
     const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
     text.setAttribute("x", x);
-    text.setAttribute("y", y + 18);
-    text.setAttribute("class", "hex-label");
+    text.setAttribute("y", y + RADIUS * 0.38);
+    text.setAttribute("class", "tile-label");
     text.textContent = tile.label || tile.id;
     svg.appendChild(text);
   });
@@ -106,15 +125,14 @@ function render(snapshot) {
     const { x, y } = axialToPixel(tile.q, tile.r);
     const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
     marker.setAttribute("cx", x);
-    marker.setAttribute("cy", y - 6);
-    marker.setAttribute("r", 10);
+    marker.setAttribute("cy", y);
+    marker.setAttribute("r", 11);
     marker.setAttribute("class", "unit");
     svg.appendChild(marker);
     const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
     label.setAttribute("x", x);
-    label.setAttribute("y", y - 3);
-    label.setAttribute("class", "hex-label");
-    label.setAttribute("fill", "#f4efe4");
+    label.setAttribute("y", y + 4);
+    label.setAttribute("class", "unit-label");
     label.textContent = unit.label || unit.id;
     svg.appendChild(label);
   });

ahbg/presentation/geometry.py

@@ -0,0 +1,40 @@
+"""Seed of Life presentation geometry.
+
+The tile is the centerpoint. Each circle has radius equal to the distance
+between adjacent centers, so a circle passes through neighboring tile points.
+This is graphics, not game mechanics.
+"""
+
+from __future__ import annotations
+
+import math
+from typing import Sequence
+
+
+def axial_to_xy(q: int, r: int, radius: float) -> tuple[float, float]:
+    """Map axial coordinates so adjacent centers are `radius` apart."""
+
+    if radius <= 0:
+        raise ValueError("radius must be positive")
+    x = radius * (q + r / 2)
+    y = radius * (math.sqrt(3) / 2) * r
+    return (x, y)
+
+
+def center_distance(left: tuple[float, float], right: tuple[float, float]) -> float:
+    dx = left[0] - right[0]
+    dy = left[1] - right[1]
+    return math.hypot(dx, dy)
+
+
+def adjacent_center_pairs(tiles: Sequence[tuple[int, int]], radius: float) -> tuple[tuple[tuple[int, int], tuple[int, int]], ...]:
+    """Pairs of axial tiles whose centers are one radius apart."""
+
+    points = {item: axial_to_xy(item[0], item[1], radius) for item in tiles}
+    pairs = []
+    items = list(tiles)
+    for i, left in enumerate(items):
+        for right in items[i + 1 :]:
+            if math.isclose(center_distance(points[left], points[right]), radius, rel_tol=1e-9, abs_tol=1e-9):
+                pairs.append((left, right))
+    return tuple(pairs)

ahbg/presentation/tests/test_snapshot.py

@@ -8,6 +8,7 @@
 ROOT = Path(__file__).resolve().parents[1]
 sys.path.insert(0, str(ROOT))
 
+from geometry import adjacent_center_pairs, axial_to_xy, center_distance
 from snapshot import KIND, PresentationSnapshotError, load_snapshot, validate_snapshot
 
 
@@ -25,6 +26,20 @@ def test_unknown_unit_tile_fails_closed(self) -> None:
         with self.assertRaisesRegex(PresentationSnapshotError, "not a presented tile"):
             validate_snapshot(snapshot)
 
+    def test_seed_of_life_centers_are_one_radius_apart(self) -> None:
+        radius = 10.0
+        origin = axial_to_xy(0, 0, radius)
+        east = axial_to_xy(1, 0, radius)
+        self.assertAlmostEqual(center_distance(origin, east), radius)
+        tiles = [(0, 0), (1, -1), (1, 0), (0, 1), (-1, 1), (-1, 0), (0, -1)]
+        pairs = adjacent_center_pairs(tiles, radius)
+        self.assertEqual(len(pairs), 12)
+        for left, right in pairs:
+            self.assertAlmostEqual(
+                center_distance(axial_to_xy(*left, radius), axial_to_xy(*right, radius)),
+                radius,
+            )
+
     def test_wrong_kind_fails_closed(self) -> None:
         snapshot = copy.deepcopy(dict(load_snapshot()))
         snapshot["kind"] = "ahbg.plane"