Implement info message

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 });
+  }
+}