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>
48 lines
1.5 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|