Log events in visualization

src/ui/companion.ts

@@ -1,4 +1,5 @@
 import anime from 'animejs/lib/anime.es';
+import { logger } from '../logger';
 import store from '../store';
 
 export enum CompanionState {
@@ -93,6 +94,11 @@ export class Companion {
     // Hide Message
     this.messageRef.style.display = 'none';
     store.setState({ companionState: CompanionState.IDLE });
+    logger.log({
+      type: 'CC',
+      timestamp: Date.now(),
+      message: 'Close message',
+    });
 
     if (this.message.onNext) {
       this.message.onNext();
@@ -195,6 +201,10 @@ export class Companion {
     }
 
     store.setState({ companionState: newCompanionState });*/
+    logger.log({
+      type: 'CC',
+      timestamp: Date.now(),
+    });
   }
 
   handleMouseEnter() {

src/ui/info.ts

@@ -1,6 +1,9 @@
+import { logger } from '../logger';
+import { RevealableTypes } from '../sketchObjects/Revealable';
 import store from '../store';
 
 export interface InfoMessageType {
+  type: RevealableTypes;
   headline: string;
   innerHTML: string;
   imgUrl?: string;
@@ -8,6 +11,8 @@ export interface InfoMessageType {
 }
 
 export class InfoMessage {
+  type: RevealableTypes;
+  name: string;
   infoMessage: HTMLElement;
   infoMessageHeadline: HTMLElement;
   infoMessageContents: HTMLElement;
@@ -39,6 +44,9 @@ export class InfoMessage {
         const newMessage = state.infoMessages[state.infoMessages.length - 1];
         this.setContents(newMessage.headline, newMessage.innerHTML);
 
+        this.type = newMessage.type;
+        this.name = newMessage.headline;
+
         if (newMessage.imgUrl) {
           this.setImg(newMessage.imgUrl);
         } else {
@@ -72,11 +80,33 @@ export class InfoMessage {
   }
 
   private show() {
+    logger.log({
+      type:
+        this.type === RevealableTypes.CONTRIBUTOR
+          ? 'NS'
+          : this.type === RevealableTypes.LEGACY
+          ? 'LS'
+          : 'PS',
+      timestamp: Date.now(),
+      message: `Showing info message for ${this.name}`,
+    });
+
     this.infoMessage.style.display = 'block';
     this.backdrop.style.display = 'block';
   }
 
   private hide() {
+    logger.log({
+      type:
+        this.type === RevealableTypes.CONTRIBUTOR
+          ? 'NC'
+          : this.type === RevealableTypes.LEGACY
+          ? 'LC'
+          : 'PC',
+      timestamp: Date.now(),
+      message: `Closing info message for ${this.name}`,
+    });
+
     this.infoMessage.style.display = 'none';
     this.backdrop.style.display = 'none';
   }

src/ui/intro.ts

@@ -1,3 +1,4 @@
+import { logger } from '../logger';
 import { Scenes } from '../scenes/scenes';
 import store from '../store';
 
@@ -107,6 +108,11 @@ export class Intro {
         return;
       } else {
         this.errorRef.style.display = 'none';
+
+        store.setState({
+          uid: `${Date.now()}_${name.replace(/[^a-zA-Z ]/g, '').toLowerCase()}`,
+        });
+
         this.sendDemographicData(name, age, background, experience);
       }
     }