civ/render.js

const displayTerms = {
  "roaming": "移動中",
  "grazing": "放牧中",
  "leaving": "離脱中",
  "settling": "定住中",
  "trading": "交易中",
  "raiding": "襲撃中",
  "invading": "侵攻中",
  "confederating": "連合形成中",
  "frontier_colonization": "辺境開拓",
  "nonstate_subjugation": "非国家地域の征服",
  "independent_city_annexation": "独立都市の併合",
  "border_war": "国境戦争",
  "frontier": "辺境",
  "nonstate": "非国家地域",
  "independentCity": "独立都市",
  "polity": "国家",
  "started": "開始",
  "ended": "終結",
  "ceased": "停戦",
  "defending": "防衛",
  "succeeded": "成功",
  "failed": "失敗",
  "peaceful": "平和的併合",
  "military": "戦争による併合",
  "expired": "期限切れ",
  "active": "進行中",
  "puppetIndependent": "傀儡都市化",
  "nomadicDynasty": "遊牧王朝の成立",
  "capturedCity": "都市占領",
  "lostCity": "都市喪失",
  "settlementGain": "講和による領土獲得",
  "settlementLoss": "講和による領土喪失",
  "settlementPressure": "講和圧力",
  "dissolved": "解体",
  "collapsed": "崩壊",
  "conquest": "征服",
  "war": "戦争",
  "event": "発生",
  "target": "対象",
  "campaign": "遠征",
  "non-state": "非国家地域"
};
function displayTerm(value) { return displayTerms[value] || "状況変化"; }
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 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 (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] || 0;
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.territoryOwner[i];
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);
}
}
} else if (mode === "technology") {
const farming = w.farmingKnowledge?.[i] || 0;
const metallurgy = w.metallurgyKnowledge?.[i] || 0;
const tech = clamp(Math.max(farming, metallurgy), 0, 1);
const techColor = mix([95, 171, 91], [202, 169, 102], metallurgy / Math.max(0.001, farming + metallurgy));
color = tech > 0.01
? mix(terrainInfo[w.terrain[i]].color, techColor, clamp(0.12 + tech * 0.62, 0.12, 0.74))
: 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();
drawNomadBands();
drawCampaigns();
drawPopulationAndCities(mode);
drawGraphPolityHighlight();
maybeRenderStateGraph();
if (els.frameCost) els.frameCost.textContent = `${Math.round(performance.now() - start)}ミリ秒`;
}
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;
if (campaign.type !== "border_war") 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 drawNomadBands() {
if (!sim?.nomadBands?.length) return;
const w = sim.world;
ctx.save();
for (const band of sim.nomadBands) {
const ethnicityColor = sim.ethnicities.get(band.ethnicityId)?.color || [216, 177, 86];
ctx.globalAlpha = 0.07;
ctx.fillStyle = rgba(ethnicityColor, 0.45);
for (const tile of band.influenceTiles || []) {
ctx.fillRect(tile % w.size, Math.floor(tile / w.size), 1, 1);
}
ctx.globalAlpha = 0.34;
ctx.strokeStyle = band.mode === "raiding" || band.mode === "invading"
? "rgba(232, 101, 76, 0.95)"
: band.mode === "settling"
? "rgba(202, 169, 102, 0.9)"
: rgba(ethnicityColor, 0.9, 18);
ctx.lineWidth = 1;
strokeCircle(ctx, band.x + 0.5, band.y + 0.5, Math.max(2.5, band.radius * 0.45));
if (band.mode === "confederating") {
ctx.globalAlpha = 0.26;
strokeCircle(ctx, band.x + 0.5, band.y + 0.5, Math.max(4, band.radius * 0.68));
}
ctx.globalAlpha = 0.22;
ctx.fillStyle = rgba(ethnicityColor, 0.9, 22);
for (const tile of band.trailTiles || []) ctx.fillRect(tile % w.size, Math.floor(tile / w.size), 1, 1);
ctx.globalAlpha = 0.82;
ctx.fillStyle = rgba(ethnicityColor, 0.95, 36);
fillSquare(ctx, Math.round(band.x), Math.round(band.y), 1);
}
ctx.restore();
}
function drawPopulationAndCities(mode) {
ctx.save();
ctx.globalAlpha = 1;
if (mode !== "technology" && mode !== "ethnicity") {
const w = sim.world;
ctx.fillStyle = "rgba(238, 236, 207, 0.16)";
const populatedTiles = sim.activePopulationTiles || [];
for (const tile of populatedTiles) {
const pop = (w.population?.[tile] || 0) / (SimConfig.population.populationScale || 1);
if (pop < 6) continue;
const alpha = clamp(Math.log1p(pop) / Math.log(160), 0.04, 0.18);
ctx.fillStyle = `rgba(238, 236, 207, ${alpha})`;
ctx.fillRect(tile % w.size, Math.floor(tile / w.size), 1, 1);
}
}
for (const city of sim.cities) {
const radius = cityRenderRadius(city);
const color = cityDisplayColor(city, mode);
ctx.globalAlpha = 1;
ctx.fillStyle = rgb(color);
fillSquare(ctx, city.x, city.y, radius);
ctx.strokeStyle = "#111315";
ctx.lineWidth = 1;
ctx.strokeRect(city.x - radius + 0.5, city.y - radius + 0.5, radius * 2, radius * 2);
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) {
const population = Math.max(0, city?.population || 0);
if (population >= 10000) return 4;
if (population >= 5000) return 3;
if (population >= 1000) return 2;
return 1;
}
function cityAtDisplayTile(x, y) {
for (let index = sim.cities.length - 1; index >= 0; index--) {
const city = sim.cities[index];
const radius = cityRenderRadius(city);
if (Math.abs(city.x - x) <= radius && Math.abs(city.y - y) <= radius) return city;
}
return null;
}
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 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 city = cityAtDisplayTile(x, y);
if (w.terrain[i] === Terrain.WATER && w.city[i] < 0) {
hideTooltip();
return;
}
const terrain = terrainInfo[w.terrain[i]];
const polity = cityPolity(city);
const territoryPolity = sim.getPolityById(w.territoryOwner[i]);
const displayPolity = polity || territoryPolity;
const mode = els.viewMode.value;
const ethnicity = w.dominantEthnicity[i];
const population = w.population[i] || 0;
const rows = [
tooltipRow("場所", `${terrain.name}（${x}, ${y}）`),
tooltipRow("所属", polity ? `国家${polity.id}${polity.centerCityId === city.id ? "・首都" : ""}` : city ? "独立都市" : territoryPolity ? `国家${territoryPolity.id}` : "国家未所属")
];
let citySection = "";
if (city) {
const cityRows = [
tooltipRow("都市人口", city.population > 0 ? Math.round(city.population).toLocaleString() : "希薄"),
tooltipRow("食料備蓄", city.storedResources.toFixed(1)),
polity ? tooltipRow("忠誠度", `${Math.round((city.loyalty ?? 0.5) * 100)}%`) : ""
];
citySection = `<section><h3>都市データ</h3>${cityRows.filter(Boolean).join("")}${cityEthnicityPie(city)}</section>`;
} else {
rows.push(tooltipRow("地域人口", population > 0 ? Math.round(population).toLocaleString() : "希薄"));
if (mode === "resources" || mode === "terrain") {
rows.push(tooltipRow("資源", w.resource[i].toFixed(1)));
rows.push(tooltipRow("肥沃度", `${Math.round(w.fertility[i] * 100)}%`));
}
}
if (mode === "pressure") rows.push(tooltipRow("人口圧力", `${Math.round(w.populationPressure[i] * 100)}%（収容力比）`));
if (mode === "ethnicity" && ethnicity >= 0) rows.push(tooltipRow("主な民族", `民族${ethnicity}`));
if (mode === "technology") rows.push(tooltipRow("農業 / 冶金", `${Math.round(w.farmingKnowledge[i] * 100)}% / ${Math.round(w.metallurgyKnowledge[i] * 100)}%`));
if (mode === "pheromone") rows.push(tooltipRow("交通量", w.pheromone[i].toFixed(1)));
const campaign = activeCampaignsNear(i);
if (campaign) rows.push(tooltipRow("遠征", campaign));
else if (w.contested[i]) rows.push(tooltipRow("状態", "係争地"));
const band = activeNomadNear(i);
if (band) rows.push(tooltipRow("遊牧集団", `集団${band.id}・${displayTerm(band.mode)}`));
let politySection = "";
if (displayPolity) {
const polityCities = sim.getPolityCities(displayPolity);
const polityPopulation = sim.totalPolityPopulation(displayPolity);
const institutionalAging = sim.polityInstitutionalAging ? sim.polityInstitutionalAging(displayPolity) : clamp(displayPolity.institutionalAging ?? 0, 0, 1);
const loyaltyCap = sim.polityLoyaltyCap ? sim.polityLoyaltyCap(displayPolity) : clamp(1 - institutionalAging, 0, 1);
politySection = tooltipSection("国家データ", [
tooltipRow("国家", `国家${displayPolity.id}`),
tooltipRow("国力", sim.polityPower(displayPolity).toFixed(1)),
tooltipRow("人口", Math.round(polityPopulation).toLocaleString()),
tooltipRow("都市数", polityCities.length.toLocaleString()),
tooltipRow("国庫", Math.max(0, displayPolity.treasury || 0).toFixed(1)),
tooltipRow("正統性 / 結束", `${Math.round((displayPolity.legitimacy ?? 0) * 100)}% / ${Math.round((displayPolity.cohesion ?? 0) * 100)}%`),
tooltipRow("制度老朽化", `${Math.round(institutionalAging * 100)}%`),
tooltipRow("忠誠度上限", `${Math.round(loyaltyCap * 100)}%`)
]);
}
els.tooltip.innerHTML = `<strong>${city ? `都市${city.id}` : terrain.name}</strong>${rows.join("")}${citySection}${politySection}`;
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 ? `民族${id}` : "その他";
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(`${displayTerm(campaign.type)} ${Math.round(clamp(campaign.progress, 0, 1) * 100)}%`);
}
return labels.slice(0, 2).join("、");
}
function activeNomadNear(tile) {
if (!sim?.nomadBands?.length) return null;
const w = sim.world;
const x = tile % w.size;
const y = Math.floor(tile / w.size);
let best = null;
let bestDistance = Infinity;
for (const band of sim.nomadBands) {
const distance = Math.abs(Math.round(band.x) - x) + Math.abs(Math.round(band.y) - y);
const inInfluence = w.nomadBand?.[tile] === band.id;
if (!inInfluence && distance > Math.max(3, Math.floor(band.radius * 0.55))) continue;
if (distance < bestDistance) {
best = band;
bestDistance = distance;
}
}
return best;
}
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);
if (els.currentDate) els.currentDate.textContent = formatSimDate(sim.year);
const top = livingEthnicities.sort((a, b) => b.population - a.population).slice(0, 9);
if (els.ethnicityList) els.ethnicityList.innerHTML = top.map(e => (
`<li><span class="lineage-chip" style="background: rgb(${e.color.join(",")})"></span>` +
`民族${e.id}　人口 ${Math.round(e.population).toLocaleString()}<br>多様性 ${Math.round(e.diversity * 100)}%　親系統 ${e.parent ? `民族${e.parent}` : "なし"}</li>`
)).join("");
maybeRenderStateGraph();
}
function setLegend() {
const mode = els.viewMode.value;
const content = (legendByMode[mode] || legendByMode.resources)();
els.legend.innerHTML = content;
els.legend.hidden = !content;
}
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);
renderWorldTrendGraph(historyWindowStart, historyWindowEnd);
graphState.filter = els.historyFilter?.value || graphState.filter;
graphState.sort = els.historySort?.value || graphState.sort;
graphState.metric = els.historyMetric?.value || graphState.metric;
const allHistories = sim.getAllPolityHistories();
const recentEndedIds = new Set(allHistories
.filter(history => !(history.active && history.ended === null))
.sort((a, b) => (b.ended ?? 0) - (a.ended ?? 0))
.slice(0, 20)
.map(history => history.id));
const histories = allHistories
.filter(history => (history.active && history.ended === null) || recentEndedIds.has(history.id))
.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: `存続中 ${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: `滅亡済み ${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("国家の歴史はまだありません", 16, 28);
setEventLegend();
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 = graphState.showEventIcons ? (sim.graphEvents || [])
.filter(event => event.importance >= 2)
.filter(event => event.year >= minYear && event.year <= maxYear)
.filter(event => event.type !== "war" || event.data?.outcome === "started")
.filter(event => graphEventTypes[event.type]) : [];
const topCollisions = new Map();
for (const event of topEvents) {
const rawX = yearToX(event.year);
const bucket = Math.round(rawX / 18);
const count = topCollisions.get(bucket) || 0;
topCollisions.set(bucket, count + 1);
const point = spreadGraphMarker(rawX, paddingTop * 0.5, count, paddingLeft, w - paddingRight);
const x = point.x;
const y = point.y;
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(`国${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 = graphState.showEventIcons ? (row.history.events || [])
.filter(event => event.importance >= 2)
.filter(event => event.year >= minYear && event.year <= maxYear)
.filter(event => event.type !== "war" || event.data?.outcome === "started")
.filter(event => graphEventTypes[event.type]) : [];
const collisions = new Map();
for (const event of events) {
const rawX = yearToX(event.year);
const bucket = Math.round(rawX / 18);
const count = collisions.get(bucket) || 0;
collisions.set(bucket, count + 1);
const point = spreadGraphMarker(rawX, row.y, count, paddingLeft, w - paddingRight);
const x = point.x;
const y = point.y;
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 });
}
});
setEventLegend();
}
function renderWorldTrendGraph(minYear, maxYear) {
const canvas = els.worldTrendGraph;
if (!canvas || !sim) return;
const rect = canvas.getBoundingClientRect();
if (!rect.width) return;
const dpr = window.devicePixelRatio || 1;
const logicalHeight = 176;
const width = Math.max(1, Math.floor(rect.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 = rect.width;
g.clearRect(0, 0, w, logicalHeight);
g.fillStyle = "#101315";
g.fillRect(0, 0, w, logicalHeight);
const samples = (sim.worldHistory || []).filter(sample => sample.year >= minYear && sample.year <= maxYear);
if (!samples.length) {
g.fillStyle = "#7f8984";
g.font = "11px ui-sans-serif, system-ui, sans-serif";
g.fillText("推移データはまだありません", 8, 20);
return;
}
const left = 7;
const right = 7;
const plotWidth = Math.max(1, w - left - right);
const span = Math.max(1, maxYear - minYear);
const xAt = sample => left + ((sample.year - minYear) / span) * plotWidth;
const regional = samples.map(sample => Math.max(0, sample.regionalPopulation || 0));
const urban = samples.map(sample => Math.max(0, sample.urbanPopulation || 0));
const populationMaximum = Math.max(1, ...regional.map((value, index) => value + urban[index]));
const populationTop = 22;
const populationBaseline = 91;
const populationHeight = populationBaseline - populationTop;
g.strokeStyle = "rgba(168, 177, 170, 0.13)";
g.lineWidth = 1;
strokeLine(g, left, populationBaseline, w - right, populationBaseline);
const populationY = value => populationBaseline - value / populationMaximum * populationHeight;
g.beginPath();
g.moveTo(xAt(samples[0]), populationBaseline);
for (let index = 0; index < samples.length; index++) g.lineTo(xAt(samples[index]), populationY(regional[index]));
g.lineTo(xAt(samples[samples.length - 1]), populationBaseline);
g.closePath();
g.fillStyle = "rgba(117, 181, 126, 0.42)";
g.fill();
g.beginPath();
g.moveTo(xAt(samples[0]), populationY(regional[0]));
for (let index = 0; index < samples.length; index++) g.lineTo(xAt(samples[index]), populationY(regional[index] + urban[index]));
for (let index = samples.length - 1; index >= 0; index--) g.lineTo(xAt(samples[index]), populationY(regional[index]));
g.closePath();
g.fillStyle = "rgba(227, 198, 116, 0.58)";
g.fill();
g.fillStyle = "#9bc89b";
g.font = "10px ui-sans-serif, system-ui, sans-serif";
g.textAlign = "left";
g.fillText(`地域人口 ${Math.round(regional.at(-1)).toLocaleString()}`, 7, 12);
g.fillStyle = "#e3c674";
g.fillText(`都市人口 ${Math.round(urban.at(-1)).toLocaleString()}`, Math.max(112, w * 0.5), 12);
const countMetrics = [
{ key: "cities", label: "都市", color: "#77b9d6" },
{ key: "polities", label: "国家", color: "#d58b84" },
{ key: "ethnicities", label: "民族", color: "#b49bd6" }
];
const countTop = 112;
const countBaseline = 169;
const countHeight = countBaseline - countTop;
const countMaximum = Math.max(1, ...countMetrics.flatMap(metric => samples.map(sample => Math.max(0, sample[metric.key] || 0))));
strokeLine(g, left, countBaseline, w - right, countBaseline);
for (let metricIndex = 0; metricIndex < countMetrics.length; metricIndex++) {
const metric = countMetrics[metricIndex];
const values = samples.map(sample => Math.max(0, sample[metric.key] || 0));
g.fillStyle = metric.color;
g.fillText(`${metric.label} ${Math.round(values.at(-1)).toLocaleString()}`, 7 + metricIndex * Math.max(78, (w - 14) / 3), 105);
g.beginPath();
for (let index = 0; index < samples.length; index++) {
const x = xAt(samples[index]);
const y = countBaseline - values[index] / countMaximum * countHeight;
if (index === 0) g.moveTo(x, y);
else g.lineTo(x, y);
}
g.strokeStyle = metric.color;
g.lineWidth = 1.6;
g.stroke();
const lastX = xAt(samples.at(-1));
const lastY = countBaseline - values.at(-1) / countMaximum * countHeight;
g.beginPath();
g.arc(lastX, lastY, 2, 0, Math.PI * 2);
g.fillStyle = metric.color;
g.fill();
}
g.textAlign = "left";
}
function spreadGraphMarker(x, baseY, count, minX, maxX) {
const xOffsets = [0, -8, 8, -16, 16, -24, 24];
const yOffsets = [0, -6, 6];
const positionsPerBand = xOffsets.length * yOffsets.length;
const band = Math.floor(count / positionsPerBand);
const position = count % positionsPerBand;
const xOffset = xOffsets[Math.floor(position / yOffsets.length)];
const yOffset = yOffsets[position % yOffsets.length];
const bandOffset = band ? (band * 3) * (x < (minX + maxX) * 0.5 ? 1 : -1) : 0;
return { x: clamp(x + xOffset + bandOffset, minX, maxX), y: baseY + yOffset };
}
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: "遷都", color: "rgba(227, 179, 65, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("capitalShift", data) },
disaster: { label: "大災害", color: "rgba(211, 95, 84, 0.95)", draw: drawGraphCircle, summary: data => summarizeEvent("disaster", data) },
famine: { label: "飢饉", color: "rgba(227, 128, 65, 0.90)", draw: drawGraphTriangleDown, summary: data => summarizeEvent("famine", data) },
rebellion: { label: "反乱", color: "rgba(236, 126, 111, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("rebellion", data) },
institutionalReform: { label: "制度改革", color: "rgba(111, 173, 206, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("institutionalReform", data) },
newEthnicity: { label: "新しい民族", color: "rgba(105, 181, 120, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("newEthnicity", data) },
campaign: { label: "遠征", color: "rgba(232, 205, 116, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("campaign", data) },
expansion: { label: "領土拡大", color: "rgba(210, 194, 104, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("expansion", data) },
colonization: { label: "開拓", color: "rgba(232, 205, 116, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("colonization", data) },
subjugation: { label: "征服", color: "rgba(196, 122, 77, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("subjugation", data) },
annexation: { label: "都市の併合", color: "rgba(227, 179, 65, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("annexation", data) },
failedCampaign: { label: "遠征失敗", color: "rgba(151, 110, 91, 0.95)", draw: drawGraphTriangleDown, summary: data => summarizeEvent("failedCampaign", data) },
borderWar: { label: "国境戦争", color: "rgba(236, 126, 111, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("borderWar", data) },
nomadBand: { label: "遊牧集団の誕生", color: "rgba(210, 184, 104, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("nomadBand", data) },
nomadTrade: { label: "遊牧集団との交易", color: "rgba(216, 177, 86, 0.95)", draw: drawGraphCircle, summary: data => summarizeEvent("nomadTrade", data) },
nomadRaid: { label: "遊牧集団の襲撃", color: "rgba(232, 101, 76, 0.95)", draw: drawGraphTriangleDown, summary: data => summarizeEvent("nomadRaid", data) },
nomadConquest: { label: "遊牧集団の征服", color: "rgba(202, 87, 78, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("nomadConquest", data) },
nomadConfederation: { label: "遊牧連合", color: "rgba(191, 162, 91, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("nomadConfederation", data) },
nomadSplit: { label: "遊牧集団の分裂", color: "rgba(151, 130, 91, 0.95)", draw: drawGraphTriangleDown, summary: data => summarizeEvent("nomadSplit", data) },
nomadMerge: { label: "遊牧集団の合流", color: "rgba(170, 145, 91, 0.95)", draw: drawGraphDiamond, summary: data => summarizeEvent("nomadMerge", data) },
sedentarization: { label: "遊牧集団の定住", color: "rgba(202, 169, 102, 0.95)", draw: drawGraphCircle, summary: data => summarizeEvent("sedentarization", data) },
war: { label: "戦争", color: "rgba(202, 87, 78, 0.95)", draw: drawGraphTriangleUp, summary: data => summarizeEvent("war", data) },
collapse: { label: "国家の崩壊", color: "rgba(130, 136, 139, 0.95)", draw: drawGraphTriangleDown, summary: data => summarizeEvent("collapse", data) }
};
function summarizeEvent(type, data) {
if (type === "capitalShift") return `都市${data.oldCenterCityId ?? "－"} → 都市${data.newCenterCityId ?? "－"}`;
if (type === "disaster") return `人口損失 ${Math.round((data.lossRate || 0) * 100)}%・死者 ${Math.round(data.populationLoss || 0).toLocaleString()}人`;
if (type === "famine") return `食料不足の都市 ${Math.round((data.poorRate || 0) * 100)}%`;
if (type === "institutionalReform") {
const before = Math.round((data.before || 0) * 100);
const after = Math.round((data.after || 0) * 100);
const change = Math.round((data.changeRate || 0) * 100);
return `制度老朽化 ${before}% → ${after}%（${change >= 0 ? "+" : ""}${change}%）`;
}
const details = [];
if (data.outcome || data.reason) details.push(displayTerm(data.outcome || data.reason));
if (data.campaignType) details.push(displayTerm(data.campaignType));
if (data.bandId != null) details.push(`遊牧集団${data.bandId}`);
if (data.cityId != null || data.targetCityId != null) details.push(`都市${data.cityId ?? data.targetCityId}`);
if (data.targetPolityId != null) details.push(`相手国${data.targetPolityId}`);
if (data.ethnicity != null) details.push(`民族${data.ethnicity}`);
if (data.population != null) details.push(`人口 ${Math.round(data.population).toLocaleString()}`);
if (data.cityCount != null) details.push(`${data.cityCount}都市`);
if (data.newBandId != null) details.push(`新集団${data.newBandId}`);
if (data.mergedBandId != null) details.push(`合流元${data.mergedBandId}`);
if (data.progress != null) details.push(`進捗 ${Math.round(data.progress * 100)}%`);
return details.join("・");
}
function setEventLegend() {
if (!els.eventLegend) return;
if (!graphState.showEventIcons) {
els.eventLegend.setAttribute("data-event-types", "hidden");
els.eventLegend.innerHTML = '<p class="event-legend-empty">出来事アイコンは非表示です。</p>';
return;
}
const types = [...new Set(graphState.markers.map(marker => marker.event.type))]
.filter(type => graphEventTypes[type]);
const key = types.join(",");
if (els.eventLegend.getAttribute("data-event-types") === key) return;
els.eventLegend.setAttribute("data-event-types", key);
if (!types.length) {
els.eventLegend.innerHTML = '<p class="event-legend-empty">現在、歴史グラフに出来事の記号は表示されていません。</p>';
return;
}
els.eventLegend.innerHTML = types.map(type =>
`<span><canvas width="20" height="20" data-event-type="${type}" aria-hidden="true"></canvas>${graphEventTypes[type].label}</span>`
).join("");
for (const canvas of els.eventLegend.querySelectorAll("canvas")) {
const event = graphEventTypes[canvas.getAttribute("data-event-type")];
const g = canvas.getContext("2d");
g.fillStyle = event.color;
event.draw(g, 10, 10, 5);
}
}
function graphEventLabel(event) {
return graphEventTypes[event.type]?.label || "出来事";
}
function graphEventSummary(event) {
return graphEventTypes[event.type]?.summary(event.data || {}) || "";
}
function showStateGraphMarkerTooltip(marker, pointerX, pointerY) {
if (!els.stateGraphTooltip) return;
const title = marker.row
? `国家${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 ? "存続中" : "滅亡済み";
els.stateGraphInfo.textContent = `国家${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 = "";
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 ? "存続中" : "滅亡済み";
els.stateGraphInfo.textContent =
`国家${nearestRow.history.id} ${status} ${formatGraphYear(sample.year ?? year)} ` +
`${({power: "国力", population: "人口", cities: "都市数", loyalty: "忠誠度"})[graphState.metric]} ${formatGraphValue(metricValue, graphState.metric)}`;
}
function clearStateGraphInfo() {
if (els.stateGraphInfo) els.stateGraphInfo.textContent = "";
hideStateGraphMarkerTooltip();
if (graphState.hoverPolityId !== null) {
graphState.hoverPolityId = null;
if (!running) render();
}
}
function formatGraphYear(week) {
return `${Math.floor(week / WEEKS_PER_YEAR).toLocaleString()}年`;
}
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()}年 ${monthOfYear}月 第${weekOfMonth}週`;
}