Fix: too many updates, Feat: more sounds

This commit is contained in:
Dorian Zedler 2023-12-26 19:42:47 +01:00
parent 428ed81e5b
commit 96828121f3
Signed by: dorian
GPG key ID: 989DE36109AFA354
5 changed files with 32 additions and 8 deletions

View file

@ -7,6 +7,7 @@
<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="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
<script src="https://unpkg.com/nosleep.js@0.12.0/dist/NoSleep.min.js"></script>
<script src="js/index.js"></script>
<script src="js/localState.js"></script>
<script src="js/remoteState.js"></script>

View file

@ -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;

View file

@ -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,

BIN
sound/time-almost-over.mp3 Normal file

Binary file not shown.

BIN
sound/time-over.mp3 Normal file

Binary file not shown.