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