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:
51
web/src/components/dashboard/VitalsSection.tsx
Normal file
51
web/src/components/dashboard/VitalsSection.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user