62 lines
2.4 KiB
Svelte
62 lines
2.4 KiB
Svelte
<script>
|
|
import Panel from '../lib/Panel.svelte'
|
|
import Stat from '../lib/Stat.svelte'
|
|
import Bar from '../lib/Bar.svelte'
|
|
import Tag from '../lib/Tag.svelte'
|
|
import { useJitter } from '../lib/live.svelte.js'
|
|
import { systemStatus, subsystemLoad, logEntries } from '../lib/data.js'
|
|
|
|
const output = useJitter(84.2, { amp: 0.6, decimals: 1 })
|
|
const velocity = useJitter(0.21, { amp: 0.004, decimals: 3, every: 1500 })
|
|
const hull = useJitter(98.4, { amp: 0.05, decimals: 2, every: 3000 })
|
|
const shields = useJitter(91.7, { amp: 0.8, decimals: 1 })
|
|
|
|
// Literal classes so Tailwind keeps them (no dynamic interpolation).
|
|
const dot = {
|
|
term: 'text-term', ok: 'text-ok', warn: 'text-warn',
|
|
alert: 'text-alert', flare: 'text-flare',
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
|
<Panel title="Velocity"><Stat label="relative" value={velocity.value} unit="c" sub="sublight cruise" /></Panel>
|
|
<Panel title="Hull Integrity"><Stat label="structural" value={hull.value} unit="%" tone="text-ok" sub="no active breaches" /></Panel>
|
|
<Panel title="Shield Matrix"><Stat label="forward arc" value={shields.value} unit="%" sub="harmonics stable" /></Panel>
|
|
<Panel title="Reactor Output"><Stat label="rated" value={output.value} unit="%" tone="text-warn" sub="core nominal" /></Panel>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-3">
|
|
<Panel title="Systems Status" accent="text-term">
|
|
<ul class="divide-y divide-haze/15">
|
|
{#each systemStatus as s}
|
|
<li class="flex items-center justify-between py-2 text-sm">
|
|
<span class="text-haze">{s.name}</span>
|
|
<Tag tone={s.tone}>{s.state}</Tag>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</Panel>
|
|
|
|
<Panel title="Subsystem Load" accent="text-term">
|
|
<div class="space-y-3">
|
|
{#each subsystemLoad as b}
|
|
<Bar label={b.label} pct={b.pct} tone={b.tone} />
|
|
{/each}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Event Log" accent="text-flare">
|
|
<ul class="space-y-2 text-xs">
|
|
{#each logEntries as e}
|
|
<li class="flex gap-2">
|
|
<span class="shrink-0 tabular-nums text-haze">{e.t}</span>
|
|
<span class="shrink-0 {dot[e.tone] ?? 'text-term'}">▍</span>
|
|
<span class="text-haze/90 leading-snug">{e.msg}</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</Panel>
|
|
</div>
|
|
</div>
|