Chore: cleaup

index.html

@@ -6,7 +6,9 @@
     <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="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>

js/index.js

@@ -0,0 +1,96 @@
+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 Timer() {
+  return {
+    time: 0,
+    init() {
+      setInterval(() => {
+        const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch;
+
+        if (!lastPlayerSwitch) {
+          this.time = null;
+        } else {
+          this.time = parseInt(
+            (90000 - (new Date().getTime() - lastPlayerSwitch)) / 1000
+          );
+        }
+      }, 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");
+    },
+
+    playSound(soundFile) {
+      if (!this.audioPlayer.paused || !this.isAvailable) {
+        return;
+      }
+      if (!this.audioPlayer.src.endsWith(soundFile)) {
+        this.audioPlayer.src = soundFile;
+      }
+      this.audioPlayer.play();
+    },
+  });
+});

js/localState.js

@@ -0,0 +1,53 @@
+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");
+      },
+    });
+});

js/remoteState.js

@@ -1,102 +1,4 @@
-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 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(() => {
-        const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch;
-        
-        if (!lastPlayerSwitch) {
-          this.time = null;
-        } else {
-          this.time = parseInt(
-            (90000 - (new Date().getTime() - lastPlayerSwitch)) / 1000
-          );
-        }
-      }, 100);
-    },
-  };
-}
-
 document.addEventListener("alpine:init", () => {
-  console.log("Alpine.js is ready to go!");
-
-  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");
-    },
-  });
-
   Alpine.store("remoteState", {
     players: [],
     currentPlayer: null,
@@ -105,7 +7,6 @@ document.addEventListener("alpine:init", () => {
     isMyTurn: false,
 
     _client: null,
-    _playersTopic: null,
     _currentPlayerTopic: null,
     _gameStateTopic: null,
 
@@ -164,7 +65,6 @@ document.addEventListener("alpine:init", () => {
       ).room)}`;
 
       this._gameStateTopic = `${topicPrefix}.gameState`;
-      this._playersTopic = `${topicPrefix}.players`;
       this._currentPlayerTopic = `${topicPrefix}.currentPlayer`;
 
       const options = {
@@ -246,53 +146,4 @@ document.addEventListener("alpine:init", () => {
       );
     },
   });
-
-  Alpine.store("audio", {
-    hasBeenTested: false,
-    isAvailable: false,
-    isEnabled: false,
-    audioPlayer: null,
-
-    init() {
-      this.audioPlayer = new Audio("silence.mp3");
-
-      Alpine.effect(() => {
-        localStorage.setItem("audio_enabled", this.isEnabled);
-      });
-    },
-
-    testPermission() {
-      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.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("ding.mp3");
-    },
-
-    playSound(soundFile) {
-      if (!this.audioPlayer.paused || !this.isAvailable) {
-        return;
-      }
-      if (!this.audioPlayer.src.endsWith(soundFile)) {
-        this.audioPlayer.src = soundFile;
-      }
-      this.audioPlayer.play();
-    },
-  });
 });