From d0857233f4924881272d2ce55ce5979d4983d182 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Thu, 5 Jan 2023 19:38:09 +0100
Subject: [PATCH] Chore: make create room page prettier

---
 index.html        | 14 ++++++++++++--
 js/remoteState.js |  4 ++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index b98ff24..cbb93bc 100644
--- a/index.html
+++ b/index.html
@@ -97,9 +97,19 @@
             </div>
 
             <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">
-                    <input type="text" x-model="formData.name" placeholder="Name" />
-                    <input type="text" x-model="formData.room" placeholder="Room" />
+                    <label for="joinForm_name">Name:</label>
+                    <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>
                 </form>
             </div>
diff --git a/js/remoteState.js b/js/remoteState.js
index 9f8dd8b..46a0aa1 100644
--- a/js/remoteState.js
+++ b/js/remoteState.js
@@ -84,7 +84,7 @@ document.addEventListener("alpine:init", () => {
         iterations: 5000,
       });
 
-      const topicPrefix = `im.dorian.whos-turn-is-it.${btoa(
+      const topicPrefix = `im.dorian.whose-turn-is-it.${btoa(
         Alpine.store("localState").room
       )}`;
       this._gameStateTopic = CryptoJS.SHA256(
@@ -114,7 +114,7 @@ document.addEventListener("alpine:init", () => {
             // reset game if not connected after 5 seconds
             that.clear();
           }
-        }, 1000 * 5);
+        }, 1000 * 4);
 
         that._client.subscribe(that._gameStateTopic);
         that._client.subscribe(that._currentPlayerTopic);