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

Feat: keep time and sync and loading indicator

Browse source
This commit is contained in:
Dorian Zedler 2022-12-29 20:46:09 +01:00
parent 196cbc26e2
commit f3868abd08
Signed by: dorian
GPG key ID: 989DE36109AFA354
3 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.css
View file

@ -20,4 +20,11 @@
.timer.over {
color: #f00;
animation: blinker 0.5s ease infinite;
}
.timer.loading {
font-size: 2em;
margin: auto;
margin-bottom: 2.5em;
margin-top: 2.5em;
}

5
index.html
View file

@ -23,8 +23,13 @@
</hgroup>
<div x-data="Timer">
<div x-show="!time">
<div class="timer loading" href="#" aria-busy="true">please wait</div>
</div>
<div x-show="time">
<p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
x-text="time + 's'"></p>
</div>
</div>
<button @click="$store.remoteState.giveTurnToNextPlayer()"

28
index.js
View file

@ -20,8 +20,15 @@ function Timer() {
time: 0,
init() {
setInterval(() => {
this.time = parseInt((90000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
}, 1000);
const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch
console.log(lastPlayerSwitch)
if(!lastPlayerSwitch) {
this.time = null
}
else {
this.time = parseInt((90000 - ((new Date()).getTime() - lastPlayerSwitch)) / 1000);
}
}, 100);
},
}
}
@ -77,7 +84,7 @@ document.addEventListener('alpine:init', () => {
Alpine.store("remoteState", {
players: [],
currentPlayer: null,
lastPlayerSwitch: 0,
lastPlayerSwitch: null,
connected: false,
isMyTurn: false,
_client: null,
@ -93,7 +100,6 @@ document.addEventListener('alpine:init', () => {
})
Alpine.effect(() => {
this.lastPlayerSwitch = new Date().getTime();
if (this.currentPlayer == Alpine.store("localState").id) {
this.isMyTurn = true;
}
@ -149,13 +155,18 @@ document.addEventListener('alpine:init', () => {
Alpine.store("remoteState").players = data;
}
else if (topic === "im.dorian.whos-turn-is-it.currentPlayer") {
Alpine.store("remoteState").currentPlayer = message.toString();
const data = JSON.parse(message.toString());
Alpine.store("remoteState").currentPlayer = data.id;
Alpine.store("remoteState").lastPlayerSwitch = data.since;
}
})
},
giveTurnToNextPlayer() {
this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").nextPlayer, { qos: 1, retain: true })
this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', JSON.stringify({
id: Alpine.store("localState").nextPlayer,
since: new Date().getTime()
}), { qos: 1, retain: true })
},
@ -167,7 +178,10 @@ document.addEventListener('alpine:init', () => {
this._client.publish('im.dorian.whos-turn-is-it.players', JSON.stringify({
[Alpine.store("localState").id]: Alpine.store("localState").name,
}), { qos: 1, retain: true })
this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").id, { qos: 1, retain: true })
this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', JSON.stringify({
id: Alpine.store("localState").id,
since: new Date().getTime()
}), { qos: 1, retain: true })
}
})