26 lines
1.1 KiB
Svelte
26 lines
1.1 KiB
Svelte
<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>
|