Chore: initial commit
This commit is contained in:
parent
0ed31caed5
commit
30cfa6fa63
GPG key ID:
989DE36109AFA354
3 changed files with 232 additions and 0 deletions
10
index.css
Normal file
10
index.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.timer {
|
||||
font-size: 10em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.timer.over {
|
||||
color: #f00;
|
||||
}
|
||||
57
index.html
Normal file
57
index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<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="index.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="container">
|
||||
<div x-data>
|
||||
<div x-show="$store.localState.joined">
|
||||
<hgroup>
|
||||
<h1 x-text="'Currently playing: ' + $store.remoteState.players[$store.remoteState.currentPlayer]">
|
||||
</h1>
|
||||
<h2 x-text="'I am ' + $store.localState.name"></h2>
|
||||
</hgroup>
|
||||
|
||||
<div x-data="Timer">
|
||||
<p :class="time < 0 ? 'timer over':'timer'" x-text="time + 's'"></p>
|
||||
</div>
|
||||
|
||||
<button @click="$store.remoteState.giveTurnToNextPlayer()"
|
||||
x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">I'm done!</button>
|
||||
<p>Player after me:</p>
|
||||
<select x-model="$store.localState.nextPlayer">
|
||||
<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>
|
||||
<div class="grid">
|
||||
<button class="secondary outline" @click="$store.localState.leave()">Leave</button>
|
||||
<button class="secondary outline" @click="$store.remoteState.clear()">Clear</button>
|
||||
</div>
|
||||
<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 x-show="!$store.localState.joined">
|
||||
<form x-data="JoinForm()" @submit.prevent="submitForm">
|
||||
<input type="text" x-model="formData.name" placeholder="Name">
|
||||
<button type="submit">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
165
index.js
Normal file
165
index.js
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
function JoinForm() {
|
||||
return {
|
||||
formData: {
|
||||
name: ""
|
||||
},
|
||||
submitForm() {
|
||||
Alpine.store("localState").join(this.formData.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
);
|
||||
}
|
||||
|
||||
function Timer() {
|
||||
return {
|
||||
time: 0,
|
||||
init() {
|
||||
setInterval(() => {
|
||||
this.time = parseInt((30000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
|
||||
}, 1000);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('alpine:init', () => {
|
||||
console.log("Alpine.js is ready to go!")
|
||||
|
||||
|
||||
Alpine.store("localState", {
|
||||
joined: false,
|
||||
nextPlayer: null,
|
||||
name: "",
|
||||
id: "",
|
||||
|
||||
init() {
|
||||
Alpine.effect(() => {
|
||||
if (this.joined) {
|
||||
Alpine.store("remoteState").connect();
|
||||
}
|
||||
})
|
||||
|
||||
Alpine.effect(() => {
|
||||
console.log(this.nextPlayer)
|
||||
})
|
||||
this.restore();
|
||||
},
|
||||
|
||||
join(name) {
|
||||
this.joined = true;
|
||||
this.name = name;
|
||||
this.id = uuidv4();
|
||||
localStorage.clear();
|
||||
localStorage.setItem("joined", this.joined)
|
||||
localStorage.setItem("name", this.name);
|
||||
localStorage.setItem("id", this.id)
|
||||
},
|
||||
|
||||
leave() {
|
||||
this.joined = false;
|
||||
this.name = "";
|
||||
this.id = "";
|
||||
localStorage.clear();
|
||||
Alpine.store("remoteState").disconnect();
|
||||
},
|
||||
|
||||
restore() {
|
||||
const joined = localStorage.getItem("joined");
|
||||
if (joined) {
|
||||
this.joined = true;
|
||||
this.name = localStorage.getItem("name");
|
||||
this.id = localStorage.getItem("id");
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Alpine.store("remoteState", {
|
||||
players: [],
|
||||
currentPlayer: null,
|
||||
lastPlayerSwitch: 0,
|
||||
connected: false,
|
||||
_client: null,
|
||||
|
||||
init() {
|
||||
Alpine.effect(() => {
|
||||
if (this.connected && Object.keys(this.players).indexOf(Alpine.store("localState").id) === -1) {
|
||||
this._client.publish('im.dorian.whos-turn-is-it.players', JSON.stringify({
|
||||
[Alpine.store("localState").id]: Alpine.store("localState").name,
|
||||
...this.players
|
||||
}), { qos:1, retain: true })
|
||||
}
|
||||
})
|
||||
|
||||
Alpine.effect(() => {
|
||||
this.lastPlayerSwitch = new Date().getTime();
|
||||
if(this.currentPlayer == Alpine.store("localState").id) {
|
||||
alert("It's your turn!")
|
||||
}
|
||||
})
|
||||
|
||||
Alpine.effect(() => {
|
||||
if(Alpine.store("localState").nextPlayer == null || !Object.keys(this.players).includes(Alpine.store("localState").nextPlayer)) {
|
||||
const players = Object.keys(this.players).sort();
|
||||
const nextPlayer = players[(players.indexOf(Alpine.store("localState").id) + 1) % players.length]
|
||||
Alpine.store("localState").nextPlayer = nextPlayer;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
connect() {
|
||||
const url = 'ws://broker.emqx.io:8083/mqtt'
|
||||
|
||||
const options = {
|
||||
// Clean session
|
||||
clean: true,
|
||||
connectTimeout: 4000,
|
||||
// Authentication
|
||||
clientId: Alpine.store("localState").id,
|
||||
}
|
||||
|
||||
this._client = mqtt.connect(url, options)
|
||||
const client = this._client;
|
||||
this._client.on('connect', function () {
|
||||
// Subscribe to a topic
|
||||
client.subscribe('im.dorian.whos-turn-is-it.players')
|
||||
client.subscribe('im.dorian.whos-turn-is-it.currentPlayer')
|
||||
})
|
||||
|
||||
|
||||
this._client.on('message', function (topic, message) {
|
||||
// message is Buffer
|
||||
console.log(topic, message.toString())
|
||||
|
||||
if (topic === "im.dorian.whos-turn-is-it.players") {
|
||||
const data = JSON.parse(message.toString());
|
||||
if(!Alpine.store("remoteState").connected) {
|
||||
Alpine.store("remoteState").connected = true;
|
||||
}
|
||||
Alpine.store("remoteState").players = data;
|
||||
}
|
||||
else if(topic === "im.dorian.whos-turn-is-it.currentPlayer") {
|
||||
Alpine.store("remoteState").currentPlayer = message.toString();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
giveTurnToNextPlayer() {
|
||||
this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").nextPlayer, { qos:1, retain: true })
|
||||
},
|
||||
|
||||
|
||||
disconnect() {
|
||||
this._client.end(true);
|
||||
},
|
||||
|
||||
clear() {
|
||||
this._client.publish('im.dorian.whos-turn-is-it.players', JSON.stringify({
|
||||
[Alpine.store("localState").id]: Alpine.store("localState").name,
|
||||
}), { qos:1, retain: true })
|
||||
}
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue