diff --git a/main.ts b/main.ts index e64084d..a67ed42 100644 --- a/main.ts +++ b/main.ts @@ -1,24 +1,41 @@ import p5 from 'p5'; import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen'; -import { SceneManager } from './src/scenes/SceneManager'; +import { LegacyScene } from './src/scenes/LegacyScene'; +import { OverviewScene } from './src/scenes/OverviewScene'; import { Scenes } from './src/scenes/scenes'; +import store from './src/store'; const sketch = (s: p5) => { - let sm: SceneManager; + // Scenes + let overviewScene: OverviewScene; + let legacyScene: LegacyScene; s.setup = () => { s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT); s.noCursor(); - sm = new SceneManager(); + overviewScene = new OverviewScene(); + legacyScene = new LegacyScene(); }; s.draw = () => { - sm.draw(); + const { currentScene } = store.getState(); + + if (currentScene === Scenes.OVERVIEW) { + overviewScene.draw(); + } else if (currentScene === Scenes.LEGACY) { + legacyScene.draw(); + } }; s.mousePressed = () => { - sm.handleClick(); + const { currentScene } = store.getState(); + + if (currentScene === Scenes.OVERVIEW) { + overviewScene.onSceneClick(); + } else if (currentScene === Scenes.LEGACY) { + legacyScene.onSceneClick(); + } }; }; diff --git a/package-lock.json b/package-lock.json index 847dd43..02897e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "p5": "^1.4.0" + "p5": "^1.4.0", + "zustand": "^3.5.7" }, "devDependencies": { "@types/p5": "^1.3.0", @@ -9173,6 +9174,19 @@ "engines": { "node": ">=0.4" } + }, + "node_modules/zustand": { + "version": "3.5.7", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.5.7.tgz", + "integrity": "sha512-DlVFXJavIHyXTOGz6dB+8QHZsPyJcGJSEBtlp2Ivmd5SwtlCnhPo3L8LB6YRfAOJC2PbqzgoD8NMjk+y+vIF0g==", + "peerDependencies": { + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } } }, "dependencies": { @@ -16450,6 +16464,12 @@ "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", "dev": true + }, + "zustand": { + "version": "3.5.7", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.5.7.tgz", + "integrity": "sha512-DlVFXJavIHyXTOGz6dB+8QHZsPyJcGJSEBtlp2Ivmd5SwtlCnhPo3L8LB6YRfAOJC2PbqzgoD8NMjk+y+vIF0g==", + "requires": {} } } } diff --git a/package.json b/package.json index 36b1e42..6aafd5a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "typescript": "^4.3.5" }, "dependencies": { - "p5": "^1.4.0" + "p5": "^1.4.0", + "zustand": "^3.5.7" } } diff --git a/src/Api.ts b/src/api.ts similarity index 100% rename from src/Api.ts rename to src/api.ts diff --git a/src/scenes/LegacyScene.ts b/src/scenes/LegacyScene.ts index ba780ff..9a50b95 100644 --- a/src/scenes/LegacyScene.ts +++ b/src/scenes/LegacyScene.ts @@ -1,7 +1,6 @@ import { mp5 } from '../../main'; -import { SceneManager } from './SceneManager'; +import store from '../store'; import { Scenes } from './scenes'; - export class LegacyScene { constructor() {} @@ -9,8 +8,8 @@ export class LegacyScene { mp5.background(100); } - onSceneClick(sm: SceneManager) { + onSceneClick() { console.log('Click on legacy scene'); - sm.changeSceneTo(Scenes.OVERVIEW); + store.setState({ currentScene: Scenes.OVERVIEW }); } } diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index 49d0f8b..fea6373 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -1,9 +1,9 @@ import { mp5 } from '../../main'; -import { Player } from '../Player'; +import { Player } from '../sketchObjects/Player'; import { colors } from '../constants/colors'; -import { Edge } from '../Edge'; -import { SceneManager } from './SceneManager'; +import { Edge } from '../sketchObjects/Edge'; import { Scenes } from './scenes'; +import store from '../store'; export class OverviewScene { player: Player; @@ -28,11 +28,11 @@ export class OverviewScene { this.player.move(); } - public onSceneClick(sm: SceneManager) { + public onSceneClick() { this.edgeData.forEach((edge, i) => { const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y); if (dist < edge.r) { - sm.changeSceneTo(edge.scene); + store.setState({ currentScene: edge.scene }); } }); } diff --git a/src/scenes/SceneManager.ts b/src/scenes/SceneManager.ts deleted file mode 100644 index 96c19cf..0000000 --- a/src/scenes/SceneManager.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { LegacyScene } from './LegacyScene'; -import { OverviewScene } from './OverviewScene'; -import { Scenes } from './scenes'; - -export class SceneManager { - currentScene: Scenes; - - // Scenes - overviewScene: OverviewScene; - legacyScene: LegacyScene; - - constructor() { - this.currentScene = Scenes.OVERVIEW; - - // Scenes - this.overviewScene = new OverviewScene(); - this.legacyScene = new LegacyScene(); - } - - public draw() { - if (this.currentScene === Scenes.OVERVIEW) { - this.overviewScene.draw(); - } else if (this.currentScene === Scenes.LEGACY) { - this.legacyScene.draw(); - } - } - - public changeSceneTo(newScene: Scenes) { - this.currentScene = newScene; - } - - public handleClick() { - if (this.currentScene === Scenes.OVERVIEW) { - this.overviewScene.onSceneClick(this); - } else if (this.currentScene === Scenes.LEGACY) { - this.legacyScene.onSceneClick(this); - } - } -} diff --git a/src/Edge.ts b/src/sketchObjects/Edge.ts similarity index 76% rename from src/Edge.ts rename to src/sketchObjects/Edge.ts index 4c01ce2..2832f26 100644 --- a/src/Edge.ts +++ b/src/sketchObjects/Edge.ts @@ -1,5 +1,5 @@ -import { mp5 } from '../main'; -import { colors } from './constants/colors'; +import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; export class Edge { x: number; diff --git a/src/Player.ts b/src/sketchObjects/Player.ts similarity index 95% rename from src/Player.ts rename to src/sketchObjects/Player.ts index 4c3e785..e31fb78 100644 --- a/src/Player.ts +++ b/src/sketchObjects/Player.ts @@ -1,5 +1,5 @@ -import { mp5 } from '../main'; -import { colors } from './constants/colors'; +import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; export class Player { x: number; diff --git a/src/store.ts b/src/store.ts new file mode 100644 index 0000000..cb2be05 --- /dev/null +++ b/src/store.ts @@ -0,0 +1,12 @@ +import create from 'zustand/vanilla'; +import { Scenes } from './scenes/scenes'; + +export interface State { + currentScene: Scenes; +} + +const store = create(() => ({ + currentScene: Scenes.OVERVIEW, +})); + +export default store;