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} /> 
+
+
+  

src/routes/Game.svelte

@@ -0,0 +1,7 @@
+<h1 style="color:black; padding:20px">
+    ColorQuest - Game (this is a placeholder)
+</h1>
+
+<a href='#/gameover'>
+    <button>Game over</button>
+</a>

src/routes/GameOver.svelte

@@ -0,0 +1,7 @@
+<h1 style="color:black; padding:20px">
+    ColorQuest - Game Over (this is a placeholder)
+</h1>
+
+<a href='#/levelselect'>
+    <button>Play Again</button>
+</a>

src/routes/Home.svelte

@@ -0,0 +1,7 @@
+<h1 style="color:black; padding:20px">
+    ColorQuest - Home (this is a placeholder)
+</h1>
+
+<a href='#/game'>
+    <button>Start Game</button>
+</a>

src/routes/LevelSelect.svelte

@@ -0,0 +1,7 @@
+<h1 style="color:black; padding:20px">
+    ColorQuest - Level Select (this is a placeholder)
+</h1>
+
+<a href='#/game'>
+    <button>Start Game</button>
+</a>

src/stores/colorStore.js

@@ -0,0 +1,69 @@
+// this is a shared state between game canvas and UI screens
+
+// svelte stores are like global variables 
+// they update evey component that reads them
+// so I can place my color states here so they are updated everywhere
+
+
+// a writebale is a box that holds a value 
+// any svelte comonent can read from within it 
+//autupdated when value changes 
+// its like the dollar sign notation 
+
+// -- so these are the global variables ----
+
+import {writeable} from 'svelte/store';
+
+// world starts gray so unlockedColors start as an empty array (there is none)
+export const unlockedColors = writable({});
+
+// the current level number 
+export const currentLevel = writable(1);
+
+// opacity of color being unlccked: 0.0 is gray, 1.0 is full color
+// this increases per fragment collected
+export const colorOpacity = writable(0.0);
+
+// the hex color for the current level 
+export const levelColor = writable('#888888');
+
+// how many fragment have been collected 
+export const fragmentsCollected = writable(0);
+
+//player lives
+export const lives = writable(3);
+
+// --- these are the global functions -----
+
+// for collecting a fragment 
+// we update the number of fragments collected and the color opacity
+export function onFragmentCollection(totalFragments, hexColor){
+    fragmentsCollected.update(n => {
+        const newCount = n + 1;
+        // opacity is a fraction of the number of fragments collected
+        colorOpacity.set(newCount / totalFragments);
+        return newCount;
+    });
+    levelColor.set(hexColor);
+}
+
+// starting a level over
+export function resetLevel(levelNum, hexColor){
+    currentLevel.set(levelNum);
+    levelColor.set(hexColor);
+    colorOpacity.set(0.0); // back to gray
+    fragmentsCollected.set(0); 
+    lives.set(3); // reset lives 
+}
+
+// compleating a level!
+export function completeLevel(hexColor){
+    unlockedColors.update(arr => {
+        if (!arr.includes(hexColor)) return [...arr, hexColor];
+        return arr; // we don't want duplicate colors so only add if not already existed 
+        // bascially person can play game again but color has been gained anyway 
+    });
+}
+
+
+