Add a form to join an existing game (by 4-letter code) from each game page

We already had the ability to host a new game at these pages, but a
user may land here on want to join an existing game. So give them that
form to be able to do that. (Saves them having to know that they could
go to / to do that, and saves them the work of doing that.)

diff --git a/empathy/index.html b/empathy/index.html
index c25d75e8dc26abfd4d38d10ca540286f0dbbe5c9..d7c004aa1f6a2cbc48b90a5a1a8750eff7d36954 100644 (file)
--- a/empathy/index.html
+++ b/empathy/index.html
@@ -25,6 +25,26 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_join(this); return false">
+
+        <div class="form-field large">
+          <label for="id">Game ID</label>
+          <input type="text" id="id" maxlength="4"
+                 placeholder="Enter a 4-letter Game Code"
+                 oninput="this.value = this.value.toUpperCase()"
+                 autocomplete="off"
+                 required
+                 autofocus>
+        </div>
+
+        <div class="form-field large">
+          <button type="submit">
+            Join Game
+          </button>
+        </div>
+
+      </form>
+
       <form onsubmit="lmno_new('empathy'); return false;">
         <button type="submit">
           Host a new game

diff --git a/empires/index.html b/empires/index.html
index b873e9e27f8ed84ba2af7ad8dd5b9c6d818b4d78..ab888053e355618bd31a661b43a7f509a6bc3111 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -25,6 +25,26 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_join(this); return false">
+
+        <div class="form-field large">
+          <label for="id">Game ID</label>
+          <input type="text" id="id" maxlength="4"
+                 placeholder="Enter a 4-letter Game Code"
+                 oninput="this.value = this.value.toUpperCase()"
+                 autocomplete="off"
+                 required
+                 autofocus>
+        </div>
+
+        <div class="form-field large">
+          <button type="submit">
+            Join Game
+          </button>
+        </div>
+
+      </form>
+
       <form onsubmit="lmno_new('empires'); return false;">
         <button type="submit">
           Host a new game

diff --git a/letterrip/index.html b/letterrip/index.html
index 8cac06b5abd2652b886be3ea5d409d935a29989d..8284fdc04b200f544acfb5f595ef01f13859e758 100644 (file)
--- a/letterrip/index.html
+++ b/letterrip/index.html
@@ -28,6 +28,26 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_join(this); return false">
+
+        <div class="form-field large">
+          <label for="id">Game ID</label>
+          <input type="text" id="id" maxlength="4"
+                 placeholder="Enter a 4-letter Game Code"
+                 oninput="this.value = this.value.toUpperCase()"
+                 autocomplete="off"
+                 required
+                 autofocus>
+        </div>
+
+        <div class="form-field large">
+          <button type="submit">
+            Join Game
+          </button>
+        </div>
+
+      </form>
+
       <form onsubmit="lmno_new('letterrip'); return false;">
         <button type="submit">
           Host a new game

diff --git a/scribe/index.html b/scribe/index.html
index 7638db98c8c5a607ae6b40d5f0d40341089ae43f..994ea14d2380264145bba9e1974575e66f256d29 100644 (file)
--- a/scribe/index.html
+++ b/scribe/index.html
@@ -26,6 +26,26 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_join(this); return false">
+
+        <div class="form-field large">
+          <label for="id">Game ID</label>
+          <input type="text" id="id" maxlength="4"
+                 placeholder="Enter a 4-letter Game Code"
+                 oninput="this.value = this.value.toUpperCase()"
+                 autocomplete="off"
+                 required
+                 autofocus>
+        </div>
+
+        <div class="form-field large">
+          <button type="submit">
+            Join Game
+          </button>
+        </div>
+
+      </form>
+
       <form onsubmit="lmno_new('scribe'); return false;">
         <button type="submit">
           Host a new game

diff --git a/tictactoe/index.html b/tictactoe/index.html
index 563973b498d96cfa9208fcaf44ef13c5d0dba02c..72aeefbaacb9cb8db517a7d4d2742109150bff54 100644 (file)
--- a/tictactoe/index.html
+++ b/tictactoe/index.html
@@ -24,6 +24,26 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_join(this); return false">
+
+        <div class="form-field large">
+          <label for="id">Game ID</label>
+          <input type="text" id="id" maxlength="4"
+                 placeholder="Enter a 4-letter Game Code"
+                 oninput="this.value = this.value.toUpperCase()"
+                 autocomplete="off"
+                 required
+                 autofocus>
+        </div>
+
+        <div class="form-field large">
+          <button type="submit">
+            Join Game
+          </button>
+        </div>
+
+      </form>
+
       <form onsubmit="lmno_new('tictactoe'); return false;">
         <button type="submit">
           Host a new game