Make the "Host a new game" buttons primary on each page

Displaying it first, (before the form for joining an existing game).

Also drop the submit button from the join form, (relying on the user
simply entering a game ID instead).

This makes the primary flow smoother: Choose a game, then click "Host"
without the user being confronted with a form and having to decide
which of two buttons to click.

diff --git a/anagrams/index.html b/anagrams/index.html
index 52ae5c97272e51f99a098291e239c880af5196ae..ee15fd3e055fc0cdca05886a2ba7c40bf1296d2a 100644 (file)
--- a/anagrams/index.html
+++ b/anagrams/index.html
@@ -26,30 +26,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('anagrams'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('anagrams'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
     </div>

diff --git a/empathy/index.html b/empathy/index.html
index d7c004aa1f6a2cbc48b90a5a1a8750eff7d36954..5d7c695b9abafafd83a8ba52d75034a8c1f54dfb 100644 (file)
--- a/empathy/index.html
+++ b/empathy/index.html
@@ -25,30 +25,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('empathy'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('empathy'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
     </div>

diff --git a/empires/index.html b/empires/index.html
index ab888053e355618bd31a661b43a7f509a6bc3111..4f7d52116be2f78b47bb697abeeb7c9fb2381806 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -25,30 +25,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('empires'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('empires'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
       <h2>What is Empires?</h2>

diff --git a/letterrip/index.html b/letterrip/index.html
index 8284fdc04b200f544acfb5f595ef01f13859e758..55200e6ad9c055095f2a36a7db459fc9764c7053 100644 (file)
--- a/letterrip/index.html
+++ b/letterrip/index.html
@@ -28,30 +28,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('letterrip'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('letterrip'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
     </div>

diff --git a/scribe/index.html b/scribe/index.html
index 994ea14d2380264145bba9e1974575e66f256d29..2216f8697fba0dcc68b95340ddade2107779d21b 100644 (file)
--- a/scribe/index.html
+++ b/scribe/index.html
@@ -26,30 +26,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('scribe'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('scribe'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
     </div>

diff --git a/tictactoe/index.html b/tictactoe/index.html
index 72aeefbaacb9cb8db517a7d4d2742109150bff54..7d2011151f1d2318d1aa6547b5f72ed139a924d0 100644 (file)
--- a/tictactoe/index.html
+++ b/tictactoe/index.html
@@ -24,30 +24,22 @@
       <div id="message-area">
       </div>
 
+      <form onsubmit="lmno_new('tictactoe'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
+
       <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
-          <label for="id">Game ID</label>
+          <label for="id">Or join an existing game:</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>
+                 required>
         </div>
-
-      </form>
-
-      <form onsubmit="lmno_new('tictactoe'); return false;">
-        <button type="submit">
-          Host a new game
-        </button>
       </form>
 
     </div>