refactor: minimise payload size and payloads should be stateful

TFNRP · Aug 1, 2023 · 22aa317 · 22aa317
1 parent 8b6921f
commit 22aa317
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 39 deletions.
diff --git a/client.lua b/client.lua
@@ -17,7 +17,7 @@ RegisterFrameworkCommand('seatbelt', function()
       else
         ActivateSeatbelt()
       end
-      SendNUIMessage({ State = activated })
+      SendNuiMessage('{"t":0,"d":' .. (activated == true and '1' or '0') .. '}')
     end
   end
 end)
@@ -151,7 +151,7 @@ end
 
 function SetWarning(bool)
   if bool ~= showingWarning then
-    SendNUIMessage({ Enabled = bool })
+    SendNuiMessage('{"t":1,"d":' .. (bool == true and '1' or '0') .. '}')
     showingWarning = bool
   end
 end

diff --git a/static/index.js b/static/index.js
@@ -13,46 +13,53 @@ const buckle = [sounds.unbluckle, sounds.buckle];
 $(() => {
   const top = $('#seatbelt').css('top');
   window.addEventListener('message', event => {
-    const ui = $('#ui');
-    ui.stop(true, true);
-    if ('State' in event.data) {
-      const state = +event.data.State;
-      let playing;
-      // If another sound is already playing, play the new sound from the reverse of the elapsed time
-      if ((playing = buckle.find(sound => sound.playing()))) {
-        const seek = buckle[state].duration() - playing.seek();
-        playing.stop();
-        buckle[state].play();
-        if (seek > 0) buckle[state].seek(seek);
-      } else {
-        buckle[state].play();
-      }
-    }
+    const payload = event.data;
 
-    if ('Enabled' in event.data) {
-      sounds.chime.loop(event.data.Enabled);
-      if (event.data.Enabled) {
-        ui.css('display', 'flex');
-        $('#seatbelt').animate(
-          {
-            top,
-            opacity: '1.0',
-          },
-          700,
-        );
+    switch (payload.t) {
+      case 0: {
+        const data = payload.d;
+        let playing;
+        // If another sound is already playing, play the new sound from the reverse of the elapsed time
+        if ((playing = buckle.find(sound => sound.playing()))) {
+          const seek = buckle[data].duration() - playing.seek();
+          playing.stop();
+          buckle[data].play();
+          if (seek > 0) buckle[data].seek(seek);
+        } else {
+          buckle[data].play();
+        }
+        break;
+      }
 
-        if (!sounds.chime.playing()) {
-          sounds.chime.play();
+      case 1: {
+        const ui = $('#ui');
+        ui.stop(true, true);
+        if (payload.d === 1) {
+          ui.css('display', 'flex');
+          $('#seatbelt').animate(
+            {
+              top,
+              opacity: '1.0',
+            },
+            700,
+          );
+
+          if (!sounds.chime.playing()) {
+            sounds.chime.play();
+          }
+          sounds.chime.loop(true);
+        } else {
+          $('#seatbelt').animate(
+            {
+              top: '100vw',
+              opacity: '0.0',
+            },
+            700,
+            () => ui.css('display', 'none'),
+          );
+          sounds.chime.loop(false);
         }
-      } else {
-        $('#seatbelt').animate(
-          {
-            top: '100vw',
-            opacity: '0.0',
-          },
-          700,
-          () => ui.css('display', 'none'),
-        );
+        break;
       }
     }
   });