dorian/whose-turn-is-it
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: format

Browse source
This commit is contained in:
Dorian Zedler 2023-01-05 13:05:28 +01:00
parent bf922ead94
commit 640852c206
Signed by: dorian
GPG key ID: 989DE36109AFA354
4 changed files with 87 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -19,9 +19,10 @@
<div x-show="$store.remoteState.connected && $store.localState.room"> <div x-show="$store.remoteState.connected && $store.localState.room">
<hgroup> <hgroup>
<h1 <h1
x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])"> x-text="'It\'s ' + ($store.remoteState.isMyTurn ? 'YOUR':($store.remoteState.players[$store.remoteState.currentPlayer] + '\'s')) + ' turn!'">
</h1> </h1>
<h2 x-text="'You are ' + $store.localState.name"></h2> <h2>You are <b x-text="$store.localState.name"></b> in the room <b
x-text="$store.localState.room"></b></h2>
</hgroup> </hgroup>
<div x-data="Timer"> <div x-data="Timer">
@ -66,7 +67,8 @@
<summary>This room</summary> <summary>This room</summary>
<label for="roomForm_interval">Interval (seconds):</label> <label for="roomForm_interval">Interval (seconds):</label>
<input id="roomForm_interval" type="number" x-model.throttle.1000ms="$store.remoteState.interval" placeholder="Interval" /> <input id="roomForm_interval" type="number" x-model.throttle.1000ms="$store.remoteState.interval"
placeholder="Interval" />
<p> <p>
Other players: Other players:

12
js/index.js
View file

@ -19,8 +19,8 @@ function JoinForm() {
}, },
submitForm() { submitForm() {
Alpine.store("localState").join(this.formData.name, this.formData.room); Alpine.store("localState").join(this.formData.name, this.formData.room);
} },
} };
} }
function RoomForm() { function RoomForm() {
@ -33,8 +33,8 @@ function RoomForm() {
}, },
submitForm() { submitForm() {
Alpine.store("remoteState").updateInterval(this.formData.interval); Alpine.store("remoteState").updateInterval(this.formData.interval);
} },
} };
} }
function Timer() { function Timer() {
@ -48,7 +48,9 @@ function Timer() {
this.time = null; this.time = null;
} else { } else {
this.time = Math.floor( 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); }, 100);

3
js/localState.js
View file

@ -10,8 +10,7 @@ document.addEventListener("alpine:init", () => {
const remoteState = Alpine.store("remoteState"); const remoteState = Alpine.store("remoteState");
if (this.room) { if (this.room) {
remoteState.connect(); remoteState.connect();
} } else if (remoteState && remoteState.connected) {
else if (remoteState && remoteState.connected){
remoteState.disconnect(); remoteState.disconnect();
} }
}); });

27
js/remoteState.js
View file

@ -21,7 +21,7 @@ document.addEventListener("alpine:init", () => {
) { ) {
this._updatePlayers({ this._updatePlayers({
[Alpine.store("localState").id]: Alpine.store("localState").name, [Alpine.store("localState").id]: Alpine.store("localState").name,
...this.players ...this.players,
}); });
} }
}); });
@ -64,9 +64,9 @@ document.addEventListener("alpine:init", () => {
connect() { connect() {
const that = this; const that = this;
const url = "wss://broker.emqx.io:8084/mqtt"; const url = "wss://broker.emqx.io:8084/mqtt";
const topicPrefix = `im.dorian.whos-turn-is-it.${btoa(Alpine.store( const topicPrefix = `im.dorian.whos-turn-is-it.${btoa(
"localState" Alpine.store("localState").room
).room)}`; )}`;
this._gameStateTopic = `${topicPrefix}.gameState`; this._gameStateTopic = `${topicPrefix}.gameState`;
this._currentPlayerTopic = `${topicPrefix}.currentPlayer`; this._currentPlayerTopic = `${topicPrefix}.currentPlayer`;
@ -155,14 +155,17 @@ document.addEventListener("alpine:init", () => {
version: 1, version: 1,
players: players, players: players,
interval: interval, interval: interval,
} };
if(this._lastGameState && JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)) return; if (
this._client.publish( this._lastGameState &&
this._gameStateTopic, JSON.stringify(this._lastGameState) === JSON.stringify(newGameState)
JSON.stringify(newGameState), )
{ qos: 1, retain: true } return;
); this._client.publish(this._gameStateTopic, JSON.stringify(newGameState), {
qos: 1,
retain: true,
});
}, },
_updateCurrentPlayer(id) { _updateCurrentPlayer(id) {
@ -174,6 +177,6 @@ document.addEventListener("alpine:init", () => {
}), }),
{ qos: 1, retain: true } { qos: 1, retain: true }
); );
} },
}); });
}); });