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">
<hgroup>
<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>
<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>
<div x-data="Timer">
<p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
x-text="time + 's'"></p>
<p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
x-text="time + 's'"></p>
</div>
<button @click="$store.remoteState.giveTurnToNextPlayer()"
@ -66,7 +67,8 @@
<summary>This room</summary>
<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>
Other players:

22
js/index.js
View file

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

101
js/localState.js
View file

@ -1,53 +1,52 @@
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();
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.name = localStorage.getItem("name");
this.room = localStorage.getItem("room");
},
});
});
});
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");
},
});
});

33
js/remoteState.js
View file

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