Implement edge highlighting and finished state

src/scenes/DetailScene.ts

@@ -50,6 +50,10 @@ export class DetailScene {
       this.revealableObjects.every((revObj) => revObj.wasInteractedWith) &&
       !(store.getState().companionState === CompanionState.ACTIVE)
     ) {
+      store.setState((state) => ({
+        finishedSubProjects: [...state.finishedSubProjects, state.currentSubproject],
+      }));
+
       store.getState().addUserMessage({
         text: "Yaay! You've found all of the important parts of this part of the repository. You will be returned to the subproject overview now. Pick the next subproject you want to take a look at there.",
         inputWanted: false,

src/scenes/OverviewScene.ts

@@ -6,9 +6,12 @@ import store from '../store';
 import { generateEdges } from '../helpers';
 import { Scenes } from './scenes';
 import projectMetadata from '../../metadata/project.json';
+import { playerHead$ } from '../area';
+import { Area } from '../types';
 
 export class OverviewScene {
   player: Player;
+  playerHead: Area;
   edges: Edge[];
 
   constructor() {
@@ -29,12 +32,18 @@ export class OverviewScene {
       const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
       if (dist < edge.r) {
         store.getState().setProjectMetadata(edge.name);
-        store.setState({ currentScene: Scenes.DETAIL });
+        store.setState({ currentSubproject: edge.name, currentScene: Scenes.DETAIL });
       }
     });
   }
 
   private drawLocations() {
-    this.edges.forEach((edgeShape) => edgeShape.draw());
+    this.edges.forEach((edgeShape) => {
+      if (store.getState().finishedSubProjects.some((fsp) => fsp === edgeShape.name)) {
+        edgeShape.finished = true;
+      }
+
+      edgeShape.draw();
+    });
   }
 }

src/sketchObjects/Edge.ts

@@ -1,4 +1,5 @@
 import { mp5 } from '../../main';
+import { areasColliding, playerHead$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Edge {
@@ -7,18 +8,58 @@ export class Edge {
   r: number;
   name: string;
 
+  currentSize: number;
+  maxSize: number;
+  isHovered: boolean;
+  hoverColor: any;
+
+  finished: boolean;
+
   constructor({ x, y, r, name }: { x: number; y: number; r: number; name: string }) {
     this.x = x;
     this.y = y;
     this.r = r;
     this.name = name;
+    this.maxSize = r * 2 + 20;
+    this.currentSize = r * 2;
+    this.hoverColor = mp5.color(colors.red);
+    this.hoverColor.setAlpha(200);
+
+    playerHead$.subscribe((playerHead) => {
+      this.isHovered = areasColliding(playerHead, { x: this.x, y: this.y, w: this.r * 2 });
+    });
   }
 
   draw() {
-    mp5.fill(mp5.color(colors.grey));
-    mp5.ellipse(this.x, this.y, this.r * 2);
-    mp5.textSize(20);
-    mp5.fill(0);
-    mp5.text(this.name, this.x, this.y);
+    if (this.finished) {
+      mp5.fill(mp5.color(colors.greyLight));
+      mp5.ellipse(this.x, this.y, this.r * 2);
+      mp5.textSize(20);
+      mp5.fill(mp5.color(colors.grey));
+      mp5.text(`packages/${this.name}`, this.x - this.r / 2, this.y);
+    } else {
+      mp5.fill(mp5.color(colors.grey));
+
+      if (this.isHovered) {
+        mp5.fill(mp5.color(this.hoverColor));
+
+        if (this.currentSize < this.maxSize) {
+          this.currentSize++;
+        } else {
+          this.currentSize = this.maxSize;
+        }
+      } else {
+        if (this.currentSize > this.r * 2) {
+          this.currentSize--;
+        } else {
+          this.currentSize = this.r * 2;
+        }
+      }
+
+      mp5.ellipse(this.x, this.y, this.currentSize);
+      mp5.textSize(20);
+      mp5.fill(mp5.color(colors.black));
+      mp5.text(`packages/${this.name}`, this.x - this.r / 2, this.y);
+    }
   }
 }

src/sketchObjects/Revealable.ts

@@ -122,6 +122,8 @@ export class Revealable {
       store.getState().addInfoMessage({
         headline: this.name,
         innerHTML: this.contents,
+        imgUrl: this.imageUrl,
+        url: this.url,
       });
     }
   }

src/store.ts

@@ -6,9 +6,11 @@ import project from '../metadata/project.json';
 import { InfoMessageType } from './ui/info';
 import { RevealableInterface, RevealableTypes } from './sketchObjects/Revealable';
 import { getRevealablesforSubproject } from './helpers';
+import { SubProject } from './types';
 
 export interface State {
   currentScene: Scenes;
+  currentSubproject?: string;
   companionState: CompanionState;
   infoMessageShown: boolean;
   infoMessages: InfoMessageType[];
@@ -16,12 +18,14 @@ export interface State {
   userMessages: CompanionMessage[];
   addUserMessage: (newMessage: CompanionMessage) => void;
   revealables: RevealableInterface[];
+  finishedSubProjects: string[];
   setProjectMetadata: (projectName: string) => void;
 }
 
 const store = create<State>(
   devtools((set) => ({
     currentScene: Scenes.OVERVIEW,
+    currentSubproject: null,
     companionState: CompanionState.IDLE,
     infoMessageShown: false,
     infoMessages: [],
@@ -33,6 +37,7 @@ const store = create<State>(
         userMessages: [...state.userMessages, newMessage],
       })),
     revealables: [],
+    finishedSubProjects: [],
     setProjectMetadata: (projectName) =>
       set((state) => ({
         ...state,

src/ui/info.ts

@@ -3,6 +3,8 @@ import store from '../store';
 export interface InfoMessageType {
   headline: string;
   innerHTML: string;
+  imgUrl?: string;
+  url?: string;
 }
 
 export class InfoMessage {
@@ -10,6 +12,8 @@ export class InfoMessage {
   infoMessageHeadline: HTMLElement;
   infoMessageContents: HTMLElement;
   infoMessageClose: HTMLElement;
+  infoMessageImgRef: HTMLImageElement;
+  infoMessageLinkRef: HTMLAnchorElement;
   backdrop: HTMLElement;
 
   constructor() {
@@ -17,6 +21,8 @@ export class InfoMessage {
     this.infoMessageHeadline = document.getElementById('info-message-headline');
     this.infoMessageContents = document.getElementById('info-message-contents');
     this.infoMessageClose = document.getElementById('info-message-close');
+    this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
+    this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
     this.backdrop = document.getElementById('backdrop');
 
     this.backdrop.addEventListener('click', this.onBackdropClick);
@@ -32,6 +38,19 @@ export class InfoMessage {
       if (state.infoMessages.length > prevState.infoMessages.length) {
         const newMessage = state.infoMessages[state.infoMessages.length - 1];
         this.setContents(newMessage.headline, newMessage.innerHTML);
+
+        if (newMessage.imgUrl) {
+          this.setImg(newMessage.imgUrl);
+        } else {
+          this.infoMessageImgRef.style.display = 'none';
+        }
+
+        if (newMessage.url) {
+          this.setLink(newMessage.url);
+        } else {
+          this.infoMessageLinkRef.style.display = 'none';
+        }
+
         store.setState({ infoMessageShown: true });
       }
     });
@@ -42,6 +61,16 @@ export class InfoMessage {
     this.infoMessageContents.innerHTML = innerHTML;
   }
 
+  private setImg(imgUrl: string) {
+    this.infoMessageImgRef.src = imgUrl;
+    this.infoMessageImgRef.style.display = 'block';
+  }
+
+  private setLink(url: string) {
+    this.infoMessageLinkRef.href = url;
+    this.infoMessageLinkRef.style.display = 'block';
+  }
+
   private show() {
     this.infoMessage.style.display = 'block';
     this.backdrop.style.display = 'block';