civ/render.js

function render() {
const start = performance.now();
const w = sim.world;
const size = w.size;
if (!renderImage || renderImageSize !== size) {
renderImage = ctx.createImageData(size, size);
renderImageSize = size;
}
const image = renderImage;
const data = image.data;
const mode = els.viewMode.value;
const cityPolityColor = new Map();
const polityColors = new Map();
if (mode === "polities") {
for (const polity of sim.polities) {
polityColors.set(polity.id, {
color: polity.color,
isGraphHover: graphState.hoverPolityId === polity.id
});
}
for (const city of sim.cities) {
if (city.polityId === null) continue;
const polity = cityPolity(city);
if (!polity) continue;
const isGraphHover = graphState.hoverPolityId === polity.id;
cityPolityColor.set(city.id, {
color: polity.color,
isGraphHover
});
}
}
for (let i = 0; i < w.count; i++) {
let color;
if (mode === "resources") {
const v = clamp(w.resource[i] / 30, 0, 1);
color = mix([28, 36, 40], [107, 188, 85], v);
} else if (mode === "ethnicity") {
color = terrainInfo[w.terrain[i]].color;
const ethnicMix = sim.tileEthnicMix?.get(i);
const population = w.population?.[i] || 0;
if (ethnicMix && ethnicMix.size && population >= 0.25) {
const dominant = dominantComposition(ethnicMix);
const ethnicityColor = dominant != null ? sim.ethnicities.get(dominant)?.color : null;
const total = compositionTotal(ethnicMix);
if (ethnicityColor && Number.isFinite(total) && total > 0) {
const dominantShare = (ethnicMix.get(dominant) || 0) / total;
const popStrength = clamp(Math.log1p(population) / Math.log(80), 0.05, 0.72);
const purity = clamp(dominantShare, 0.25, 1);
const strength = clamp(popStrength * (0.45 + purity * 0.55), 0.04, 0.72);
color = mix(color, ethnicityColor, strength);
}
}
if (w.city[i] >= 0) {
const city = sim.getCityById(w.city[i]);
if (city) color = mix(color, cityMajorityColor(city), 0.72);
}
} else if (mode === "pressure") {
const pressure = w.populationPressure?.[i] ?? (w.pressure[i] / 12);
const v = clamp(pressure, 0, 1.6) / 1.6;
color = mix(terrainInfo[w.terrain[i]].color, [210, 73, 67], v);
} else if (mode === "polities") {
color = terrainInfo[w.terrain[i]].color;
const territory = w.polity?.[i] ?? -1;
if (territory >= 0) {
const polityColor = polityColors.get(territory);
if (polityColor) {
const strength = clamp(0.16 + (w.control?.[i] || 0) * 0.38, 0.18, 0.55);
color = mix(color, polityColor.color, polityColor.isGraphHover ? Math.min(0.72, strength + 0.18) : strength);
if (w.contested?.[i]) color = mix(color, [128, 74, 50], 0.30);
if (sim.isBorderTile?.(i)) color = mix(color, [232, 225, 185], 0.22);
if (graphState.hoverPolityId !== null && !polityColor.isGraphHover) color = mix(color, [16, 18, 19], 0.30);
}
}
if (w.city[i] >= 0) {
const polityColor = cityPolityColor.get(w.city[i]);
if (polityColor) {
color = mix(color, polityColor.color, polityColor.isGraphHover ? 0.82 : 0.5);
if (graphState.hoverPolityId !== null && !polityColor.isGraphHover) color = mix(color, [16, 18, 19], 0.28);
}
}
} else if (mode === "technology") {
color = mix(terrainInfo[w.terrain[i]].color, [44, 42, 48], 0.35);
} else if (mode === "pheromone") {
const v = clamp(w.pheromone[i] / SimConfig.route.maxPheromone, 0, 1);
color = mix(mix(terrainInfo[w.terrain[i]].color, [18, 20, 18], 0.58), [216, 177, 86], v);
} else {
color = terrainInfo[w.terrain[i]].color;
}
const p = i * 4;
data[p] = color[0];
data[p + 1] = color[1];
data[p + 2] = color[2];
data[p + 3] = 255;
}
ctx.putImageData(image, 0, 0);
renderDisasters();
drawTradeLinks();
drawCampaigns();
drawAgentsAndCities(mode);
drawGraphPolityHighlight();
maybeRenderStateGraph();
els.frameCost.textContent = `${Math.round(performance.now() - start)}ms`;
}
function renderDisasters() {
if (!sim?.disasters?.length) return;
sim.disasters = sim.disasters.filter(disaster => sim.year <= disaster.expires);
if (!sim.disasters.length) return;
ctx.save();
ctx.globalCompositeOperation = "source-over";
for (const disaster of sim.disasters) {
const duration = Math.max(1, disaster.expires - disaster.year);
const ageFraction = clamp((sim.year - disaster.year) / duration, 0, 1);
const alpha = (1 - ageFraction) * (0.10 + (disaster.intensity || 0.5) * 0.22);
if (alpha <= 0.005) continue;
const innerRadius = Math.max(1, disaster.radius * 0.32);
const gradient = ctx.createRadialGradient(disaster.x, disaster.y, innerRadius, disaster.x, disaster.y, disaster.radius);
gradient.addColorStop(0, `rgba(211, 95, 84, ${alpha * 1.35})`);
gradient.addColorStop(0.55, `rgba(211, 95, 84, ${alpha * 0.65})`);
gradient.addColorStop(1, "rgba(211, 95, 84, 0)");
ctx.fillStyle = gradient;
drawGraphCircle(ctx, disaster.x, disaster.y, disaster.radius);
ctx.strokeStyle = `rgba(236, 126, 111, ${alpha * 0.85})`;
ctx.lineWidth = 1;
strokeCircle(ctx, disaster.x, disaster.y, disaster.radius);
}
ctx.restore();
}
function rgb(color, boost = 0) {
return `rgb(${Math.min(255, color[0] + boost)}, ${Math.min(255, color[1] + boost)}, ${Math.min(255, color[2] + boost)})`;
}
function rgba(color, alpha, boost = 0) {
return `rgba(${Math.min(255, color[0] + boost)}, ${Math.min(255, color[1] + boost)}, ${Math.min(255, color[2] + boost)}, ${alpha})`;
}
function fillSquare(g, x, y, radius) {
g.fillRect(x - radius, y - radius, radius * 2 + 1, radius * 2 + 1);
}
function strokeLine(g, x1, y1, x2, y2) {
g.beginPath();
g.moveTo(x1, y1);
g.lineTo(x2, y2);
g.stroke();
}
function strokeCircle(g, x, y, r) {
g.beginPath();
g.arc(x, y, r, 0, Math.PI * 2);
g.stroke();
}
function drawTradeLinks() {
const w = sim.world;
ctx.save();
const currentLinkTiles = new Set();
for (const link of sim.tradeLinks) {
for (const tile of link.path || []) currentLinkTiles.add(tile);
}
ctx.globalAlpha = 0.24;
ctx.fillStyle = "#d9b650";
for (const i of sim.activeTradeRouteTiles || []) {
if (currentLinkTiles.has(i)) continue;
ctx.fillRect(i % w.size, Math.floor(i / w.size), 1, 1);
}
if (!sim.tradeLinks.length) {
ctx.restore();
return;
}
for (const link of sim.tradeLinks) {
ctx.globalAlpha = clamp(0.12 + link.strength * 0.35, 0.16, 0.42);
ctx.fillStyle = "#ffd75a";
for (const tile of link.path || []) {
ctx.fillRect(tile % w.size, Math.floor(tile / w.size), 1, 1);
}
}
ctx.restore();
}
function drawCampaigns() {
if (!sim?.campaigns?.length) return;
const w = sim.world;
ctx.save();
for (const campaign of sim.campaigns) {
if (campaign.status !== "active" || campaign.targetTile == null) continue;
const x = campaign.targetTile % w.size;
const y = Math.floor(campaign.targetTile / w.size);
const age = Math.max(0, sim.year - campaign.started) / Math.max(1, campaign.expires - campaign.started);
const pulse = 0.5 + Math.sin(age * Math.PI * 8) * 0.5;
const radius = 2.5 + clamp(campaign.progress, 0, 1) * 4 + pulse * 1.5;
if (campaign.type === "border_war" && campaign.affectedTiles?.length) {
ctx.globalAlpha = 0.10 + clamp(campaign.progress, 0, 1) * 0.10;
ctx.fillStyle = "rgba(164, 76, 58, 0.9)";
for (const tile of campaign.affectedTiles) {
ctx.fillRect(tile % w.size, Math.floor(tile / w.size), 1, 1);
}
}
ctx.globalAlpha = 0.55;
ctx.strokeStyle = campaign.type === "border_war" ? "rgba(236, 126, 111, 0.95)" : "rgba(239, 211, 119, 0.95)";
ctx.lineWidth = 1;
strokeCircle(ctx, x + 0.5, y + 0.5, campaign.type === "border_war" ? radius + 2.5 : radius);
if (campaign.type === "border_war" && campaign.targetCityId != null) {
ctx.globalAlpha = 0.82;
ctx.lineWidth = 1.4;
ctx.strokeStyle = "rgba(255, 195, 121, 0.95)";
strokeCircle(ctx, x + 0.5, y + 0.5, radius + 5 + pulse * 2);
}
ctx.globalAlpha = 0.22;
ctx.fillStyle = campaign.type === "nonstate_subjugation" ? "rgba(180, 111, 73, 0.9)" : "rgba(239, 211, 119, 0.9)";
fillSquare(ctx, x, y, 1);
}
ctx.restore();
}
function drawAgentsAndCities(mode) {
ctx.save();
if (mode !== "ethnicity") {
for (const city of sim.cities) {
const radius = cityRenderRadius(city);
const color = cityDisplayColor(city, mode);
ctx.fillStyle = rgba(color, 0.72);
ctx.globalAlpha = 0.88;
fillSquare(ctx, city.x, city.y, radius);
}
}
ctx.globalAlpha = 1;
if (mode === "technology") {
for (const a of sim.agents) {
sim.ensureAgentTech(a);
const farming = techLevel(a, "farming");
const metallurgy = techLevel(a, "metallurgy");
const tech = clamp(Math.max(farming, metallurgy), 0, 1);
if (tech <= 0.01) continue;
const color = mix([95, 171, 91], [202, 169, 102], metallurgy / Math.max(0.001, farming + metallurgy));
ctx.fillStyle = rgba(color, clamp(0.32 + tech * 0.68, 0.32, 1));
ctx.fillRect(a.x, a.y, 1, 1);
}
} else if (mode === "ethnicity") {
// Phase 2: ethnicity view is driven by tile-level population/culture fields.
// Individual agents remain in the simulation but no longer define this layer.
} else {
ctx.fillStyle = "#eeeccf";
for (const tile of sim.tileAgents.keys()) {
ctx.fillRect(tile % sim.world.size, Math.floor(tile / sim.world.size), 1, 1);
}
}
for (const city of sim.cities) {
if (mode === "ethnicity") {
const radius = cityRenderRadius(city);
const color = cityDisplayColor(city, mode);
ctx.globalAlpha = 0.90;
ctx.fillStyle = rgba(color, 0.78);
fillSquare(ctx, city.x, city.y, radius);
ctx.globalAlpha = 1;
}
const color = cityDisplayColor(city, mode);
ctx.fillStyle = rgb(color, 55);
ctx.fillRect(city.x, city.y, 1, 1);
}
ctx.restore();
}
function drawGraphPolityHighlight() {
const polityId = graphState.hoverPolityId;
if (polityId === null) return;
const polity = sim.getPolityById(polityId);
if (!polity) return;
const cities = sim.getPolityCities(polity);
if (!cities.length) return;
ctx.save();
ctx.lineWidth = 1;
for (const city of cities) {
const radius = Math.max(3, cityRenderRadius(city) + 2);
const color = polity.color || [238, 232, 188];
ctx.globalAlpha = city.id === polity.centerCityId ? 0.95 : 0.72;
ctx.strokeStyle = rgb(color, 72);
ctx.strokeRect(city.x - radius, city.y - radius, radius * 2 + 1, radius * 2 + 1);
ctx.globalAlpha = 0.32;
ctx.fillStyle = rgb(color);
ctx.fillRect(city.x - radius + 1, city.y - radius + 1, Math.max(1, radius * 2 - 1), Math.max(1, radius * 2 - 1));
}
ctx.restore();
}
function cityRenderRadius(city) {
return clamp(Math.floor(Math.sqrt(city.population) / 12), 1, 7);
}
function cityMajorityColor(city) {
const id = dominantComposition(city.ethnicityComposition);
return sim.ethnicities.get(id)?.color || [242, 215, 134];
}
function cityPolity(city) {
return city?.polityId != null ? sim.getPolityById(city.polityId) : null;
}
function cityDisplayColor(city, mode) {
if (mode === "polities") {
const polity = cityPolity(city);
if (polity) return polity.color;
return [218, 205, 154];
}
return cityMajorityColor(city);
}
function techLevel(holder, key) {
return holder?.tech?.[key] || 0;
}
function knowledgeLevel(city, key) {
return city?.knowledge?.[key] || 0;
}
function showTooltip(event) {
const rect = els.canvas.getBoundingClientRect();
const simRect = els.sim.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / rect.width * sim.world.size);
const y = Math.floor((event.clientY - rect.top) / rect.height * sim.world.size);
hoverState = {
x,
y,
left: event.clientX - simRect.left + 16,
top: event.clientY - simRect.top + 16,
width: simRect.width,
height: simRect.height
};
renderTooltip();
}
function tooltipRow(label, value, show = true) {
return show ? `<span><b>${label}</b><em>${value}</em></span>` : "";
}
function tooltipSection(title, items) {
const body = items.filter(Boolean).join("");
return body ? `<section><h3>${title}</h3>${body}</section>` : "";
}
function renderTooltip() {
if (!hoverState) return;
const x = hoverState.x;
const y = hoverState.y;
if (x < 0 || y < 0 || x >= sim.world.size || y >= sim.world.size) {
hideTooltip();
return;
}
const w = sim.world;
const i = w.idx(x, y);
const agent = findAgentAt(x, y);
const city = w.city[i] >= 0 ? sim.getCityById(w.city[i]) : null;
const terrain = terrainInfo[w.terrain[i]];
const ethnicity = agent ? sim.ethnicities.get(agent.ethnicity) : null;
const waterInfluence = waterInfluenceAt(w, x, y).toFixed(2);
const cityEthnicity = city ? dominantComposition(city.ethnicityComposition) : null;
const mismatch = agent ? sim.climateMismatch(agent.ethnicity, i) : 0;
const polity = cityPolity(city);
const territoryId = w.polity?.[i] ?? -1;
const territoryPolity = territoryId >= 0 ? sim.getPolityById(territoryId) : null;
const ethnicMix = sim.tileEthnicMix?.get(i);
const tileDominantEthnicity = ethnicMix?.size ? dominantComposition(ethnicMix) : w.dominantEthnicity[i];
const regionalEthnicity = tileDominantEthnicity != null && tileDominantEthnicity >= 0 ? `E${tileDominantEthnicity}` : "-";
const tilePopulation = w.population?.[i] || 0;
const nearbyCampaigns = activeCampaignsNear(i);
els.tooltip.innerHTML = `
    <strong>${city ? `City #${city.id}` : agent ? "Agent group" : terrain.name}</strong>
    ${tooltipSection("Tile", [
      tooltipRow("Position", `${x}, ${y}`),
      tooltipRow("Terrain", terrain.name),
      tooltipRow("Resources", w.resource[i].toFixed(1)),
      tooltipRow("Fertility", w.fertility[i].toFixed(2)),
      tooltipRow("Minerals", w.mineral[i].toFixed(2)),
      tooltipRow("Temp / humid", `${w.temperature[i].toFixed(2)} / ${w.humidity[i].toFixed(2)}`),
      tooltipRow("Water", waterInfluence),
      tooltipRow("Pressure", (w.populationPressure?.[i] ?? 0).toFixed(2)),
      tooltipRow("Capacity", (w.populationCapacity?.[i] ?? 0).toFixed(1)),
      tooltipRow("Pheromone", w.pheromone[i].toFixed(1)),
      tooltipRow("Route", w.tradeRoute[i], w.tradeRoute[i])
    ])}
    ${tooltipSection("Territory", [
      tooltipRow("Territory", territoryPolity ? `#${territoryPolity.id}` : "Unclaimed"),
      tooltipRow("Control", `${Math.round((w.control?.[i] || 0) * 100)}%`),
      tooltipRow("Contested", w.contested?.[i] ? "yes" : "no"),
      tooltipRow("Campaign", nearbyCampaigns, nearbyCampaigns),
      tooltipRow("Dominant ethnicity", regionalEthnicity),
      tooltipRow("Tile population", tilePopulation >= 10 ? Math.round(tilePopulation).toLocaleString() : tilePopulation.toFixed(1))
    ])}
    ${tooltipSection("City & State", [
      tooltipRow("Population", city?.population.toLocaleString(), city),
      tooltipRow("Food stock", city?.storedResources.toFixed(1), city),
      tooltipRow("Supply stress", (city?.supplyStress || 0).toFixed(2), city),
      tooltipRow("Trade", city ? `${city.tradeLinks.size} links, ${(city.tradeValue || 0).toFixed(2)} value` : "", city),
      tooltipRow("Knowledge", city ? `${knowledgeLevel(city, "farming").toFixed(2)} farm / ${knowledgeLevel(city, "metallurgy").toFixed(2)} metal` : "", city),
      tooltipRow("City majority", `E${cityEthnicity}`, cityEthnicity),
      city ? cityEthnicityPie(city) : "",
      tooltipRow("State", polity ? `#${polity.id}` : "Independent", city),
      tooltipRow("Loyalty", city?.loyalty.toFixed(2), city),
      tooltipRow("Charisma", clamp(polity?.charisma ?? 1, 0.5, 1.5).toFixed(2), polity),
      tooltipRow("Leader tenure", polity ? `${Math.floor((sim.year - (polity.leaderStarted ?? polity.founded ?? sim.year)) / WEEKS_PER_YEAR)}y` : "", polity),
      tooltipRow("Treasury", polity?.treasury.toFixed(1), polity),
      tooltipRow("Capital", polity && city ? polity.centerCityId === city.id ? "yes" : "no" : "", polity)
    ])}
    ${tooltipSection("Culture & Agent", [
      tooltipRow("Local culture", `${regionalEthnicity} / ${w.cultureDiversity[i].toFixed(2)}`),
      tooltipRow("Agent ethnicity", `E${agent?.ethnicity}`, agent),
      tooltipRow("Lineage pop", ethnicity?.population, ethnicity),
      tooltipRow("Climate pref", ethnicity ? `${ethnicity.climateTemp.toFixed(2)} / ${ethnicity.climateHumidity.toFixed(2)}` : "", ethnicity),
      tooltipRow("Climate mismatch", mismatch.toFixed(2), agent),
      tooltipRow("Sedentary", agent ? agent.traits.sedentary.toFixed(2) : "", agent),
      tooltipRow("Ethnocentrism", agent ? agent.traits.ethnocentrism.toFixed(2) : "", agent),
      tooltipRow("Farming", agent ? `${techLevel(agent, "farming").toFixed(3)} / work ${(agent.farmingWork || 0).toFixed(2)}` : "", agent),
      tooltipRow("Metallurgy", techLevel(agent, "metallurgy").toFixed(3), agent),
      tooltipRow("Stored", agent?.resources.toFixed(1), agent)
    ])}
  `;
els.tooltip.hidden = false;
const margin = 8;
const width = els.tooltip.offsetWidth;
const height = els.tooltip.offsetHeight;
let left = hoverState.left;
let top = hoverState.top;
if (left + width + margin > hoverState.width) left = hoverState.left - width - 32;
if (top + height + margin > hoverState.height) top = hoverState.height - height - margin;
els.tooltip.style.left = `${clamp(left, margin, Math.max(margin, hoverState.width - width - margin))}px`;
els.tooltip.style.top = `${clamp(top, margin, Math.max(margin, hoverState.height - height - margin))}px`;
}
function cityEthnicityPie(city) {
if (!city?.ethnicityComposition?.size) return "";
const entries = [...city.ethnicityComposition]
.filter(([, count]) => count > 0)
.sort((a, b) => b[1] - a[1]);
const total = entries.reduce((sum, [, count]) => sum + count, 0);
if (total <= 0) return "";
const top = entries.slice(0, 5);
const other = entries.slice(5).reduce((sum, [, count]) => sum + count, 0);
const slices = other > 0 ? [...top, [0, other]] : top;
let cursor = 0;
const gradient = slices.map(([id, count]) => {
const start = cursor / total * 100;
cursor += count;
const end = cursor / total * 100;
const ethnicity = id ? sim.ethnicities.get(id) : null;
const color = ethnicity?.color || [122, 130, 126];
return `rgb(${color.join(",")}) ${start.toFixed(2)}% ${end.toFixed(2)}%`;
}).join(", ");
const labels = slices.map(([id, count]) => {
const ethnicity = id ? sim.ethnicities.get(id) : null;
const color = ethnicity?.color || [122, 130, 126];
const label = id ? `E${id}` : "Other";
return `<span class="ethnicity-pie-key"><i style="background: rgb(${color.join(",")})"></i>${label} ${Math.round(count / total * 100)}%</span>`;
}).join("");
return `
  <div class="ethnicity-pie-wrap">
    <div class="ethnicity-pie" style="background: conic-gradient(${gradient})"></div>
    <div class="ethnicity-pie-labels">${labels}</div>
  </div>
`;
}
function hideTooltip() {
hoverState = null;
els.tooltip.hidden = true;
}
function activeCampaignsNear(tile) {
if (!sim?.campaigns?.length) return "";
const w = sim.world;
const x = tile % w.size;
const y = Math.floor(tile / w.size);
const labels = [];
for (const campaign of sim.campaigns) {
if (campaign.status !== "active" || campaign.targetTile == null) continue;
const cx = campaign.targetTile % w.size;
const cy = Math.floor(campaign.targetTile / w.size);
const nearTarget = Math.abs(cx - x) + Math.abs(cy - y) <= 3;
const nearFront = campaign.affectedTiles?.includes(tile);
if (!nearTarget && !nearFront) continue;
labels.push(`${campaign.type.replaceAll("_", " ")} ${Math.round(clamp(campaign.progress, 0, 1) * 100)}%`);
}
return labels.slice(0, 2).join("; ");
}
function findAgentAt(x, y) {
const directIndex = sim.world.idx(x, y);
return sim.tileAgents.get(directIndex)?.[0] || null;
}
function waterInfluenceAt(world, x, y) {
let score = 0;
for (let dy = -3; dy <= 3; dy++) {
for (let dx = -3; dx <= 3; dx++) {
const d = Math.abs(dx) + Math.abs(dy);
if (!d || d > 3) continue;
const tx = x + dx;
const ty = y + dy;
if (tx < 0 || ty < 0 || tx >= world.size || ty >= world.size) continue;
if (world.terrain[world.idx(tx, ty)] === Terrain.WATER) score += (4 - d) / 4;
}
}
return score;
}
function updateStats(force = false) {
const now = performance.now();
if (!force && now - lastStatsAt < SimConfig.render.statsThrottleMs) return;
lastStatsAt = now;
const livingEthnicities = [...sim.ethnicities.values()].filter(e => e.population > 0);
const urbanPopulation = sim.cities.reduce((sum, c) => sum + c.population, 0);
let farmingTotal = 0;
let metallurgyTotal = 0;
let farmingHolders = 0;
let metallurgyHolders = 0;
for (const a of sim.agents) {
sim.ensureAgentTech(a);
farmingTotal += techLevel(a, "farming");
metallurgyTotal += techLevel(a, "metallurgy");
if (techLevel(a, "farming") > 0.02) farmingHolders++;
if (techLevel(a, "metallurgy") > 0.02) metallurgyHolders++;
}
const agentCount = Math.max(1, sim.agents.length);
const stats = {
year: formatSimDate(sim.year),
activeGroups: sim.agents.length.toLocaleString(),
urbanPopulation: Math.floor(urbanPopulation).toLocaleString(),
ethnicities: livingEthnicities.length.toLocaleString(),
cities: sim.cities.length.toLocaleString(),
polities: sim.polities.length.toLocaleString(),
wars: sim.wars.length.toLocaleString(),
routes: sim.tradeLinks.length.toLocaleString(),
farmingKnowledge: `${(farmingTotal / agentCount).toFixed(4)} (${farmingHolders})`,
metallurgyKnowledge: `${(metallurgyTotal / agentCount).toFixed(4)} (${metallurgyHolders})`,
deaths: sim.deaths.toLocaleString()
};
for (const [id, value] of Object.entries(stats)) {
if (els[id]) els[id].textContent = value;
}
const top = livingEthnicities.sort((a, b) => b.population - a.population).slice(0, 9);
els.ethnicityList.innerHTML = top.map(e => (
`<li><span class="lineage-chip" style="background: rgb(${e.color.join(",")})"></span>` +
`E${e.id} pop ${e.population.toLocaleString()} div ${e.diversity.toFixed(2)} parent ${e.parent || "-"}</li>`
)).join("");
maybeRenderStateGraph();
}
function setLegend() {
const mode = els.viewMode.value;
els.legend.innerHTML = (legendByMode[mode] || legendByMode.resources)();
}
function maybeRenderStateGraph() {
const now = performance.now();
if (now - lastGraphRenderAt < SimConfig.render.graphThrottleMs) return;
lastGraphRenderAt = now;
renderStateGraph();
}
function sampleGraphPower(sample) {
if (Number.isFinite(sample?.power)) return sample.power;
return Math.sqrt(sample?.population || 0) * 1.35 +
Math.sqrt(Math.max(0, sample?.treasury || 0)) * 1.15 +
(sample?.avgLoyalty ?? 0.5) * 16;
}
const graphMetrics = {
power: {
value: sampleGraphPower,
format: value => value.toFixed(1)
},
population: {
value: sample => sample?.population || 0,
format: value => Math.round(value).toLocaleString()
},
cities: {
value: sample => sample?.cities || 0,
format: value => Math.round(value).toLocaleString()
},
loyalty: {
value: sample => sample?.avgLoyalty ?? 0.5,
format: value => `${Math.round(clamp(value, 0, 1) * 100)}%`
}
};
function graphSampleValue(sample, metric) {
return (graphMetrics[metric] || graphMetrics.power).value(sample);
}
function formatGraphValue(value, metric) {
return (graphMetrics[metric] || graphMetrics.power).format(value);
}
function renderStateGraph() {
const canvas = els.stateGraph;
if (!canvas || !sim) return;
const rect = canvas.getBoundingClientRect();
if (!rect.width) return;
const historyWindowSpan = years(SimConfig.render.historyWindowYears);
const historyWindowEnd = sim.year;
const historyWindowStart = Math.max(0, historyWindowEnd - historyWindowSpan);
graphState.filter = els.historyFilter?.value || graphState.filter;
graphState.sort = els.historySort?.value || graphState.sort;
graphState.metric = els.historyMetric?.value || graphState.metric;
const histories = sim.getAllPolityHistories()
.filter(history => (history.ended ?? sim.year) >= historyWindowStart)
.map(history => ({
...history,
visibleFounded: Math.max(history.founded ?? 0, historyWindowStart),
visibleSamples: (history.samples || []).filter(sample => sample.year >= historyWindowStart)
}))
.filter(history => history.visibleSamples.length > 0 || (history.ended ?? sim.year) >= historyWindowStart)
.filter(history => {
const isActive = history.active && history.ended === null;
if (graphState.filter === "active" && !isActive) return false;
if (graphState.filter === "ended" && isActive) return false;
if (isActive && !graphState.showActive) return false;
if (!isActive && !graphState.showPast) return false;
return true;
});
const paddingLeft = 34;
const paddingRight = 8;
const paddingTop = 18;
const paddingBottom = 22;
const rowHeight = 24;
const groupHeight = 18;
const scored = histories.map(history => {
const samples = history.visibleSamples.length ? history.visibleSamples : [{ population: 0, cities: 0, avgLoyalty: 0.5 }];
const peakPower = Math.max(...samples.map(sample => sampleGraphPower(sample)));
const peakPopulation = Math.max(...samples.map(sample => sample.population || 0));
const peakCities = Math.max(...samples.map(sample => sample.cities || 0));
const peakLoyalty = Math.max(...samples.map(sample => sample.avgLoyalty ?? 0.5));
const peakMetric = Math.max(...samples.map(sample => graphSampleValue(sample, graphState.metric)));
const lifespan = (history.ended ?? sim.year) - history.visibleFounded;
const importance = peakPower * 1.6 +
peakCities * 130 +
Math.sqrt(Math.max(0, peakPopulation)) * 6 +
lifespan * 0.35;
return { history, peakPopulation, peakCities, peakLoyalty, peakPower, peakMetric, importance };
});
const compareRows = (a, b) => {
if (graphState.sort === "oldest") {
return ((a.history.founded ?? 0) - (b.history.founded ?? 0)) || (a.history.id - b.history.id);
}
if (graphState.sort === "strongest") {
return (b.peakPower - a.peakPower) || ((a.history.founded ?? 0) - (b.history.founded ?? 0));
}
if (graphState.sort === "largest") {
return (b.peakPopulation - a.peakPopulation) || (b.peakCities - a.peakCities);
}
return ((a.history.founded ?? 0) - (b.history.founded ?? 0)) || (a.history.id - b.history.id);
};
const selected = scored.sort(compareRows).slice(0, 90).sort(compareRows);
const activeRows = selected.filter(item => item.history.active && item.history.ended === null);
const pastRows = selected.filter(item => !(item.history.active && item.history.ended === null));
const displayRows = [];
if (graphState.showActive && graphState.filter !== "ended" && activeRows.length) {
displayRows.push({ type: "group", label: `Living ${activeRows.length}` });
for (const item of activeRows) displayRows.push({ type: "state", item });
}
if (graphState.showPast && graphState.filter !== "active" && pastRows.length) {
displayRows.push({ type: "group", label: `Past ${pastRows.length}` });
for (const item of pastRows) displayRows.push({ type: "state", item });
}
const logicalHeight = paddingTop +
displayRows.reduce((sum, row) => sum + (row.type === "group" ? groupHeight : rowHeight), 0) +
paddingBottom;
canvas.style.height = `${logicalHeight}px`;
const updatedRect = canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
const width = Math.max(1, Math.floor(updatedRect.width * dpr));
const height = Math.max(1, Math.floor(logicalHeight * dpr));
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
}
const g = canvas.getContext("2d");
g.setTransform(dpr, 0, 0, dpr, 0, 0);
const w = updatedRect.width;
const h = logicalHeight;
g.clearRect(0, 0, w, h);
g.fillStyle = "#101315";
g.fillRect(0, 0, w, h);
if (!histories.length || !selected.length || !displayRows.length) {
if (els.historyRange) els.historyRange.textContent = "-";
graphState.rows = [];
graphState.markers = [];
graphState.scale = null;
g.fillStyle = "#7f8984";
g.font = "12px ui-sans-serif, system-ui, sans-serif";
g.fillText("No state history yet", 16, 28);
return;
}
let minYear = historyWindowStart;
let maxYear = historyWindowEnd;
for (const item of selected) {
const history = item.history;
minYear = Math.min(minYear, history.visibleFounded);
maxYear = Math.max(maxYear, history.ended ?? sim.year);
}
if (els.historyRange) els.historyRange.textContent = `${formatGraphYear(minYear)}-${formatGraphYear(maxYear)}`;
const plotWidth = Math.max(1, w - paddingLeft - paddingRight);
const yearToX = year => paddingLeft + ((clamp(year, minYear, maxYear) - minYear) / Math.max(1, maxYear - minYear)) * plotWidth;
const xToYear = x => minYear + ((clamp(x, paddingLeft, w - paddingRight) - paddingLeft) / plotWidth) * Math.max(1, maxYear - minYear);
const rows = [];
let cursorY = paddingTop;
for (const displayRow of displayRows) {
if (displayRow.type === "group") {
rows.push({ ...displayRow, y: cursorY + groupHeight * 0.5, height: groupHeight });
cursorY += groupHeight;
continue;
}
const item = displayRow.item;
rows.push({
...item,
type: "state",
y: cursorY + rowHeight * 0.5,
height: rowHeight,
color: item.history.color || hslToRgb((item.history.id * 0.38196601125) % 1, 0.58, 0.62),
samples: (item.history.visibleSamples || [])
.filter(sample => Number.isFinite(sample.year))
.sort((a, b) => a.year - b.year)
});
cursorY += rowHeight;
}
let minMetric = Infinity;
let maxMetric = -Infinity;
let minCities = Infinity;
let maxCities = -Infinity;
for (const row of rows.filter(row => row.type === "state")) {
for (const sample of row.samples) {
const value = graphSampleValue(sample, graphState.metric);
minMetric = Math.min(minMetric, value);
maxMetric = Math.max(maxMetric, value);
minCities = Math.min(minCities, sample.cities || 0);
maxCities = Math.max(maxCities, sample.cities || 0);
}
}
if (!Number.isFinite(minMetric) || !Number.isFinite(maxMetric)) {
minMetric = 0;
maxMetric = 1;
}
if (!Number.isFinite(minCities) || !Number.isFinite(maxCities)) {
minCities = 0;
maxCities = 1;
}
graphState.rows = rows.filter(row => row.type === "state");
graphState.markers = [];
graphState.scale = { minYear, maxYear, paddingLeft, paddingRight, plotWidth, width: w, xToYear };
const axisY = h - paddingBottom + 4;
g.strokeStyle = "rgba(168, 177, 170, 0.22)";
g.lineWidth = 1;
strokeLine(g, paddingLeft, axisY, w - paddingRight, axisY);
g.fillStyle = "#8c9690";
g.font = "10px ui-sans-serif, system-ui, sans-serif";
g.textAlign = "left";
g.fillText(formatGraphYear(minYear), paddingLeft, h - 5);
g.textAlign = "center";
g.fillText(formatGraphYear((minYear + maxYear) / 2), paddingLeft + plotWidth / 2, h - 5);
g.textAlign = "right";
g.fillText(formatGraphYear(maxYear), w - paddingRight, h - 5);
const topEvents = (sim.graphEvents || [])
.filter(event => event.importance >= 2)
.filter(event => event.year >= minYear && event.year <= maxYear)
.filter(event => graphEventTypes[event.type]);
const topCollisions = new Map();
for (const event of topEvents) {
const x = yearToX(event.year);
const bucket = Math.round(x / 7);
const count = topCollisions.get(bucket) || 0;
topCollisions.set(bucket, count + 1);
const y = Math.max(7, paddingTop * 0.5 + ([-3, 0, 3][count % 3]));
const r = event.importance >= 4 ? 5 : event.importance >= 3 ? 4 : 3;
const graphEvent = graphEventTypes[event.type];
g.fillStyle = graphEvent.color;
graphEvent.draw(g, x, y, r);
graphState.markers.push({ row: null, event, x, y, radius: r + 3 });
}
rows.forEach(row => {
const alpha = row.type === "group" ? 0.16 : 0.12;
if (row.type === "group") {
g.fillStyle = "#7f8984";
g.font = "10px ui-sans-serif, system-ui, sans-serif";
g.textAlign = "left";
g.fillText(row.label, 4, row.y + 3);
}
g.strokeStyle = `rgba(168, 177, 170, ${alpha})`;
g.lineWidth = 1;
strokeLine(g, paddingLeft, row.y, w - paddingRight, row.y);
});
rows.forEach(row => {
if (row.type !== "state") return;
const history = row.history;
g.textAlign = "left";
g.fillStyle = "#a8b1aa";
g.font = "9px ui-sans-serif, system-ui, sans-serif";
g.fillText(`S${history.id}`, 4, row.y + 3);
const inactiveMultiplier = history.active ? 1 : 0.65;
const strokeSegment = (fromYear, toYear, metricValue, cities, alphaScale = 1) => {
if (toYear <= fromYear) return;
const normalizedMetric = (metricValue - minMetric) / Math.max(1, maxMetric - minMetric);
const metricT = clamp(normalizedMetric, 0, 1);
const cityT = clamp((cities - minCities) / Math.max(1, maxCities - minCities), 0, 1);
const lowColor = mix([56, 62, 60], row.color, 0.34);
const highColor = mix(row.color, [244, 246, 238], 0.18);
const segmentColor = mix(lowColor, highColor, metricT);
let alpha = (0.22 + metricT * 0.76) * inactiveMultiplier * alphaScale;
alpha = clamp(alpha, 0.10, 0.96);
const thickness = clamp(3.5 + cityT * 5.5 + metricT * 4.5, 3.5, 13);
g.lineWidth = thickness;
g.lineCap = "round";
g.strokeStyle = `rgba(${segmentColor[0]}, ${segmentColor[1]}, ${segmentColor[2]}, ${clamp(alpha * 0.28, 0.08, 0.28)})`;
strokeLine(g, yearToX(fromYear), row.y, yearToX(toYear), row.y);
g.strokeStyle = `rgba(${segmentColor[0]}, ${segmentColor[1]}, ${segmentColor[2]}, ${alpha})`;
g.lineWidth = Math.max(2, thickness * 0.62);
strokeLine(g, yearToX(fromYear), row.y, yearToX(toYear), row.y);
g.lineCap = "butt";
};
if (row.samples.length > 1) {
if (history.visibleFounded < row.samples[0].year) {
strokeSegment(history.visibleFounded, row.samples[0].year, graphSampleValue(row.samples[0], graphState.metric), row.samples[0].cities, 0.42);
}
for (let i = 0; i < row.samples.length - 1; i++) {
const sampleA = row.samples[i];
const sampleB = row.samples[i + 1];
strokeSegment(
sampleA.year,
sampleB.year,
(graphSampleValue(sampleA, graphState.metric) + graphSampleValue(sampleB, graphState.metric)) * 0.5,
((sampleA.cities || 0) + (sampleB.cities || 0)) * 0.5
);
}
const lastSample = row.samples[row.samples.length - 1];
const endYear = history.ended ?? sim.year;
if (lastSample.year < endYear) {
strokeSegment(lastSample.year, endYear, graphSampleValue(lastSample, graphState.metric), lastSample.cities, 0.55);
}
} else {
const sample = row.samples[0] || { population: 0, cities: row.peakCities, avgLoyalty: 0.5 };
strokeSegment(history.visibleFounded, history.ended ?? sim.year, graphSampleValue(sample, graphState.metric), sample.cities || row.peakCities);
}
});
rows.forEach(row => {
if (row.type !== "state") return;
const events = (row.history.events || [])
.filter(event => event.importance >= 2)
.filter(event => event.year >= minYear && event.year <= maxYear)
.filter(event => graphEventTypes[event.type]);
const collisions = new Map();
for (const event of events) {
const x = yearToX(event.year);
const bucket = Math.round(x / 7);
const count = collisions.get(bucket) || 0;
collisions.set(bucket, count + 1);
const y = row.y + ([-4, 0, 4][count % 3]);
const r = event.importance >= 4 ? 5 : event.importance >= 3 ? 4 : 3;
const graphEvent = graphEventTypes[event.type];
g.fillStyle = graphEvent.color;
graphEvent.draw(g, x, y, r);
graphState.markers.push({ row, event, x, y, radius: r + 3 });
}
});
}
function drawGraphCircle(g, x, y, r) {
g.beginPath();
g.arc(x, y, r, 0, Math.PI * 2);
g.fill();
}
function drawGraphPolygon(g, points) {
g.beginPath();
g.moveTo(points[0][0], points[0][1]);
for (let i = 1; i < points.length; i++) g.lineTo(points[i][0], points[i][1]);
g.closePath();
g.fill();
}
function drawGraphDiamond(g, x, y, r) {
drawGraphPolygon(g, [[x, y - r], [x + r, y], [x, y + r], [x - r, y]]);
}
function drawGraphTriangleUp(g, x, y, r) {
drawGraphPolygon(g, [[x, y - r], [x + r, y + r], [x - r, y + r]]);
}
function drawGraphTriangleDown(g, x, y, r) {
drawGraphPolygon(g, [[x, y + r], [x + r, y - r], [x - r, y - r]]);
}
const graphEventTypes = {
capitalShift: {
label: "capital shift",
color: "rgba(227, 179, 65, 0.95)",
draw: drawGraphDiamond,
summary: data => `capital #${data.oldCenterCityId ?? "-"} to #${data.newCenterCityId ?? "-"}`
},
disaster: {
label: "major disaster",
color: "rgba(211, 95, 84, 0.95)",
draw: drawGraphCircle,
summary: data => `lost ${Math.round((data.lossRate || 0) * 100)}%, ${Math.round(data.populationLoss || 0).toLocaleString()} people, ${data.affectedCities || 0} cities`
},
famine: {
label: "famine",
color: "rgba(227, 128, 65, 0.90)",
draw: drawGraphTriangleDown,
summary: data => `poor cities ${Math.round((data.poorRate || 0) * 100)}%, food ${Number(data.avgPerCapitaFood || 0).toFixed(3)}/cap`
},
rebellion: {
label: "rebellion",
color: "rgba(236, 126, 111, 0.95)",
draw: drawGraphTriangleUp,
summary: data => data.cityCount > 1
? `${data.cityCount} cities, pop ${Math.round(data.population || 0).toLocaleString()}, loyalty ${Number(data.loyalty || 0).toFixed(2)}`
: `city #${data.cityId ?? "-"}, pop ${Math.round(data.population || 0).toLocaleString()}, loyalty ${Number(data.loyalty || 0).toFixed(2)}`
},
newEthnicity: {
label: "new ethnicity",
color: "rgba(105, 181, 120, 0.95)",
draw: drawGraphDiamond,
summary: data => `E${data.ethnicity ?? "-"}, ${Math.round(data.population || 0).toLocaleString()} frontier groups`
},
campaign: {
label: "campaign",
color: "rgba(232, 205, 116, 0.95)",
draw: drawGraphTriangleUp,
summary: data => `${data.outcome || "event"} ${data.campaignType || data.targetType || "target"}`
},
expansion: {
label: "expansion",
color: "rgba(210, 194, 104, 0.95)",
draw: drawGraphDiamond,
summary: data => `${data.outcome || "event"} ${data.campaignType || "frontier"}, tile ${data.targetTile ?? "-"}`
},
colonization: {
label: "colonization",
color: "rgba(232, 205, 116, 0.95)",
draw: drawGraphDiamond,
summary: data => `${data.campaignType || "frontier"}, progress ${Math.round((data.progress || 0) * 100)}%`
},
subjugation: {
label: "subjugation",
color: "rgba(196, 122, 77, 0.95)",
draw: drawGraphTriangleUp,
summary: data => `${data.campaignType || "non-state"}, tile ${data.targetTile ?? "-"}`
},
annexation: {
label: "annexation",
color: "rgba(227, 179, 65, 0.95)",
draw: drawGraphDiamond,
summary: data => `city #${data.targetCityId ?? "-"}`
},
failedCampaign: {
label: "failed campaign",
color: "rgba(151, 110, 91, 0.95)",
draw: drawGraphTriangleDown,
summary: data => `${data.outcome || "failed"} ${data.campaignType || "campaign"}`
},
borderWar: {
label: "border war",
color: "rgba(236, 126, 111, 0.95)",
draw: drawGraphTriangleUp,
summary: data => `${data.outcome || "war"} vs S${data.targetPolityId ?? "-"}`
},
war: {
label: "war",
color: "rgba(202, 87, 78, 0.95)",
draw: drawGraphTriangleUp,
summary: data => `${data.outcome || "war"} ${data.campaignType || ""}`
},
collapse: {
label: "collapse",
color: "rgba(130, 136, 139, 0.95)",
draw: drawGraphTriangleDown,
summary: data => data.reason || "state ended"
}
};
function graphEventLabel(event) {
return graphEventTypes[event.type]?.label || event.type;
}
function graphEventSummary(event) {
return graphEventTypes[event.type]?.summary(event.data || {}) || "";
}
function showStateGraphMarkerTooltip(marker, pointerX, pointerY) {
if (!els.stateGraphTooltip) return;
const title = marker.row
? `S${marker.row.history.id} ${graphEventLabel(marker.event)}`
: graphEventLabel(marker.event);
els.stateGraphTooltip.innerHTML = `
    <strong>${title}</strong>
    <span>${formatGraphYear(marker.event.year)}</span>
    <span>${graphEventSummary(marker.event)}</span>
  `;
els.stateGraphTooltip.hidden = false;
const scroll = els.stateGraph.parentElement;
const maxLeft = Math.max(8, (scroll?.clientWidth || 260) - els.stateGraphTooltip.offsetWidth - 8);
const left = clamp(pointerX + 10, 8, maxLeft);
const top = Math.max(8, pointerY - els.stateGraphTooltip.offsetHeight - 10);
els.stateGraphTooltip.style.left = `${left}px`;
els.stateGraphTooltip.style.top = `${top}px`;
}
function hideStateGraphMarkerTooltip() {
if (els.stateGraphTooltip) els.stateGraphTooltip.hidden = true;
}
function updateStateGraphInfo(event) {
if (!els.stateGraphInfo || !graphState.rows.length || !graphState.scale) return;
const y = event.offsetY;
const x = event.offsetX;
const marker = (graphState.markers || [])
.map(candidate => ({ candidate, distance: Math.hypot(candidate.x - x, candidate.y - y) }))
.filter(item => item.distance <= item.candidate.radius);
const nearestMarker = bestBy(marker, item => -item.distance)?.candidate;
if (nearestMarker) {
if (!nearestMarker.row) {
els.stateGraphInfo.textContent = `${formatGraphYear(nearestMarker.event.year)} ${graphEventLabel(nearestMarker.event)}`;
showStateGraphMarkerTooltip(nearestMarker, x, y);
if (graphState.hoverPolityId !== null) {
graphState.hoverPolityId = null;
if (!running) render();
}
return;
}
const status = nearestMarker.row.history.active && nearestMarker.row.history.ended === null ? "living" : "past";
els.stateGraphInfo.textContent = `S${nearestMarker.row.history.id} ${status} ${formatGraphYear(nearestMarker.event.year)} ${graphEventLabel(nearestMarker.event)}`;
showStateGraphMarkerTooltip(nearestMarker, x, y);
if (graphState.hoverPolityId !== nearestMarker.row.history.id) {
graphState.hoverPolityId = nearestMarker.row.history.id;
if (!running) render();
}
return;
}
const row = graphState.rows
.map(candidate => ({ candidate, distance: Math.abs(candidate.y - y) }))
.filter(item => item.distance <= item.candidate.height * 0.5);
const nearestRow = bestBy(row, item => -item.distance)?.candidate;
if (!nearestRow) {
els.stateGraphInfo.textContent = "Hover a row for details";
hideStateGraphMarkerTooltip();
if (graphState.hoverPolityId !== null) {
graphState.hoverPolityId = null;
if (!running) render();
}
return;
}
if (graphState.hoverPolityId !== nearestRow.history.id) {
graphState.hoverPolityId = nearestRow.history.id;
if (!running) render();
}
hideStateGraphMarkerTooltip();
const year = graphState.scale.xToYear(x);
const samples = nearestRow.samples.length ? nearestRow.samples : [{
year,
population: 0,
cities: nearestRow.peakCities,
avgLoyalty: 0.5,
power: nearestRow.peakPower
}];
const sample = bestBy(samples, candidate => -Math.abs((candidate.year ?? year) - year));
const metricValue = graphSampleValue(sample, graphState.metric);
const status = nearestRow.history.active && nearestRow.history.ended === null ? "living" : "past";
els.stateGraphInfo.textContent =
`S${nearestRow.history.id} ${status} ${formatGraphYear(sample.year ?? year)} ` +
`${graphState.metric} ${formatGraphValue(metricValue, graphState.metric)} ` +
`pop ${Math.round(sample.population || 0).toLocaleString()} ` +
`cities ${Math.round(sample.cities || 0).toLocaleString()} ` +
`loyalty ${formatGraphValue(sample.avgLoyalty ?? 0.5, "loyalty")}`;
}
function clearStateGraphInfo() {
if (els.stateGraphInfo) els.stateGraphInfo.textContent = "Hover a row for details";
hideStateGraphMarkerTooltip();
if (graphState.hoverPolityId !== null) {
graphState.hoverPolityId = null;
if (!running) render();
}
}
function formatGraphYear(week) {
return `${Math.floor(week / WEEKS_PER_YEAR).toLocaleString()}y`;
}
function formatSimDate(week) {
const year = Math.floor(week / WEEKS_PER_YEAR);
const weekOfYear = week % WEEKS_PER_YEAR;
const monthOfYear = Math.floor(weekOfYear / WEEKS_PER_MONTH) + 1;
const weekOfMonth = weekOfYear % WEEKS_PER_MONTH + 1;
return `${year.toLocaleString()}y ${monthOfYear}m ${weekOfMonth}w`;
}