add camera controll

src/App.svelte

@@ -1,17 +1,17 @@
 <script>
+  import CameraControl from "./CameraControl.svelte"; 
   import {
     initializeGame,
     updateGame,
     getScore,
     isGameOver,
-    resetGame
-  } from './game/game.js';
+    resetGame,
+  } from "./game/game.js";
 
   let game;
   let score = $state(0);
   let highScore = $state(0);
-  let state = $state('start'); // start | playing | gameover
-
+  let state = $state("start"); // start | playing | gameover
 
   window.setup = () => {
     createCanvas(400, 800).parent(game);
@@ -24,7 +24,7 @@
     score = Math.floor(getScore());
 
     if (isGameOver()) {
-      state = 'gameover';
+      state = "gameover";
       if (score > highScore) {
         highScore = score;
       }
@@ -35,7 +35,7 @@
   function playGame() {
     resetGame();
     score = 0;
-    state = 'playing';
+    state = "playing";
     loop();
   }
 
@@ -56,18 +56,22 @@
     <div class="game-wrapper">
       <div bind:this={game}></div>
 
-      {#if state !== 'playing'}
+      {#if state !== "playing"}
         <div class="overlay">
           <div class="overlay-card">
-            <h2>{state === 'gameover' ? 'Game over!' : 'Start new game'}</h2>
-            {#if state !== "start"} <p>Score: {score}</p> {/if }
+            <h2>{state === "gameover" ? "Game over!" : "Start new game"}</h2>
+            {#if state !== "start"}
+              <p>Score: {score}</p>
+            {/if}
             <button onclick={playGame}>Play</button>
           </div>
         </div>
       {/if}
     </div>
+    <aside class="right-panel">
+      <CameraControl />
+    </aside>
 
-    <aside class="right-panel"></aside>
   </div>
 </main>
 
@@ -155,4 +159,4 @@
   .right-panel {
     width: 220px;
   }
-</style>
+</style>