From d471600c0f84742b1c4796ce8b6ffdc37c8642e2 Mon Sep 17 00:00:00 2001
From: Dennis Schoepf <me@dnsc.io>
Date: Tue, 20 Jul 2021 21:17:26 +0200
Subject: [PATCH] Implement message styling and basic display of text

---
 index.html          |  5 ++++
 main.ts             |  6 +++--
 src/ui/companion.ts | 25 ++++++++++++++++--
 styles.scss         | 64 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1fb60e5..e724a81 100644
--- a/index.html
+++ b/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>
diff --git a/main.ts b/main.ts
index 8f5eaa4..99556d0 100644
--- a/main.ts
+++ b/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();
diff --git a/src/ui/companion.ts b/src/ui/companion.ts
index c8010fd..0188e98 100644
--- a/src/ui/companion.ts
+++ b/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');
diff --git a/styles.scss b/styles.scss
index 4db5b97..4e75290 100644
--- a/styles.scss
+++ b/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;
+    }
+  }
 }