Get rooms working

demo/index.html

@@ -11,11 +11,13 @@
       <div id="split">
         <div>
           <div id="shiritori"></div>
-          <input id="shiritori-input" onfocusout="setTimeout(() => this.focus(), 100)" autofocus>
+          <input id="shiritori-input" autocomplete="off" autofocus>
         </div>
         <iframe src="https://jisho.org"></iframe>
       </div>
       <p id="shiritori-players"></p>
+      <button onclick="changeRoom('lobby')">Back to lobby</button>
+      Change room: <input id="room-input" autocomplete="off">
     </div>
     <script src="shiritori.js"></script>
   </body>

demo/shiritori.js

@@ -1,9 +1,9 @@
 ws = new WebSocket("ws://localhost:8080");
 const div = document.querySelector("#shiritori");
 const input = document.querySelector("#shiritori-input");
+const roomInput = document.querySelector("#room-input");
 const players = document.querySelector("#shiritori-players");
 const iframe = document.querySelector("iframe");
-console.log("yo");
 let id = null;
 
 function displayWord(_word, end, delay) {
@@ -29,6 +29,9 @@ function updateInput(data) {
     input.placeholder = waiting ? "Waiting for other players..." : `${data.next_mora}…`;
     input.disabled = waiting;
     if (!waiting) input.focus();
+  } else {
+    input.placeholder = "";
+    input.focus();
   }
 }
 
@@ -40,9 +43,11 @@ ws.onmessage = e => {
   const { event, data } = JSON.parse(e.data);
   switch (event) {
     case "greeting":
-      id = data.id;
+      div.innerHTML = "";
       updateInput(data);
-      lookUpWord(data.word.word);
+      if (typeof data.word !== "undefined") {
+        lookUpWord(data.word.word);
+      }
       break;
     case "word":
       displayWord(data.word, true, 0);
@@ -50,7 +55,6 @@ ws.onmessage = e => {
       lookUpWord(data.word.word);
       break;
     case "history":
-      console.log(data);
       for (let i = 0; i < data.words.length; i++) {
         displayWord(data.words[i], false, 0.1 * i);
       }
@@ -67,7 +71,26 @@ ws.onmessage = e => {
 
 input.addEventListener('keypress', e => {
   if (e.key === 'Enter') {
-    ws.send(input.value);
+    ws.send(JSON.stringify({
+      word: {
+        word: input.value
+      }
+    }));
     input.value = "";
   }
 });
+
+function changeRoom(room) {
+  ws.send(JSON.stringify({
+    changeRoom: {
+      name: room
+    }
+  }))
+}
+
+roomInput.addEventListener('keypress', e => {
+  if (e.key === 'Enter') {
+    changeRoom(roomInput.value);
+    roomInput.value = "";
+  }
+ })

demo/style.css

@@ -9,6 +9,7 @@ body {
     height: 100vh;
     align-items: center;
     justify-content: center;
+    text-align: center;
 }
 div#content {
     width: 32em;
@@ -36,7 +37,6 @@ div#shiritori {
     padding: 2px;
     height: 24em;
     overflow-y: scroll;
-    text-align: center;
 }
 div#shiritori, input#shiritori-input, #split > :last-child {
     background: rgba(0, 0, 0, 0.25);
@@ -49,6 +49,9 @@ div#shiritori, input#shiritori-input {
 }
 input {
     font-size: 1em;
+    background: rgba(0, 0, 0, 0.25);
+    border: none;
+    padding: 0.25em;
 }
 input#shiritori-input {
     width: 100%;
@@ -66,9 +69,6 @@ div#shiritori {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
-p#shiritori-players {
-    text-align: center;
-}
 #split {
     display: flex;
     gap: 0.5em;
@@ -83,3 +83,10 @@ a {
 a:hover {
     border-bottom: 2px solid;
 }
+button {
+    background: rgba(0, 0, 0, 0.25);
+    font-size: inherit;
+    cursor: pointer;
+    padding: 1em;
+    border: 0;
+}