bas/spelljammer-ships
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): split dashboard into combat stats and reference stats

Browse Source 
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>
This commit is contained in:
Bas van Rossem
2026-02-19 17:22:42 +01:00
parent 642f1f70e8
commit 836a5d7a49
6 changed files with 112 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/pages/ShipDashboardPage.tsx
View File

@@ -1,10 +1,9 @@
import { useEffect, useState } from 'react';
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 MobilitySection from '../components/dashboard/MobilitySection';
import CrewSection from '../components/dashboard/CrewSection';
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';
@@ -12,7 +11,6 @@ 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();
const [editing, setEditing] = useState(false);
useEffect(() => {
if (id) joinShip(id);
@@ -34,18 +32,8 @@ export default function ShipDashboardPage() {
<>
<TopBar title={ship.name} />
<PageContainer>
<div className="dashboard-toolbar">
<button
type="button"
className={editing ? 'btn-primary btn-sm' : 'btn-secondary btn-sm'}
onClick={() => setEditing(!editing)}
>
{editing ? 'Done' : 'Edit'}
</button>
</div>
<VitalsSection ship={ship} onUpdate={updateShip} editing={editing} />
<MobilitySection ship={ship} onUpdate={updateShip} editing={editing} />
<CrewSection ship={ship} onUpdate={updateShip} editing={editing} />
<VitalsSection ship={ship} onUpdate={updateShip} />
<ShipStatsSection ship={ship} onUpdate={updateShip} />
<WeaponsSection
weapons={weapons}
onCreateWeapon={createWeapon}