From 640852c2067b260ebb4b1766d15fa232055262be Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Thu, 5 Jan 2023 13:05:28 +0100
Subject: [PATCH] Chore: format

---
 index.html        |  12 +++---
 js/index.js       |  22 +++++-----
 js/localState.js  | 101 +++++++++++++++++++++++-----------------------
 js/remoteState.js |  33 ++++++++-------
 4 files changed, 87 insertions(+), 81 deletions(-)

diff --git a/index.html b/index.html
index 2140c19..228f4f1 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,15 @@
             <div x-show="$store.remoteState.connected && $store.localState.room">
                 <hgroup>
                     <h1
-                        x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
+                        x-text="'It\'s ' + ($store.remoteState.isMyTurn ? 'YOUR':($store.remoteState.players[$store.remoteState.currentPlayer] + '\'s')) + ' turn!'">
                     </h1>
-                    <h2 x-text="'You are ' + $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="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
-                            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()"
@@ -66,7 +67,8 @@
                     <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" />
+                    <input id="roomForm_interval" type="number" x-model.throttle.1000ms="$store.remoteState.interval"
+                        placeholder="Interval" />
 
                     <p>
                         Other players:
diff --git a/js/index.js b/js/index.js
index 81e5c16..7dc17e4 100644
--- a/js/index.js
+++ b/js/index.js
@@ -10,17 +10,17 @@ function uuidv4() {
 function JoinForm() {
   return {
     formData: {
-        name: "",
-        room: "",
+      name: "",
+      room: "",
     },
     init() {
-        this.formData.name = Alpine.store("localState").name;
-        this.formData.room = Alpine.store("localState").room;
+      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);
-    }
-}
+      Alpine.store("localState").join(this.formData.name, this.formData.room);
+    },
+  };
 }
 
 function RoomForm() {
@@ -33,8 +33,8 @@ function RoomForm() {
     },
     submitForm() {
       Alpine.store("remoteState").updateInterval(this.formData.interval);
-    }
-}
+    },
+  };
 }
 
 function Timer() {
@@ -48,7 +48,9 @@ function Timer() {
           this.time = null;
         } else {
           this.time = Math.floor(
-            ((Alpine.store("remoteState").interval * 1000) - (new Date().getTime() - lastPlayerSwitch)) / 1000
+            (Alpine.store("remoteState").interval * 1000 -
+              (new Date().getTime() - lastPlayerSwitch)) /
+              1000
           );
         }
       }, 100);
diff --git a/js/localState.js b/js/localState.js
index a8dca84..56c66af 100644
--- a/js/localState.js
+++ b/js/localState.js
@@ -1,53 +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();
+  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.name = localStorage.getItem("name");
-        this.room = localStorage.getItem("room");
-      },
-    });
-});
\ No newline at end of file
+      });
+
+      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");
+    },
+  });
+});
diff --git a/js/remoteState.js b/js/remoteState.js
index 331a48e..4ae03bd 100644
--- a/js/remoteState.js
+++ b/js/remoteState.js
@@ -21,7 +21,7 @@ document.addEventListener("alpine:init", () => {
         ) {
           this._updatePlayers({
             [Alpine.store("localState").id]: Alpine.store("localState").name,
-            ...this.players
+            ...this.players,
           });
         }
       });
@@ -64,9 +64,9 @@ document.addEventListener("alpine:init", () => {
     connect() {
       const that = this;
       const url = "wss://broker.emqx.io:8084/mqtt";
-      const topicPrefix = `im.dorian.whos-turn-is-it.${btoa(Alpine.store(
-        "localState"
-      ).room)}`;
+      const topicPrefix = `im.dorian.whos-turn-is-it.${btoa(
+        Alpine.store("localState").room
+      )}`;
 
       this._gameStateTopic = `${topicPrefix}.gameState`;
       this._currentPlayerTopic = `${topicPrefix}.currentPlayer`;
@@ -83,7 +83,7 @@ document.addEventListener("alpine:init", () => {
 
       this._client.on("connect", () => {
         setTimeout(() => {
-          if(!that.connected) {
+          if (!that.connected) {
             // reset game if not connected after 5 seconds
             that.clear();
           }
@@ -144,7 +144,7 @@ document.addEventListener("alpine:init", () => {
     },
 
     _updatePlayers(players) {
-      if(!this.interval) {
+      if (!this.interval) {
         this.interval = 30;
       }
       this._updateGameState(players, this.interval);
@@ -155,14 +155,17 @@ document.addEventListener("alpine:init", () => {
         version: 1,
         players: players,
         interval: interval,
-      }
+      };
 
-      if(this._lastGameState && JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)) return;
-      this._client.publish(
-        this._gameStateTopic,
-        JSON.stringify(newGameState),
-        { qos: 1, retain: true }
-      );
+      if (
+        this._lastGameState &&
+        JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)
+      )
+        return;
+      this._client.publish(this._gameStateTopic, JSON.stringify(newGameState), {
+        qos: 1,
+        retain: true,
+      });
     },
 
     _updateCurrentPlayer(id) {
@@ -174,6 +177,6 @@ document.addEventListener("alpine:init", () => {
         }),
         { qos: 1, retain: true }
       );
-    }
+    },
   });
-});
\ No newline at end of file
+});