Implement finish message for detail screen

src/scenes/DetailScene.ts

@@ -6,6 +6,8 @@ import { Player } from '../sketchObjects/Player';
 import { Revealable, RevealableInterface } from '../sketchObjects/Revealable';
 import store from '../store';
 import { Coordinates } from '../types';
+import { CompanionState } from '../ui/companion';
+import { Scenes } from './scenes';
 
 export class DetailScene {
   player: Player;
@@ -29,8 +31,6 @@ export class DetailScene {
             })
         );
       }
-
-      // TODO: Check if everything was found, if so, get back to overview screen
     });
   }
 
@@ -45,6 +45,18 @@ export class DetailScene {
     });
 
     this.player.move();
+
+    if (
+      this.revealableObjects.every((revObj) => revObj.wasInteractedWith) &&
+      !(store.getState().companionState === CompanionState.ACTIVE)
+    ) {
+      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 }),
+        showIdle: false,
+      });
+    }
   }
 
   onSceneClick() {

src/sketchObjects/Revealable.ts

@@ -117,8 +117,6 @@ export class Revealable {
 
   public onClick() {
     if (this.isHovered && !this.wasInteractedWith) {
-      console.log('Clicked on Revealable');
-
       this.wasInteractedWith = true;
 
       store.getState().addInfoMessage({
@@ -150,8 +148,6 @@ export class Revealable {
 
     let color: any = mp5.color(colors.red);
 
-    console.log(this.pulseCurrentSize, this.pulseCountUp);
-
     if (this.pulseCountUp) {
       this.pulseCurrentSize += 1;
       this.pulseOpacity = this.pulseOpacity > 255 ? 255 : this.pulseOpacity - 6;

src/store.ts

@@ -29,7 +29,9 @@ const store = create<State>(
       set((state) => ({ ...state, infoMessages: [...state.infoMessages, newMessage] })),
     userMessages: [],
     addUserMessage: (newMessage) =>
-      set((state) => ({ ...state, userMessages: [...state.userMessages, newMessage] })),
+      set((state) => ({
+        userMessages: [...state.userMessages, newMessage],
+      })),
     revealables: [],
     setProjectMetadata: (projectName) =>
       set((state) => ({

src/ui/companion.ts

@@ -12,6 +12,8 @@ export interface CompanionMessage {
   text: string;
   inputWanted: boolean;
   timestamp?: number;
+  onNext?: () => void;
+  showIdle?: boolean;
 }
 
 export class Companion {
@@ -41,9 +43,9 @@ export class Companion {
     store.subscribe(
       (companionState) => {
         if (companionState === CompanionState.ACTIVE) {
+          this.stopAwaitAnimation();
           this.showActiveShape();
           this.scaleUpCompanion();
-          this.stopAwaitAnimation();
           this.showMessage(this.message);
         } else if (companionState === CompanionState.IDLE) {
           this.scaleDownCompanion();
@@ -61,17 +63,14 @@ export class Companion {
       (state) => state.companionState
     );
 
-    store.subscribe(
+    store.subscribe((state, prevState) => {
-      (messages: CompanionMessage[], prevMessages: CompanionMessage[]) => {
+      if (prevState.userMessages.length < state.userMessages.length) {
-        if (prevMessages.length !== messages.length) {
+        const newMessage = state.userMessages[state.userMessages.length - 1];
-          const newMessage = messages[messages.length - 1];
         this.message = newMessage;
 
-          store.setState({ companionState: CompanionState.AWAIT });
+        store.setState({ companionState: CompanionState.ACTIVE });
       }
-      },
+    });
-      (state) => state.userMessages
-    );
   }
 
   showMessage(message: CompanionMessage) {
@@ -86,16 +85,18 @@ export class Companion {
   }
 
   confirmMessage() {
-    console.log(this.message);
-
     if (this.message.inputWanted) {
       // TODO: Get text from textarea
       // TODO: Send via API
     }
 
     // Hide Message
-    store.setState({ companionState: CompanionState.IDLE });
     this.messageRef.style.display = 'none';
+    store.setState({ companionState: CompanionState.IDLE });
+
+    if (this.message.onNext) {
+      this.message.onNext();
+    }
   }
 
   showActiveShape() {
@@ -163,12 +164,12 @@ export class Companion {
   }
 
   stopAwaitAnimation() {
+    anime.remove('#companion-await-indicator');
+
     const indicator = document.getElementById('companion-await-indicator');
     indicator.style.display = 'none';
     indicator.style.opacity = '1';
     indicator.style.transform = 'scale(1) rotate(0)';
-
-    anime.remove('#companion-await-indicator');
   }
 
   pupilFollowCursor() {