<script>
  import { initializeGame, updateGame, getScore } from './game/game.js';

  let game;
  let score = $state(0);

  window.setup = () => {
    createCanvas(400, 800).parent(game);
    initializeGame();
  };

  window.draw = () => {
    updateGame();
    score = getScore();
  };

  $effect(() => {
    new p5();
  });
</script>

<main class="page">
  <h1>Nubzuki Jump</h1>

  <div class="layout">
    <aside class="scoreboard">
      <h2>Score</h2>
      <p>{score}</p>
    </aside>

    <div class="game-wrapper" bind:this={game}></div>

    <aside class="right-panel"></aside>
  </div>
</main>

<style>
  .page {
    min-height: 100vh;
    background: #2b2d42;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
  }

  h1 {
    margin: 0 0 20px;
    font-size: 42px;
  }

  .layout {
    display: grid;
    grid-template-columns: 220px 400px 220px;
    gap: 30px;
    justify-content: center;
    align-items: start;
  }

  .scoreboard {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
  }

  .scoreboard h2 {
    margin-top: 0;
  }

  .scoreboard p {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
  }

  .game-wrapper {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  .right-panel {
    width: 220px;
  }
</style>