diff --git a/index.html b/index.html index 2140c19..228f4f1 100644 --- a/index.html +++ b/index.html @@ -19,14 +19,15 @@
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 +});