Fix: too many updates, Feat: more sounds

index.html

@@ -7,6 +7,7 @@
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
     <script src="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
+    <script src="https://unpkg.com/nosleep.js@0.12.0/dist/NoSleep.min.js"></script>
     <script src="js/index.js"></script>
     <script src="js/localState.js"></script>
     <script src="js/remoteState.js"></script>

js/index.js

@@ -50,8 +50,13 @@ function Timer() {
           this.time = Math.floor(
             (Alpine.store("remoteState").interval * 1000 -
               (new Date().getTime() - lastPlayerSwitch)) /
-              1000
+            1000
           );
+          if (this.time == 10) {
+            Alpine.store("audio").playTimeAlmostOver();
+          } else if (this.time == 0) {
+            Alpine.store("audio").playTimeOver();
+          }
         }
       }, 100);
     },
@@ -99,6 +104,16 @@ document.addEventListener("alpine:init", () => {
       this.playSound("sound/ding.mp3");
     },
 
+    playTimeOver() {
+      if (!this.isEnabled || !this.audioPlayer.paused) return;
+      this.playSound("sound/time-over.mp3");
+    },
+
+    playTimeAlmostOver() {
+      if (!this.isEnabled || !this.audioPlayer.paused) return;
+      this.playSound("sound/time-almost-over.mp3");
+    },
+
     playSound(soundFile) {
       if (!this.audioPlayer.paused || !this.isAvailable) {
         return;

js/remoteState.js

@@ -14,13 +14,16 @@ document.addEventListener("alpine:init", () => {
     _lastGameState: null,
     _key: null,
     _iv: null,
+    _noSleep: null,
 
     init() {
+      this._noSleep = new NoSleep();
+
       Alpine.effect(() => {
         if (
           this.connected &&
           Object.keys(this.players).indexOf(Alpine.store("localState").id) ===
-            -1
+          -1
         ) {
           this._updatePlayers({
             [Alpine.store("localState").id]: Alpine.store("localState").name,
@@ -45,7 +48,7 @@ document.addEventListener("alpine:init", () => {
         if (
           Alpine.store("localState").nextPlayer == null ||
           Alpine.store("localState").nextPlayer ==
-            Alpine.store("localState").id ||
+          Alpine.store("localState").id ||
           !Object.keys(this.players).includes(
             Alpine.store("localState").nextPlayer
           )
@@ -53,8 +56,8 @@ document.addEventListener("alpine:init", () => {
           const players = Object.keys(this.players).sort();
           const nextPlayer =
             players[
-              (players.indexOf(Alpine.store("localState").id) + 1) %
-                players.length
+            (players.indexOf(Alpine.store("localState").id) + 1) %
+            players.length
             ];
           Alpine.store("localState").nextPlayer = nextPlayer;
         }
@@ -133,6 +136,7 @@ document.addEventListener("alpine:init", () => {
           if (!that.connected) {
             that.connected = true;
           }
+          console.log("Received game state:", data);
           that._lastGameState = data;
           that.players = data.players;
           that.interval = data.interval;
@@ -152,6 +156,7 @@ document.addEventListener("alpine:init", () => {
     },
 
     giveTurnToNextPlayer() {
+      this._noSleep.enable();
       this._updateCurrentPlayer(Alpine.store("localState").nextPlayer);
     },
 
@@ -171,6 +176,9 @@ document.addEventListener("alpine:init", () => {
     },
 
     clear() {
+      if (!this.interval) {
+        this.interval = 30;
+      }
       this._updatePlayers({
         [Alpine.store("localState").id]: Alpine.store("localState").name,
       });
@@ -178,13 +186,12 @@ document.addEventListener("alpine:init", () => {
     },
 
     updateInterval(interval) {
+      this.interval = interval;
       this._updateGameState(this.players, interval);
     },
 
     _updatePlayers(players) {
-      if (!this.interval) {
-        this.interval = 30;
-      }
+      this.players = players;
       this._updateGameState(players, this.interval);
     },
 
@@ -201,6 +208,7 @@ document.addEventListener("alpine:init", () => {
       )
         return;
 
+      this._lastGameState = newGameState;
       console.log("Updating game state:", newGameState);
       this._client.publish(
         this._gameStateTopic,