folder structure, router, color store

src/App.svelte

@@ -1,30 +1,25 @@
 <script>
-  import { onMount } from 'svelte';
+import Router from 'svelte-spa-router';
 
-  let id; // the div in the HTML
-  let sprite;
+// importing all the different screens
+import Home from './routes/Home.svelte';
+import LevelSelect from './routes/LevelSelect.svelte';
+import Game from './routes/Game.svelte';
+import GameOver from './routes/GameOver.svelte';
 
-  const sketch = (p5) => {
-    p5.setup = async () => {
-      p5.createCanvas(400, 300);
-      sprite = new p5.Sprite();
-      sprite.img = '/assets/monster.png';
-      sprite.diameter = 100;
-      sprite.scale = 0.5;
-    };
-
-    p5.draw = () => {
-      p5.clear();
-      p5.fill(100);
-      p5.ellipse(p5.mouseX, p5.mouseY, 20, 20);
-      sprite.debug = p5.mouse.pressing();
-    };
-  };
-
-  // On startup
-  onMount(function () {
-    let myp5 = new p5(sketch, id);
-  });
+// this is the application of the svelte-spa-router
+// e.g. /#/game will show the Game component 
+// this is kind of like switching between HTML pages but we switch components instead
+const routes = {
+  '/': Home, 
+  '/levelselect': LevelSelect,
+  '/game': Game,
+  '/gameover': GameOver,
+};
 </script>
 
-<div {id} />
+<!-- the router swaps components based on URL -->
+<Router {routes} /> 
+
+
+