654 lines
23 KiB
TypeScript
654 lines
23 KiB
TypeScript
'use client'
|
|
|
|
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 { Panel, PanelContent, PanelHeader, PanelTitle } from '@/components/ui/panel'
|
|
import { ProgressRing } from '@/components/ui/progress-ring'
|
|
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'
|
|
|
|
// 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), with
|
|
// placeholder SpaceWanderer content — no game logic yet. Single player, no auth, by design.
|
|
|
|
function useNarrow(threshold = 900): boolean {
|
|
const [narrow, setNarrow] = useState(
|
|
() => typeof window !== 'undefined' && window.innerWidth < threshold
|
|
)
|
|
useEffect(() => {
|
|
const handle = () => setNarrow(window.innerWidth < threshold)
|
|
window.addEventListener('resize', handle, { passive: true })
|
|
return () => window.removeEventListener('resize', handle)
|
|
}, [threshold])
|
|
return narrow
|
|
}
|
|
|
|
function now(): string {
|
|
return new Date().toLocaleTimeString('en-GB', { hour12: false })
|
|
}
|
|
|
|
// ── Placeholder content (no game logic — real values land with the turn engine) ──
|
|
|
|
const shipSystems: SystemEntry[] = [
|
|
{ name: 'REACTOR', status: 'ACTIVE', detail: '94.2%' },
|
|
{ name: 'LIFE SUPPORT', status: 'ACTIVE' },
|
|
{ name: 'NAV COMPUTER', status: 'SCANNING' },
|
|
{ name: 'WEAPONS', status: 'OFFLINE' },
|
|
{ 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 },
|
|
]
|
|
|
|
const hullTrack = [100, 98, 97, 96, 94, 95, 92, 90, 89, 87]
|
|
const hullLabels = hullTrack.map((_, i) => `T-${hullTrack.length - 1 - i}`)
|
|
|
|
const encounters = [
|
|
{ name: 'DERELICT FREIGHTER', when: 'T-07:14', id: '#E-102' },
|
|
{ name: 'PIRATE SKIRMISH', when: 'T-22:40', id: '#E-103' },
|
|
{ name: 'ANOMALY FIELD', when: 'T-48:12', id: '#E-104' },
|
|
]
|
|
|
|
const shipData = [
|
|
{ label: 'TOTAL MODULES', value: '34' },
|
|
{ label: 'HULL INTEGRITY', value: '87%' },
|
|
{ label: 'REACTOR OUTPUT', value: '94.2%' },
|
|
{ label: 'CREW ACTIVE', value: '3 / 6' },
|
|
{ label: 'SECTOR', value: '7G // DRIFT LANE' },
|
|
{ label: 'DRIFT VELOCITY', value: '0.4 KM/S' },
|
|
{ label: 'TURN', value: '12' },
|
|
]
|
|
|
|
const logLines: TerminalLine[] = [
|
|
{ type: 'system', text: 'SPACEWANDERER // INITIALIZING SHIP SYSTEMS...', timestamp: now() },
|
|
{ type: 'output', text: 'HULL SCAN COMPLETE — INTEGRITY 87%', timestamp: now() },
|
|
{ type: 'output', text: 'REACTOR OUTPUT STABLE AT 94.2%', timestamp: now() },
|
|
{ type: 'output', text: 'CREW MANIFEST LOADED — 3 ACTIVE PERSONNEL', timestamp: now() },
|
|
{ type: 'warn', text: 'WEAPONS OFFLINE — MODULE NOT INSTALLED', timestamp: now() },
|
|
{ type: 'system', text: 'ALL SYSTEMS NOMINAL. AWAITING FIRST TURN.', timestamp: now() },
|
|
]
|
|
|
|
export function MissionControl() {
|
|
const narrow = useNarrow()
|
|
const [tick, setTick] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => setTick((t) => t + 1), 1000)
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
|
|
const timeStr = new Date().toLocaleTimeString('en-GB', { hour12: false })
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: '100vh',
|
|
background: 'var(--background)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
fontFamily: 'var(--font-mono)',
|
|
}}
|
|
>
|
|
{/* ── HEADER ── */}
|
|
<header
|
|
style={{
|
|
height: '44px',
|
|
background: 'var(--surface)',
|
|
borderBottom: '1px solid var(--border)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '0 1.25rem',
|
|
gap: '0.75rem',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 50,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
color: 'var(--text-muted)',
|
|
fontSize: '0.7rem',
|
|
letterSpacing: '0.08em',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
◄ SHIP
|
|
</span>
|
|
|
|
<span style={{ color: 'var(--border)', flexShrink: 0 }}>│</span>
|
|
|
|
<h1
|
|
style={{
|
|
margin: 0,
|
|
color: 'var(--color-green)',
|
|
fontSize: '0.85rem',
|
|
fontWeight: 700,
|
|
letterSpacing: '0.12em',
|
|
textShadow: 'var(--text-glow-green)',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
SPACEWANDERER
|
|
</h1>
|
|
|
|
{!narrow && (
|
|
<span
|
|
style={{
|
|
color: 'var(--text-muted)',
|
|
fontSize: '0.72rem',
|
|
letterSpacing: '0.08em',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
// SHIP STATUS // CREW MANIFEST
|
|
</span>
|
|
)}
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
{!narrow && (
|
|
<Badge variant="ACTIVE">SHIP NOMINAL</Badge>
|
|
)}
|
|
|
|
<Badge variant="SCANNING">SECTOR SCAN</Badge>
|
|
|
|
<span
|
|
style={{
|
|
color: 'var(--color-green)',
|
|
fontSize: '0.65rem',
|
|
letterSpacing: '0.1em',
|
|
textShadow: 'var(--text-glow-green)',
|
|
flexShrink: 0,
|
|
opacity: tick % 2 === 0 ? 1 : 0.5,
|
|
transition: 'opacity 0.3s',
|
|
}}
|
|
>
|
|
{timeStr}
|
|
</span>
|
|
</header>
|
|
|
|
{/* ── BODY ── */}
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1px',
|
|
background: 'var(--border)',
|
|
}}
|
|
>
|
|
{/* STAT CARDS — placeholder ship readouts */}
|
|
<div
|
|
style={{
|
|
background: 'var(--background)',
|
|
padding: '0.75rem 1rem',
|
|
display: 'grid',
|
|
gridTemplateColumns: narrow ? '1fr 1fr' : 'repeat(4, 1fr)',
|
|
gap: '0.75rem',
|
|
}}
|
|
>
|
|
<StatCard
|
|
label="HULL INTEGRITY"
|
|
value="87%"
|
|
sublabel="NOMINAL · NO BREACHES"
|
|
variant="ACTIVE"
|
|
/>
|
|
<StatCard
|
|
label="REACTOR OUTPUT"
|
|
value="94.2%"
|
|
sublabel="STABLE · IDLE CYCLE"
|
|
variant="ACTIVE"
|
|
/>
|
|
<StatCard
|
|
label="CREW ON BOARD"
|
|
value="3 / 6"
|
|
sublabel="AWAITING MANIFEST"
|
|
variant="DEFAULT"
|
|
/>
|
|
<StatCard
|
|
label="NEXT ENCOUNTER"
|
|
value="T-07:14"
|
|
sublabel="SECTOR 7G // DRIFT LANE"
|
|
variant="WARNING"
|
|
/>
|
|
</div>
|
|
|
|
{/* 3-COLUMN GRID */}
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
display: 'grid',
|
|
gridTemplateColumns: narrow ? '1fr' : '260px 1fr 240px',
|
|
gap: '1px',
|
|
background: 'var(--border)',
|
|
}}
|
|
>
|
|
{/* ── LEFT: SHIP SYSTEMS + VESSEL METRICS ── */}
|
|
<div
|
|
style={{
|
|
background: 'var(--background)',
|
|
padding: '1rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.875rem',
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
<Panel notch="sm">
|
|
<PanelHeader>
|
|
<PanelTitle>SHIP SYSTEMS</PanelTitle>
|
|
<div style={{ marginLeft: 'auto' }}>
|
|
<Badge variant="ACTIVE">4 ONLINE</Badge>
|
|
</div>
|
|
</PanelHeader>
|
|
|
|
<StatusGrid systems={shipSystems} />
|
|
</Panel>
|
|
|
|
<Panel notch="sm">
|
|
<PanelHeader>
|
|
<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>
|
|
</PanelContent>
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* ── CENTER: OPERATIONS TABS ── */}
|
|
<div
|
|
style={{
|
|
background: 'var(--background)',
|
|
padding: '1rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.875rem',
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
<Panel notch="md" style={{ flex: 1 }}>
|
|
<PanelHeader>
|
|
<PanelTitle>OPERATIONS // SHIP COMMAND</PanelTitle>
|
|
<div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}>
|
|
<Badge variant="ACTIVE">SYS NOMINAL</Badge>
|
|
</div>
|
|
</PanelHeader>
|
|
|
|
<PanelContent style={{ padding: 0 }}>
|
|
<Tabs defaultValue="systems">
|
|
<TabsList
|
|
style={{ padding: '0 1rem', background: 'var(--surface-raised)' }}
|
|
>
|
|
<TabsTrigger value="systems">SYSTEMS</TabsTrigger>
|
|
<TabsTrigger value="next">NEXT MISSION</TabsTrigger>
|
|
<TabsTrigger value="log">LOG</TabsTrigger>
|
|
<TabsTrigger value="hull">HULL TRACK</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* SYSTEMS TAB */}
|
|
<TabsContent value="systems" style={{ margin: 0, padding: '1rem' }}>
|
|
<BarChart
|
|
data={bayOutput}
|
|
orientation="vertical"
|
|
variant="ACTIVE"
|
|
title="MODULE OUTPUT BY BAY (PLACEHOLDER)"
|
|
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) => (
|
|
<div
|
|
key={s.label}
|
|
style={{
|
|
padding: '0.75rem',
|
|
background: 'var(--surface)',
|
|
border: '1px solid var(--border)',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* NEXT MISSION TAB */}
|
|
<TabsContent value="next" style={{ margin: 0, padding: '1rem' }}>
|
|
<div
|
|
style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}
|
|
>
|
|
<Alert variant="STATUS">
|
|
<AlertTitle>ENCOUNTER #E-102 — DERELICT FREIGHTER</AlertTitle>
|
|
<AlertDescription>
|
|
Placeholder briefing. Real encounter resolution lands with the turn engine.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: narrow ? '1fr' : '1fr 1fr',
|
|
gap: '0.625rem',
|
|
}}
|
|
>
|
|
{[
|
|
{ label: 'DESTINATION', value: 'SECTOR 7G // DRIFT LANE' },
|
|
{ label: 'ETA', value: 'T-07:14 (PLACEHOLDER)' },
|
|
{ label: 'THREAT LEVEL', value: 'LOW — UNMANNED' },
|
|
{ label: 'CARGO MANIFEST', value: 'UNKNOWN' },
|
|
].map((item) => (
|
|
<div
|
|
key={item.label}
|
|
style={{
|
|
padding: '0.75rem',
|
|
background: 'var(--surface)',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: '0.55rem',
|
|
color: 'var(--text-muted)',
|
|
letterSpacing: '0.12em',
|
|
marginBottom: '0.35rem',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '0.8rem',
|
|
color: 'var(--text-secondary)',
|
|
letterSpacing: '0.04em',
|
|
}}
|
|
>
|
|
{item.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* LOG TAB */}
|
|
<TabsContent value="log" style={{ margin: 0, padding: '1rem' }}>
|
|
<Terminal
|
|
lines={logLines}
|
|
title="SHIP LOG // PLACEHOLDER FEED"
|
|
height="22rem"
|
|
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>
|
|
</div>
|
|
|
|
{/* ── RIGHT: UPCOMING ENCOUNTERS + SHIP DATA ── */}
|
|
<div
|
|
style={{
|
|
background: 'var(--background)',
|
|
padding: '1rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.875rem',
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
<Panel notch="sm">
|
|
<PanelHeader>
|
|
<PanelTitle>UPCOMING ENCOUNTERS</PanelTitle>
|
|
<div style={{ marginLeft: 'auto' }}>
|
|
<Badge variant="SCANNING">{encounters.length} QUEUED</Badge>
|
|
</div>
|
|
</PanelHeader>
|
|
<PanelContent style={{ padding: 0 }}>
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{encounters.map((enc, i) => {
|
|
const isNext = i === 0
|
|
const isLast = i === encounters.length - 1
|
|
return (
|
|
<div
|
|
key={enc.id}
|
|
style={{
|
|
padding: '0.6rem 0.75rem',
|
|
borderBottom: isLast ? 'none' : '1px solid var(--border)',
|
|
background: isNext ? 'var(--surface-raised)' : 'transparent',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
gap: '0.5rem',
|
|
}}
|
|
>
|
|
<div style={{ overflow: 'hidden', flex: 1 }}>
|
|
<div
|
|
style={{
|
|
fontSize: '0.68rem',
|
|
color: isNext ? 'var(--text-secondary)' : 'var(--text-muted)',
|
|
letterSpacing: '0.04em',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
{enc.name}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '0.57rem',
|
|
color: 'var(--text-muted)',
|
|
letterSpacing: '0.06em',
|
|
marginTop: '2px',
|
|
}}
|
|
>
|
|
{enc.when} // {enc.id}
|
|
</div>
|
|
</div>
|
|
<Badge variant={isNext ? 'WARNING' : 'SCANNING'}>
|
|
{isNext ? 'NEXT' : 'SCHED'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</PanelContent>
|
|
</Panel>
|
|
|
|
<Panel notch="sm">
|
|
<PanelHeader>
|
|
<PanelTitle>SHIP DATA</PanelTitle>
|
|
</PanelHeader>
|
|
<PanelContent>
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{shipData.map((item, i) => (
|
|
<div
|
|
key={item.label}
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
padding: '0.4rem 0',
|
|
borderBottom:
|
|
i < shipData.length - 1 ? '1px solid var(--border)' : 'none',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: '0.6rem',
|
|
color: 'var(--text-muted)',
|
|
letterSpacing: '0.1em',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: '0.78rem',
|
|
color: 'var(--color-green)',
|
|
textShadow: 'var(--text-glow-green)',
|
|
letterSpacing: '0.04em',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{item.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PanelContent>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── FOOTER ── */}
|
|
<footer
|
|
style={{
|
|
minHeight: '44px',
|
|
background: 'var(--surface)',
|
|
borderTop: '1px solid var(--border)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
padding: '0.5rem 1.25rem',
|
|
gap: '0.5rem',
|
|
position: 'sticky',
|
|
bottom: 0,
|
|
zIndex: 50,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<span style={{ fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
|
|
INTERFACE BASE: SCIFICN MISSION CONTROL
|
|
</span>
|
|
<span style={{ color: 'var(--border)' }}>│</span>
|
|
<span style={{ fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
|
|
CONTENT: PLACEHOLDER — NO GAME LOGIC YET
|
|
</span>
|
|
<span style={{ color: 'var(--border)' }}>│</span>
|
|
<span style={{ fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
|
|
SINGLE PLAYER // NO AUTH
|
|
</span>
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
<Badge variant="ACTIVE">SYS ONLINE</Badge>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|