OpenCode/SpaceWanderer
2
0
Fork 0
Code Issues Pull Requests Actions Activity

ui: CREW tab renders real roster cards with traits + origin (real data from /api/crew)

Browse Source
This commit is contained in:
kamilkrzywda
2026-09-28 22:50:01 +00:00
parent a2c8586618
commit 08a15a09cf
2 changed files with 106 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/mission-control.tsx
+5 -50
View File
@@ -11,13 +11,14 @@ import { StatCard } from '@/components/ui/stat-card'
import { StatusGrid, type SystemEntry } from '@/components/ui/status-grid'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Terminal, type TerminalLine } from '@/components/ui/terminal'
import { CrewPanel } from '@/components/crew-panel'
import { LocalSystemPanel } from '@/components/local-system'
import { WorldMapPanel } from '@/components/world-map'
// Interface base: layout + visual treatment rebuilt from the scificn-ui Mission Control
// showcase (src/app/_pages/showcase/mission-control-content.tsx in baxy5/scificn-ui). The
// WORLD MAP and LOCAL SYSTEM tabs render live data (/api/world, /api/system); the other
// tabs keep placeholder content until their own issues land. Single player, no auth, by design.
// WORLD MAP, LOCAL SYSTEM and CREW tabs render live data (/api/world, /api/system, /api/crew);
// the other tabs keep placeholder content until their own issues land. Single player, no auth, by design.
function useNarrow(threshold = 900): boolean {
const [narrow, setNarrow] = useState(
@@ -45,13 +46,6 @@ const shipSystems: SystemEntry[] = [
{ name: 'COMMS', status: 'ACTIVE' },
]
const crew = [
{ name: 'CMDR. E. VANCE', role: 'COMMANDER', good: 'STEADY UNDER PRESSURE', bad: 'RIGID — SLOW TO ADAPT' },
{ name: 'LT. M. OKONKWO', role: 'PILOT', good: 'RECKLESS COURAGE', bad: 'SHORT FUSE' },
{ name: 'DR. I. SORENSEN', role: 'MEDIC', good: 'CALM IN A CRISIS', bad: 'OVERCAUTIOUS' },
{ name: 'R. "SPARK" DELACRUZ', role: 'ENGINEER', good: 'FIXES ANYTHING', bad: 'CARELESS WITH FUSES' },
]
const shipSystemCards = [
{ name: 'REACTOR', level: 'LV 2', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
{ name: 'LIFE SUPPORT', level: 'LV 1', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
@@ -331,48 +325,9 @@ export function MissionControl() {
<LocalSystemPanel />
</TabsContent>
{/* CREW TAB */}
{/* CREW TAB — live data from /api/crew */}
<TabsContent value="crew" style={{ margin: 0, padding: '1rem' }}>
<div
style={{
display: 'grid',
gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
gap: '0.75rem',
}}
>
{crew.map((member) => (
<Card key={member.name}>
<CardHeader>
<div style={{ display: 'flex', alignItems: 'center' }}>
<CardTitle>{member.name}</CardTitle>
<Badge variant="ACTIVE" className="ml-auto">
ACTIVE
</Badge>
</div>
<p
style={{
fontSize: '0.6rem',
color: 'var(--text-muted)',
letterSpacing: '0.1em',
textTransform: 'uppercase',
}}
>
{member.role}
</p>
</CardHeader>
<CardContent style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
<div style={{ fontSize: '0.7rem', letterSpacing: '0.05em' }}>
<span style={{ color: 'var(--color-green)' }}>+ </span>
<span style={{ color: 'var(--text-secondary)' }}>{member.good}</span>
</div>
<div style={{ fontSize: '0.7rem', letterSpacing: '0.05em' }}>
<span style={{ color: 'var(--color-red)' }}>- </span>
<span style={{ color: 'var(--text-secondary)' }}>{member.bad}</span>
</div>
</CardContent>
</Card>
))}
</div>
<CrewPanel narrow={narrow} />
</TabsContent>
{/* SHIP SYSTEMS TAB */}