Add app

2026-06-18 12:03:45 +00:00
parent ada4aa4b18
commit 3b776dd970
47 changed files with 3416 additions and 110 deletions
@@ -0,0 +1,62 @@
+<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>