rope/guildhall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tidier skill levels on the roster

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-18 22:24:32 +01:00
parent ba68a62080
commit 81963d68ea
2 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/app.js
View file

@ -668,7 +668,7 @@ function board() {
function roster() { function roster() {
return `<div class="grid wide">${S.players.map((p) => { return `<div class="grid wide">${S.players.map((p) => {
const cls = C.classes[p.cls]; const cls = C.classes[p.cls];
const levels = C.skills.filter((s) => !s.class || s.class === p.cls).map((s) => `<div>${s.icon} <span>${s.name}</span> ${p.levels[s.id]}</div>`).join(""); const levels = C.skills.filter((s) => !s.class || s.class === p.cls).map((s) => `<div class="lvl ${p.levels[s.id] <= 1 ? "low" : ""}" title="${s.name}"><span class="ico">${s.icon}</span><span class="nm">${s.name}</span><b>${p.levels[s.id]}</b></div>`).join("");
return `<div class="panel person"><div class="top"><span class="ico">${cls.icon}</span><div> return `<div class="panel person"><div class="top"><span class="ico">${cls.icon}</span><div>
<b>${esc(p.name)}</b> <span class="muted small">${cls.name} · total level ${p.total}</span> <b>${esc(p.name)}</b> <span class="muted small">${cls.name} · total level ${p.total}</span>
<div class="small">${p.doing ? `${skillOf(p.skill).icon} ${esc(p.doing)}` : `<span class="muted">Idle</span>`}${p.garrison ? ` · <span class="tag warn">On guard</span>` : ""}</div> <div class="small">${p.doing ? `${skillOf(p.skill).icon} ${esc(p.doing)}` : `<span class="muted">Idle</span>`}${p.garrison ? ` · <span class="tag warn">On guard</span>` : ""}</div>

10
static/styles.css
View file

@ -270,8 +270,13 @@ table.parts td:last-child { text-align: right; font-variant-numeric: tabular-num
.ledger .when { color: var(--muted); font-size: 12px; display: block; } .ledger .when { color: var(--muted); font-size: 12px; display: block; }
.person .top { display: flex; gap: 12px; align-items: center; } .person .top { display: flex; gap: 12px; align-items: center; }
.person .ico { font-size: 30px; } .person .ico { font-size: 30px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; font-size: 13px; margin-top: 10px; } .levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; font-size: 13px; margin-top: 12px; }
.levels span { color: var(--muted); } .levels .lvl { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.levels .lvl .ico { width: 18px; text-align: center; flex: none; font-size: 14px; line-height: 1; }
.levels .lvl .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.levels .lvl b { font-variant-numeric: tabular-nums; font-weight: 650; }
.levels .lvl.low { color: var(--muted); }
.levels .lvl.low b { font-weight: 400; }
/* --- character sheet -------------------------------------------------- */ /* --- character sheet -------------------------------------------------- */
@ -357,7 +362,6 @@ button.sheet-skill:hover { background: var(--panel-2); }
.skill-head { flex-wrap: wrap; } .skill-head { flex-wrap: wrap; }
.skill-head .info { flex-basis: 60%; } .skill-head .info { flex-basis: 60%; }
.slots { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .slots { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.levels { grid-template-columns: repeat(2, 1fr); }
/* iOS zooms into any input under 16px when it's focused. */ /* iOS zooms into any input under 16px when it's focused. */
input[type=text], input[type=number], textarea, select { font-size: 16px; } input[type=text], input[type=number], textarea, select { font-size: 16px; }
} }