diff --git a/index.html b/index.html
index e1fe957..63190c3 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,9 @@
This room
+
+
+
Other players:
diff --git a/js/index.js b/js/index.js
index 575bc18..f3a63f6 100644
--- a/js/index.js
+++ b/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,
diff --git a/js/remoteState.js b/js/remoteState.js
index 5446c6d..331a48e 100644
--- a/js/remoteState.js
+++ b/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({
- version: 1,
- players: players,
- interval: interval,
- }),
+ JSON.stringify(newGameState),
{ qos: 1, retain: true }
);
},