diff --git a/main.ts b/main.ts index 8d72f64..e64084d 100644 --- a/main.ts +++ b/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) => { - let currentScene: Scenes = Scenes.OVERVIEW; - let overviewScene: OverviewScene; +const sketch = (s: p5) => { + let sm: SceneManager; s.setup = () => { s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT); s.noCursor(); - overviewScene = new OverviewScene(); + sm = new SceneManager(); }; s.draw = () => { - if (currentScene === Scenes.OVERVIEW) { - overviewScene.draw(); - } + sm.draw(); }; s.mousePressed = () => { - if (currentScene === Scenes.OVERVIEW) { - overviewScene.onSceneClick(); - } + sm.handleClick(); }; }; diff --git a/src/Player.ts b/src/Player.ts index 0e9d5f4..4c3e785 100644 --- a/src/Player.ts +++ b/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); diff --git a/src/scenes/LegacyScene.ts b/src/scenes/LegacyScene.ts new file mode 100644 index 0000000..ba780ff --- /dev/null +++ b/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); + } +} diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index d6c37e1..49d0f8b 100644 --- a/src/scenes/OverviewScene.ts +++ b/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); } }); } diff --git a/src/scenes/SceneManager.ts b/src/scenes/SceneManager.ts new file mode 100644 index 0000000..96c19cf --- /dev/null +++ b/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); + } + } +} diff --git a/src/scenes/scenes.ts b/src/scenes/scenes.ts index 03f4602..8aeef75 100644 --- a/src/scenes/scenes.ts +++ b/src/scenes/scenes.ts @@ -1,3 +1,4 @@ export enum Scenes { OVERVIEW = 'OVERVIEW', + LEGACY = 'LEGACY', } diff --git a/styles.scss b/styles.scss index 89d7120..9c7eb52 100644 --- a/styles.scss +++ b/styles.scss @@ -3,6 +3,7 @@ body { margin: 0; padding: 0; height: 100%; + overflow: hidden; } main {