<script>
  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/timeline/TimelineView.svelte';

  let screen = $state('worldmap');
</script>

<Layout {screen} onNavigate={(s) => (screen = s)}>
  {#if screen === 'worldmap'}
    <div class="worldmap-page">
      <div class="map-area">
        <WorldMap />
      </div>
      <StatsPanel />
    </div>
  {:else}
    <TimelineView />
  {/if}
</Layout>

<style>
  .worldmap-page {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    height: 100%;
  }

  .map-area {
    flex: 1;
    overflow: hidden;
  }
</style>
