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

ui: LOCAL SYSTEM tab renders real bodies with explore buttons + cargo hold (real data from /api/system)

Browse Source
This commit is contained in:
kamilkrzywda
2026-09-28 22:13:19 +00:00
parent 8153007668
commit 82d41b87be
2 changed files with 192 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/mission-control.tsx
+5 -96
View File
@@ -11,12 +11,13 @@ 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 { 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 tab renders live data from /api/world; the other tabs keep placeholder content
// until their own issues land. Single player, no auth, by design.
// 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.
function useNarrow(threshold = 900): boolean {
const [narrow, setNarrow] = useState(
@@ -44,20 +45,6 @@ const shipSystems: SystemEntry[] = [
{ name: 'COMMS', status: 'ACTIVE' },
]
// LOCAL SYSTEM — explorable worlds of the current system (regenerated per save after each jump, later).
const explorablePlanets = [
{
name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const,
moons: [{ name: 'PALEMOON', type: 'ICE MOON // FROST PLAINS', state: 'UNEXPLORED' as const }],
},
{
name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const,
moons: [{ name: 'ASHFALL', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const }],
},
{ name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const, moons: [] },
{ name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const, moons: [] },
]
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' },
@@ -339,87 +326,9 @@ export function MissionControl() {
<WorldMapPanel height={380} />
</TabsContent>
{/* LOCAL SYSTEM TAB */}
{/* LOCAL SYSTEM TAB — live data from /api/system */}
<TabsContent value="local-system" style={{ margin: 0, padding: '1rem' }}>
<div
style={{
border: '1px solid var(--border)',
background: 'var(--surface)',
overflow: 'hidden',
}}
>
<div
style={{
padding: '0.4rem 0.75rem',
borderBottom: '1px solid var(--border)',
background: 'var(--surface-raised)',
fontSize: '0.6rem',
color: 'var(--text-muted)',
letterSpacing: '0.12em',
textTransform: 'uppercase',
}}
>
EXPLORABLE WORLDS // FIND THINGS HERE (PLACEHOLDER)
</div>
{explorablePlanets.flatMap((planet) => [
{ name: planet.name, type: planet.type, state: planet.state, depth: 0 },
...planet.moons.map((moon) => ({
name: moon.name,
type: moon.type,
state: moon.state,
depth: 1,
})),
]).map((row, i, rows) => (
<div
key={row.name}
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '0.5rem',
padding: row.depth
? '0.6rem 0.75rem 0.6rem 1.75rem'
: '0.6rem 0.75rem',
borderBottom:
i < rows.length - 1 ? '1px solid var(--border)' : 'none',
}}
>
<div style={{ overflow: 'hidden' }}>
<div
style={{
fontSize: '0.68rem',
color: row.depth ? 'var(--text-muted)' : 'var(--text-secondary)',
letterSpacing: '0.04em',
textTransform: 'uppercase',
}}
>
{row.name}
</div>
<div
style={{
fontSize: '0.57rem',
color: 'var(--text-muted)',
letterSpacing: '0.06em',
marginTop: '2px',
}}
>
{row.type}
</div>
</div>
<Badge
variant={
row.state === 'UNEXPLORED'
? 'SCANNING'
: row.state === 'HAZARD'
? 'WARNING'
: 'ACTIVE'
}
>
{row.state}
</Badge>
</div>
))}
</div>
<LocalSystemPanel />
</TabsContent>
{/* CREW TAB */}