From 4a766adfdab3123e4067d63722295943424a4b6e Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Thu, 5 Jan 2023 12:23:15 +0100 Subject: [PATCH] Chore: cleaup --- index.html | 4 +- js/index.js | 96 ++++++++++++++++++++ js/localState.js | 53 +++++++++++ index.js => js/remoteState.js | 151 +------------------------------ ding.mp3 => sound/ding.mp3 | Bin silence.mp3 => sound/silence.mp3 | Bin 6 files changed, 153 insertions(+), 151 deletions(-) create mode 100644 js/index.js create mode 100644 js/localState.js rename index.js => js/remoteState.js (54%) rename ding.mp3 => sound/ding.mp3 (100%) rename silence.mp3 => sound/silence.mp3 (100%) diff --git a/index.html b/index.html index fe279f2..e1fe957 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,9 @@ - + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..457bb57 --- /dev/null +++ b/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(); + }, + }); +}); diff --git a/js/localState.js b/js/localState.js new file mode 100644 index 0000000..a8dca84 --- /dev/null +++ b/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"); + }, + }); +}); \ No newline at end of file diff --git a/index.js b/js/remoteState.js similarity index 54% rename from index.js rename to js/remoteState.js index d8cd624..c253afc 100644 --- a/index.js +++ b/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(); - }, - }); -}); +}); \ No newline at end of file diff --git a/ding.mp3 b/sound/ding.mp3 similarity index 100% rename from ding.mp3 rename to sound/ding.mp3 diff --git a/silence.mp3 b/sound/silence.mp3 similarity index 100% rename from silence.mp3 rename to sound/silence.mp3