Generate overview based on subproject size

main.ts

@@ -1,6 +1,6 @@
 import p5 from 'p5';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen';
-import { LegacyScene } from './src/scenes/LegacyScene';
+import { DetailScene } from './src/scenes/DetailScene';
 import { OverviewScene } from './src/scenes/OverviewScene';
 import { Scenes } from './src/scenes/scenes';
 import store from './src/store';
@@ -9,7 +9,7 @@ import { Companion, CompanionState } from './src/ui/companion';
 const sketch = (s: p5) => {
   // Scenes
   let overviewScene: OverviewScene;
-  let legacyScene: LegacyScene;
+  let detailScene: DetailScene;
 
   s.setup = () => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -18,7 +18,7 @@ const sketch = (s: p5) => {
     new Companion();
 
     overviewScene = new OverviewScene();
-    legacyScene = new LegacyScene();
+    detailScene = new DetailScene();
   };
 
   s.draw = () => {
@@ -26,8 +26,8 @@ const sketch = (s: p5) => {
 
     if (currentScene === Scenes.OVERVIEW) {
       overviewScene.draw();
-    } else if (currentScene === Scenes.LEGACY) {
+    } else if (currentScene === Scenes.DETAIL) {
-      legacyScene.draw();
+      detailScene.draw();
     }
   };
 
@@ -38,8 +38,8 @@ const sketch = (s: p5) => {
 
     if (currentScene === Scenes.OVERVIEW) {
       overviewScene.onSceneClick();
-    } else if (currentScene === Scenes.LEGACY) {
+    } else if (currentScene === Scenes.DETAIL) {
-      legacyScene.onSceneClick();
+      detailScene.onSceneClick();
     }
   };
 };

metadata/project.json

@@ -0,0 +1,16 @@
+{
+  "subprojects": [
+    {
+      "name": "sample",
+      "path": "packages/sample",
+      "size": 2450,
+      "contents": {}
+    },
+    {
+      "name": "sample",
+      "path": "packages/sample",
+      "size": 5600,
+      "contents": {}
+    }
+  ]
+}

src/api.ts

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

src/helpers.ts

@@ -0,0 +1,63 @@
+import { mp5 } from '../main';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from './constants/screen';
+import { Edge } from './sketchObjects/Edge';
+import { Coordinates, SubProject } from './types';
+
+export function getEdgeDimensions({ size }: SubProject): number {
+  const radius = size * 0.05;
+  return radius > 150 ? 150 : radius;
+}
+
+export function generateRandomEdgeCoordinates(): Coordinates {
+  return {
+    x: mp5.random(150, SCREEN_WIDTH - 150),
+    y: mp5.random(150, SCREEN_HEIGHT - 150),
+  };
+}
+
+export function isColliding(
+  coordinatesToTest: Coordinates,
+  existingCoordinates: Coordinates[]
+): boolean {
+  return existingCoordinates.some(
+    (existingCoordinate) =>
+      mp5.dist(
+        existingCoordinate.x,
+        existingCoordinate.y,
+        coordinatesToTest.x,
+        coordinatesToTest.y
+      ) < 300
+  );
+}
+
+export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordinates {
+  let newCoords: Coordinates;
+
+  do {
+    newCoords = generateRandomEdgeCoordinates();
+  } while (isColliding(newCoords, existingCoordinates));
+
+  return newCoords;
+}
+
+export function generateEdges(subprojects: SubProject[]): Edge[] {
+  let edgeCoords = [];
+
+  subprojects.forEach((subproject) => {
+    const coordinates = generateEdgeCoords(edgeCoords);
+    edgeCoords.push({
+      x: coordinates.x,
+      y: coordinates.y,
+      r: getEdgeDimensions(subproject),
+    });
+  });
+
+  return edgeCoords.map(
+    (edgeCoord) =>
+      new Edge({
+        x: edgeCoord.x,
+        y: edgeCoord.y,
+        r: edgeCoord.r,
+      })
+  );
+}

src/scenes/DetailScene.ts

@@ -1,7 +1,8 @@
 import { mp5 } from '../../main';
 import store from '../store';
 import { Scenes } from './scenes';
-export class LegacyScene {
+
+export class DetailScene {
   constructor() {}
 
   draw() {
@@ -9,7 +10,8 @@ export class LegacyScene {
   }
 
   onSceneClick() {
-    console.log('Click on legacy scene');
+    console.log('Click on detail scene');
+    console.log('Changing back to overview');
     store.setState({ currentScene: Scenes.OVERVIEW });
   }
 }

src/scenes/OverviewScene.ts

@@ -2,21 +2,17 @@ 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';
+import { generateEdges } from '../helpers';
+import { Scenes } from './scenes';
+import projectMetadata from '../../metadata/project.json';
 
 export class OverviewScene {
   player: Player;
-  edgeData: Array<{ x: number; y: number; r: number; scene: Scenes }>;
   edges: Edge[];
 
   constructor() {
-    this.edgeData = [
+    this.edges = generateEdges(projectMetadata.subprojects);
-      { 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();
   }
 
@@ -29,10 +25,10 @@ export class OverviewScene {
   }
 
   public onSceneClick() {
-    this.edgeData.forEach((edge, i) => {
+    this.edges.forEach((edge, i) => {
       const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
       if (dist < edge.r) {
-        store.setState({ currentScene: edge.scene });
+        store.setState({ currentScene: Scenes.DETAIL });
       }
     });
   }

src/scenes/scenes.ts

@@ -1,6 +1,4 @@
 export enum Scenes {
   OVERVIEW = 'OVERVIEW',
-  LEGACY = 'LEGACY',
+  DETAIL = 'DETAIL',
-  PACKAGES = 'PACKAGES',
-  CONTRIBUTORS = 'CONTRIBUTORS',
 }

src/sketchObjects/Edge.ts

@@ -6,7 +6,7 @@ export class Edge {
   y: number;
   r: number;
 
-  constructor(x: number, y: number, r: number) {
+  constructor({ x, y, r }: { x: number; y: number; r: number }) {
     this.x = x;
     this.y = y;
     this.r = r;

src/types.ts

@@ -0,0 +1,11 @@
+export interface SubProject {
+  name: string;
+  path: string;
+  size: number;
+  contents: any;
+}
+
+export interface Coordinates {
+  x: number;
+  y: number;
+}