333/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

less laggy

Browse source
This commit is contained in:
33333-33333 2026-05-13 17:28:07 +09:00
commit a9705e7ab1
3 changed files with 664 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

29
index.html
View file

@ -94,7 +94,34 @@
<h2>State lifespans</h2>
<span id="historyRange">-</span>
</div>
<canvas id="stateGraph" width="300" height="720" aria-label="State lifespan graph"></canvas>
<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>

741
script.js
View file

File diff suppressed because it is too large Load diff

64
styles.css
View file

@ -90,17 +90,67 @@ select {
font-variant-numeric: tabular-nums;
}
#stateGraph {
display: block;
width: 100%;
flex: 1;
min-height: 420px;
.history-controls,
.history-group-controls {
display: grid;
gap: 6px;
margin-bottom: 8px;
}
.history-controls {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.history-controls select,
.history-group-controls button {
min-width: 0;
border: 1px solid var(--line);
border-radius: 6px;
background: #101315;
color: var(--text);
font-size: 11px;
height: 28px;
}
.history-group-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.history-group-controls button[aria-pressed="false"] {
color: var(--muted);
background: #171b1d;
}
#stateGraph {
display: block;
width: 100%;
height: auto;
border: 0;
background: #101315;
image-rendering: auto;
}
.state-graph-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid var(--line);
border-radius: 6px;
background: #101315;
}
.state-graph-info {
min-height: 18px;
margin-top: 7px;
color: var(--muted);
font-size: 11px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand h1 {
margin: 0 0 6px;
font-size: 24px;
@ -330,7 +380,7 @@ canvas#world {
.history-sidebar {
border-left: 0;
border-top: 1px solid var(--line);
overflow: visible;
overflow: hidden;
}
.sim {
@ -343,7 +393,7 @@ canvas#world {
height: min(calc(100vw - 20px), 92vh);
}
#stateGraph {
.state-graph-scroll {
height: 420px;
flex: none;
}