civ/app-state.js

const elementIds = [
"world", "toggleRun", "stepOnce", "resetWorld",
"speed", "agentCount", "worldSize", "viewMode", "year", "activeGroups", "urbanPopulation",
"ethnicities", "cities", "polities", "wars", "routes", "farmingKnowledge", "metallurgyKnowledge",
"deaths", "frameCost", "ethnicityList", "legend", "tooltip", "stateGraph", "historyRange",
"historyFilter", "historySort", "historyMetric", "toggleActiveStates", "togglePastStates",
"stateGraphInfo", "stateGraphTooltip"
];
const els = Object.fromEntries(elementIds.map(id => [id === "world" ? "canvas" : id, document.getElementById(id)]));
els.sim = document.querySelector(".sim");
const ctx = els.canvas.getContext("2d", { alpha: false });
let sim;
let running = true;
let lastStatsAt = 0;
let lastGraphRenderAt = 0;
let lastRenderAt = 0;
let lastSimTickAt = 0;
let renderDirty = true;
let loopTimer = null;
let loopScheduled = false;
let hoverState = null;
let renderImage = null;
let renderImageSize = 0;
const LoopConfig = Object.freeze({
simTickMs: 33,
renderMs: 66,
stepBudgetMs: 4.5,
idlePollMs: 180,
hiddenPollMs: 1000
});
const graphState = {
filter: "all",
sort: "oldest",
metric: "power",
showActive: true,
showPast: true,
hoverPolityId: null,
rows: [],
markers: [],
scale: null
};
const legendByMode = {
terrain: () => terrainInfo.map(t => `<span><i style="background: rgb(${t.color.join(",")})"></i>${t.name}</span>`).join(""),
ethnicity: () => "<span>Ethnicity</span>",
pressure: () => "<span>Pressure</span>",
polities: () => "<span>States</span>",
nomads: () => "<span>Nomads</span>",
technology: () => "<span>Technology</span>",
pheromone: () => "<span>Routes</span>",
resources: () => "<span>Resources</span>"
};