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
@ -5,6 +5,58 @@
  line-height: 1.2;
 }
@keyframes blinker {
  50% {
    opacity: 0.3;
  }
 }
 .timer.my-turn {
  color: #0f0;
  animation: blinker 2s ease infinite;
 }
 .timer.over {
  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>
+    <script src="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+    <script src="https://unpkg.com/nosleep.js@0.12.0/dist/NoSleep.min.js"></script>
-    <link rel="stylesheet" href="index.css">
+    <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()"
+                <button x-show="!$store.remoteState.skipMe" @click="$store.remoteState.giveTurnToNextPlayer()"
-                    x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">I'm done!</button>
+                    x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">
-                <p>Player after me:</p>
+                    I'm done!
-                <select x-model="$store.localState.nextPlayer">
+                </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>
-                <div class="grid">
+
-                    <button class="secondary outline" @click="$store.localState.leave()">Leave</button>
+                        <label for="sound_enabled">
-                    <button class="secondary outline" @click="$store.remoteState.clear()">Clear</button>
+                            <input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()"
-                </div>
+                                type="checkbox" id="sound_enabled" name="sound_enabled" role="switch" />
-                <p>Other players:</p>
+                            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 = 'wss://broker.emqx.io:8084/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