ui: WORLD MAP tab renders live world state with jump buttons (real data from /api/world)

2026-09-28 21:32:48 +00:00
parent cc6abe8f36
commit 37c3800479
2 changed files with 144 additions and 39 deletions
@@ -0,0 +1,138 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { NodeGraph } from '@/components/ui/node-graph'
+import type { WorldState } from '@/lib/game/save'
+
+// WORLD MAP tab — the first live game panel: renders real world state from /api/world and
+// offers a jump button per system adjacent to the current one (NodeGraph nodes are not
+// clickable upstream, so the affordance lives in this list). Turn-based: fetch on mount,
+// refetch via the jump response — no polling.
+
+interface WorldMapPanelProps {
+  height?: number
+}
+
+export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
+  const [world, setWorld] = useState<WorldState | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [jumpingId, setJumpingId] = useState<number | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/world')
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return (await res.json()) as WorldState
+      })
+      .then((state) => {
+        if (!cancelled) setWorld(state)
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const jump = useCallback(async (systemId: number) => {
+    setJumpingId(systemId)
+    try {
+      const res = await fetch('/api/jump', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ systemId }),
+      })
+      const body = (await res.json()) as WorldState & { error?: string }
+      if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
+      setWorld(body) // fresh state straight from the response — no refetch needed
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setJumpingId(null)
+    }
+  }, [])
+
+  if (error && !world) {
+    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' }}>
+          CHART OFFLINE // {error.toUpperCase()}
+        </span>
+      </div>
+    )
+  }
+
+  if (!world) {
+    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' }}>SCANNING CHART…</span>
+      </div>
+    )
+  }
+
+  const current = world.systems.find((s) => s.current)!
+  const reachable = world.edges
+    .filter(([a, b]) => a === current.id || b === current.id)
+    .map(([a, b]) => (a === current.id ? b : a))
+    .map((id) => world.systems.find((s) => s.id === id)!)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      <NodeGraph
+        nodes={world.systems.map((s) => ({
+          id: String(s.id),
+          label: s.name,
+          x: s.x,
+          y: s.y,
+          status: s.current ? 'ACTIVE' : s.discovered ? 'NEUTRAL' : 'OFFLINE',
+          sublabel: s.current ? 'CURRENT' : s.discovered ? 'DISCOVERED' : 'UNKNOWN',
+        }))}
+        edges={world.edges.map(([a, b]) => ({ from: String(a), to: String(b) }))}
+        variant="ACTIVE"
+        title={`GALACTIC CHART // JUMP ROUTES — TURN ${world.turn}`}
+        height={height}
+        style={{ width: '100%' }}
+      />
+
+      <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',
+          }}
+        >
+          JUMP ROUTES // FROM {current.name.toUpperCase()}
+        </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', padding: '0.6rem 0.75rem' }}>
+          {reachable.map((s) => (
+            <Button
+              key={s.id}
+              variant="OUTLINE"
+              size="SM"
+              disabled={jumpingId !== null}
+              onClick={() => void jump(s.id)}
+            >
+              {jumpingId === s.id ? 'JUMPING…' : `${s.name.toUpperCase()} // JUMP`}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {error && (
+        <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.5rem 0.75rem' }}>
+          <span style={{ fontSize: '0.62rem', color: 'var(--color-red)', letterSpacing: '0.08em' }}>
+            JUMP FAILED // {error.toUpperCase()}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}