folder structure, router, color store

package-lock.json

@@ -11,7 +11,8 @@
         "p5": "^1.6.0",
         "p5-svelte": "^3.1.2",
         "p5play": "^3.8.14",
-        "sirv-cli": "^2.0.0"
+        "sirv-cli": "^2.0.0",
+        "svelte-spa-router": "^3.3.0"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^24.0.0",
@@ -700,6 +701,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -927,6 +937,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regexparam": "2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/terser": {
       "version": "5.17.6",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.6.tgz",
@@ -1503,6 +1525,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw=="
+    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -1656,6 +1683,14 @@
       "integrity": "sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==",
       "dev": true
     },
+    "svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "requires": {
+        "regexparam": "2.0.1"
+      }
+    },
     "terser": {
       "version": "5.17.6",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.6.tgz",

package.json

@@ -22,6 +22,7 @@
     "p5": "^1.6.0",
     "p5-svelte": "^3.1.2",
     "p5play": "^3.8.14",
-    "sirv-cli": "^2.0.0"
+    "sirv-cli": "^2.0.0",
+    "svelte-spa-router": "^3.3.0"
   }
 }

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 
+    });
+}
+
+
+