ooo
This commit is contained in:
parent
e2d2dfcb66
commit
8f80997b0d
256 changed files with 4044 additions and 966 deletions
177
index.html
177
index.html
|
|
@ -1,125 +1,160 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Emergent Civilization Simulation</title>
|
||||
<title>文明シミュレータ</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="app">
|
||||
<aside class="sidebar left-sidebar" aria-label="Simulation controls">
|
||||
<aside class="sidebar left-sidebar" aria-label="シミュレーションの操作">
|
||||
<details class="panel map-guide">
|
||||
<summary>ヘルプ</summary>
|
||||
<h3>地図</h3>
|
||||
<dl class="guide-list">
|
||||
<div><dt>四角</dt><dd>都市。人口200–999 / 1000–3999 / 4000–5999 / 6000以上の4段階で大きくなります。</dd></div>
|
||||
<div><dt>領土色</dt><dd>同色が同じ国家。茶色寄りは係争地です。</dd></div>
|
||||
<div><dt class="guide-gold">黄色い道</dt><dd>都市間の交易路です。</dd></div>
|
||||
<div><dt class="guide-red">赤い円・広がり</dt><dd>戦争や災害の影響です。</dd></div>
|
||||
</dl>
|
||||
<h3>操作</h3>
|
||||
<p>再生成では世界サイズを選択します。介入ボタンは選択中、地図を続けてクリックして連続実行できます。もう一度同じボタンを押すと解除します。</p>
|
||||
<p>災害発生は地点、都市建設は地点、交通接続は都市を2つ順に選択します。ユーザー建設都市は都市間隔・自動都市数上限を無視できますが、水域には建設できません。表示レイヤーで地形・資源・民族・人口圧力・国家・技術・交通量を切り替えます。</p>
|
||||
<h3>主なパラメータ</h3>
|
||||
<dl class="guide-list">
|
||||
<div><dt>人口 / 人口圧力</dt><dd>都市は人口400で成立し、200未満で消滅します。人口圧力は地域人口と収容力の比です。</dd></div>
|
||||
<div><dt>資源 / 肥沃度</dt><dd>資源は生活・都市経済に使われ、肥沃度は陸地の人口維持と農業に影響します。</dd></div>
|
||||
<div><dt>農業 / 冶金</dt><dd>地域・都市の生産力や発展を支える技術です。</dd></div>
|
||||
<div><dt>民族</dt><dd>環境・距離によって分化します。分化は抑制され、極小民族は周辺民族へ吸収されます。</dd></div>
|
||||
<div><dt>交通量</dt><dd>人や交易の往来の強さ。交易路形成にも影響します。</dd></div>
|
||||
<div><dt>忠誠度</dt><dd>都市の国家への帰属安定度。低下すると反乱につながります。</dd></div>
|
||||
<div><dt>国庫</dt><dd>国家の共通資金。人口比例の上限に達すると、一部を使って確率で都市を建設します。反乱時は一部が反乱国へ移ります。</dd></div>
|
||||
<div><dt>正統性 / 結束</dt><dd>国家の統治安定性。低いほど危機や分裂の影響を受けやすくなります。</dd></div>
|
||||
<div><dt>制度老朽化</dt><dd>時間とともに増え、忠誠度上限を下げます。30%超で制度改革が起こり得ますが、改革後50年は再発しません。</dd></div>
|
||||
<div><dt>国力</dt><dd>人口・国庫・忠誠度・技術などをまとめた国家の総合的な力です。</dd></div>
|
||||
</dl>
|
||||
<h3>歴史</h3>
|
||||
<p>右側で世界の推移と国家の存続期間・出来事を確認できます。記号の意味は下の凡例に表示されます。</p>
|
||||
<div id="eventLegend" class="event-legend"></div>
|
||||
</details>
|
||||
|
||||
<div class="brand">
|
||||
<h1>Civil Emergence Lab</h1>
|
||||
<p>Local rules, genealogical cultures, settlement pressure, migration, and collapse.</p>
|
||||
<h1>文明シミュレータ</h1>
|
||||
<p>人口の移動、文化の分化、国家の興亡を観察します。</p>
|
||||
<a class="return-link" href="https://2012r2.nishi.boats/~333/">333の部屋に戻る</a>
|
||||
</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 class="row row-two">
|
||||
<button id="toggleRun" class="primary" type="button">一時停止</button>
|
||||
<button id="resetWorld" type="button">再生成</button>
|
||||
</div>
|
||||
<label>
|
||||
Speed
|
||||
進行速度
|
||||
<input id="speed" type="range" min="1" max="12" value="5">
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Initial population
|
||||
<input id="agentCount" type="range" min="500" max="20000" step="500" value="5000">
|
||||
</label>
|
||||
<div class="intervention-tools" aria-label="世界への介入">
|
||||
<span class="control-heading">世界への介入</span>
|
||||
<div class="tool-row">
|
||||
<button id="triggerDisaster" type="button" aria-pressed="false">災害発生</button>
|
||||
<button id="buildCity" type="button" aria-pressed="false">都市建設</button>
|
||||
<button id="connectCities" type="button" aria-pressed="false">交通接続</button>
|
||||
</div>
|
||||
<p id="interventionStatus" class="intervention-status">ボタンを選び、地図上をクリックして実行します。</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<option value="pheromone">Pheromone</option>
|
||||
<option value="terrain">地形</option>
|
||||
<option value="resources">資源</option>
|
||||
<option value="ethnicity">民族</option>
|
||||
<option value="pressure">人口圧力</option>
|
||||
<option value="polities" selected>国家</option>
|
||||
<option value="technology">技術</option>
|
||||
<option value="pheromone">交通量</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>Field population</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>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>
|
||||
<h2>主な民族系統</h2>
|
||||
<ol id="ethnicityList"></ol>
|
||||
<div id="fpsCounter" class="fps-counter" aria-live="off">FPS --</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="sim">
|
||||
<canvas id="world" width="960" height="960" aria-label="Civilization simulation canvas"></canvas>
|
||||
<canvas id="world" width="960" height="960" aria-label="文明シミュレーションの地図"></canvas>
|
||||
<div class="legend" id="legend"></div>
|
||||
<div class="tooltip" id="tooltip" hidden></div>
|
||||
</section>
|
||||
|
||||
<aside class="history-sidebar" aria-label="State history">
|
||||
<aside class="history-sidebar" aria-label="国家の歴史">
|
||||
<div class="current-date" aria-live="polite"><span>現在</span><strong id="currentDate">0年 1月 第1週</strong></div>
|
||||
<section class="panel history-panel">
|
||||
<div class="history-header">
|
||||
<h2>State lifespans</h2>
|
||||
<h2>国家の興亡</h2>
|
||||
<span id="historyRange">-</span>
|
||||
</div>
|
||||
<div class="world-trend-wrap">
|
||||
<h3>世界の推移</h3>
|
||||
<canvas id="worldTrendGraph" width="300" height="176" aria-label="地域人口、都市人口、都市数、国家数、民族数の推移"></canvas>
|
||||
</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 id="historyFilter" aria-label="国家の絞り込み">
|
||||
<option value="all">すべて</option>
|
||||
<option value="active">存続中</option>
|
||||
<option value="ended">滅亡済み</option>
|
||||
</select>
|
||||
<select id="historySort" aria-label="State graph sort">
|
||||
<option value="oldest">Oldest</option>
|
||||
<option value="strongest">Strongest</option>
|
||||
<option value="largest">Largest</option>
|
||||
<select id="historySort" aria-label="国家の並び順">
|
||||
<option value="oldest">建国順</option>
|
||||
<option value="strongest">国力順</option>
|
||||
<option value="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 id="historyMetric" aria-label="歴史の表示指標">
|
||||
<option value="power">国力</option>
|
||||
<option value="population">人口</option>
|
||||
<option value="cities">都市数</option>
|
||||
<option value="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 class="history-group-controls" aria-label="歴史グラフの表示">
|
||||
<button id="toggleActiveStates" type="button" aria-pressed="true">存続中</button>
|
||||
<button id="togglePastStates" type="button" aria-pressed="true">滅亡済み</button>
|
||||
<button id="toggleEventIcons" type="button" aria-pressed="true">出来事アイコン</button>
|
||||
</div>
|
||||
<div class="state-graph-scroll">
|
||||
<canvas id="stateGraph" width="300" height="720" aria-label="State lifespan graph"></canvas>
|
||||
<canvas id="stateGraph" width="300" height="720" aria-label="国家の存続期間のグラフ"></canvas>
|
||||
<div id="stateGraphTooltip" class="state-graph-tooltip" hidden></div>
|
||||
</div>
|
||||
<div id="stateGraphInfo" class="state-graph-info">Hover a row for details</div>
|
||||
<div id="stateGraphInfo" class="state-graph-info"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<dialog id="regenerateDialog" class="regenerate-dialog">
|
||||
<form class="regenerate-form" method="dialog">
|
||||
<h2>世界を再生成</h2>
|
||||
<label>
|
||||
世界の大きさ
|
||||
<select id="worldSize">
|
||||
<option value="128">128 × 128</option>
|
||||
<option value="160" selected>160 × 160</option>
|
||||
<option value="220">220 × 220</option>
|
||||
<option value="280">280 × 280</option>
|
||||
</select>
|
||||
</label>
|
||||
<p>再生成すると現在の世界は破棄されます。</p>
|
||||
<div class="dialog-actions">
|
||||
<button id="cancelRegenerate" type="button">キャンセル</button>
|
||||
<button id="confirmRegenerate" class="primary" type="button">再生成</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="config.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="app-state.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue