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

12
index.html
View file

@ -19,14 +19,15 @@
<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">
<p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')" <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
x-text="time + 's'"></p> x-text="time + 's'"></p>
</div> </div>
<button @click="$store.remoteState.giveTurnToNextPlayer()" <button @click="$store.remoteState.giveTurnToNextPlayer()"
@ -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:

22
js/index.js
View file

@ -10,17 +10,17 @@ function uuidv4() {
function JoinForm() { function JoinForm() {
return { return {
formData: { formData: {
name: "", name: "",
room: "", room: "",
}, },
init() { init() {
this.formData.name = Alpine.store("localState").name; this.formData.name = Alpine.store("localState").name;
this.formData.room = Alpine.store("localState").room; this.formData.room = Alpine.store("localState").room;
}, },
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);

91
js/localState.js
View file

@ -1,53 +1,52 @@
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.store("localState", { Alpine.store("localState", {
room: null, room: null,
nextPlayer: null, nextPlayer: null,
name: "", name: "",
id: "", id: "",
init() { init() {
Alpine.effect(() => { Alpine.effect(() => {
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(); }
} });
});
this.restore(); this.restore();
Alpine.effect(() => { Alpine.effect(() => {
// write stuff to local storage // write stuff to local storage
if (this.room) { if (this.room) {
localStorage.setItem("room", this.room); localStorage.setItem("room", this.room);
} else { } else {
localStorage.removeItem("room"); 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"); localStorage.setItem("name", this.name);
this.room = localStorage.getItem("room"); 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");
},
});
}); });

31
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`;
@ -83,7 +83,7 @@ document.addEventListener("alpine:init", () => {
this._client.on("connect", () => { this._client.on("connect", () => {
setTimeout(() => { setTimeout(() => {
if(!that.connected) { if (!that.connected) {
// reset game if not connected after 5 seconds // reset game if not connected after 5 seconds
that.clear(); that.clear();
} }
@ -144,7 +144,7 @@ document.addEventListener("alpine:init", () => {
}, },
_updatePlayers(players) { _updatePlayers(players) {
if(!this.interval) { if (!this.interval) {
this.interval = 30; this.interval = 30;
} }
this._updateGameState(players, this.interval); this._updateGameState(players, this.interval);
@ -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 }
); );
} },
}); });
}); });