Companion message state handling

src/scenes/OverviewScene.ts

@@ -35,6 +35,12 @@ export class OverviewScene {
         store.setState({ currentScene: edge.scene });
       }
     });
+
+    store.getState().addUserMessage({
+      text: `Test Message ${Math.random()}`,
+      inputWanted: false,
+      timestamp: Date.now(),
+    });
   }
 
   private drawLocations() {

src/store.ts

@@ -1,15 +1,23 @@
 import create from 'zustand/vanilla';
+import { devtools } from 'zustand/middleware';
 import { Scenes } from './scenes/scenes';
-import { CompanionState } from './ui/companion';
+import { CompanionMessage, CompanionState } from './ui/companion';
 
 export interface State {
   currentScene: Scenes;
   companionState: CompanionState;
+  userMessages: CompanionMessage[];
+  addUserMessage: (newMessage: CompanionMessage) => void;
 }
 
-const store = create<State>(() => ({
+const store = create<State>(
-  currentScene: Scenes.OVERVIEW,
+  devtools((set) => ({
-  companionState: CompanionState.IDLE,
+    currentScene: Scenes.OVERVIEW,
-}));
+    companionState: CompanionState.IDLE,
+    userMessages: [],
+    addUserMessage: (newMessage) =>
+      set((state) => ({ userMessages: [...state.userMessages, newMessage] })),
+  }))
+);
 
 export default store;

src/ui/companion.ts

@@ -1,5 +1,4 @@
 import anime from 'animejs/lib/anime.es';
-import { reject } from 'core-js/fn/promise';
 import store from '../store';
 
 export enum CompanionState {
@@ -9,9 +8,16 @@ export enum CompanionState {
   SUCCESS = 'SUCCESS',
 }
 
+export interface CompanionMessage {
+  text: string;
+  inputWanted: boolean;
+  timestamp: number;
+}
+
 export class Companion {
   ref: HTMLElement;
   hoverAnimation: any;
+  message: CompanionMessage;
 
   constructor() {
     this.ref = document.getElementById('companion');
@@ -19,12 +25,13 @@ export class Companion {
     this.ref.addEventListener('mouseover', () => this.handleMouseEnter());
     this.ref.addEventListener('mouseleave', () => this.handleMouseLeave());
 
+    this.pupilFollowCursor();
+
     store.subscribe(
       (companionState) => {
         if (companionState === CompanionState.ACTIVE) {
           this.showActiveShape();
           this.scaleUpCompanion();
-          this.pupilFollowCursor();
         } else if (companionState === CompanionState.IDLE) {
           this.scaleDownCompanion();
           this.showIdleShape();
@@ -38,8 +45,20 @@ export class Companion {
       },
       (state) => state.companionState
     );
+
+    store.subscribe(
+      (messages: CompanionMessage[], prevMessages: CompanionMessage[]) => {
+        if (prevMessages.length !== messages.length) {
+          const newMessage = messages[messages.length - 1];
+          console.log(newMessage);
+        }
+      },
+      (state) => state.userMessages
+    );
   }
 
+  showMessage() {}
+
   showActiveShape() {
     const mouth = document.getElementById('companion-mouth');
     mouth.style.opacity = '100%';
@@ -99,7 +118,7 @@ export class Companion {
 
       pupil.style.transform = `translate(${-((pupDim.x - e.pageX) * 0.005)}px, ${-(
         (pupDim.y - e.pageY) *
-        0.015
+        0.012
       )}px)`;
     });
   }