feat(web): implement Ship Dashboard with vitals and mobility sections

Adds NumericStepper and EnumDropdown UI components, VitalsSection (hull/armor/AC/con),
MobilitySection (speed/maneuver class/size), with debounced real-time updates.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bas van Rossem
2026-02-19 16:24:53 +01:00
parent 130cffd3c1
commit 88e9bf7f05
6 changed files with 289 additions and 2 deletions

View File

@@ -0,0 +1,51 @@
import NumericStepper from '../ui/NumericStepper';
import type { Ship } from '../../types/ship';
interface Props {
ship: Ship;
onUpdate: (patch: Partial<Ship>) => void;
}
export default function VitalsSection({ ship, onUpdate }: Props) {
return (
<section className="dashboard-section">
<h3 className="section-title">Vitals</h3>
<div className="stat-grid">
<NumericStepper
label="Hull"
value={ship.hull_current}
max={ship.hull_max}
onChange={(v) => onUpdate({ hull_current: v })}
/>
<NumericStepper
label="Hull Max"
value={ship.hull_max}
min={ship.hull_current}
onChange={(v) => onUpdate({ hull_max: v })}
/>
<NumericStepper
label="Armor"
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>
</section>
);
}