131 lines
5.1 KiB
HTML
131 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Emergent Civilization Simulation</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<aside class="sidebar left-sidebar" aria-label="Simulation controls">
|
|
<div class="brand">
|
|
<h1>Civil Emergence Lab</h1>
|
|
<p>Local rules, genealogical cultures, settlement pressure, migration, and collapse.</p>
|
|
</div>
|
|
|
|
<section class="panel controls">
|
|
<div class="row">
|
|
<button id="toggleRun" class="primary" type="button">Pause</button>
|
|
<button id="stepOnce" type="button">Step</button>
|
|
<button id="resetWorld" type="button">Reset</button>
|
|
</div>
|
|
<div class="row">
|
|
<button id="saveWorld" type="button">Save</button>
|
|
<button id="loadWorld" type="button">Load</button>
|
|
<button id="clearSave" type="button">Clear</button>
|
|
</div>
|
|
|
|
<label>
|
|
Speed
|
|
<input id="speed" type="range" min="1" max="12" value="5">
|
|
</label>
|
|
|
|
<label>
|
|
Initial groups
|
|
<input id="agentCount" type="range" min="500" max="20000" step="500" value="5000">
|
|
</label>
|
|
|
|
<label>
|
|
World scale
|
|
<select id="worldSize">
|
|
<option value="128">128 x 128</option>
|
|
<option value="160" selected>160 x 160</option>
|
|
<option value="220">220 x 220</option>
|
|
<option value="280">280 x 280</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
View
|
|
<select id="viewMode">
|
|
<option value="terrain">Terrain</option>
|
|
<option value="resources">Resources</option>
|
|
<option value="ethnicity">Ethnicity</option>
|
|
<option value="pressure">Population pressure</option>
|
|
<option value="polities">Polities</option>
|
|
<option value="technology">Technology</option>
|
|
</select>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="panel stats" aria-live="polite">
|
|
<dl>
|
|
<div><dt>Date</dt><dd id="year">0y 1m</dd></div>
|
|
<div><dt>Active groups</dt><dd id="activeGroups">0</dd></div>
|
|
<div><dt>Urban population</dt><dd id="urbanPopulation">0</dd></div>
|
|
<div><dt>Ethnicities</dt><dd id="ethnicities">0</dd></div>
|
|
<div><dt>Cities</dt><dd id="cities">0</dd></div>
|
|
<div><dt>States</dt><dd id="polities">0</dd></div>
|
|
<div><dt>Wars</dt><dd id="wars">0</dd></div>
|
|
<div><dt>Trade routes</dt><dd id="routes">0</dd></div>
|
|
<div><dt>Farming knowledge</dt><dd id="farmingKnowledge">0.000</dd></div>
|
|
<div><dt>Metallurgy knowledge</dt><dd id="metallurgyKnowledge">0.000</dd></div>
|
|
<div><dt>Collapse deaths</dt><dd id="deaths">0</dd></div>
|
|
<div><dt>Frame cost</dt><dd id="frameCost">0ms</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="panel ledger">
|
|
<h2>Dominant lineages</h2>
|
|
<ol id="ethnicityList"></ol>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="sim">
|
|
<canvas id="world" width="960" height="960" aria-label="Civilization simulation canvas"></canvas>
|
|
<div class="legend" id="legend"></div>
|
|
<div class="tooltip" id="tooltip" hidden></div>
|
|
</section>
|
|
|
|
<aside class="history-sidebar" aria-label="State history">
|
|
<section class="panel history-panel">
|
|
<div class="history-header">
|
|
<h2>State lifespans</h2>
|
|
<span id="historyRange">-</span>
|
|
</div>
|
|
<div class="history-controls">
|
|
<select id="historyFilter" aria-label="State graph filter">
|
|
<option value="all">All</option>
|
|
<option value="active">Living</option>
|
|
<option value="ended">Past</option>
|
|
</select>
|
|
<select id="historySort" aria-label="State graph sort">
|
|
<option value="important">Important</option>
|
|
<option value="active">Active</option>
|
|
<option value="oldest">Oldest</option>
|
|
<option value="strongest">Strongest</option>
|
|
<option value="largest">Largest</option>
|
|
</select>
|
|
<select id="historyMetric" aria-label="State graph metric">
|
|
<option value="power">Power</option>
|
|
<option value="population">Population</option>
|
|
<option value="cities">Cities</option>
|
|
<option value="loyalty">Loyalty</option>
|
|
</select>
|
|
</div>
|
|
<div class="history-group-controls" aria-label="State graph groups">
|
|
<button id="toggleActiveStates" type="button" aria-pressed="true">Living</button>
|
|
<button id="togglePastStates" type="button" aria-pressed="true">Past</button>
|
|
</div>
|
|
<div class="state-graph-scroll">
|
|
<canvas id="stateGraph" width="300" height="720" aria-label="State lifespan graph"></canvas>
|
|
</div>
|
|
<div id="stateGraphInfo" class="state-graph-info">Hover a row for details</div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|