63 lines
2.7 KiB
Svelte
63 lines
2.7 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 { reactor, powerDistribution, fuelCells } from '../lib/data.js'
|
|
|
|
const output = useJitter(reactor.output, { amp: 0.7, decimals: 1 })
|
|
const temp = useJitter(reactor.coreTemp, { amp: 18, decimals: 0, every: 1500 })
|
|
const rpm = useJitter(reactor.rpm, { amp: 40, decimals: 0, every: 1200 })
|
|
const cont = useJitter(reactor.containment, { amp: 0.15, decimals: 1, every: 2500 })
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
|
<Panel title="Core Output"><Stat label="rated power" value={output.value} unit="%" tone="text-warn" sub="84% of 2.4 TW" /></Panel>
|
|
<Panel title="Core Temp"><Stat label="plasma" value={temp.value} unit="K" tone="text-flare" sub="within tolerance" /></Panel>
|
|
<Panel title="Containment"><Stat label="field strength" value={cont.value} unit="%" tone="text-ok" sub="magnetic bottle stable" /></Panel>
|
|
<Panel title="Turbine"><Stat label="primary spindle" value={rpm.value} unit="rpm" sub="no vibration faults" /></Panel>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-3">
|
|
<Panel title="Power Distribution" accent="text-term">
|
|
<div class="space-y-3 lg:col-span-2">
|
|
{#each powerDistribution as p}
|
|
<Bar label={p.label} pct={p.pct} tone={p.tone} />
|
|
{/each}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Fuel Cells" accent="text-term">
|
|
<div class="space-y-3">
|
|
{#each fuelCells as c}
|
|
<Bar label={c.id} pct={c.charge} tone={c.tone} />
|
|
{/each}
|
|
<div class="mt-3 flex items-center justify-between border-t border-haze/20 pt-3 text-xs">
|
|
<span class="text-haze">Deuterium reserve</span>
|
|
<Tag tone="ok">77% / 14 days</Tag>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Reactor Controls" accent="text-flare">
|
|
<div class="space-y-2">
|
|
{#each [
|
|
{ l: 'Auto-throttle', v: 'ENGAGED', t: 'ok' },
|
|
{ l: 'SCRAM arming', v: 'SAFE', t: 'term' },
|
|
{ l: 'Coolant loop A', v: 'FLOW 100%', t: 'ok' },
|
|
{ l: 'Coolant loop B', v: 'STANDBY', t: 'term' },
|
|
{ l: 'Plasma injectors', v: '6 / 6 ONLINE', t: 'ok' },
|
|
{ l: 'Overload damper', v: 'ARMED', t: 'warn' },
|
|
] as r}
|
|
<div class="flex items-center justify-between border border-haze/20 bg-void/40 px-3 py-2 text-xs">
|
|
<span class="text-haze uppercase tracking-wider">{r.l}</span>
|
|
<Tag tone={r.t}>{r.v}</Tag>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</div>
|