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

Feat: independent rooms

Browse source
This commit is contained in:
Dorian Zedler 2023-01-05 10:22:17 +01:00
parent 50de5ad59c
commit 15bf78d373
Signed by: dorian
GPG key ID: 989DE36109AFA354
3 changed files with 133 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.css
View file

@ -27,3 +27,20 @@
margin-bottom: 2.5em; margin-bottom: 2.5em;
margin-top: 2.5em; margin-top: 2.5em;
} }
.first-details {
padding-top: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
border-top: var(--border-width) solid var(--accordion-border-color);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.invalid, input[type="reset"].outline {
--color: var(--form-element-invalid-border-color);
--background-color: transparent;
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).invalid, input[type="reset"] {
--background-color: var(--form-element-invalid-border-color);
--border-color: var(--form-element-invalid-border-color);
cursor: pointer;
}

73
index.html
View file

@ -14,7 +14,7 @@
<body> <body>
<main class="container"> <main class="container">
<div x-data> <div x-data>
<div x-show="$store.localState.joined"> <div x-show="$store.localState.room">
<hgroup> <hgroup>
<h1 <h1
x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])"> x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
@ -39,44 +39,55 @@
I'm done! I'm done!
</button> </button>
<label for="nextPlayer_select">Player after me: <details class="first-details">
<b x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b> <summary>Settings for me</summary>
</label>
<select x-model="$store.localState.nextPlayer" id="nextPlayer_select">
<template
x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
:key="playerId">
<option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
</template>
</select>
<fieldset>
<label for="sound_enabled">
<input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()" type="checkbox"
id="sound_enabled" name="sound_enabled" role="switch" />
Enable sound
</label>
</fieldset>
<div class="grid"> <fieldset>
<button class="secondary outline" @click="$store.localState.leave()"> <label for="nextPlayer_select">Player after me:
Leave <b x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b>
</label>
<select x-model="$store.localState.nextPlayer" id="nextPlayer_select">
<template
x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
:key="playerId">
<option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
</template>
</select>
<label for="sound_enabled">
<input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()"
type="checkbox" id="sound_enabled" name="sound_enabled" role="switch" />
Enable sound
</label>
</fieldset>
<button class="invalid outline" @click="$store.localState.leave()" type="submit">
Leave room
</button> </button>
</details>
<details>
<summary>This room</summary>
<p>
Other players:
<ul>
<template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">
<li x-text="$store.remoteState.players[playerId]"></li>
</template>
</ul>
</p>
<button class="secondary outline" @click="$store.remoteState.clear()"> <button class="secondary outline" @click="$store.remoteState.clear()">
Clear Clear player list
</button> </button>
</div> </details>
<p>Other players:</p>
<ul>
<template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">
<li x-text="$store.remoteState.players[playerId]"></li>
</template>
</ul>
</div> </div>
<div x-show="!$store.localState.joined"> <div x-show="!$store.localState.room">
<form x-data="JoinForm()" @submit.prevent="submitForm"> <form x-data="JoinForm()" @submit.prevent="submitForm">
<input type="text" x-model="formData.name" placeholder="Name" /> <input type="text" x-model="formData.name" placeholder="Name" />
<input type="text" x-model="formData.room" placeholder="Room" />
<button type="submit">Join</button> <button type="submit">Join</button>
</form> </form>
</div> </div>

116
index.js
View file

@ -1,12 +1,17 @@
function JoinForm() { function JoinForm() {
return { return {
formData: { formData: {
name: "", name: "",
room: "",
},
init() {
this.formData.name = Alpine.store("localState").name;
this.formData.room = Alpine.store("localState").room;
}, },
submitForm() { submitForm() {
Alpine.store("localState").join(this.formData.name); Alpine.store("localState").join(this.formData.name, this.formData.room);
}, }
}; }
} }
function uuidv4() { function uuidv4() {
@ -24,7 +29,7 @@ function Timer() {
init() { init() {
setInterval(() => { setInterval(() => {
const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch; const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch;
console.log(lastPlayerSwitch);
if (!lastPlayerSwitch) { if (!lastPlayerSwitch) {
this.time = null; this.time = null;
} else { } else {
@ -41,46 +46,54 @@ document.addEventListener("alpine:init", () => {
console.log("Alpine.js is ready to go!"); console.log("Alpine.js is ready to go!");
Alpine.store("localState", { Alpine.store("localState", {
joined: false, room: null,
nextPlayer: null, nextPlayer: null,
name: "", name: "",
id: "", id: "",
init() { init() {
Alpine.effect(() => { Alpine.effect(() => {
if (this.joined) { const remoteState = Alpine.store("remoteState");
Alpine.store("remoteState").connect(); if (this.room) {
remoteState.connect();
}
else if (remoteState && remoteState.connected){
remoteState.disconnect();
} }
}); });
this.restore(); 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) { join(name, room) {
this.joined = true; this.room = room;
this.name = name; this.name = name;
this.id = uuidv4();
localStorage.clear();
localStorage.setItem("joined", this.joined);
localStorage.setItem("name", this.name);
localStorage.setItem("id", this.id);
}, },
leave() { leave() {
this.joined = false; this.room = null;
this.name = "";
localStorage.clear();
localStorage.setItem("id", this.id);
Alpine.store("remoteState").disconnect();
}, },
restore() { restore() {
const joined = localStorage.getItem("joined"); this.id = localStorage.getItem("id");
if (joined) { if(!this.id) {
this.joined = true; this.id = uuidv4();
this.name = localStorage.getItem("name");
this.id = localStorage.getItem("id");
} }
this.name = localStorage.getItem("name");
this.room = localStorage.getItem("room");
}, },
}); });
@ -90,7 +103,11 @@ document.addEventListener("alpine:init", () => {
lastPlayerSwitch: null, lastPlayerSwitch: null,
connected: false, connected: false,
isMyTurn: false, isMyTurn: false,
_client: null, _client: null,
_playersTopic: null,
_currentPlayerTopic: null,
_gameStateTopic: null,
init() { init() {
Alpine.effect(() => { Alpine.effect(() => {
@ -100,7 +117,7 @@ document.addEventListener("alpine:init", () => {
-1 -1
) { ) {
this._client.publish( this._client.publish(
"im.dorian.whos-turn-is-it.players", this._playersTopic,
JSON.stringify({ JSON.stringify({
[Alpine.store("localState").id]: Alpine.store("localState").name, [Alpine.store("localState").id]: Alpine.store("localState").name,
...this.players, ...this.players,
@ -113,6 +130,7 @@ document.addEventListener("alpine:init", () => {
Alpine.effect(() => { Alpine.effect(() => {
if (this.currentPlayer == Alpine.store("localState").id) { if (this.currentPlayer == Alpine.store("localState").id) {
this.isMyTurn = true; this.isMyTurn = true;
Alpine.store("audio").playDing();
} else { } else {
this.isMyTurn = false; this.isMyTurn = false;
} }
@ -136,16 +154,18 @@ document.addEventListener("alpine:init", () => {
Alpine.store("localState").nextPlayer = nextPlayer; Alpine.store("localState").nextPlayer = nextPlayer;
} }
}); });
Alpine.effect(() => {
if (this.isMyTurn) {
Alpine.store("audio").playDing();
}
});
}, },
connect() { connect() {
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(
"localState"
).room)}`;
this._gameStateTopic = `${topicPrefix}.gameState`;
this._playersTopic = `${topicPrefix}.players`;
this._currentPlayerTopic = `${topicPrefix}.currentPlayer`;
const options = { const options = {
// Clean session // Clean session
@ -156,24 +176,24 @@ document.addEventListener("alpine:init", () => {
}; };
this._client = mqtt.connect(url, options); this._client = mqtt.connect(url, options);
const client = this._client;
this._client.on("connect", function () { this._client.on("connect", () => {
// Subscribe to a topic // Subscribe to a topic
client.subscribe("im.dorian.whos-turn-is-it.players"); that._client.subscribe(that._playersTopic);
client.subscribe("im.dorian.whos-turn-is-it.currentPlayer"); that._client.subscribe(that._currentPlayerTopic);
}); });
this._client.on("message", function (topic, message) { this._client.on("message", (topic, message) => {
// message is Buffer // message is Buffer
console.log(topic, message.toString()); console.log(topic, message.toString());
if (topic === "im.dorian.whos-turn-is-it.players") { if (topic === that._playersTopic) {
const data = JSON.parse(message.toString()); const data = JSON.parse(message.toString());
if (!Alpine.store("remoteState").connected) { if (!Alpine.store("remoteState").connected) {
Alpine.store("remoteState").connected = true; Alpine.store("remoteState").connected = true;
} }
Alpine.store("remoteState").players = data; Alpine.store("remoteState").players = data;
} else if (topic === "im.dorian.whos-turn-is-it.currentPlayer") { } else if (topic === that._currentPlayerTopic) {
const data = JSON.parse(message.toString()); const data = JSON.parse(message.toString());
Alpine.store("remoteState").currentPlayer = data.id; Alpine.store("remoteState").currentPlayer = data.id;
Alpine.store("remoteState").lastPlayerSwitch = data.since; Alpine.store("remoteState").lastPlayerSwitch = data.since;
@ -183,7 +203,7 @@ document.addEventListener("alpine:init", () => {
giveTurnToNextPlayer() { giveTurnToNextPlayer() {
this._client.publish( this._client.publish(
"im.dorian.whos-turn-is-it.currentPlayer", this._currentPlayerTopic,
JSON.stringify({ JSON.stringify({
id: Alpine.store("localState").nextPlayer, id: Alpine.store("localState").nextPlayer,
since: new Date().getTime(), since: new Date().getTime(),
@ -194,18 +214,30 @@ document.addEventListener("alpine:init", () => {
disconnect() { disconnect() {
this._client.end(true); this._client.end(true);
this._client = null;
this.players = [];
this.currentPlayer = null;
this.lastPlayerSwitch = null;
this.connected = false;
this.isMyTurn = false;
this._gameStateTopic = null;
this._playersTopic = null;
this._currentPlayerTopic = null;
Alpine.store("localState").nextPlayer = null;
}, },
clear() { clear() {
this._client.publish( this._client.publish(
"im.dorian.whos-turn-is-it.players", this._playersTopic,
JSON.stringify({ JSON.stringify({
[Alpine.store("localState").id]: Alpine.store("localState").name, [Alpine.store("localState").id]: Alpine.store("localState").name,
}), }),
{ qos: 1, retain: true } { qos: 1, retain: true }
); );
this._client.publish( this._client.publish(
"im.dorian.whos-turn-is-it.currentPlayer", this._currentPlayerTopic,
JSON.stringify({ JSON.stringify({
id: Alpine.store("localState").id, id: Alpine.store("localState").id,
since: new Date().getTime(), since: new Date().getTime(),