Set up contributor and detail scene

.htmlnanorc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  minifySvg: false,
+};

metadata/project.json

@@ -4,7 +4,11 @@
       "name": "block",
       "path": "packages/block",
       "size": 2450,
-      "contents": {}
+      "contents": {
+        "legacy": ["Test"],
+        "contributors": ["Test"],
+        "packages": ["Test"]
+      }
     },
     {
       "name": "client",

src/helpers.ts

@@ -64,3 +64,7 @@ export function generateEdges(subprojects: SubProject[]): Edge[] {
       })
   );
 }
+
+export function getSubproject(name: string, projects: SubProject[]): SubProject {
+  return projects.filter((project) => project.name === name)[0];
+}

src/scenes/DetailScene.ts

@@ -1,19 +1,31 @@
 import { mp5 } from '../../main';
+import { colors } from '../constants/colors';
 import { Player } from '../sketchObjects/Player';
 import store from '../store';
 import { Scenes } from './scenes';
 
 export class DetailScene {
   player: Player;
+  contributors: any;
+  legacy: any;
+  packages: any;
 
   constructor() {
     this.player = new Player();
+
+    store.subscribe((state) => {
+      this.contributors = state.currContributors;
+      this.legacy = state.currLegacy;
+      this.packages = state.currPackages;
+    });
   }
 
   draw() {
-    mp5.background(100);
+    mp5.background(mp5.color(colors.greyLighter));
     this.player.follow();
     this.player.move();
+
+    // TODO: Draw what can be found
   }
 
   onSceneClick() {

src/scenes/OverviewScene.ts

@@ -36,6 +36,7 @@ export class OverviewScene {
     this.edges.forEach((edge, i) => {
       const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
       if (dist < edge.r) {
+        store.getState().setDetailScene(edge.name);
         store.setState({ currentScene: Scenes.DETAIL });
       }
     });

src/sketchObjects/Contributor.ts

@@ -0,0 +1,24 @@
+import { mp5 } from '../../main';
+import { colors } from '../constants/colors';
+
+export class Contributor {
+  x: number;
+  y: number;
+  size: number;
+  name: string;
+  profileURL: string;
+  revealed: boolean;
+
+  constructor(x: number, y: number, size: number, name?: string, profileURL?: string) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+  }
+
+  public place() {}
+
+  private draw() {
+    mp5.fill(mp5.color(colors.blueGrey));
+    mp5.ellipse(this.x, this.y, this.size);
+  }
+}

src/store.ts

@@ -2,12 +2,19 @@ import create from 'zustand/vanilla';
 import { devtools } from 'zustand/middleware';
 import { Scenes } from './scenes/scenes';
 import { CompanionMessage, CompanionState } from './ui/companion';
+import project from '../metadata/project.json';
+import { getSubproject } from './helpers';
+import { SubProject } from './types';
 
 export interface State {
   currentScene: Scenes;
   companionState: CompanionState;
   userMessages: CompanionMessage[];
   addUserMessage: (newMessage: CompanionMessage) => void;
+  currContributors: any;
+  currLegacy: any;
+  currPackages: any;
+  setDetailScene: (packageName: string) => void;
 }
 
 const store = create<State>(
@@ -17,6 +24,17 @@ const store = create<State>(
     userMessages: [],
     addUserMessage: (newMessage) =>
       set((state) => ({ userMessages: [...state.userMessages, newMessage] })),
+    currContributors: [],
+    currLegacy: [],
+    currPackages: [],
+    setDetailScene: (packageName) =>
+      set(() => ({
+        currContributors: getSubproject(packageName, project.subprojects as SubProject[]).contents
+          .contributors,
+        currLegacy: getSubproject(packageName, project.subprojects as SubProject[]).contents.legacy,
+        currPackages: getSubproject(packageName, project.subprojects as SubProject[]).contents
+          .packages,
+      })),
   }))
 );
 

src/types.ts

@@ -2,7 +2,11 @@ export interface SubProject {
   name: string;
   path: string;
   size: number;
-  contents: any;
+  contents: {
+    contributors: any[];
+    legacy: any[];
+    packages: any[];
+  };
 }
 
 export interface Coordinates {