diff --git a/index.html b/index.html index 85ad727..2dcb2c6 100644 --- a/index.html +++ b/index.html @@ -226,7 +226,7 @@
Have fun! 🤟
Thanks for going through this visualization. It would be great if you could answer a set of questions now: diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index ed57536..cb02a9f 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -6,23 +6,57 @@ import store from '../store'; import { generateEdges } from '../helpers'; import { Scenes } from './scenes'; import projectMetadata from '../../metadata/project.json'; -import { Area } from '../types'; +import { Area, Coordinates } from '../types'; import { logger } from '../logger'; export class OverviewScene { player: Player; playerHead: Area; + links: Array<{ edgePosition: Coordinates; linkPositions: Coordinates[] }>; edges: Edge[]; sfLogged: boolean; constructor() { this.edges = generateEdges(projectMetadata.subprojects); this.player = new Player(); + + this.links = this.edges + .map((edge) => { + // 1. Get links from project metadata + const links = projectMetadata.subprojects + .filter((subproject) => subproject.name === edge.name)[0] + .links.map((link) => link.split('/')[1]); + + if (links.length === 0) return; + + // 2. Get position of linked packages for each edge + const linkPositions = links + .map((link) => { + const linkedEdge = this.edges.filter((edge) => link === edge.name)[0]; + if (!linkedEdge) return; + return { + x: linkedEdge.x, + y: linkedEdge.y, + }; + }) + .filter((linkedPosition) => !!linkedPosition); + + return { + edgePosition: { + x: edge.x, + y: edge.y, + }, + linkPositions, + }; + }) + .filter((link) => !!link); } public draw() { mp5.background(mp5.color(colors.greyLighter)); + this.drawConnections(); + this.player.follow(); this.drawLocations(); this.player.move(); @@ -54,6 +88,16 @@ export class OverviewScene { }); } + private drawConnections() { + this.links.forEach((link) => { + link.linkPositions.forEach((linkPosition) => { + mp5.stroke(mp5.color(colors.greyLight)); + mp5.strokeWeight(4); + mp5.line(link.edgePosition.x, link.edgePosition.y, linkPosition.x, linkPosition.y); + }); + }); + } + private drawLocations() { if (store.getState().finishedSubProjects.length === 3 && !store.getState().finishedGame) { store.setState({ finishedGame: true });