diff --git a/main.ts b/main.ts index 94dde92..8d72f64 100644 --- a/main.ts +++ b/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(); + } }; }; diff --git a/src/Edge.ts b/src/Edge.ts new file mode 100644 index 0000000..4c01ce2 --- /dev/null +++ b/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); + } +} diff --git a/src/Player.ts b/src/Player.ts index c090839..0e9d5f4 100644 --- a/src/Player.ts +++ b/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); } diff --git a/src/Scene.ts b/src/Scene.ts deleted file mode 100644 index 95bfe56..0000000 --- a/src/Scene.ts +++ /dev/null @@ -1 +0,0 @@ -export class Screen {} diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 5de2f80..814bb28 100644 --- a/src/constants/colors.ts +++ b/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', diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts new file mode 100644 index 0000000..d6c37e1 --- /dev/null +++ b/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()); + } +} diff --git a/src/scenes/scenes.ts b/src/scenes/scenes.ts new file mode 100644 index 0000000..03f4602 --- /dev/null +++ b/src/scenes/scenes.ts @@ -0,0 +1,3 @@ +export enum Scenes { + OVERVIEW = 'OVERVIEW', +}