Feat: change interval

index.html

@@ -72,6 +72,9 @@
                 <details>
                     <summary>This room</summary>
 
+                    <label for="roomForm_interval">Interval (seconds):</label>
+                    <input id="roomForm_interval" type="number" x-model.throttle.1000ms="$store.remoteState.interval" placeholder="Interval" />
+
                     <p>
                         Other players:
                     <ul>

js/index.js

@@ -23,6 +23,20 @@ function JoinForm() {
 }
 }
 
+function RoomForm() {
+  return {
+    formData: {
+      interval: null,
+    },
+    init() {
+      this.formData.interval = Alpine.store("remoteState").interval;
+    },
+    submitForm() {
+      Alpine.store("remoteState").updateInterval(this.formData.interval);
+    }
+}
+}
+
 function Timer() {
   return {
     time: 0,

js/remoteState.js

@@ -10,6 +10,7 @@ document.addEventListener("alpine:init", () => {
     _client: null,
     _currentPlayerTopic: null,
     _gameStateTopic: null,
+    _lastGameState: null,
 
     init() {
       Alpine.effect(() => {
@@ -52,6 +53,12 @@ document.addEventListener("alpine:init", () => {
           Alpine.store("localState").nextPlayer = nextPlayer;
         }
       });
+
+      Alpine.effect(() => {
+        if (this.connected) {
+          this.updateInterval(this.interval);
+        }
+      });
     },
 
     connect() {
@@ -95,6 +102,7 @@ document.addEventListener("alpine:init", () => {
           if (!that.connected) {
             that.connected = true;
           }
+          that._lastGameState = data;
           that.players = data.players;
           that.interval = data.interval;
         } else if (topic === that._currentPlayerTopic) {
@@ -131,6 +139,10 @@ document.addEventListener("alpine:init", () => {
       this._updateCurrentPlayer(Alpine.store("localState").id);
     },
 
+    updateInterval(interval) {
+      this._updateGameState(this.players, interval);
+    },
+
     _updatePlayers(players) {
       if(!this.interval) {
         this.interval = 30;
@@ -139,13 +151,16 @@ document.addEventListener("alpine:init", () => {
     },
 
     _updateGameState(players, interval) {
+      const newGameState = {
+        version: 1,
+        players: players,
+        interval: interval,
+      }
+
+      if(this._lastGameState && JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)) return;
       this._client.publish(
         this._gameStateTopic,
-        JSON.stringify({
+        JSON.stringify(newGameState),
-          version: 1,
-          players: players,
-          interval: interval,
-        }),
         { qos: 1, retain: true }
       );
     },