Fix: only play sounds on current players device

Fix: too many updates, Feat: more sounds
Chore: format
2023-12-26 19:46:50 +01:00 · 2023-12-26 19:42:47 +01:00 · 2023-01-05 19:46:46 +01:00 · 2023-01-05 19:46:36 +01:00 · 2023-01-05 19:38:09 +01:00 · 2023-01-05 18:50:55 +01:00
11 changed files with 603 additions and 202 deletions
--- a/README.md
+++ b/README.md
@ -1,3 +1,27 @@
-# whose-turn-is-it
+<h1 align="center">
+    Whose turn is it?
+</h1>

-Simple webapp for playing games.
+<p align="center">
+    <a href="https://www.gnu.org/licenses/agpl-3.0">
+        <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" />
+    </a>
+</p>
+
+Simple webapp to keep track of who is currently playing and how much time they have left. Originally designed for [Rummikub](https://de.wikipedia.org/wiki/Rummikub).  
+Please note: this is by no means perfect and just meant to be a simple solution to a simple problem :)
+
+# Featues
+- Create an independent room
+- Play with multiple players across multiple devices
+- Decentralized
+- End-to-end encrypted
+
+# How it works
+The browsers of all players connect to a common MQTT server and communicate through that server. An AES Key is derived from the room name, which is then used to encrypt all communication.
+
+# Technologies
+- [MQTT.js](https://github.com/mqttjs/MQTT.js)
+- [Alpine.js](https://alpinejs.dev/)
+- [Pico.css](https://picocss.com/)
+- [crypto-js](https://github.com/brix/crypto-js)
--- a/index.css
+++ b/index.css
@ -1,10 +1,62 @@
 .timer {
-    font-size: 10em;
-    font-weight: bold;
-    text-align: center;
-    line-height: 1.2;
+  font-size: 10em;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.timer.my-turn {
+  color: #0f0;
+  animation: blinker 2s ease infinite;
 }

 .timer.over {
-    color: #f00;
-}
+  color: #f00;
+  animation: blinker 0.5s ease infinite;
+}
+
+.timer.loading {
+  font-size: 2em;
+  margin: auto;
+  margin-bottom: 2.5em;
+  margin-top: 2.5em;
+}
+
+.mb {
+  margin-bottom: var(--spacing) !important;
+}
+
+.first-details {
+  padding-top: var(--spacing);
+  border-bottom: var(--border-width) solid var(--accordion-border-color);
+  border-top: var(--border-width) solid var(--accordion-border-color);
+}
+
+:is(
+    button,
+    input[type="submit"],
+    input[type="button"],
+    [role="button"]
+  ).outline.invalid,
+input[type="reset"].outline {
+  --color: var(--form-element-invalid-border-color);
+  --background-color: transparent;
+}
+
+:is(
+    button,
+    input[type="submit"],
+    input[type="button"],
+    [role="button"]
+  ).invalid,
+input[type="reset"] {
+  --background-color: var(--form-element-invalid-border-color);
+  --border-color: var(--form-element-invalid-border-color);
+  cursor: pointer;
+}
--- a/index.html
+++ b/index.html
@ -1,52 +1,115 @@
+<!DOCTYPE html>
 <html>

 <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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="index.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-    <link rel="stylesheet" href="index.css">
+    <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>
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
+    <link rel="stylesheet" href="index.css" />
 </head>

 <body>
    <main class="container">
        <div x-data>
-            <div x-show="$store.localState.joined">
+            <div x-show="$store.remoteState.connected && $store.localState.room">
                <hgroup>
-                    <h1 x-text="'Currently playing: ' + $store.remoteState.players[$store.remoteState.currentPlayer]">
+                    <h1
+                        x-text="'It\'s ' + ($store.remoteState.isMyTurn ? 'YOUR':($store.remoteState.players[$store.remoteState.currentPlayer] + '\'s')) + ' turn!'">
                    </h1>
-                    <h2 x-text="'I am ' + $store.localState.name"></h2>
+                    <h2>You are <b x-text="$store.localState.name"></b> in the room <b
+                            x-text="$store.localState.room"></b></h2>
                </hgroup>

                <div x-data="Timer">
-                    <p :class="time < 0 ? 'timer over':'timer'" x-text="time + 's'"></p>
+                    <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
+                        x-text="time + 's'"></p>
                </div>

-                <button @click="$store.remoteState.giveTurnToNextPlayer()"
-                    x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">I'm done!</button>
-                <p>Player after me:</p>
-                <select x-model="$store.localState.nextPlayer">
-                    <template
-                        x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
-                        :key="playerId">
-                        <option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
-                    </template>
-                </select>
-                <div class="grid">
-                    <button class="secondary outline" @click="$store.localState.leave()">Leave</button>
-                    <button class="secondary outline" @click="$store.remoteState.clear()">Clear</button>
-                </div>
-                <p>Other players:</p>
-                <ul>
-                    <template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">
-                        <li x-text="$store.remoteState.players[playerId]"></li>
-                    </template>
-                </ul>
+                <button x-show="!$store.remoteState.skipMe" @click="$store.remoteState.giveTurnToNextPlayer()"
+                    x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">
+                    I'm done!
+                </button>

+                <label for="skip_switch" class="mb">
+                    <input x-model="$store.remoteState.skipMe" type="checkbox" id="skip_switch" role="switch" />
+                    Skip me
+                </label>
+
+                <details class="first-details">
+                    <summary>Options</summary>
+
+
+                    <fieldset>
+                        <label for="nextPlayer_select">Player after me:
+                            <b x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b>
+                        </label>
+                        <select x-model="$store.localState.nextPlayer" id="nextPlayer_select">
+                            <template
+                                x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
+                                :key="playerId">
+                                <option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
+                            </template>
+                        </select>
+
+                        <label for="sound_enabled">
+                            <input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()"
+                                type="checkbox" id="sound_enabled" name="sound_enabled" role="switch" />
+                            Enable sound
+                        </label>
+                    </fieldset>
+
+                    <button class="invalid outline" @click="$store.localState.leave()" type="submit">
+                        Leave room
+                    </button>
+                </details>
+
+                <details>
+                    <summary>This room</summary>
+
+                    <label for="roomForm_interval">Interval (seconds):</label>
+                    <input id="roomForm_interval" type="number" x-model.lazy="$store.remoteState.interval"
+                        placeholder="Interval" />
+
+                    <p>
+                        Other players:
+                    <ul>
+                        <template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">
+                            <li x-text="$store.remoteState.players[playerId]"></li>
+                        </template>
+                    </ul>
+                    </p>
+
+                    <button class="secondary outline" @click="$store.remoteState.clear()">
+                        Clear player list
+                    </button>
+                </details>
            </div>
-            <div x-show="!$store.localState.joined">
+
+            <div x-show="!$store.remoteState.connected && $store.localState.room">
+                <h1 class="timer loading" aria-busy="true">Connecting...</h1>
+            </div>
+
+            <div x-show="!$store.localState.room">
+                <hgroup>
+                    <h1>
+                        Whose turn is it?
+                    </h1>
+                    <h2>Please create or join a room</h2>
+                </hgroup>
                <form x-data="JoinForm()" @submit.prevent="submitForm">
-                    <input type="text" x-model="formData.name" placeholder="Name">
+                    <label for="joinForm_name">Name:</label>
+                    <input id="joinForm_name" type="text" x-model="formData.name" placeholder="Name" />
+                    <small>How others will see you</small>
+                    <label for="joinForm_room">Room:</label>
+                    <input id="joinForm_room" type="text" x-model="formData.room" placeholder="Room" />
+                    <small>Make sure, this is exactly the same for all players</small>
                    <button type="submit">Join</button>
                </form>
            </div>
--- a/index.js
+++ b/index.js
@ -1,165 +0,0 @@
-function JoinForm() {
-    return {
-        formData: {
-            name: ""
-        },
-        submitForm() {
-            Alpine.store("localState").join(this.formData.name)
-        }
-    }
-}
-
-function uuidv4() {
-    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
-    );
-}
-
-function Timer() {
-    return {
-        time: 0,
-        init() {
-          setInterval(() => {
-            this.time = parseInt((30000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
-          }, 1000);
-        },
-    }
-} 
-
-document.addEventListener('alpine:init', () => {
-    console.log("Alpine.js is ready to go!")
-
-
-    Alpine.store("localState", {
-        joined: false,
-        nextPlayer: null,
-        name: "",
-        id: "",
-
-        init() {
-            Alpine.effect(() => {
-                if (this.joined) {
-                    Alpine.store("remoteState").connect();
-                }
-            })
-
-            Alpine.effect(() => {
-                console.log(this.nextPlayer)
-            })
-            this.restore();
-        },
-
-        join(name) {
-            this.joined = true;
-            this.name = name;
-            this.id = uuidv4();
-            localStorage.clear();
-            localStorage.setItem("joined", this.joined)
-            localStorage.setItem("name", this.name);
-            localStorage.setItem("id", this.id)
-        },
-
-        leave() {
-            this.joined = false;
-            this.name = "";
-            this.id = "";
-            localStorage.clear();
-            Alpine.store("remoteState").disconnect();
-        },
-
-        restore() {
-            const joined = localStorage.getItem("joined");
-            if (joined) {
-                this.joined = true;
-                this.name = localStorage.getItem("name");
-                this.id = localStorage.getItem("id");
-            }
-        },
-    })
-
-    Alpine.store("remoteState", {
-        players: [],
-        currentPlayer: null,
-        lastPlayerSwitch: 0,
-        connected: false,
-        _client: null,
-
-        init() {
-            Alpine.effect(() => {
-                if (this.connected && Object.keys(this.players).indexOf(Alpine.store("localState").id) === -1) {
-                    this._client.publish('im.dorian.whos-turn-is-it.players', JSON.stringify({
-                        [Alpine.store("localState").id]: Alpine.store("localState").name,
-                        ...this.players
-                    }), { qos:1, retain: true })
-                }
-            })
-
-            Alpine.effect(() => {
-                this.lastPlayerSwitch = new Date().getTime();
-                if(this.currentPlayer == Alpine.store("localState").id) {
-                    alert("It's your turn!")
-                }
-            })
-
-            Alpine.effect(() => {
-                if(Alpine.store("localState").nextPlayer == null || !Object.keys(this.players).includes(Alpine.store("localState").nextPlayer)) {
-                    const players = Object.keys(this.players).sort();
-                    const nextPlayer = players[(players.indexOf(Alpine.store("localState").id) + 1) % players.length]
-                    Alpine.store("localState").nextPlayer = nextPlayer;
-                }
-            })
-        },
-
-        connect() {
-            const url = 'ws://broker.emqx.io:8083/mqtt'
-
-            const options = {
-                // Clean session
-                clean: true,
-                connectTimeout: 4000,
-                // Authentication
-                clientId: Alpine.store("localState").id,
-            }
-
-            this._client = mqtt.connect(url, options)
-            const client = this._client;
-            this._client.on('connect', function () {
-                // Subscribe to a topic
-                client.subscribe('im.dorian.whos-turn-is-it.players')
-                client.subscribe('im.dorian.whos-turn-is-it.currentPlayer')
-            })
-
-
-            this._client.on('message', function (topic, message) {
-                // message is Buffer
-                console.log(topic, message.toString())
-
-                if (topic === "im.dorian.whos-turn-is-it.players") {
-                    const data = JSON.parse(message.toString());
-                    if(!Alpine.store("remoteState").connected) {
-                        Alpine.store("remoteState").connected = true;
-                    }
-                    Alpine.store("remoteState").players = data;
-                }
-                else if(topic === "im.dorian.whos-turn-is-it.currentPlayer") {
-                    Alpine.store("remoteState").currentPlayer = message.toString();
-                }
-            })
-        },
-
-        giveTurnToNextPlayer() {
-            this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").nextPlayer, { qos:1, retain: true })
-        },
-
-
-        disconnect() {
-            this._client.end(true);
-        },
-
-        clear() {
-            this._client.publish('im.dorian.whos-turn-is-it.players', JSON.stringify({
-                [Alpine.store("localState").id]: Alpine.store("localState").name,
-            }), { qos:1, retain: true })
-        }
-    })
-})
--- a/js/index.js
+++ b/js/index.js
@ -0,0 +1,128 @@
+function uuidv4() {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  );
+}
+
+function JoinForm() {
+  return {
+    formData: {
+      name: "",
+      room: "",
+    },
+    init() {
+      this.formData.name = Alpine.store("localState").name;
+      this.formData.room = Alpine.store("localState").room;
+    },
+    submitForm() {
+      Alpine.store("localState").join(this.formData.name, this.formData.room);
+    },
+  };
+}
+
+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,
+    init() {
+      setInterval(() => {
+        const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch;
+
+        if (!lastPlayerSwitch) {
+          this.time = null;
+        } else {
+          this.time = Math.floor(
+            (Alpine.store("remoteState").interval * 1000 -
+              (new Date().getTime() - lastPlayerSwitch)) /
+            1000
+          );
+
+          if (this.time == 10 && Alpine.store("remoteState").isMyTurn) {
+            Alpine.store("audio").playTimeAlmostOver();
+          } else if (this.time == 0 && Alpine.store("remoteState").isMyTurn) {
+            Alpine.store("audio").playTimeOver();
+          }
+        }
+      }, 100);
+    },
+  };
+}
+
+document.addEventListener("alpine:init", () => {
+  console.log("Alpine.js is ready to go!");
+
+  Alpine.store("audio", {
+    hasBeenTested: false,
+    isAvailable: false,
+    isEnabled: false,
+    audioPlayer: null,
+
+    init() {
+      this.audioPlayer = new Audio("sound/silence.mp3");
+
+      Alpine.effect(() => {
+        localStorage.setItem("audio_enabled", this.isEnabled);
+      });
+    },
+
+    testPermission() {
+      if (this.isEnabled) return;
+      this.audioPlayer.src = "sound/silence.mp3";
+      this.audioPlayer
+        .play()
+        .then(() => {
+          this.isAvailable = true;
+          this.isEnabled =
+            localStorage.getItem("audio_enabled") === false ? false : true;
+          this.hasBeenTested = true;
+        })
+        .catch((error) => {
+          console.warn("Audio permission not granted!");
+          this.isAvailable = false;
+          this.isEnabled = false;
+          this.hasBeenTested = true;
+        });
+    },
+
+    playDing() {
+      if (!this.isEnabled) return;
+      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;
+      }
+      if (!this.audioPlayer.src.endsWith(soundFile)) {
+        this.audioPlayer.src = soundFile;
+      }
+      this.audioPlayer.play();
+    },
+  });
+});
--- a/js/localState.js
+++ b/js/localState.js
@ -0,0 +1,52 @@
+document.addEventListener("alpine:init", () => {
+  Alpine.store("localState", {
+    room: null,
+    nextPlayer: null,
+    name: "",
+    id: "",
+
+    init() {
+      Alpine.effect(() => {
+        const remoteState = Alpine.store("remoteState");
+        if (this.room) {
+          remoteState.connect();
+        } else if (remoteState && remoteState.connected) {
+          remoteState.disconnect();
+        }
+      });
+
+      this.restore();
+
+      Alpine.effect(() => {
+        // write stuff to local storage
+        if (this.room) {
+          localStorage.setItem("room", this.room);
+        } else {
+          localStorage.removeItem("room");
+        }
+
+        localStorage.setItem("name", this.name);
+        localStorage.setItem("id", this.id);
+      });
+    },
+
+    join(name, room) {
+      this.room = room;
+      this.name = name;
+    },
+
+    leave() {
+      this.room = null;
+    },
+
+    restore() {
+      this.id = localStorage.getItem("id");
+      if (!this.id) {
+        this.id = uuidv4();
+      }
+
+      this.name = localStorage.getItem("name");
+      this.room = localStorage.getItem("room");
+    },
+  });
+});
--- a/js/remoteState.js
+++ b/js/remoteState.js
@ -0,0 +1,247 @@
+document.addEventListener("alpine:init", () => {
+  Alpine.store("remoteState", {
+    players: [],
+    interval: null,
+    currentPlayer: null,
+    lastPlayerSwitch: null,
+    connected: false,
+    isMyTurn: false,
+    skipMe: false,
+
+    _client: null,
+    _currentPlayerTopic: null,
+    _gameStateTopic: null,
+    _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
+        ) {
+          this._updatePlayers({
+            [Alpine.store("localState").id]: Alpine.store("localState").name,
+            ...this.players,
+          });
+        }
+      });
+
+      Alpine.effect(() => {
+        const myTurn = this.currentPlayer == Alpine.store("localState").id;
+        if (myTurn && !this.skipMe) {
+          this.isMyTurn = true;
+          Alpine.store("audio").playDing();
+        } else if (myTurn && this.skipMe) {
+          this.giveTurnToNextPlayer();
+        } else {
+          this.isMyTurn = false;
+        }
+      });
+
+      Alpine.effect(() => {
+        if (
+          Alpine.store("localState").nextPlayer == null ||
+          Alpine.store("localState").nextPlayer ==
+          Alpine.store("localState").id ||
+          !Object.keys(this.players).includes(
+            Alpine.store("localState").nextPlayer
+          )
+        ) {
+          const players = Object.keys(this.players).sort();
+          const nextPlayer =
+            players[
+            (players.indexOf(Alpine.store("localState").id) + 1) %
+            players.length
+            ];
+          Alpine.store("localState").nextPlayer = nextPlayer;
+        }
+      });
+
+      Alpine.effect(() => {
+        if (this.connected) {
+          this.updateInterval(this.interval);
+        }
+      });
+    },
+
+    connect() {
+      const that = this;
+      const url = "wss://broker.emqx.io:8084/mqtt";
+      const keySize = 512;
+      const ivSize = 128;
+      // derive key from room name
+      this._key = CryptoJS.PBKDF2(Alpine.store("localState").room, url, {
+        keySize: keySize / 32,
+        iterations: 1000,
+      });
+      // random iv
+      this._iv = CryptoJS.PBKDF2(Alpine.store("localState").room, url, {
+        keySize: ivSize / 32,
+        iterations: 5000,
+      });
+
+      const topicPrefix = `im.dorian.whose-turn-is-it.${btoa(
+        Alpine.store("localState").room
+      )}`;
+      this._gameStateTopic = CryptoJS.SHA256(
+        this._encrypt(`${topicPrefix}.gameState`)
+      ).toString();
+      this._currentPlayerTopic = CryptoJS.SHA256(
+        this._encrypt(`${topicPrefix}.currentPlayer`)
+      ).toString();
+
+      console.log("Connecting to MQTT broker...");
+      console.log("Game state topic:", this._gameStateTopic);
+      console.log("Current player topic:", this._currentPlayerTopic);
+
+      const options = {
+        // Clean session
+        clean: true,
+        connectTimeout: 4000,
+        // Authentication
+        clientId: Alpine.store("localState").id,
+      };
+
+      this._client = mqtt.connect(url, options);
+
+      this._client.on("connect", () => {
+        setTimeout(() => {
+          if (!that.connected) {
+            // reset game if not connected after 5 seconds
+            that.clear();
+          }
+        }, 1000 * 4);
+
+        that._client.subscribe(that._gameStateTopic);
+        that._client.subscribe(that._currentPlayerTopic);
+      });
+
+      this._client.on("message", (topic, message) => {
+        // message is Buffer
+        message = that._decrypt(message.toString());
+        const data = JSON.parse(JSON.parse(message));
+
+        if (topic === that._gameStateTopic) {
+          if (data.version !== 1 || !data.players || !data.interval) {
+            console.log("Invalid game state, resetting...");
+            that.clear();
+            return;
+          }
+          if (!that.connected) {
+            that.connected = true;
+          }
+          console.log("Received game state:", data);
+          that._lastGameState = data;
+          that.players = data.players;
+          that.interval = data.interval;
+        } else if (topic === that._currentPlayerTopic) {
+          if (!data.id || !data.since) {
+            console.log("Invalid current player, resetting...");
+            that.clear();
+            return;
+          }
+          if (data.since < that.lastPlayerSwitch) {
+            return;
+          }
+          that.currentPlayer = data.id;
+          that.lastPlayerSwitch = data.since;
+        }
+      });
+    },
+
+    giveTurnToNextPlayer() {
+      this._noSleep.enable();
+      this._updateCurrentPlayer(Alpine.store("localState").nextPlayer);
+    },
+
+    disconnect() {
+      this._client.end(true);
+      this._client = null;
+      this.players = [];
+      this.currentPlayer = null;
+      this.lastPlayerSwitch = null;
+      this.connected = false;
+      this.isMyTurn = false;
+
+      this._gameStateTopic = null;
+      this._currentPlayerTopic = null;
+
+      Alpine.store("localState").nextPlayer = null;
+    },
+
+    clear() {
+      if (!this.interval) {
+        this.interval = 30;
+      }
+      this._updatePlayers({
+        [Alpine.store("localState").id]: Alpine.store("localState").name,
+      });
+      this._updateCurrentPlayer(Alpine.store("localState").id);
+    },
+
+    updateInterval(interval) {
+      this.interval = interval;
+      this._updateGameState(this.players, interval);
+    },
+
+    _updatePlayers(players) {
+      this.players = players;
+      this._updateGameState(players, this.interval);
+    },
+
+    _updateGameState(players, interval) {
+      const newGameState = {
+        version: 1,
+        players: players,
+        interval: interval,
+      };
+
+      if (
+        this._lastGameState &&
+        JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)
+      )
+        return;
+
+      this._lastGameState = newGameState;
+      console.log("Updating game state:", newGameState);
+      this._client.publish(
+        this._gameStateTopic,
+        this._encrypt(JSON.stringify(newGameState)),
+        {
+          qos: 1,
+          retain: true,
+        }
+      );
+    },
+
+    _updateCurrentPlayer(id) {
+      this._client.publish(
+        this._currentPlayerTopic,
+        this._encrypt(
+          JSON.stringify({
+            id: id,
+            since: new Date().getTime(),
+          })
+        ),
+        { qos: 1, retain: true }
+      );
+    },
+
+    _encrypt(data) {
+      return CryptoJS.AES.encrypt(JSON.stringify(data), this._key, {
+        iv: this._iv,
+      }).toString();
+    },
+
+    _decrypt(data) {
+      const decrypted = CryptoJS.AES.decrypt(data, this._key, { iv: this._iv });
+      return decrypted.toString(CryptoJS.enc.Utf8);
+    },
+  });
+});
--- a/sound/ding.mp3
+++ b/sound/ding.mp3
--- a/sound/silence.mp3
+++ b/sound/silence.mp3
--- a/sound/time-almost-over.mp3
+++ b/sound/time-almost-over.mp3
--- a/sound/time-over.mp3
+++ b/sound/time-over.mp3
Author	SHA1	Message	Date
Dorian Zedler	76cf24fe9a	Fix: only play sounds on current players device	2023-12-26 19:46:50 +01:00
Dorian Zedler	96828121f3	Fix: too many updates, Feat: more sounds	2023-12-26 19:42:47 +01:00
Dorian Zedler	428ed81e5b	Chore: format	2023-01-05 19:46:46 +01:00
Dorian Zedler	c517ff3c20	Docs: update readme	2023-01-05 19:46:36 +01:00
Dorian Zedler	d0857233f4	Chore: make create room page prettier	2023-01-05 19:38:09 +01:00
Dorian Zedler	6d5f4047e2	Feat: skip me	2023-01-05 18:50:55 +01:00
Dorian Zedler	425ae6a1e5	Fix: make field lazy	2023-01-05 18:41:40 +01:00
Dorian Zedler	e909952fa4	Feat: encrypt all data	2023-01-05 18:40:06 +01:00
Dorian Zedler	640852c206	Chore: format	2023-01-05 13:05:28 +01:00
Dorian Zedler	bf922ead94	Fix: bug in timer	2023-01-05 13:01:38 +01:00
Dorian Zedler	f42e8478e1	Feat: change interval	2023-01-05 12:58:08 +01:00
Dorian Zedler	98dad45fe7	Feat: support interval in game state	2023-01-05 12:42:04 +01:00
Dorian Zedler	4a766adfda	Chore: cleaup	2023-01-05 12:23:15 +01:00
Dorian Zedler	0e10b00b37	Feat: full screen loader	2023-01-05 12:16:28 +01:00
Dorian Zedler	223c5c251a	Chore: cleanup	2023-01-05 10:24:28 +01:00
Dorian Zedler	15bf78d373	Feat: independent rooms	2023-01-05 10:22:17 +01:00
Dorian Zedler	50de5ad59c	Chore: format	2022-12-30 13:28:28 +01:00
Dorian Zedler	f3868abd08	Feat: keep time and sync and loading indicator	2022-12-29 20:46:09 +01:00
Dorian Zedler	196cbc26e2	Feat: keep if after leaving	2022-12-29 20:30:09 +01:00
Dorian Zedler	d1c7f15bd7	Fix: audio playback	2022-12-29 20:26:40 +01:00
Dorian Zedler	0f610bd0cb	feat: add sound	2022-12-29 18:09:05 +01:00
Dorian Zedler	5885f63665	Feat: better animation	2022-12-29 18:04:00 +01:00
Dorian Zedler	cc1714d2a6	Feat: diffrent visuals	2022-12-29 17:59:24 +01:00
Dorian Zedler	1e080865ff	Fix: some minor problems	2022-12-29 17:42:47 +01:00
Dorian Zedler	59435bd2af	fix: add meta	2022-12-29 17:32:14 +01:00
Dorian Zedler	812847f378	fix: use wss	2022-12-29 17:24:58 +01:00