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,45 @@
interface Props {
label: string;
value: number;
onChange: (value: number) => void;
min?: number;
max?: number;
step?: number;
}
export default function NumericStepper({ label, value, onChange, min = 0, max, step = 1 }: Props) {
const decrement = () => {
const next = value - step;
onChange(min !== undefined ? Math.max(min, next) : next);
};
const increment = () => {
const next = value + step;
onChange(max !== undefined ? Math.min(max, next) : next);
};
return (
<div className="stepper">
<span className="stepper-label">{label}</span>
<div className="stepper-controls">
<button
type="button"
className="stepper-btn"
onClick={decrement}
disabled={min !== undefined && value <= min}
>
-
</button>
<span className="stepper-value">{value}</span>
<button
type="button"
className="stepper-btn"
onClick={increment}
disabled={max !== undefined && value >= max}
>
+
</button>
</div>
</div>
);
}