Feat: keep time and sync and loading indicator

index.css

@@ -20,4 +20,11 @@
 .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;
 }

index.html

@@ -23,8 +23,13 @@
                 </hgroup>
 
                 <div x-data="Timer">
+                    <div x-show="!time">
+                        <div class="timer loading" href="#" aria-busy="true">please wait</div>
+                    </div>
+                    <div x-show="time">
                     <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
                         x-text="time + 's'"></p>
+                    </div>
                 </div>
 
                 <button @click="$store.remoteState.giveTurnToNextPlayer()"

index.js

@@ -19,9 +19,16 @@ function Timer() {
     return {
         time: 0,
         init() {
-          setInterval(() => {
+            setInterval(() => {
-            this.time = parseInt((90000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
+                const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch
-          }, 1000);
+                console.log(lastPlayerSwitch)
+                if(!lastPlayerSwitch) {
+                    this.time = null
+                }
+                else {
+                    this.time = parseInt((90000 - ((new Date()).getTime() - lastPlayerSwitch)) / 1000);
+                }
+            }, 100);
         },
     }
 }
@@ -59,8 +66,8 @@ document.addEventListener('alpine:init', () => {
         leave() {
             this.joined = false;
             this.name = "";
-            this.id = "";
             localStorage.clear();
+            localStorage.setItem("id", this.id)
             Alpine.store("remoteState").disconnect();
         },
 
@@ -77,7 +84,7 @@ document.addEventListener('alpine:init', () => {
     Alpine.store("remoteState", {
         players: [],
         currentPlayer: null,
-        lastPlayerSwitch: 0,
+        lastPlayerSwitch: null,
         connected: false,
         isMyTurn: false,
         _client: null,
@@ -88,13 +95,12 @@ document.addEventListener('alpine:init', () => {
                     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 })
+                    }), { qos: 1, retain: true })
                 }
             })
 
             Alpine.effect(() => {
-                this.lastPlayerSwitch = new Date().getTime();
+                if (this.currentPlayer == Alpine.store("localState").id) {
-                if(this.currentPlayer == Alpine.store("localState").id) {
                     this.isMyTurn = true;
                 }
                 else {
@@ -103,7 +109,7 @@ document.addEventListener('alpine:init', () => {
             })
 
             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)) {
+                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;
@@ -111,7 +117,7 @@ document.addEventListener('alpine:init', () => {
             })
 
             Alpine.effect(() => {
-                if(this.isMyTurn) {
+                if (this.isMyTurn) {
                     Alpine.store("audio").playDing()
                 }
             })
@@ -143,19 +149,24 @@ document.addEventListener('alpine:init', () => {
 
                 if (topic === "im.dorian.whos-turn-is-it.players") {
                     const data = JSON.parse(message.toString());
-                    if(!Alpine.store("remoteState").connected) {
+                    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") {
+                else if (topic === "im.dorian.whos-turn-is-it.currentPlayer") {
-                    Alpine.store("remoteState").currentPlayer = message.toString();
+                    const data = JSON.parse(message.toString());
+                    Alpine.store("remoteState").currentPlayer = data.id;
+                    Alpine.store("remoteState").lastPlayerSwitch = data.since;
                 }
             })
         },
 
         giveTurnToNextPlayer() {
-            this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").nextPlayer, { qos:1, retain: true })
+            this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', JSON.stringify({
+                id: Alpine.store("localState").nextPlayer,
+                since: new Date().getTime()
+            }), { qos: 1, retain: true })
         },
 
 
@@ -166,8 +177,11 @@ document.addEventListener('alpine:init', () => {
         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 })
+            }), { qos: 1, retain: true })
-            this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").id, { qos:1, retain: true })
+            this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', JSON.stringify({
+                id: Alpine.store("localState").id,
+                since: new Date().getTime()
+            }), { qos: 1, retain: true })
         }
     })
 
@@ -186,11 +200,11 @@ document.addEventListener('alpine:init', () => {
         },
 
         testPermission() {
-            if(this.isEnabled) return;
+            if (this.isEnabled) return;
             this.audioPlayer.src = 'silence.mp3';
             this.audioPlayer.play().then(() => {
                 this.isAvailable = true
-                this.isEnabled = localStorage.getItem("audio_enabled") === false ? false:true
+                this.isEnabled = localStorage.getItem("audio_enabled") === false ? false : true
                 this.hasBeenTested = true
             }).catch((error) => {
                 console.warn("Audio permission not granted!")
@@ -201,7 +215,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         playDing() {
-            if(!this.isEnabled) return;
+            if (!this.isEnabled) return;
             this.playSound('ding.mp3')
         },