Implement message styling and basic display of text

index.html

@@ -14,6 +14,11 @@
         <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>
+        <textarea id="message-input" placeholder="Bitte gib einen Text ein ..." />
+        <button type="button" id="message-confirm">Weiter</button>
+      </div>
     </div>
     <script src="./main.ts"></script>
   </body>

main.ts

@@ -4,7 +4,7 @@ import { LegacyScene } from './src/scenes/LegacyScene';
 import { OverviewScene } from './src/scenes/OverviewScene';
 import { Scenes } from './src/scenes/scenes';
 import store from './src/store';
-import { Companion } from './src/ui/companion';
+import { Companion, CompanionState } from './src/ui/companion';
 
 const sketch = (s: p5) => {
   // Scenes
@@ -32,7 +32,9 @@ const sketch = (s: p5) => {
   };
 
   s.mousePressed = () => {
-    const { currentScene } = store.getState();
+    const { currentScene, companionState } = store.getState();
+
+    if (companionState === CompanionState.ACTIVE) return;
 
     if (currentScene === Scenes.OVERVIEW) {
       overviewScene.onSceneClick();

src/ui/companion.ts

@@ -16,11 +16,20 @@ export interface CompanionMessage {
 
 export class Companion {
   ref: HTMLElement;
+  messageRef: HTMLElement;
+  messageTextRef: HTMLElement;
+  messageInputRef: HTMLElement;
+  messageButtonRef: HTMLElement;
   hoverAnimation: any;
   message: CompanionMessage;
 
   constructor() {
     this.ref = document.getElementById('companion');
+    this.messageRef = document.getElementById('message');
+    this.messageTextRef = document.getElementById('message-text');
+    this.messageInputRef = document.getElementById('message-input');
+    this.messageButtonRef = document.getElementById('message-confirm');
+
     this.ref.addEventListener('click', () => this.handleClick());
     this.ref.addEventListener('mouseover', () => this.handleMouseEnter());
     this.ref.addEventListener('mouseleave', () => this.handleMouseLeave());
@@ -50,14 +59,26 @@ export class Companion {
       (messages: CompanionMessage[], prevMessages: CompanionMessage[]) => {
         if (prevMessages.length !== messages.length) {
           const newMessage = messages[messages.length - 1];
-          console.log(newMessage);
+          this.showMessage(newMessage);
         }
       },
       (state) => state.userMessages
     );
   }
 
-  showMessage() {}
+  showMessage(message: CompanionMessage) {
+    this.messageTextRef.innerText = message.text;
+
+    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
+    }
+  }
 
   showActiveShape() {
     const mouth = document.getElementById('companion-mouth');

styles.scss

@@ -5,6 +5,9 @@ body {
   height: 100%;
   overflow: hidden;
   position: relative;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 main {
@@ -17,6 +20,11 @@ main {
   box-sizing: border-box;
 }
 
+button {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 .ui {
   position: absolute;
   bottom: 40px;
@@ -71,4 +79,60 @@ main {
       }
     }
   }
+
+  #message {
+    position: absolute;
+    right: 60px;
+    bottom: 50px;
+    margin-right: 100px;
+    padding: 25px;
+    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%;
+
+    #message-text {
+      margin-bottom: 25px;
+      font-size: 18px;
+    }
+
+    #message-input {
+      margin-bottom: 25px;
+      font-size: 16px;
+      padding: 6px 10px;
+      border-radius: 5px;
+      border: 2px solid #b0b7bf;
+      min-height: 100px;
+    }
+
+    #message-confirm {
+      align-self: flex-end;
+      padding: 6px 15px;
+      background-color: transparent;
+      border: 2px solid black;
+      border-radius: 5px;
+      font-weight: bold;
+      max-width: 180px;
+
+      &:hover {
+        cursor: pointer;
+        background-color: black;
+        color: white;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -10px;
+      bottom: 10px;
+      width: 0;
+      height: 0;
+      border-top: 14px solid transparent;
+      border-bottom: 14px solid transparent;
+      border-left: 14px solid white;
+    }
+  }
 }