Add app
This commit is contained in:
Audiobuzz
@@ -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 { channels, messages } from '../lib/data.js'
|
||||
|
||||
const fromTone = {
|
||||
ok: 'text-ok', warn: 'text-warn', alert: 'text-alert',
|
||||
flare: 'text-flare', term: 'text-term',
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<Panel title="Uplink"><Stat label="fleet command" value="ENCRYPTED" tone="text-ok" sub="Q-band · 0% loss" /></Panel>
|
||||
<Panel title="Active Channels"><Stat label="monitored" value={channels.length} sub="1 degraded" /></Panel>
|
||||
<Panel title="Signal Latency"><Stat label="to relay" value={418} unit="ms" tone="text-warn" sub="lightspeed lag" /></Panel>
|
||||
<Panel title="EMCON"><Stat label="emissions" value="DELTA" tone="text-flare" sub="restricted transmit" /></Panel>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<Panel title="Channels" accent="text-term">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-left text-haze/70 uppercase tracking-wider">
|
||||
<th class="pb-2 font-normal">Channel</th>
|
||||
<th class="pb-2 font-normal">Band</th>
|
||||
<th class="pb-2 text-right font-normal">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-haze/15">
|
||||
{#each channels as c}
|
||||
<tr>
|
||||
<td class="py-2 text-term">{c.name}</td>
|
||||
<td class="py-2 tabular-nums text-haze">{c.band}</td>
|
||||
<td class="py-2 text-right"><Tag tone={c.tone}>{c.status}</Tag></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mt-4 space-y-3">
|
||||
<Bar label="Antenna alignment" pct={97} tone="bg-ok" />
|
||||
<Bar label="Relay-19 link" pct={43} tone="bg-warn" />
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel title="Message Traffic" accent="text-flare">
|
||||
<ul class="space-y-2">
|
||||
{#each messages as m}
|
||||
<li class="border border-haze/20 bg-void/40 px-3 py-2">
|
||||
<div class="flex items-center justify-between text-[0.6rem] uppercase tracking-wider">
|
||||
<span class="{fromTone[m.tone] ?? 'text-term'} glow-sm">{m.from}</span>
|
||||
<span class="tabular-nums text-haze">{m.t}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-snug text-haze/90">{m.text}</p>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,61 @@
|
||||
<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>
|
||||
@@ -0,0 +1,60 @@
|
||||
<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 { atmosphere, decks, crew } from '../lib/data.js'
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<Panel title="Crew Aboard"><Stat label="souls" value={crew.total} sub={crew.onDuty + ' on active duty'} /></Panel>
|
||||
<Panel title="In Cryo"><Stat label="long-haul" value={crew.cryo} tone="text-term" sub="pods nominal" /></Panel>
|
||||
<Panel title="Medical"><Stat label="infirmary" value={crew.medical} tone="text-warn" sub="under observation" /></Panel>
|
||||
<Panel title="Atmosphere"><Stat label="overall" value="STABLE" tone="text-ok" sub="recyclers nominal" /></Panel>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-3">
|
||||
<Panel title="Atmospheric Mix" accent="text-term">
|
||||
<div class="space-y-3 lg:col-span-2">
|
||||
{#each atmosphere as a}
|
||||
<Bar label={a.label} pct={a.pct} tone={a.tone} value={a.value} unit={' ' + a.unit} />
|
||||
{/each}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel title="Deck Environment" accent="text-term">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-left text-haze/70 uppercase tracking-wider">
|
||||
<th class="pb-2 font-normal">Deck</th>
|
||||
<th class="pb-2 font-normal">O₂</th>
|
||||
<th class="pb-2 text-right font-normal">Temp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-haze/15">
|
||||
{#each decks as d}
|
||||
<tr>
|
||||
<td class="py-2 text-term">{d.deck}</td>
|
||||
<td class="py-2"><Tag tone={d.tone}>{d.o2}</Tag></td>
|
||||
<td class="py-2 text-right tabular-nums text-haze">{d.temp}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Panel>
|
||||
|
||||
<Panel title="Recyclers & Reserves" accent="text-flare">
|
||||
<div class="space-y-3">
|
||||
<Bar label="CO₂ scrubbers" pct={88} tone="bg-ok" />
|
||||
<Bar label="O₂ generation" pct={82} tone="bg-ok" />
|
||||
<Bar label="Water recovery" pct={68} tone="bg-term" />
|
||||
<Bar label="Waste reclaim" pct={59} tone="bg-term" />
|
||||
<div class="mt-3 flex items-center justify-between border-t border-haze/20 pt-3 text-xs">
|
||||
<span class="text-haze uppercase tracking-wider">Emergency O₂</span>
|
||||
<Tag tone="ok">72 hrs</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
<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 Radar from '../lib/Radar.svelte'
|
||||
import { useJitter } from '../lib/live.svelte.js'
|
||||
import { navState, waypoints, contacts } from '../lib/data.js'
|
||||
|
||||
const heading = useJitter(navState.heading, { amp: 0.3, decimals: 1, every: 1500 })
|
||||
const velocity = useJitter(navState.velocity, { amp: 0.004, decimals: 3, every: 1500 })
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<Panel title="Heading"><Stat label="bearing" value={heading.value} unit="°" sub="auto-helm engaged" /></Panel>
|
||||
<Panel title="Velocity"><Stat label="relative" value={velocity.value} unit="c" sub="sublight" /></Panel>
|
||||
<Panel title="Current System"><Stat label="position" value={navState.system} tone="text-term" sub={navState.sector} /></Panel>
|
||||
<Panel title="Destination"><Stat label="next waypoint" value={navState.destination} tone="text-flare" sub={'ETA ' + navState.eta} /></Panel>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-3">
|
||||
<Panel title="Tactical Plot" accent="text-term">
|
||||
<Radar blips={contacts} />
|
||||
<div class="mt-3 grid grid-cols-2 gap-x-3 gap-y-1 text-[0.65rem] text-haze">
|
||||
{#each contacts as c}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full {c.tone} glow"></span>
|
||||
<span class="truncate">{c.label}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel title="Flight Plan" accent="text-term">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-left text-haze/70 uppercase tracking-wider">
|
||||
<th class="pb-2 font-normal">Waypoint</th>
|
||||
<th class="pb-2 font-normal">Range</th>
|
||||
<th class="pb-2 text-right font-normal">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-haze/15">
|
||||
{#each waypoints as w}
|
||||
<tr>
|
||||
<td class="py-2 text-term">{w.name}</td>
|
||||
<td class="py-2 tabular-nums text-haze">{w.dist}</td>
|
||||
<td class="py-2 text-right"><Tag tone={w.tone}>{w.status}</Tag></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Panel>
|
||||
|
||||
<Panel title="FTL Drive" accent="text-flare">
|
||||
<div class="space-y-4">
|
||||
<Bar label="Jump capacitor" pct={navState.ftlCharge} tone="bg-warn" />
|
||||
<div class="grid grid-cols-3 gap-2 text-center text-xs">
|
||||
<div class="border border-haze/20 bg-void/40 py-2">
|
||||
<div class="text-[0.55rem] uppercase text-haze">X</div>
|
||||
<div class="tabular-nums text-term glow-sm">{navState.coords.x}</div>
|
||||
</div>
|
||||
<div class="border border-haze/20 bg-void/40 py-2">
|
||||
<div class="text-[0.55rem] uppercase text-haze">Y</div>
|
||||
<div class="tabular-nums text-term glow-sm">{navState.coords.y}</div>
|
||||
</div>
|
||||
<div class="border border-haze/20 bg-void/40 py-2">
|
||||
<div class="text-[0.55rem] uppercase text-haze">Z</div>
|
||||
<div class="tabular-nums text-term glow-sm">{navState.coords.z}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-haze/20 pt-3 text-xs">
|
||||
<span class="text-haze uppercase tracking-wider">Jump readiness</span>
|
||||
<Tag tone="warn">CHARGING</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user