diff --git a/index.html b/index.html index d8572b9..b9aed0a 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + diff --git a/js/index.js b/js/index.js index 7dc17e4..01da5bd 100644 --- a/js/index.js +++ b/js/index.js @@ -50,8 +50,13 @@ function Timer() { this.time = Math.floor( (Alpine.store("remoteState").interval * 1000 - (new Date().getTime() - lastPlayerSwitch)) / - 1000 + 1000 ); + if (this.time == 10) { + Alpine.store("audio").playTimeAlmostOver(); + } else if (this.time == 0) { + Alpine.store("audio").playTimeOver(); + } } }, 100); }, @@ -99,6 +104,16 @@ document.addEventListener("alpine:init", () => { this.playSound("sound/ding.mp3"); }, + playTimeOver() { + if (!this.isEnabled || !this.audioPlayer.paused) return; + this.playSound("sound/time-over.mp3"); + }, + + playTimeAlmostOver() { + if (!this.isEnabled || !this.audioPlayer.paused) return; + this.playSound("sound/time-almost-over.mp3"); + }, + playSound(soundFile) { if (!this.audioPlayer.paused || !this.isAvailable) { return; diff --git a/js/remoteState.js b/js/remoteState.js index fac5815..a2b50af 100644 --- a/js/remoteState.js +++ b/js/remoteState.js @@ -14,13 +14,16 @@ document.addEventListener("alpine:init", () => { _lastGameState: null, _key: null, _iv: null, + _noSleep: null, init() { + this._noSleep = new NoSleep(); + Alpine.effect(() => { if ( this.connected && Object.keys(this.players).indexOf(Alpine.store("localState").id) === - -1 + -1 ) { this._updatePlayers({ [Alpine.store("localState").id]: Alpine.store("localState").name, @@ -45,7 +48,7 @@ document.addEventListener("alpine:init", () => { if ( Alpine.store("localState").nextPlayer == null || Alpine.store("localState").nextPlayer == - Alpine.store("localState").id || + Alpine.store("localState").id || !Object.keys(this.players).includes( Alpine.store("localState").nextPlayer ) @@ -53,8 +56,8 @@ document.addEventListener("alpine:init", () => { const players = Object.keys(this.players).sort(); const nextPlayer = players[ - (players.indexOf(Alpine.store("localState").id) + 1) % - players.length + (players.indexOf(Alpine.store("localState").id) + 1) % + players.length ]; Alpine.store("localState").nextPlayer = nextPlayer; } @@ -133,6 +136,7 @@ document.addEventListener("alpine:init", () => { if (!that.connected) { that.connected = true; } + console.log("Received game state:", data); that._lastGameState = data; that.players = data.players; that.interval = data.interval; @@ -152,6 +156,7 @@ document.addEventListener("alpine:init", () => { }, giveTurnToNextPlayer() { + this._noSleep.enable(); this._updateCurrentPlayer(Alpine.store("localState").nextPlayer); }, @@ -171,6 +176,9 @@ document.addEventListener("alpine:init", () => { }, clear() { + if (!this.interval) { + this.interval = 30; + } this._updatePlayers({ [Alpine.store("localState").id]: Alpine.store("localState").name, }); @@ -178,13 +186,12 @@ document.addEventListener("alpine:init", () => { }, updateInterval(interval) { + this.interval = interval; this._updateGameState(this.players, interval); }, _updatePlayers(players) { - if (!this.interval) { - this.interval = 30; - } + this.players = players; this._updateGameState(players, this.interval); }, @@ -201,6 +208,7 @@ document.addEventListener("alpine:init", () => { ) return; + this._lastGameState = newGameState; console.log("Updating game state:", newGameState); this._client.publish( this._gameStateTopic, diff --git a/sound/time-almost-over.mp3 b/sound/time-almost-over.mp3 new file mode 100644 index 0000000..301acc5 Binary files /dev/null and b/sound/time-almost-over.mp3 differ diff --git a/sound/time-over.mp3 b/sound/time-over.mp3 new file mode 100644 index 0000000..7272915 Binary files /dev/null and b/sound/time-over.mp3 differ