Merge pull request #4 from dennisschoepf/scene/overview

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .cache
 dist
+.yarn
+pnp.js

.yarnrc.yml

@@ -1 +0,0 @@
-yarnPath: ".yarn/releases/yarn-berry.cjs"

deploy.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+echo "Building project ..."
+npm run build
+echo "Project build done!"
+echo "-------------------"
+
+echo "Removing existing folder on remote"
+ssh root@202.61.225.50 rm -rf /var/www/codewanderer
+echo "Folder on remote removed!"
+echo "-------------------"
+
+echo "Uploading new project state"
+scp -r dist root@202.61.225.50:/var/www/codewanderer
+echo "Upload complete!"

main.ts

@@ -1,15 +1,42 @@
 import p5 from 'p5';
-import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants';
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen';
+import { LegacyScene } from './src/scenes/LegacyScene';
+import { OverviewScene } from './src/scenes/OverviewScene';
+import { Scenes } from './src/scenes/scenes';
+import store from './src/store';
+
+const sketch = (s: p5) => {
+  // Scenes
+  let overviewScene: OverviewScene;
+  let legacyScene: LegacyScene;
 
-const sketch = (s) => {
   s.setup = () => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
+    s.noCursor();
+
+    overviewScene = new OverviewScene();
+    legacyScene = new LegacyScene();
   };
+
   s.draw = () => {
-    s.background(220);
+    const { currentScene } = store.getState();
-    s.rect(200, 200, 200, 200);
+
-    s.print(s.mouseX, s.mouseY);
+    if (currentScene === Scenes.OVERVIEW) {
+      overviewScene.draw();
+    } else if (currentScene === Scenes.LEGACY) {
+      legacyScene.draw();
+    }
+  };
+
+  s.mousePressed = () => {
+    const { currentScene } = store.getState();
+
+    if (currentScene === Scenes.OVERVIEW) {
+      overviewScene.onSceneClick();
+    } else if (currentScene === Scenes.LEGACY) {
+      legacyScene.onSceneClick();
+    }
   };
 };
 
-const p5Instance = new p5(sketch);
+export const mp5 = new p5(sketch);

package.json

@@ -7,15 +7,18 @@
   "license": "MIT",
   "scripts": {
     "dev": "parcel index.html",
-    "build": "parcel build index.html"
+    "build": "parcel build index.html",
+    "deploy": "./deploy.sh"
   },
   "devDependencies": {
+    "@types/p5": "^1.3.0",
     "parcel-bundler": "^1.12.5",
     "prettier": "^2.3.2",
     "sass": "^1.35.2",
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "p5": "^1.4.0"
+    "p5": "^1.4.0",
+    "zustand": "^3.5.7"
   }
 }

src/Player.ts

@@ -1,13 +0,0 @@
-export class Player {
-  x: number;
-  y: number;
-  sketch: any;
-
-  constructor(sketch: any, x: number, y: number) {
-    this.sketch = sketch;
-    this.x = x;
-    this.y = y;
-  }
-
-  draw() {}
-}

src/api.ts

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

src/colors.ts

@@ -1,10 +0,0 @@
-export const colors: { [key: string]: string } = {
-  greyLighter: '#EBEEF2',
-  greyLight: '#D0D5D9',
-  grey: '#B0B7BF',
-  greyDark: '#9CA1A6',
-  blueGrey: '#C5CCD9',
-  redLight: '#BF2431',
-  red: '#A60303',
-  redDark: '#590C13',
-};

src/constants/colors.ts

@@ -0,0 +1,23 @@
+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',
+  greyDark: '#9CA1A6',
+  blueGrey: '#C5CCD9',
+  redLight: '#BF2431',
+  red: '#A60303',
+  redDark: '#590C13',
+  black: '#0D0D0D',
+};

src/scenes/LegacyScene.ts

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

src/scenes/OverviewScene.ts

@@ -0,0 +1,43 @@
+import { mp5 } from '../../main';
+import { Player } from '../sketchObjects/Player';
+import { colors } from '../constants/colors';
+import { Edge } from '../sketchObjects/Edge';
+import { Scenes } from './scenes';
+import store from '../store';
+
+export class OverviewScene {
+  player: Player;
+  edgeData: Array<{ x: number; y: number; r: number; scene: Scenes }>;
+  edges: Edge[];
+
+  constructor() {
+    this.edgeData = [
+      { 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();
+  }
+
+  public draw() {
+    mp5.background(mp5.color(colors.greyLighter));
+
+    this.player.follow();
+    this.drawLocations();
+    this.player.move();
+  }
+
+  public onSceneClick() {
+    this.edgeData.forEach((edge, i) => {
+      const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
+      if (dist < edge.r) {
+        store.setState({ currentScene: edge.scene });
+      }
+    });
+  }
+
+  private drawLocations() {
+    this.edges.forEach((edgeShape) => edgeShape.draw());
+  }
+}

src/scenes/scenes.ts

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

src/sketchObjects/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/sketchObjects/Player.ts

@@ -0,0 +1,72 @@
+import { mp5 } from '../../main';
+import { colors } from '../constants/colors';
+
+export class Player {
+  x: number;
+  y: number;
+  r: number;
+  easing: number;
+  history: Array<{ x: number; y: number }> = [];
+
+  constructor() {
+    this.x = mp5.height / 2;
+    this.y = mp5.width / 2;
+    this.r = 30;
+    this.easing = 0.06;
+  }
+
+  public follow() {
+    const targetX = mp5.mouseX;
+    const deltaX = targetX - this.x;
+    this.x += deltaX * this.easing;
+
+    const targetY = mp5.mouseY;
+    const deltaY = targetY - this.y;
+    this.y += deltaY * this.easing;
+
+    this.storeInHistory({ x: this.x, y: this.y });
+
+    this.drawPlayerTrail();
+    this.drawPlayerShape(this.x, this.y);
+  }
+
+  public move() {
+    this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4);
+  }
+
+  private drawPlayerShape(x: number, y: number) {
+    mp5.fill(mp5.color(colors.grey));
+    mp5.noStroke();
+    mp5.ellipse(x, y, this.r);
+  }
+
+  private drawTrailElement(x: number, y: number, r: number) {
+    mp5.noStroke();
+    mp5.fill(mp5.color(colors.greyLight));
+    mp5.ellipse(x, y, r);
+  }
+
+  private drawPlayerTrail() {
+    const immediateHistory = this.history.slice(1).slice(-30);
+
+    immediateHistory.forEach((pointInHistory, i) => {
+      if (i % 5 === 0) {
+        this.drawTrailElement(pointInHistory.x, pointInHistory.y, 2 * i);
+      }
+    });
+  }
+
+  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);
+    mp5.line(x + size, y + size, x - size, y - size);
+    mp5.line(x - size, y - size, x + size, y + size);
+  }
+
+  private storeInHistory(coordinates: { x: number; y: number }) {
+    const lastPositionVector = mp5.createVector(coordinates.x, coordinates.y);
+    this.history.push(lastPositionVector);
+  }
+}

src/store.ts

@@ -0,0 +1,12 @@
+import create from 'zustand/vanilla';
+import { Scenes } from './scenes/scenes';
+
+export interface State {
+  currentScene: Scenes;
+}
+
+const store = create<State>(() => ({
+  currentScene: Scenes.OVERVIEW,
+}));
+
+export default store;

styles.scss

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