Ticks then tick again!

1 files changed, 43 insertions, 7 deletions

diff --git a/webAO/client.ts b/webAO/client.ts
index 54bc760..9b60359 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -145,6 +145,7 @@ fpPromise
     isLowMemory();
     client.loadResources();
   });
+const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
 
 let lastICMessageTime = new Date(0);
 
@@ -2260,7 +2261,7 @@ class Viewport {
     this.tick();
   }
 
-  handleTextTick(charLayers: HTMLImageElement) {
+  async handleTextTick(charLayers: HTMLImageElement) {
     const chatBox = document.getElementById('client_chat');
     const waitingBox = document.getElementById('client_chatwaiting');
     const chatBoxInner = document.getElementById('client_inner_chat');
@@ -2276,7 +2277,36 @@ class Viewport {
     this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
     const characterElement = this.chatmsg.parsed[this.textnow.length - 1]
     if (characterElement) {
-      chatBoxInner.appendChild(this.chatmsg.parsed[this.textnow.length - 1]);
+      const COMMAND_IDENTIFIER = '\\'
+
+      const nextCharacterElement = this.chatmsg.parsed[this.textnow.length]
+      const flash = async () => {
+        const effectlayer = document.getElementById('client_fg');
+        this.playSFX(`${AO_HOST}sounds/general/sfx-realization.opus`, false);
+        effectlayer.style.animation = 'flash 0.4s 1';
+        await delay(400)
+        effectlayer.style.removeProperty('animation')
+      }
+
+      const shake = async () => {
+        const gamewindow = document.getElementById('client_gamewindow');
+        this.playSFX(`${AO_HOST}sounds/general/sfx-stab.opus`, false);
+        gamewindow.style.animation = 'shake 0.2s 1';
+        await delay(200)
+        gamewindow.style.removeProperty('animation')
+      }
+
+      const commands = new Map(Object.entries({
+        's': shake,
+        'f': flash
+      }))
+
+      if (characterElement.innerHTML === COMMAND_IDENTIFIER && commands.has(nextCharacterElement?.innerHTML)) {
+        this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
+        await commands.get(nextCharacterElement.innerHTML)()
+      } else {
+        chatBoxInner.appendChild(this.chatmsg.parsed[this.textnow.length - 1]);
+      }
     }
 
     // scroll to bottom
@@ -2319,9 +2349,11 @@ class Viewport {
 	 *
 	 * XXX: This relies on a global variable `this.chatmsg`!
 	 */
-  tick() {
-    if (this._animating) {
-      this.updater = setTimeout(() => this.tick(), UPDATE_INTERVAL);
+  async tick() {
+    await delay(UPDATE_INTERVAL)
+
+    if (this.textnow === this.chatmsg.content) {
+      return
     }
 
     const gamewindow = document.getElementById('client_gamewindow');
@@ -2385,7 +2417,7 @@ class Viewport {
     if (this.textnow !== this.chatmsg.content && hasNonInterruptingPreAnim) {
       const chatContainerBox = document.getElementById('client_chatcontainer');
       chatContainerBox.style.opacity = '1';
-      this.handleTextTick(charLayers)
+      await this.handleTextTick(charLayers)
      
     }else if (isShoutAndPreanimOver && this.startSecondTickCheck) {
       if (this.chatmsg.startspeaking) {
@@ -2436,9 +2468,10 @@ class Viewport {
           waitingBox.style.opacity = '1';
           this._animating = false;
           clearTimeout(this.updater);
+          return
         }
       } else if (this.textnow !== this.chatmsg.content) {
-        this.handleTextTick(charLayers)
+        await this.handleTextTick(charLayers)
       }
     }
 
@@ -2448,6 +2481,9 @@ class Viewport {
         this.playSFX(`${AO_HOST}sounds/general/${encodeURI(this.chatmsg.sound.toLowerCase())}.opus`, this.chatmsg.looping_sfx);
       }
     }
+    if (this._animating) {
+      this.tick()
+    }
     this.tickTimer += UPDATE_INTERVAL;
   }
 }