Implement await indicator and message display logic

index.html

@@ -11,11 +11,14 @@
         <svg xmlns="http://www.w3.org/2000/svg" id="companion-shape" viewBox="0 0 80 80">
           <polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>
         </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" id="companion-await-indicator" viewBox="0 0 80 80">
+          <polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>
+        </svg>
         <div id="companion-eye"><div id="companion-pupil"></div></div>
         <div id="companion-mouth"></div>
       </div>
       <div id="message">
-        <div id="message-text">Test</div>
+        <div id="message-text"></div>
         <textarea id="message-input" placeholder="Bitte gib einen Text ein ..." />
         <button type="button" id="message-confirm">Weiter</button>
       </div>

src/scenes/OverviewScene.ts

@@ -35,12 +35,6 @@ export class OverviewScene {
         store.setState({ currentScene: edge.scene });
       }
     });
-
-    store.getState().addUserMessage({
-      text: `Test Message ${Math.random()}`,
-      inputWanted: false,
-      timestamp: Date.now(),
-    });
   }
 
   private drawLocations() {

src/scenes/scenes.ts

@@ -1,4 +1,6 @@
 export enum Scenes {
   OVERVIEW = 'OVERVIEW',
   LEGACY = 'LEGACY',
+  PACKAGES = 'PACKAGES',
+  CONTRIBUTORS = 'CONTRIBUTORS',
 }

src/ui/companion.ts

@@ -34,6 +34,8 @@ export class Companion {
     this.ref.addEventListener('mouseover', () => this.handleMouseEnter());
     this.ref.addEventListener('mouseleave', () => this.handleMouseLeave());
 
+    this.messageButtonRef.addEventListener('click', () => this.confirmMessage());
+
     this.pupilFollowCursor();
 
     store.subscribe(
@@ -41,12 +43,16 @@ export class Companion {
         if (companionState === CompanionState.ACTIVE) {
           this.showActiveShape();
           this.scaleUpCompanion();
+          this.stopAwaitAnimation();
+          this.showMessage(this.message);
         } else if (companionState === CompanionState.IDLE) {
           this.scaleDownCompanion();
           this.showIdleShape();
+          this.stopAwaitAnimation();
         } else if (companionState === CompanionState.AWAIT) {
           this.playAwaitAnimation();
         } else if (companionState === CompanionState.SUCCESS) {
+          this.stopAwaitAnimation();
           this.playSuccessAnimation();
           this.scaleDownCompanion();
           this.showIdleShape();
@@ -59,7 +65,9 @@ export class Companion {
       (messages: CompanionMessage[], prevMessages: CompanionMessage[]) => {
         if (prevMessages.length !== messages.length) {
           const newMessage = messages[messages.length - 1];
-          this.showMessage(newMessage);
+          this.message = newMessage;
+
+          store.setState({ companionState: CompanionState.AWAIT });
         }
       },
       (state) => state.userMessages
@@ -68,18 +76,28 @@ export class Companion {
 
   showMessage(message: CompanionMessage) {
     this.messageTextRef.innerText = message.text;
+    this.messageRef.style.display = 'flex';
 
     if (message.inputWanted) {
       this.messageInputRef.style.display = 'block';
-
-      // TODO: Get text from textarea and log it on confirm, hide button after click on confirm as well
     } else {
       this.messageInputRef.style.display = 'none';
-
-      // TODO: Hide message on confirm click, log time looked at message
     }
   }
 
+  confirmMessage() {
+    console.log(this.message);
+
+    if (this.message.inputWanted) {
+      // Get text from textarea
+      // Send via API
+    }
+
+    // Hide Message
+    store.setState({ companionState: CompanionState.IDLE });
+    this.messageRef.style.display = 'none';
+  }
+
   showActiveShape() {
     const mouth = document.getElementById('companion-mouth');
     mouth.style.opacity = '100%';
@@ -130,7 +148,28 @@ export class Companion {
 
   playSuccessAnimation() {}
 
-  playAwaitAnimation() {}
+  playAwaitAnimation() {
+    document.getElementById('companion-await-indicator').style.display = 'inline';
+    anime({
+      targets: '#companion-await-indicator',
+      keyframes: [
+        { scale: 4, opacity: 0, rotate: '45deg', duration: 900 },
+        { scale: 5, duration: 200 },
+      ],
+      easing: 'easeOutQuad',
+      duration: 900,
+      loop: true,
+    });
+  }
+
+  stopAwaitAnimation() {
+    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() {
     document.addEventListener('mousemove', (e) => {

styles.scss

@@ -45,6 +45,13 @@ button {
       width: 40px;
     }
 
+    #companion-await-indicator {
+      height: 40px;
+      width: 40px;
+      position: absolute;
+      right: 0;
+    }
+
     #companion-mouth {
       position: absolute;
       z-index: 2;
@@ -81,6 +88,7 @@ button {
   }
 
   #message {
+    display: none;
     position: absolute;
     right: 60px;
     bottom: 50px;
@@ -89,7 +97,6 @@ button {
     border-radius: 10px;
     background-color: white;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-    display: flex;
     flex-direction: column;
     min-width: 70%;