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

app: rebuild operations tabs as 7-tab game template (world map, local system, crew, ship systems, skill tree, missions, event log) — visual only

Browse Source
This commit is contained in:
kamilkrzywda
2026-09-28 19:18:34 +00:00
parent e79015b15c
commit 5291e0fa6e
1 changed files with 301 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/mission-control.tsx
+301 -135
View File
@@ -2,11 +2,12 @@
import { useEffect, useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { BarChart } from '@/components/ui/bar-chart'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { LineChart } from '@/components/ui/line-chart'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { NodeGraph, type NodeGraphEdge, type NodeGraphNode } from '@/components/ui/node-graph'
import { Panel, PanelContent, PanelHeader, PanelTitle } from '@/components/ui/panel'
import { ProgressRing } from '@/components/ui/progress-ring'
import { Progress } from '@/components/ui/progress'
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'
@@ -42,19 +43,82 @@ const shipSystems: SystemEntry[] = [
{ name: 'COMMS', status: 'ACTIVE' },
]
const bayOutput = [
{ label: 'PWR', value: 14 },
{ label: 'NAV', value: 9 },
{ label: 'COM', value: 6 },
{ label: 'WPN', value: 3 },
{ label: 'LSS', value: 12 },
{ label: 'ENG', value: 11 },
{ label: 'BAY', value: 7 },
{ label: 'MED', value: 5 },
// WORLD MAP — every node is a solar system, edges are jump routes.
const worldMapNodes: NodeGraphNode[] = [
{ id: 'kepler', label: 'Kepler Drift', x: 50, y: 48, status: 'ACTIVE', sublabel: 'CURRENT' },
{ id: 'vesper', label: 'Vesper Reach', x: 22, y: 26, status: 'NEUTRAL', sublabel: '3 WORLDS' },
{ id: 'hollow', label: 'Hollow Gate', x: 74, y: 20, status: 'NEUTRAL', sublabel: '5 WORLDS' },
{ id: 'cinder', label: 'Cinder Field', x: 86, y: 56, status: 'WARNING', sublabel: 'RADIATION' },
{ id: 'lantern', label: 'Lantern Void', x: 30, y: 74, status: 'NEUTRAL', sublabel: '2 WORLDS' },
{ id: 'sable', label: 'Sable Reach', x: 8, y: 46, status: 'OFFLINE', sublabel: 'UNKNOWN' },
{ id: 'orpheus', label: 'Orpheus Deep', x: 52, y: 10, status: 'NEUTRAL', sublabel: '7 WORLDS' },
{ id: 'mire', label: 'Mire Station', x: 68, y: 84, status: 'ACTIVE', sublabel: 'OUTPOST' },
{ id: 'thalassa', label: 'Thalassa Bend', x: 12, y: 86, status: 'NEUTRAL', sublabel: '4 WORLDS' },
{ id: 'kuiper', label: 'Kuiper Shard', x: 90, y: 30, status: 'CRITICAL', sublabel: 'WARZONE' },
]
const hullTrack = [100, 98, 97, 96, 94, 95, 92, 90, 89, 87]
const hullLabels = hullTrack.map((_, i) => `T-${hullTrack.length - 1 - i}`)
const worldMapEdges: NodeGraphEdge[] = [
{ from: 'kepler', to: 'vesper', animated: true },
{ from: 'kepler', to: 'hollow', label: 'JUMP-2' },
{ from: 'kepler', to: 'lantern', animated: true },
{ from: 'kepler', to: 'mire' },
{ from: 'vesper', to: 'orpheus' },
{ from: 'hollow', to: 'kuiper', label: 'JUMP-1' },
{ from: 'cinder', to: 'kuiper' },
{ from: 'lantern', to: 'thalassa' },
{ from: 'sable', to: 'vesper' },
{ from: 'mire', to: 'cinder' },
]
// LOCAL SYSTEM — the current system (regenerated per save after each jump, later).
const localSystemNodes: NodeGraphNode[] = [
{ id: 'star', label: 'Kepler-442', x: 50, y: 50, status: 'ACTIVE', sublabel: 'G2 STAR' },
{ id: 'aurelle', label: 'Aurelle', x: 18, y: 30, status: 'ACTIVE', sublabel: 'TERRESTRIAL' },
{ id: 'brimstone', label: 'Brimstone', x: 76, y: 24, status: 'NEUTRAL', sublabel: 'GAS GIANT' },
{ id: 'ashfall', label: 'Ashfall', x: 90, y: 52, status: 'WARNING', sublabel: 'MOON' },
{ id: 'cinderrock', label: 'Cinderrock', x: 74, y: 80, status: 'NEUTRAL', sublabel: 'ROCKY' },
{ id: 'driftband', label: 'Driftband', x: 30, y: 78, status: 'WARNING', sublabel: 'ASTEROID RING' },
{ id: 'palemoon', label: 'Palemoon', x: 8, y: 54, status: 'NEUTRAL', sublabel: 'MOON' },
]
const localSystemEdges: NodeGraphEdge[] = [
{ from: 'star', to: 'aurelle' },
{ from: 'star', to: 'brimstone' },
{ from: 'brimstone', to: 'ashfall', label: 'MOON' },
{ from: 'star', to: 'cinderrock' },
{ from: 'star', to: 'driftband' },
{ from: 'aurelle', to: 'palemoon', label: 'MOON' },
]
const explorablePlanets = [
{ name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const },
{ name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const },
{ name: 'ASHFALL (MOON)', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const },
{ name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const },
{ name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const },
]
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'] },
{ name: 'NAV COMPUTER', level: 'LV 3', status: 'SCANNING' as const, actions: ['EXPAND', 'UPGRADE'] },
{ name: 'WEAPONS', level: 'OFFLINE', status: 'OFFLINE' as const, actions: ['BUILD NEW'] },
{ name: 'COMMS ARRAY', level: 'LV 1', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
]
const skillCards = [
{ name: 'ADVANCED FUSION CORE', unlocks: 'REACTOR LV 4 + OVERCLOCK', state: 'AVAILABLE' as const },
{ name: 'HULL PLATING SCHEMATICS', unlocks: 'BUILD ARMOR BAY MODULES', state: 'AVAILABLE' as const },
{ name: 'CREW TRAINING PROTOCOLS', unlocks: 'RETRAIN CREW TRAITS', state: 'LOCKED' as const },
{ name: 'JUMP DRIVE TUNING', unlocks: 'SHORTER JUMP COOLDOWN', state: 'LOCKED' as const },
]
const encounters = [
{ name: 'DERELICT FREIGHTER', when: 'T-07:14', id: '#E-102' },
@@ -237,7 +301,7 @@ export function MissionControl() {
background: 'var(--border)',
}}
>
{/* ── LEFT: SHIP SYSTEMS + VESSEL METRICS ── */}
{/* ── LEFT: SHIP SYSTEMS + VESSEL METRICS (mirrors the SHIP SYSTEMS tab) ── */}
<div
style={{
background: 'var(--background)',
@@ -264,64 +328,16 @@ export function MissionControl() {
<PanelTitle>VESSEL METRICS</PanelTitle>
</PanelHeader>
<PanelContent>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
paddingTop: '0.5rem',
paddingBottom: '0.25rem',
}}
>
<ProgressRing value={87} label="HULL" variant="ACTIVE" size={74} />
<ProgressRing value={94} label="REACTOR" variant="ACTIVE" size={74} />
<ProgressRing value={50} label="CREW / 6" variant="WARNING" size={74} />
</div>
<div
style={{
marginTop: '0.75rem',
paddingTop: '0.75rem',
borderTop: '1px solid var(--border)',
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr',
gap: '0.25rem',
textAlign: 'center',
}}
>
{[
{ label: 'HULL INTEGRITY', note: 'last scan T-02' },
{ label: 'REACTOR OUTPUT', note: 'idle cycle' },
{ label: 'CREW ROSTER', note: 'of 6 berths' },
].map((item) => (
<div key={item.label}>
<div
style={{
fontSize: '0.52rem',
color: 'var(--text-muted)',
letterSpacing: '0.08em',
textTransform: 'uppercase',
}}
>
{item.label}
</div>
<div
style={{
fontSize: '0.48rem',
color: 'var(--border)',
letterSpacing: '0.06em',
marginTop: '1px',
}}
>
{item.note}
</div>
</div>
))}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
<Progress label="HULL INTEGRITY" value={87} />
<Progress label="REACTOR OUTPUT" value={94} />
<Progress label="CREW ROSTER / 6" value={50} />
</div>
</PanelContent>
</Panel>
</div>
{/* ── CENTER: OPERATIONS TABS ── */}
{/* ── CENTER: GAME TEMPLATE TABS (visual only — no handlers, placeholder data) ── */}
<div
style={{
background: 'var(--background)',
@@ -341,75 +357,237 @@ export function MissionControl() {
</PanelHeader>
<PanelContent style={{ padding: 0 }}>
<Tabs defaultValue="systems">
<Tabs defaultValue="world-map">
<TabsList
style={{ padding: '0 1rem', background: 'var(--surface-raised)' }}
style={{
padding: '0 1rem',
background: 'var(--surface-raised)',
overflowX: 'auto',
}}
>
<TabsTrigger value="systems">SYSTEMS</TabsTrigger>
<TabsTrigger value="next">NEXT MISSION</TabsTrigger>
<TabsTrigger value="log">LOG</TabsTrigger>
<TabsTrigger value="hull">HULL TRACK</TabsTrigger>
<TabsTrigger value="world-map">WORLD MAP</TabsTrigger>
<TabsTrigger value="local-system">LOCAL SYSTEM</TabsTrigger>
<TabsTrigger value="crew">CREW</TabsTrigger>
<TabsTrigger value="ship-systems">SHIP SYSTEMS</TabsTrigger>
<TabsTrigger value="skill-tree">SKILL TREE</TabsTrigger>
<TabsTrigger value="missions">MISSIONS</TabsTrigger>
<TabsTrigger value="event-log">EVENT LOG</TabsTrigger>
</TabsList>
{/* SYSTEMS TAB */}
<TabsContent value="systems" style={{ margin: 0, padding: '1rem' }}>
<BarChart
data={bayOutput}
orientation="vertical"
{/* WORLD MAP TAB */}
<TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
<NodeGraph
nodes={worldMapNodes}
edges={worldMapEdges}
variant="ACTIVE"
title="MODULE OUTPUT BY BAY (PLACEHOLDER)"
title="GALACTIC CHART // JUMP ROUTES (PLACEHOLDER)"
height={380}
style={{ width: '100%' }}
/>
<div
style={{
marginTop: '1rem',
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '0.625rem',
}}
>
{[
{ label: 'TOTAL MODULES', value: 34 },
{ label: 'ONLINE', value: 29 },
{ label: 'EFFICIENCY', value: '85%' },
].map((s) => (
</TabsContent>
{/* LOCAL SYSTEM TAB */}
<TabsContent value="local-system" style={{ margin: 0, padding: '1rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
<NodeGraph
nodes={localSystemNodes}
edges={localSystemEdges}
variant="ACTIVE"
title="KEPLER DRIFT // LOCAL SYSTEM (PLACEHOLDER)"
height={280}
style={{ width: '100%' }}
/>
<div
style={{
border: '1px solid var(--border)',
background: 'var(--surface)',
overflow: 'hidden',
}}
>
<div
key={s.label}
style={{
padding: '0.75rem',
background: 'var(--surface)',
border: '1px solid var(--border)',
textAlign: 'center',
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',
}}
>
<div
style={{
fontSize: '0.55rem',
color: 'var(--text-muted)',
letterSpacing: '0.12em',
marginBottom: '0.4rem',
}}
>
{s.label}
</div>
<div
style={{
fontSize: '1.1rem',
fontWeight: 700,
color: 'var(--color-green)',
textShadow: 'var(--text-glow-green)',
letterSpacing: '0.02em',
}}
>
{s.value}
</div>
EXPLORABLE WORLDS // FIND THINGS HERE (PLACEHOLDER)
</div>
{explorablePlanets.map((planet, i) => (
<div
key={planet.name}
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '0.5rem',
padding: '0.6rem 0.75rem',
borderBottom:
i < explorablePlanets.length - 1
? '1px solid var(--border)'
: 'none',
}}
>
<div style={{ overflow: 'hidden' }}>
<div
style={{
fontSize: '0.68rem',
color: 'var(--text-secondary)',
letterSpacing: '0.04em',
textTransform: 'uppercase',
}}
>
{planet.name}
</div>
<div
style={{
fontSize: '0.57rem',
color: 'var(--text-muted)',
letterSpacing: '0.06em',
marginTop: '2px',
}}
>
{planet.type}
</div>
</div>
<Badge
variant={
planet.state === 'UNEXPLORED'
? 'SCANNING'
: planet.state === 'HAZARD'
? 'WARNING'
: 'ACTIVE'
}
>
{planet.state}
</Badge>
</div>
))}
</div>
</div>
</TabsContent>
{/* CREW TAB */}
<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>
</TabsContent>
{/* NEXT MISSION TAB */}
<TabsContent value="next" style={{ margin: 0, padding: '1rem' }}>
{/* SHIP SYSTEMS TAB */}
<TabsContent value="ship-systems" style={{ margin: 0, padding: '1rem' }}>
<div
style={{
display: 'grid',
gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
gap: '0.75rem',
}}
>
{shipSystemCards.map((system) => (
<Card key={system.name}>
<CardHeader>
<div style={{ display: 'flex', alignItems: 'center' }}>
<CardTitle>{system.name}</CardTitle>
<Badge variant={system.status} className="ml-auto">
{system.level}
</Badge>
</div>
</CardHeader>
<CardContent>
<p style={{ fontSize: '0.65rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
MODULE BAY // PLACEHOLDER READOUT
</p>
</CardContent>
<CardFooter className="gap-2">
{system.actions.map((action) => (
<Button key={action} variant="OUTLINE" size="SM">
{action}
</Button>
))}
</CardFooter>
</Card>
))}
</div>
</TabsContent>
{/* SKILL TREE TAB */}
<TabsContent value="skill-tree" style={{ margin: 0, padding: '1rem' }}>
<div
style={{
display: 'grid',
gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
gap: '0.75rem',
}}
>
{skillCards.map((skill) => (
<Card key={skill.name}>
<CardHeader>
<div style={{ display: 'flex', alignItems: 'center' }}>
<CardTitle>{skill.name}</CardTitle>
<Badge variant={skill.state === 'AVAILABLE' ? 'ACTIVE' : 'OFFLINE'} className="ml-auto">
{skill.state}
</Badge>
</div>
</CardHeader>
<CardContent>
<p style={{ fontSize: '0.65rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
UNLOCKS: {skill.unlocks}
</p>
</CardContent>
<CardFooter>
<Button variant="OUTLINE" size="SM">
RESEARCH
</Button>
</CardFooter>
</Card>
))}
</div>
</TabsContent>
{/* MISSIONS TAB */}
<TabsContent value="missions" style={{ margin: 0, padding: '1rem' }}>
<div
style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}
>
@@ -466,8 +644,8 @@ export function MissionControl() {
</div>
</TabsContent>
{/* LOG TAB */}
<TabsContent value="log" style={{ margin: 0, padding: '1rem' }}>
{/* EVENT LOG TAB */}
<TabsContent value="event-log" style={{ margin: 0, padding: '1rem' }}>
<Terminal
lines={logLines}
title="SHIP LOG // PLACEHOLDER FEED"
@@ -475,18 +653,6 @@ export function MissionControl() {
style={{ width: '100%' }}
/>
</TabsContent>
{/* HULL TRACK TAB */}
<TabsContent value="hull" style={{ margin: 0, padding: '1rem' }}>
<LineChart
series={[{ id: 'hull', label: 'HULL INTEGRITY %', data: hullTrack }]}
labels={hullLabels}
title="HULL INTEGRITY TRACK // PLACEHOLDER"
showArea
animated={false}
style={{ width: '100%' }}
/>
</TabsContent>
</Tabs>
</PanelContent>
</Panel>