monster/nategodd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Balance bars: common scale across groups, fixed track, astrological row order

Browse Source 
Each group was normalised to its own max, so Fire 4 / Mutable 7 /
Negative 6 all drew full-width. Bars now scale against the group total
(always 12 planet-weights) inside a fixed track, and rows are ordered
Fire/Earth/Air/Water, Cardinal/Fixed/Mutable, Positive/Negative instead
of JSON-alphabetical.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
type-two 2026-09-16 15:30:30 +10:00
parent 11edf66af6
commit 97e76578e9
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/app.js
View File

@ -510,14 +510,18 @@ function renderBalances(d) {
const b = d.balances; const b = d.balances;
const colors = { Fire: "#e06a4f", Earth: "#7aa85c", Air: "#d9c86a", Water: "#5f8fd0", const colors = { Fire: "#e06a4f", Earth: "#7aa85c", Air: "#d9c86a", Water: "#5f8fd0",
Cardinal: "#8f7bd8", Fixed: "#e8c66a", Mutable: "#5fa8e0", Positive: "#e8e4f0", Negative: "#9a93ad" }; Cardinal: "#8f7bd8", Fixed: "#e8c66a", Mutable: "#5fa8e0", Positive: "#e8e4f0", Negative: "#9a93ad" };
// one common scale: every group sums to the same total planet-weight (12),
// so bar length is comparable across elements / modalities / polarities
const ORDER = [["Fire", "Earth", "Air", "Water"], ["Cardinal", "Fixed", "Mutable"], ["Positive", "Negative"]];
let html = "<h3>Balances</h3>"; let html = "<h3>Balances</h3>";
for (const group of [b.elements, b.modalities, b.polarities]) { [b.elements, b.modalities, b.polarities].forEach((group, gi) => {
const max = Math.max(...Object.values(group), 1); const total = Object.values(group).reduce((a, x) => a + x, 0) || 1;
for (const [k, v] of Object.entries(group)) { for (const k of ORDER[gi]) {
html += `<div class="bal-row"><span>${k}</span><div class="bal-bar" style="width:${(v / max) * 130}px;background:${colors[k]}"></div><span>${v}</span></div>`; const v = group[k] || 0;
html += `<div class="bal-row"><span>${k}</span><div class="bal-track"><div class="bal-bar" style="width:${(v / total) * 100}%;background:${colors[k]}"></div></div><span>${v}</span></div>`;
} }
html += `<div style="height:10px"></div>`; html += `<div style="height:10px"></div>`;
} });
$("#balances").innerHTML = html; $("#balances").innerHTML = html;
const mp = d.moon_phase; const mp = d.moon_phase;
$("#moonphase").innerHTML = mp $("#moonphase").innerHTML = mp

3
static/style.css
View File

@ -104,7 +104,8 @@ td.dign { color: var(--gold); font-size: 12px; }
.bal-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; } .bal-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.bal-row span:first-child { width: 74px; color: var(--dim); } .bal-row span:first-child { width: 74px; color: var(--dim); }
.bal-bar { height: 10px; border-radius: 5px; } .bal-track { width: 160px; height: 10px; background: #1c1c2c; border-radius: 5px; overflow: hidden; }
.bal-bar { height: 10px; border-radius: 5px; min-width: 0; }
#moonphase { margin-top: 22px; color: var(--dim); font-size: 14px; } #moonphase { margin-top: 22px; color: var(--dim); font-size: 14px; }
#moonphase strong { color: var(--ink); } #moonphase strong { color: var(--ink); }