Implement score

src/scenes/DetailScene.ts

@@ -43,14 +43,12 @@ export class DetailScene {
     }
 
     if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) {
-      console.log('3 seconds without interaction');
       this.wasInteractedWith = true;
       store.getState().addUserMessage({
         inputWanted: false,
         text: 'Trouble knowing what to do? You should try clicking somewhere in order to spawn reveal bubbles. Try this in different parts of the canvas to see what you can find',
       });
-    } else if (mp5.millis() > this.startTime + 6000 && !this.wasHovered && this.wasInteractedWith) {
-      console.log('3 seconds without hovering');
+    } else if (mp5.millis() > this.startTime + 8000 && !this.wasHovered && this.wasInteractedWith) {
       this.wasHovered = true;
       store.getState().addUserMessage({
         inputWanted: false,
@@ -67,6 +65,11 @@ export class DetailScene {
       revObj.draw();
     });
 
+    store.setState({
+      revealablesFinished: this.revealableObjects.filter((revObj) => revObj.wasInteractedWith)
+        .length,
+    });
+
     this.player.move();
 
     if (
@@ -80,7 +83,7 @@ export class DetailScene {
       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,
-        onNext: () => store.setState({ currentScene: Scenes.OVERVIEW }),
+        onNext: () => store.setState({ showScore: false, currentScene: Scenes.OVERVIEW }),
         showIdle: false,
       });
     }

src/scenes/OverviewScene.ts

@@ -31,7 +31,11 @@ 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({ currentSubproject: edge.name, currentScene: Scenes.DETAIL });
+        store.setState({
+          showScore: true,
+          currentSubproject: edge.name,
+          currentScene: Scenes.DETAIL,
+        });
       }
     });
   }

src/store.ts

@@ -22,11 +22,15 @@ export interface State {
   setProjectMetadata: (projectName: string) => void;
   participantAnonymous: boolean;
   finishedGame: boolean;
+  revealablesFinished: number;
+  showScore: boolean;
 }
 
 const store = create<State>(
   devtools((set) => ({
+    showScore: false,
     currentIntroStep: 0,
+    revealablesFinished: 0,
     currentScene: Scenes.OVERVIEW,
     currentSubproject: null,
     participantAnonymous: false,

src/ui/score.ts

@@ -0,0 +1,42 @@
+import store from '../store';
+
+export class Score {
+  showScore: boolean;
+
+  scoreFound: number;
+  scoreTotal: number;
+
+  scoreRef: HTMLElement;
+  scoreFoundRef: HTMLElement;
+  scoreTotalRef: HTMLElement;
+
+  constructor() {
+    this.scoreRef = document.querySelector('#score');
+    this.scoreFoundRef = document.querySelector('#score-found');
+    this.scoreTotalRef = document.querySelector('#score-total');
+
+    this.scoreFound = 0;
+    this.scoreTotal = store.getState().revealables.length;
+
+    this.scoreFoundRef.innerHTML = this.scoreFound.toString();
+    this.scoreTotalRef.innerHTML = this.scoreTotal.toString();
+
+    if (store.getState().showScore) {
+      this.scoreRef.style.display = 'flex';
+    }
+
+    store.subscribe((state) => {
+      if (state.showScore) {
+        this.scoreRef.style.display = 'flex';
+      } else {
+        this.scoreRef.style.display = 'none';
+      }
+
+      this.scoreTotal = state.revealables.length;
+      this.scoreFound = state.revealablesFinished;
+
+      this.scoreFoundRef.innerHTML = this.scoreFound.toString();
+      this.scoreTotalRef.innerHTML = this.scoreTotal.toString();
+    });
+  }
+}