Implement info message

index.html

@@ -22,7 +22,20 @@
         <textarea id="message-input" placeholder="Bitte gib einen Text ein ..." />
         <button type="button" id="message-confirm">Weiter</button>
       </div>
+      <div id="info-message">
+        <h2 id="info-message-headline">Test</h2>
+        <div id="info-message-contents">Test</div>
+        <div id="info-message-close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <path
+              fill="#9CA1A6"
+              d="M56.5 47.5L78.9 25c1.2-1.2 1.2-3.1 0-4.2-1.2-1.2-3.1-1.2-4.2 0L52.3 43.3 29.8 20.8c-1.2-1.2-3.1-1.2-4.2 0-1.2 1.2-1.2 3.1 0 4.2L48 47.5 25.6 70c-1.2 1.2-1.2 3.1 0 4.2.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9l22.5-22.5 22.5 22.5c.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9c1.2-1.2 1.2-3.1 0-4.2L56.5 47.5z"
+            />
+          </svg>
         </div>
+      </div>
+    </div>
+    <div id="backdrop"></div>
     <script src="./main.ts"></script>
   </body>
 </html>

main.ts

@@ -5,6 +5,7 @@ import { OverviewScene } from './src/scenes/OverviewScene';
 import { Scenes } from './src/scenes/scenes';
 import store from './src/store';
 import { Companion, CompanionState } from './src/ui/companion';
+import { InfoMessage } from './src/ui/info';
 
 const sketch = (s: p5) => {
   // Scenes
@@ -16,6 +17,7 @@ const sketch = (s: p5) => {
     s.noCursor();
 
     new Companion();
+    new InfoMessage();
 
     overviewScene = new OverviewScene();
     detailScene = new DetailScene();
@@ -32,9 +34,10 @@ const sketch = (s: p5) => {
   };
 
   s.mousePressed = () => {
-    const { currentScene, companionState } = store.getState();
+    const { currentScene, companionState, infoMessageShown } = store.getState();
 
     if (companionState === CompanionState.ACTIVE) return;
+    if (infoMessageShown) return;
 
     if (currentScene === Scenes.OVERVIEW) {
       overviewScene.onSceneClick();

src/store.ts

@@ -5,10 +5,14 @@ import { CompanionMessage, CompanionState } from './ui/companion';
 import project from '../metadata/project.json';
 import { getSubproject } from './helpers';
 import { SubProject } from './types';
+import { InfoMessageType } from './ui/info';
 
 export interface State {
   currentScene: Scenes;
   companionState: CompanionState;
+  infoMessageShown: boolean;
+  infoMessages: InfoMessageType[];
+  addInfoMessage: (newMessage: InfoMessageType) => void;
   userMessages: CompanionMessage[];
   addUserMessage: (newMessage: CompanionMessage) => void;
   currContributors: any;
@@ -21,6 +25,10 @@ const store = create<State>(
   devtools((set) => ({
     currentScene: Scenes.OVERVIEW,
     companionState: CompanionState.IDLE,
+    infoMessageShown: false,
+    infoMessages: [],
+    addInfoMessage: (newMessage) =>
+      set((state) => ({ infoMessages: [...state.infoMessages, newMessage] })),
     userMessages: [],
     addUserMessage: (newMessage) =>
       set((state) => ({ userMessages: [...state.userMessages, newMessage] })),

src/ui/info.ts

@@ -0,0 +1,62 @@
+import store from '../store';
+
+export interface InfoMessageType {
+  headline: string;
+  innerHTML: string;
+}
+
+export class InfoMessage {
+  infoMessage: HTMLElement;
+  infoMessageHeadline: HTMLElement;
+  infoMessageContents: HTMLElement;
+  infoMessageClose: HTMLElement;
+  backdrop: HTMLElement;
+
+  constructor() {
+    this.infoMessage = document.getElementById('info-message');
+    this.infoMessageHeadline = document.getElementById('info-message-headline');
+    this.infoMessageContents = document.getElementById('info-message-contents');
+    this.infoMessageClose = document.getElementById('info-message-close');
+    this.backdrop = document.getElementById('backdrop');
+
+    this.backdrop.addEventListener('click', this.onBackdropClick);
+    this.infoMessageClose.addEventListener('click', this.onCloseClick);
+
+    store.subscribe((state, prevState) => {
+      if (state.infoMessageShown) {
+        this.show();
+      } else {
+        this.hide();
+      }
+
+      if (state.infoMessages.length > prevState.infoMessages.length) {
+        const newMessage = state.infoMessages[state.infoMessages.length - 1];
+        this.setContents(newMessage.headline, newMessage.innerHTML);
+        store.setState({ infoMessageShown: true });
+      }
+    });
+  }
+
+  private setContents(headline: string, innerHTML: string) {
+    this.infoMessageHeadline.innerText = headline;
+    this.infoMessageContents.innerHTML = innerHTML;
+  }
+
+  private show() {
+    this.infoMessage.style.display = 'block';
+    this.backdrop.style.display = 'block';
+  }
+
+  private hide() {
+    this.infoMessage.style.display = 'none';
+    this.backdrop.style.display = 'none';
+  }
+
+  private onBackdropClick() {
+    store.setState({ infoMessageShown: false });
+  }
+
+  private onCloseClick() {
+    store.setState({ infoMessageShown: false });
+  }
+}

styles.scss

@@ -142,4 +142,48 @@ button {
       border-left: 14px solid white;
     }
   }
+
+  #info-message {
+    display: none;
+    position: fixed;
+    z-index: 10;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 2.5rem 4rem;
+    border-radius: 15px;
+    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+
+    #info-message-headline {
+      margin: 0;
+      padding-bottom: 1rem;
+      text-align: center;
+    }
+
+    #info-message-close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      height: 25px;
+      width: 25px;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+#backdrop {
+  display: none;
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
 }