Implement basic scene manager with ability to switch between scenes

main.ts

@@ -1,29 +1,24 @@
 import p5 from 'p5';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen';
-import { OverviewScene } from './src/scenes/OverviewScene';
+import { SceneManager } from './src/scenes/SceneManager';
 import { Scenes } from './src/scenes/scenes';
 
-const sketch = (s) => {
+const sketch = (s: p5) => {
-  let currentScene: Scenes = Scenes.OVERVIEW;
+  let sm: SceneManager;
-  let overviewScene: OverviewScene;
 
   s.setup = () => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
     s.noCursor();
 
-    overviewScene = new OverviewScene();
+    sm = new SceneManager();
   };
 
   s.draw = () => {
-    if (currentScene === Scenes.OVERVIEW) {
+    sm.draw();
-      overviewScene.draw();
-    }
   };
 
   s.mousePressed = () => {
-    if (currentScene === Scenes.OVERVIEW) {
+    sm.handleClick();
-      overviewScene.onSceneClick();
-    }
   };
 };
 

src/Player.ts

@@ -57,6 +57,7 @@ export class Player {
   }
 
   private drawCursorIndicator(x: number, y: number, size: number) {
+    mp5.strokeWeight(2);
     mp5.stroke(mp5.color(colors.black));
     mp5.line(x - size, y + size, x + size, y - size);
     mp5.line(x + size, y - size, x - size, y + size);

src/scenes/LegacyScene.ts

@@ -0,0 +1,16 @@
+import { mp5 } from '../../main';
+import { SceneManager } from './SceneManager';
+import { Scenes } from './scenes';
+
+export class LegacyScene {
+  constructor() {}
+
+  draw() {
+    mp5.background(100);
+  }
+
+  onSceneClick(sm: SceneManager) {
+    console.log('Click on legacy scene');
+    sm.changeSceneTo(Scenes.OVERVIEW);
+  }
+}

src/scenes/OverviewScene.ts

@@ -2,17 +2,19 @@ import { mp5 } from '../../main';
 import { Player } from '../Player';
 import { colors } from '../constants/colors';
 import { Edge } from '../Edge';
+import { SceneManager } from './SceneManager';
+import { Scenes } from './scenes';
 
 export class OverviewScene {
   player: Player;
-  edgeData: Array<{ x: number; y: number; r: number }>;
+  edgeData: Array<{ x: number; y: number; r: number; scene: Scenes }>;
   edges: Edge[];
 
   constructor() {
     this.edgeData = [
-      { x: 100, y: 100, r: 50 },
+      { x: 100, y: 100, r: 50, scene: Scenes.LEGACY },
-      { x: 900, y: 400, r: 100 },
+      { x: 900, y: 400, r: 100, scene: Scenes.LEGACY },
-      { x: 300, y: 600, r: 75 },
+      { x: 300, y: 600, r: 75, scene: Scenes.LEGACY },
     ];
     this.edges = this.edgeData.map((edge) => new Edge(edge.x, edge.y, edge.r));
     this.player = new Player();
@@ -26,12 +28,11 @@ export class OverviewScene {
     this.player.move();
   }
 
-  public onSceneClick() {
+  public onSceneClick(sm: SceneManager) {
-    console.log('Click on scene');
+    this.edgeData.forEach((edge, i) => {
-    this.edges.forEach((edgeShape, i) => {
+      const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
-      const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edgeShape.x, edgeShape.y);
+      if (dist < edge.r) {
-      if (dist < edgeShape.r) {
+        sm.changeSceneTo(edge.scene);
-        console.log(`Click on edge ${i}`);
       }
     });
   }

src/scenes/SceneManager.ts

@@ -0,0 +1,39 @@
+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/scenes/scenes.ts

@@ -1,3 +1,4 @@
 export enum Scenes {
   OVERVIEW = 'OVERVIEW',
+  LEGACY = 'LEGACY',
 }

styles.scss

@@ -3,6 +3,7 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
+  overflow: hidden;
 }
 
 main {