Add app

serving/kiosk-app/src/lib/Radar.svelte

@@ -0,0 +1,25 @@
+<script>
+  // Sweeping radar with positioned blips. `blips`: [{x,y,tone,label}] in %.
+  let { blips = [] } = $props()
+</script>
+
+<div class="relative mx-auto aspect-square w-full max-w-[300px] overflow-hidden rounded-full border border-haze/40 bg-void/60">
+  <div class="absolute inset-[14%] rounded-full border border-haze/20"></div>
+  <div class="absolute inset-[32%] rounded-full border border-haze/20"></div>
+  <div class="absolute inset-[48%] rounded-full border border-haze/20"></div>
+  <div class="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-haze/15"></div>
+  <div class="absolute top-1/2 left-0 h-px w-full -translate-y-1/2 bg-haze/15"></div>
+
+  <div class="radar-sweep absolute inset-0"></div>
+
+  <!-- own ship -->
+  <div class="absolute left-1/2 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 bg-flare glow"></div>
+
+  {#each blips as b}
+    <div
+      class="absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full {b.tone ?? 'bg-term'} glow blink"
+      style="left:{b.x}%; top:{b.y}%"
+      title={b.label}
+    ></div>
+  {/each}
+</div>