diff --git a/package-lock.json b/package-lock.json index 7a1b584..8fc3d40 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b91ba61..d6581bf 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.svelte b/src/App.svelte index c7afd11..6b045c3 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,30 +1,25 @@ -
+ + + + + \ No newline at end of file diff --git a/src/components/GameCanvas.svelte b/src/components/GameCanvas.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/components/HUD.svelte b/src/components/HUD.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/game/Enemy.js b/src/game/Enemy.js new file mode 100644 index 0000000..e69de29 diff --git a/src/game/Fragment.js b/src/game/Fragment.js new file mode 100644 index 0000000..e69de29 diff --git a/src/game/Player.js b/src/game/Player.js new file mode 100644 index 0000000..e69de29 diff --git a/src/game/TarPuddle.js b/src/game/TarPuddle.js new file mode 100644 index 0000000..e69de29 diff --git a/src/game/levelData.js b/src/game/levelData.js new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/Game.svelte b/src/routes/Game.svelte new file mode 100644 index 0000000..4432b31 --- /dev/null +++ b/src/routes/Game.svelte @@ -0,0 +1,7 @@ +

+ ColorQuest - Game (this is a placeholder) +

+ + + + \ No newline at end of file diff --git a/src/routes/GameOver.svelte b/src/routes/GameOver.svelte new file mode 100644 index 0000000..120c191 --- /dev/null +++ b/src/routes/GameOver.svelte @@ -0,0 +1,7 @@ +

+ ColorQuest - Game Over (this is a placeholder) +

+ + + + \ No newline at end of file diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte new file mode 100644 index 0000000..146fdd9 --- /dev/null +++ b/src/routes/Home.svelte @@ -0,0 +1,7 @@ +

+ ColorQuest - Home (this is a placeholder) +

+ + + + \ No newline at end of file diff --git a/src/routes/LevelSelect.svelte b/src/routes/LevelSelect.svelte new file mode 100644 index 0000000..2d40e80 --- /dev/null +++ b/src/routes/LevelSelect.svelte @@ -0,0 +1,7 @@ +

+ ColorQuest - Level Select (this is a placeholder) +

+ + + + \ No newline at end of file diff --git a/src/stores/colorStore.js b/src/stores/colorStore.js new file mode 100644 index 0000000..ced6a95 --- /dev/null +++ b/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 + }); +} + + +