From 9790361f2474657b849de2f9d24c64b753cd8a75 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Wed, 21 Jul 2021 15:27:04 +0200 Subject: [PATCH] Generate overview based on subproject size --- main.ts | 14 ++--- metadata/project.json | 16 +++++ src/api.ts | 1 - src/helpers.ts | 63 +++++++++++++++++++ src/scenes/{LegacyScene.ts => DetailScene.ts} | 6 +- src/scenes/OverviewScene.ts | 16 ++--- src/scenes/scenes.ts | 4 +- src/sketchObjects/Edge.ts | 2 +- src/types.ts | 11 ++++ 9 files changed, 109 insertions(+), 24 deletions(-) create mode 100644 metadata/project.json delete mode 100644 src/api.ts create mode 100644 src/helpers.ts rename src/scenes/{LegacyScene.ts => DetailScene.ts} (67%) create mode 100644 src/types.ts diff --git a/main.ts b/main.ts index 99556d0..f3288a4 100644 --- a/main.ts +++ b/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) { - legacyScene.draw(); + } else if (currentScene === Scenes.DETAIL) { + detailScene.draw(); } }; @@ -38,8 +38,8 @@ const sketch = (s: p5) => { if (currentScene === Scenes.OVERVIEW) { overviewScene.onSceneClick(); - } else if (currentScene === Scenes.LEGACY) { - legacyScene.onSceneClick(); + } else if (currentScene === Scenes.DETAIL) { + detailScene.onSceneClick(); } }; }; diff --git a/metadata/project.json b/metadata/project.json new file mode 100644 index 0000000..52cd135 --- /dev/null +++ b/metadata/project.json @@ -0,0 +1,16 @@ +{ + "subprojects": [ + { + "name": "sample", + "path": "packages/sample", + "size": 2450, + "contents": {} + }, + { + "name": "sample", + "path": "packages/sample", + "size": 5600, + "contents": {} + } + ] +} diff --git a/src/api.ts b/src/api.ts deleted file mode 100644 index b786864..0000000 --- a/src/api.ts +++ /dev/null @@ -1 +0,0 @@ -export class Api {} diff --git a/src/helpers.ts b/src/helpers.ts new file mode 100644 index 0000000..df5d00e --- /dev/null +++ b/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, + }) + ); +} diff --git a/src/scenes/LegacyScene.ts b/src/scenes/DetailScene.ts similarity index 67% rename from src/scenes/LegacyScene.ts rename to src/scenes/DetailScene.ts index 9a50b95..7502312 100644 --- a/src/scenes/LegacyScene.ts +++ b/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 }); } } diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index fea6373..17b4fb6 100644 --- a/src/scenes/OverviewScene.ts +++ b/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 = [ - { 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.edges = generateEdges(projectMetadata.subprojects); 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 }); } }); } diff --git a/src/scenes/scenes.ts b/src/scenes/scenes.ts index 5083c73..00dfc32 100644 --- a/src/scenes/scenes.ts +++ b/src/scenes/scenes.ts @@ -1,6 +1,4 @@ export enum Scenes { OVERVIEW = 'OVERVIEW', - LEGACY = 'LEGACY', - PACKAGES = 'PACKAGES', - CONTRIBUTORS = 'CONTRIBUTORS', + DETAIL = 'DETAIL', } diff --git a/src/sketchObjects/Edge.ts b/src/sketchObjects/Edge.ts index 2832f26..933b713 100644 --- a/src/sketchObjects/Edge.ts +++ b/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; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..9e6cd8a --- /dev/null +++ b/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; +}