33 lines
1.5 KiB
Svelte
33 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import MapViewer from '@scopenet/map/MapViewer.svelte';
|
|
import { startFeed, type MapInfo, type MapLayers, type MapOverlay } from '@scopenet/map';
|
|
import { get } from '../lib/api';
|
|
|
|
// The public live map on the landing page. The admin chooses the server and which layers visitors may see.
|
|
let { serverId = 0, height = 560 }: { serverId?: number; height?: number } = $props();
|
|
|
|
let info = $state<(MapInfo & { layers?: MapLayers }) | null>(null);
|
|
let overlay = $state<MapOverlay | null>(null);
|
|
let error = $state('');
|
|
const tileUrl = (slug: string, z: number, x: number, y: number) => `${info?.tile_base}/${slug}/${z}/${x}/${y}.png?t=${info?.token}`;
|
|
const available = $derived(info?.layers ?? { claims: true, pins: true, players: false });
|
|
|
|
onMount(() => startFeed({
|
|
loadInfo: () => get<MapInfo & { layers: MapLayers }>(`/api/v1/public/map/${serverId}`),
|
|
loadOverlay: () => get<MapOverlay>(`/api/v1/public/map/${serverId}/overlay`),
|
|
onInfo: (i) => { info = i; error = ''; },
|
|
onOverlay: (o) => { overlay = o; error = ''; },
|
|
onError: (m) => { error = m; },
|
|
overlayMs: 4000
|
|
}));
|
|
</script>
|
|
|
|
<div class="frame" style:height="{Math.min(1000, Math.max(300, height))}px">
|
|
<MapViewer {info} {overlay} {tileUrl} {error} {available} />
|
|
</div>
|
|
|
|
<style>
|
|
.frame { width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); --map-accent: var(--accent, #8b6cff); }
|
|
</style>
|