bas/spelljammer-ships
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): split dashboard into combat stats and reference stats

Browse Source 
Hull and Armor current are always editable with steppers at the top
of the dashboard — these are the values that change every combat round.

All other stats (AC, Con, Speed, Class, Size, Max values, Crew,
Hardpoints, Cargo) are shown in a compact read-only reference grid
with an Edit button to toggle into editable mode when needed.

Removes separate MobilitySection and CrewSection in favor of a unified
ShipStatsSection that combines all reference stats in one place.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bas van Rossem
2026-02-19 17:22:42 +01:00
parent 642f1f70e8
commit 836a5d7a49
6 changed files with 112 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/components/dashboard/VitalsSection.tsx
View File

@@ -4,70 +4,29 @@ import type { Ship } from '../../types/ship';
interface Props {
ship: Ship;
onUpdate: (patch: Partial<Ship>) => void;
editing: boolean;
}
export default function VitalsSection({ ship, onUpdate, editing }: Props) {
export default function VitalsSection({ ship, onUpdate }: Props) {
return (
<section className="dashboard-section">
<h3 className="section-title">Vitals</h3>
{editing ? (
<div className="stat-grid">
<div className="combat-stats">
<div className="combat-stat">
<NumericStepper
label="Hull"
label={`Hull (/${ship.hull_max})`}
value={ship.hull_current}
max={ship.hull_max}
onChange={(v) => onUpdate({ hull_current: v })}
/>
</div>
<div className="combat-stat">
<NumericStepper
label="Hull Max"
value={ship.hull_max}
min={ship.hull_current}
onChange={(v) => onUpdate({ hull_max: v })}
/>
<NumericStepper
label="Armor"
label={`Armor (/${ship.armor_max})`}
value={ship.armor_current}
max={ship.armor_max}
onChange={(v) => onUpdate({ armor_current: v })}
/>
<NumericStepper
label="Armor Max"
value={ship.armor_max}
min={ship.armor_current}
onChange={(v) => onUpdate({ armor_max: v })}
/>
<NumericStepper
label="AC"
value={ship.ac}
onChange={(v) => onUpdate({ ac: v })}
/>
<NumericStepper
label="Con Save"
value={ship.con_save ?? 0}
onChange={(v) => onUpdate({ con_save: v })}
/>
</div>
) : (
<div className="stat-grid-readonly">
<div className="stat-ro">
<span className="stat-ro-label">Hull</span>
<span className="stat-ro-value">{ship.hull_current}/{ship.hull_max}</span>
</div>
<div className="stat-ro">
<span className="stat-ro-label">AC</span>
<span className="stat-ro-value">{ship.ac}</span>
</div>
<div className="stat-ro">
<span className="stat-ro-label">Armor</span>
<span className="stat-ro-value">{ship.armor_current}/{ship.armor_max}</span>
</div>
<div className="stat-ro">
<span className="stat-ro-label">Con</span>
<span className="stat-ro-value">{ship.con_save != null ? `+${ship.con_save}` : '—'}</span>
</div>
</div>
)}
</div>
</section>
);
}