Reorder the combat tab, and make weapons readyable

There was no way to ready a weapon. The strip under the characteristics reads
`equipped`, and the only toggle-equipped control on the sheet was on the ARMOUR list —
a weapon could only be readied by opening its item sheet and finding the tickbox
there. The weapons table now carries the same toggle, the row is tinted when readied,
and a line above the table says what the control does.

The tab runs in the order it is used: weapons, armour, defend, reaction, body last.
Weapons lead with 40px art and a display-face name, having previously sat below two
screens of anatomy and reaction arithmetic.

The figure is a partial, drawn in three places — header thumbnail, combat tab, anatomy
tab. Three inline copies would have been the template-layer version of the defect
check-rules exists to prevent: a location present in one drawing and missing from
another.

The header carries a 34px figure and every location with its damage and the armour
over it, so "how much armour is on the part that just got hit" is answered on the main
page without changing tab.

Also fixed: `.ringbrp-sheet a` outranks a bare `.rb-equip`, so an unequipped toggle was
painted white and read as lit — true of the armour toggle too, since it was added.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
slaguru666
2026-08-11 10:15:16 +01:00
co-authored by Claude Opus 5
parent 4bfa7110d0
commit 3421ed4a2e
110 changed files with 374 additions and 194 deletions
+70 -2
View File
@@ -416,8 +416,76 @@
.rb-strong { font-weight: 700; color: var(--rb-white); }
.rb-dim { color: var(--rb-muted); font-size: 12px; }
.rb-empty { color: var(--rb-muted); font-style: italic; text-align: center; padding: 26px; }
.rb-equip { color: var(--rb-muted); }
.rb-equip.on { color: var(--rb-yellow); }
/* `.ringbrp-sheet a` is more specific than a lone class, so the unequipped state was
being painted white and read as "on". Both toggles — armour and weapons — depend
on the off state actually looking off. */
.ringbrp-sheet .rb-equip { color: var(--rb-muted); }
.ringbrp-sheet .rb-equip:hover { color: var(--rb-white); }
.ringbrp-sheet .rb-equip.on { color: var(--rb-yellow); }
/* ============================================================
Weapons — the first thing on the combat tab, and it should look it
============================================================ */
.rb-ready-hint { margin: 0 0 8px; }
.rb-weapontable .rb-col-ready { width: 40px; text-align: center; }
.rb-weapontable td { vertical-align: middle; }
.rb-weapontable .rb-equip { font-size: 15px; }
.rb-weapon-icon {
width: 40px; height: 40px; margin-right: 9px;
border: 1px solid var(--rb-hairline); background: var(--rb-void);
vertical-align: middle;
}
.rb-weapon-name {
font-family: var(--rb-display); font-size: 15px; font-weight: 700;
letter-spacing: .02em; vertical-align: middle;
}
.rb-weapon-dmg { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A readied weapon is marked in the table too, so the strip and the list agree. */
.rb-wrow-ready { background: rgba(255, 214, 0, .06); }
.rb-wrow-ready .rb-weapon-icon { border-color: var(--rb-yellow-dim); }
.rb-wrow-ready .rb-weapon-name { color: var(--rb-yellow); }
/* ============================================================
The figure, small — every location and the armour over it
============================================================ */
/* The vitals row is a flex of equal-height boxes; this one must not be allowed to
set that height. .rb-body-svg is declared further down the file with max-width
180px, so the mini needs the compound selector to win rather than a later one. */
.rb-minibody {
display: flex; align-items: center; gap: 9px;
padding: 5px 9px; border: 1px solid var(--rb-line); background: var(--rb-void);
flex: 0 0 auto;
}
.rb-vitals > .rb-minibody { min-width: 0; text-align: left; flex-direction: row; }
.rb-body-svg.rb-body-mini {
width: 34px; max-width: 34px; height: auto; flex: 0 0 auto;
}
.rb-minilocs {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, auto); gap: 0 12px;
font-family: var(--rb-mono); font-size: 9px; line-height: 1.45;
}
.rb-miniloc { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.rb-miniloc-name { color: var(--rb-muted); min-width: 52px; }
.rb-miniloc-hp { color: var(--rb-white); font-variant-numeric: tabular-nums; }
.rb-miniloc-ap {
color: var(--rb-yellow); font-weight: 700; min-width: 12px; text-align: right;
}
.rb-miniloc-noap { color: var(--rb-line); }
.rb-miniloc-grazed .rb-miniloc-hp { color: var(--rb-yellow); }
.rb-miniloc-hurt .rb-miniloc-hp { color: var(--rb-danger); }
.rb-miniloc-disabled .rb-miniloc-name,
.rb-miniloc-destroyed .rb-miniloc-name { color: var(--rb-danger); text-decoration: line-through; }
/* Armour reads on the figure itself, at any size. */
.rb-part-armoured { stroke-width: 2.5px; }
/* Anatomy tab: the same figure, beside the full table. */
.rb-anatblock { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rb-anatside { min-width: 0; }
@media (max-width: 620px) { .rb-anatblock { grid-template-columns: 1fr; } }
.rb-block { margin: 12px 0 4px; border-top: 1px solid var(--rb-hairline); padding-top: 7px; }
.rb-wounds li { border-left: 3px solid var(--rb-danger); padding-left: 8px; }