Files
spelljammer-ships/web/src/pages/ShipDashboardPage.tsx
Bas van Rossem 836a5d7a49 refactor(web): split dashboard into combat stats and reference stats
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>
2026-02-19 17:22:42 +01:00

48 lines
1.5 KiB
TypeScript

import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import TopBar from '../components/layout/TopBar';
import PageContainer from '../components/layout/PageContainer';
import VitalsSection from '../components/dashboard/VitalsSection';
import ShipStatsSection from '../components/dashboard/ShipStatsSection';
import WeaponsSection from '../components/dashboard/WeaponsSection';
import NotesSection from '../components/dashboard/NotesSection';
import { useShipStore } from '../store/use-ship-store';
export default function ShipDashboardPage() {
const { id } = useParams<{ id: string }>();
const { ship, weapons, loading, joinShip, leaveShip, updateShip, createWeapon, updateWeapon, deleteWeapon } = useShipStore();
useEffect(() => {
if (id) joinShip(id);
return () => leaveShip();
}, [id, joinShip, leaveShip]);
if (loading || !ship) {
return (
<>
<TopBar title="Loading..." />
<PageContainer>
<p className="loading-text">Loading ship data...</p>
</PageContainer>
</>
);
}
return (
<>
<TopBar title={ship.name} />
<PageContainer>
<VitalsSection ship={ship} onUpdate={updateShip} />
<ShipStatsSection ship={ship} onUpdate={updateShip} />
<WeaponsSection
weapons={weapons}
onCreateWeapon={createWeapon}
onUpdateWeapon={updateWeapon}
onDeleteWeapon={deleteWeapon}
/>
<NotesSection notes={ship.notes} onUpdate={updateShip} />
</PageContainer>
</>
);
}