Refactor scene management with store

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

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": {}
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "p5": "^1.4.0"
+    "p5": "^1.4.0",
+    "zustand": "^3.5.7"
   }
 }

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

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 { Edge } from '../sketchObjects/Edge';
-import { SceneManager } from './SceneManager';
 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 });
       }
     });
   }

src/scenes/SceneManager.ts

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

src/sketchObjects/Edge.ts

@@ -1,5 +1,5 @@
-import { mp5 } from '../main';
+import { mp5 } from '../../main';
-import { colors } from './constants/colors';
+import { colors } from '../constants/colors';
 
 export class Edge {
   x: number;

src/sketchObjects/Player.ts

@@ -1,5 +1,5 @@
-import { mp5 } from '../main';
+import { mp5 } from '../../main';
-import { colors } from './constants/colors';
+import { colors } from '../constants/colors';
 
 export class Player {
   x: number;

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<State>(() => ({
+  currentScene: Scenes.OVERVIEW,
+}));
+
+export default store;