Goods Growth Table
-
-
- {iterate(12, (i) => {
- const cityGroup = i < 6 ? CityGroup.WHITE : CityGroup.BLACK;
- const onRoll = OnRoll.parse((i % 6) + 1);
- const city = cities.regularCities.get(cityGroup)?.[onRoll];
- const urbanizedCity =
- cities.urbanizedCities.get(cityGroup)?.[onRoll];
- const letter = i < 2 || i >= 10 ? "" : numberToLetter(i - 2);
- return (
-
-
{onRoll}
- {iterate(maxRegularGoods, (goodIndex) => (
-
- onClick(
- false,
- cityGroup,
- onRoll,
- maxRegularGoods - 1 - goodIndex,
- )
- }
- />
- ))}
- {hasUrbanizedCities && {urbanizedCity && letter}
}
- {hasUrbanizedCities &&
- iterate(maxUrbanizedGoods, (goodIndex) => (
-
- onClick(
- true,
- cityGroup,
- onRoll,
- maxUrbanizedGoods - 1 - goodIndex,
- )
- }
- />
- ))}
-
- );
- })}
+
+
+ White
+
+ {columns.slice(0, 6)}
+
+
+
+ Black
+
+ {columns.slice(6)}
+
+
);
}
+function HeaderHex({ onRoll, primaryGood, letter }: { onRoll?: OnRoll; primaryGood?: Good; letter?: string }) {
+ // Use the goods CSS class and read the --good-color CSS variable at runtime so
+ // CSS remains the single source of truth. Fall back to a neutral color if
+ // DOM or the variable isn't available.
+ const defaultColor = "#e69074";
+
+ const fillColor = primaryGood != null ? readGoodColor(primaryGood) : defaultColor;
+ const goodClass = primaryGood != null ? goodStyle(primaryGood) : "";
+
+ function parseHexOrRgb(color: string): [number, number, number] {
+ if (color.startsWith("#")) {
+ const hex = color.substring(1);
+ if (hex.length === 3) {
+ const r = parseInt(hex[0] + hex[0], 16);
+ const g = parseInt(hex[1] + hex[1], 16);
+ const b = parseInt(hex[2] + hex[2], 16);
+ return [r, g, b];
+ }
+ const r = parseInt(hex.substring(0, 2), 16);
+ const g = parseInt(hex.substring(2, 4), 16);
+ const b = parseInt(hex.substring(4, 6), 16);
+ return [r, g, b];
+ }
+ if (color.startsWith("rgb")) {
+ const parts = color.replace(/rgba?\(|\)/g, "").split(",").map((s) => parseInt(s.trim(), 10));
+ return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+ }
+ // default
+ return [230, 144, 116];
+ }
+
+ function luminance([r, g, b]: [number, number, number]) {
+ // standard relative luminance
+ const rs = r / 255;
+ const gs = g / 255;
+ const bs = b / 255;
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+ }
+
+ const label = onRoll != null ? String(onRoll) : letter ?? "";
+
+ const rgb = parseHexOrRgb(fillColor);
+ const lum = luminance(rgb);
+ const textFill = lum > 0.6 ? "#222222" : "#ffffff";
+
+ const labelStyle = { fill: textFill, fontSize: 14, fontWeight: 700 } as const;
+
+ // Render an SVG hex so stroke and orientation match map hexes.
+ // We'll compute a 6-point polygon centered in an SVG viewbox of width W and height H
+ const W = 32;
+ const H = Math.round(W * 0.9);
+ const cx = W / 2;
+ const cy = H / 2;
+ // size is distance from center to corner. Choose size so polygon fits inside viewbox with stroke.
+ const size = Math.min(W, H) / 2 - 3; // leave room for stroke
+ // compute corners using floats (no rounding) so the SVG polygon is symmetric
+ const angles = [0, Math.PI / 3, (2 * Math.PI) / 3, Math.PI, (4 * Math.PI) / 3, (5 * Math.PI) / 3];
+ const corners = angles.map((rad) => ({ x: cx + Math.cos(rad) * size, y: cy + Math.sin(rad) * size }));
+ const points = polygon(corners);
+
+ return (
+
+ );
+}
+
function PlaceGood({
good,
toggleSelectedGood,
diff --git a/src/client/grid/readGoodColor.ts b/src/client/grid/readGoodColor.ts
new file mode 100644
index 00000000..aa9975dd
--- /dev/null
+++ b/src/client/grid/readGoodColor.ts
@@ -0,0 +1,26 @@
+import { Good } from "../../engine/state/good";
+import { goodStyle } from "./good";
+
+const cache = new Map
();
+const fallback = "#444444";
+
+export function readGoodColor(g: Good): string {
+ if (cache.has(g)) return cache.get(g)!;
+ if (typeof document === "undefined") return fallback;
+ try {
+ const el = document.createElement("div");
+ el.className = goodStyle(g);
+ el.style.position = "absolute";
+ el.style.visibility = "hidden";
+ el.style.pointerEvents = "none";
+ document.body.appendChild(el);
+ const value = getComputedStyle(el).getPropertyValue("--good-color");
+ document.body.removeChild(el);
+ const v = value ? value.trim() : "";
+ const res = v || fallback;
+ cache.set(g, res);
+ return res;
+ } catch (e) {
+ return fallback;
+ }
+}