<script>
import { onMount } from 'svelte';
import Router from 'svelte-spa-router';

import Home     from './routes/Home.svelte';
import LevelSelect from './routes/LevelSelect.svelte';
import Game     from './routes/Game.svelte';
import GameOver from './routes/GameOver.svelte';
import Win      from './routes/Win.svelte';

const routes = {
  '/':            Home,
  '/levelselect': LevelSelect,
  '/game':        Game,
  '/gameover':    GameOver,
  '/win':         Win,
};

const COLORS = [
  '#970505', '#CF8917', '#E3D214', '#39BD1C',
  '#12B6C8', '#170CB7', '#6613BA', '#C71287',
  '#753F16', '#FFD700',
];

let stars = [];

onMount(() => {
  stars = Array.from({ length: 90 }, () => ({
    x:        Math.random() * 100,
    y:        Math.random() * 100,
    size:     Math.random() * 2 + 1,
    color:    COLORS[Math.floor(Math.random() * COLORS.length)],
    delay:    -(Math.random() * 6),   // negative = start mid-animation so they don't all blink at once
    duration: Math.random() * 3 + 2,
  }));
});
</script>

<div class="page">

  <!-- star background -->
  <div class="starfield" aria-hidden="true">
    {#each stars as s}
      <span
        class="star"
        style="
          left: {s.x}%;
          top: {s.y}%;
          width: {s.size}px;
          height: {s.size}px;
          background: {s.color};
          box-shadow: 0 0 {s.size * 2}px {s.color};
          animation-duration: {s.duration}s;
          animation-delay: {s.delay}s;
        "
      ></span>
    {/each}
  </div>

  <!-- content column -->
  <div class="stage">
    <p class="game-title">the full hue</p>
    <Router {routes} />
  </div>

</div>

<style>
  .page {
    min-height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  /* ── starfield ── */
  .starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .star {
    position: absolute;
    border-radius: 50%;
    animation: blink linear infinite;
  }

  @keyframes blink {
    0%,100% { opacity: 0.9; }
    50%      { opacity: 0.08; }
  }

  /* ── content ── */
  .stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .game-title {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    letter-spacing: 0.35em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.28);
  }
</style>
