75 lines
1.5 KiB
Svelte
75 lines
1.5 KiB
Svelte
<script>
|
|
import { initAuth, getLoading, getUser, getNeedsCountry } from './lib/auth/userStore.svelte.js';
|
|
import LoginOverlay from './lib/auth/LoginOverlay.svelte';
|
|
import CountryPicker from './lib/auth/CountryPicker.svelte';
|
|
import Layout from './lib/layout/Layout.svelte';
|
|
import WorldMap from './lib/world-map/WorldMap.svelte';
|
|
import StatsPanel from './lib/world-map/StatsPanel.svelte';
|
|
import TimelineView from './lib/TimelineView.svelte';
|
|
|
|
let screen = $state('worldmap');
|
|
|
|
function onNavigate(s) {
|
|
screen = s;
|
|
}
|
|
|
|
$effect(() => {
|
|
initAuth();
|
|
});
|
|
|
|
let loading = $derived(getLoading());
|
|
let user = $derived(getUser());
|
|
let needsCountry = $derived(getNeedsCountry());
|
|
</script>
|
|
|
|
{#if loading}
|
|
<div class="loading-screen">
|
|
<span class="loading-text">Loading...</span>
|
|
</div>
|
|
{:else}
|
|
<Layout {screen} {onNavigate}>
|
|
{#if screen === 'worldmap'}
|
|
<div class="worldmap-page">
|
|
<div class="map-area"><WorldMap /></div>
|
|
<StatsPanel />
|
|
</div>
|
|
{:else}
|
|
<TimelineView />
|
|
{/if}
|
|
</Layout>
|
|
|
|
{#if !user}
|
|
<LoginOverlay />
|
|
{:else if needsCountry}
|
|
<CountryPicker />
|
|
{/if}
|
|
{/if}
|
|
|
|
<style>
|
|
.loading-screen {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0f172a;
|
|
}
|
|
|
|
.loading-text {
|
|
font: 400 18px/1.4 sans-serif;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.worldmap-page {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.map-area {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|