Implement basic scene manager with ability to switch between scenes

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: 900, y: 400, r: 100 },
-      { x: 300, y: 600, r: 75 },
+      { x: 100, y: 100, r: 50, scene: Scenes.LEGACY },
+      { x: 900, y: 400, r: 100, scene: Scenes.LEGACY },
+      { 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() {
-    console.log('Click on scene');
-    this.edges.forEach((edgeShape, i) => {
-      const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edgeShape.x, edgeShape.y);
-      if (dist < edgeShape.r) {
-        console.log(`Click on edge ${i}`);
+  public onSceneClick(sm: SceneManager) {
+    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);
       }
     });
   }

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',
 }