Set up overview screen with click handlers

main.ts

@@ -1,22 +1,29 @@
 import p5 from 'p5';
-import { colors } from './src/constants/colors';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen';
-import { Player } from './src/Player';
+import { OverviewScene } from './src/scenes/OverviewScene';
+import { Scenes } from './src/scenes/scenes';
 
 const sketch = (s) => {
-  let player;
+  let currentScene: Scenes = Scenes.OVERVIEW;
+  let overviewScene: OverviewScene;
 
   s.setup = () => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
     s.noCursor();
 
-    player = new Player();
+    overviewScene = new OverviewScene();
   };
 
   s.draw = () => {
-    s.background(s.color(colors.greyLighter));
+    if (currentScene === Scenes.OVERVIEW) {
+      overviewScene.draw();
+    }
+  };
 
-    player.follow();
+  s.mousePressed = () => {
+    if (currentScene === Scenes.OVERVIEW) {
+      overviewScene.onSceneClick();
+    }
   };
 };
 

src/Edge.ts

@@ -0,0 +1,19 @@
+import { mp5 } from '../main';
+import { colors } from './constants/colors';
+
+export class Edge {
+  x: number;
+  y: number;
+  r: number;
+
+  constructor(x: number, y: number, r: number) {
+    this.x = x;
+    this.y = y;
+    this.r = r;
+  }
+
+  draw() {
+    mp5.fill(mp5.color(colors.grey));
+    mp5.ellipse(this.x, this.y, this.r * 2);
+  }
+}

src/Player.ts

@@ -28,6 +28,9 @@ export class Player {
 
     this.drawPlayerTrail();
     this.drawPlayerShape(this.x, this.y);
+  }
+
+  public move() {
     this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4);
   }
 

src/Scene.ts

@@ -1 +0,0 @@
-export class Screen {}

src/constants/colors.ts

@@ -1,4 +1,16 @@
-export const colors: { [key: string]: string } = {
+interface Colors {
+  greyLighter: string;
+  greyLight: string;
+  grey: string;
+  greyDark: string;
+  blueGrey: string;
+  redLight: string;
+  red: string;
+  redDark: string;
+  black: string;
+}
+
+export const colors: Colors = {
   greyLighter: '#EBEEF2',
   greyLight: '#D0D5D9',
   grey: '#B0B7BF',

src/scenes/OverviewScene.ts

@@ -0,0 +1,42 @@
+import { mp5 } from '../../main';
+import { Player } from '../Player';
+import { colors } from '../constants/colors';
+import { Edge } from '../Edge';
+
+export class OverviewScene {
+  player: Player;
+  edgeData: Array<{ x: number; y: number; r: number }>;
+  edges: Edge[];
+
+  constructor() {
+    this.edgeData = [
+      { x: 100, y: 100, r: 50 },
+      { x: 900, y: 400, r: 100 },
+      { x: 300, y: 600, r: 75 },
+    ];
+    this.edges = this.edgeData.map((edge) => new Edge(edge.x, edge.y, edge.r));
+    this.player = new Player();
+  }
+
+  public draw() {
+    mp5.background(mp5.color(colors.greyLighter));
+
+    this.player.follow();
+    this.drawLocations();
+    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}`);
+      }
+    });
+  }
+
+  private drawLocations() {
+    this.edges.forEach((edgeShape) => edgeShape.draw());
+  }
+}

src/scenes/scenes.ts

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