93 lines
3.3 KiB
HTML
93 lines
3.3 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" 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="pheromone">Trade trails</option>
|
|
<option value="pressure">Population pressure</option>
|
|
<option value="cities">Cities</option>
|
|
<option value="polities">Polities</option>
|
|
</select>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="panel stats" aria-live="polite">
|
|
<dl>
|
|
<div><dt>Year</dt><dd id="year">0</dd></div>
|
|
<div><dt>Total population</dt><dd id="population">0</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>Trade routes</dt><dd id="routes">0</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>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|