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

Chore: make create room page prettier

Browse source
This commit is contained in:
Dorian Zedler 2023-01-05 19:38:09 +01:00
parent 6d5f4047e2
commit d0857233f4
Signed by: dorian
GPG key ID: 989DE36109AFA354
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -97,9 +97,19 @@
</div> </div>
<div x-show="!$store.localState.room"> <div x-show="!$store.localState.room">
<hgroup>
<h1>
Whose turn is it?
</h1>
<h2>Please create or join a room</h2>
</hgroup>
<form x-data="JoinForm()" @submit.prevent="submitForm"> <form x-data="JoinForm()" @submit.prevent="submitForm">
<input type="text" x-model="formData.name" placeholder="Name" /> <label for="joinForm_name">Name:</label>
<input type="text" x-model="formData.room" placeholder="Room" /> <input id="joinForm_name" type="text" x-model="formData.name" placeholder="Name" />
<small>How others will see you</small>
<label for="joinForm_room">Room:</label>
<input id="joinForm_room" type="text" x-model="formData.room" placeholder="Room" />
<small>Make sure, this is exactly the same for all players</small>
<button type="submit">Join</button> <button type="submit">Join</button>
</form> </form>
</div> </div>

4
js/remoteState.js
View file

@ -84,7 +84,7 @@ document.addEventListener("alpine:init", () => {
iterations: 5000, iterations: 5000,
}); });
const topicPrefix = `im.dorian.whos-turn-is-it.${btoa( const topicPrefix = `im.dorian.whose-turn-is-it.${btoa(
Alpine.store("localState").room Alpine.store("localState").room
)}`; )}`;
this._gameStateTopic = CryptoJS.SHA256( this._gameStateTopic = CryptoJS.SHA256(
@ -114,7 +114,7 @@ document.addEventListener("alpine:init", () => {
// reset game if not connected after 5 seconds // reset game if not connected after 5 seconds
that.clear(); that.clear();
} }
}, 1000 * 5); }, 1000 * 4);
that._client.subscribe(that._gameStateTopic); that._client.subscribe(that._gameStateTopic);
that._client.subscribe(that._currentPlayerTopic); that._client.subscribe(that._currentPlayerTopic);