feat(ui): EVENT LOG tab renders the real game log

Self-fetching EventLogPanel (MissionPanel pattern — refetches on each tab
open). One terminal line per event: T<turn> // <MESSAGE>, newest first, with
the event's local time as the timestamp; new_game lines render as system
lines. Placeholder feed + now() removed from mission-control.
This commit is contained in:
2026-09-29 02:45:38 +00:00
parent 21abf8768f
commit 29e8ac6909
2 changed files with 63 additions and 23 deletions
+59
View File
@@ -0,0 +1,59 @@
'use client'
import { useEffect, useState } from 'react'
import { Terminal, type TerminalLine } from '@/components/ui/terminal'
import type { EventDto } from '@/lib/game/events'
// EVENT LOG tab — live data. Fetches /api/events on mount (Radix Tabs unmounts inactive tabs, so it
// refetches whenever the tab is opened). One terminal line per event: T<turn> // <MESSAGE>, newest first.
export function EventLogPanel() {
const [lines, setLines] = useState<TerminalLine[] | null>(null)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
let cancelled = false
fetch('/api/events')
.then(async (res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}`)
return (await res.json()) as EventDto[]
})
.then((events) => {
if (!cancelled) {
setLines(
events.map((e) => ({
type: e.type === 'new_game' ? 'system' : 'output',
text: `T${e.turn} // ${e.message.toUpperCase()}`,
timestamp: new Date(e.createdAt).toLocaleTimeString('en-GB', { hour12: false }),
}))
)
}
})
.catch((err: unknown) => {
if (!cancelled) setError(err instanceof Error ? err.message : String(err))
})
return () => {
cancelled = true
}
}, [])
if (error) {
return (
<div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
<span style={{ fontSize: '0.62rem', color: 'var(--color-red)', letterSpacing: '0.08em' }}>{error.toUpperCase()}</span>
</div>
)
}
if (!lines) {
return (
<div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
<span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>LOADING EVENT LOG…</span>
</div>
)
}
return (
<Terminal lines={lines} title="SHIP LOG" height="22rem" style={{ width: '100%' }} />
)
}
+4 -23
View File
@@ -7,8 +7,8 @@ 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'
import { Terminal, type TerminalLine } from '@/components/ui/terminal'
import { CrewPanel } from '@/components/crew-panel'
import { EventLogPanel } from '@/components/event-log'
import { LocalSystemPanel } from '@/components/local-system'
import { MissionPanel } from '@/components/missions'
import { ShipSystemsPanel } from '@/components/ship-systems'
@@ -21,9 +21,8 @@ import type { TechDto } from '@/lib/game/tech'
// 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, LOCAL SYSTEM, CREW, SHIP SYSTEMS, SKILL TREE and MISSIONS tabs render live data
// (/api/world, /api/system, /api/crew, /api/ship, /api/tech, /api/missions); the EVENT LOG tab
// keeps placeholder content until its own issue lands. Single player, no auth, by design.
// All seven tabs render live data (/api/world, /api/system, /api/crew, /api/ship, /api/tech,
// /api/missions, /api/events). Single player, no auth, by design.
function useNarrow(threshold = 900): boolean {
const [narrow, setNarrow] = useState(
@@ -37,10 +36,6 @@ function useNarrow(threshold = 900): boolean {
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 encounters = [
@@ -59,15 +54,6 @@ const shipData = [
{ 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)
@@ -393,12 +379,7 @@ export function MissionControl() {
{/* EVENT LOG TAB */}
<TabsContent value="event-log" style={{ margin: 0, padding: '1rem' }}>
<Terminal
lines={logLines}
title="SHIP LOG // PLACEHOLDER FEED"
height="22rem"
style={{ width: '100%' }}
/>
<EventLogPanel />
</TabsContent>
</Tabs>
</PanelContent>