From: Carl Worth <cworth@cworth.org>
Date: Sun, 8 Mar 2026 12:31:38 +0000 (-0400)
Subject: Make the "Host a new game" buttons primary on each page
X-Git-Url: https://git.cworth.org/git?a=commitdiff_plain;h=437b467294a0d0b0909090ba3ad537a373a6dcf6;p=lmno.games

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 52ae5c9..ee15fd3 100644
--- 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 d7c004a..5d7c695 100644
--- 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 ab88805..4f7d521 100644
--- 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 8284fdc..55200e6 100644
--- 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 994ea14..2216f86 100644
--- 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 72aeefb..7d20111 100644
--- 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>