Add some autofocus attributes

[lmno.games] / empires / game.html
diff --git a/empires/game.html b/empires/game.html

index 960930b69c7cb5bc913eeb0066c570b599c0b034..d9de6a9f2cef981e51b51d6bb9413a8b52fddf87 100644 (file)
--- a/empires/game.html
+++ b/empires/game.html
@@ -2,17 +2,17 @@
  <html>
    <head>
      <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
      <title>The Game of Empires</title>
  
      <link rel="stylesheet" href="/reset.css" type="text/css" />
      <link rel="stylesheet" href="/style.css" type="text/css" />
-    <link rel="stylesheet" href="game.css" type="text/css" />
+    <link rel="stylesheet" href="/empires/game.css" type="text/css" />
    </head>
    <body>
  
-    <script src="game.js"></script>
+    <script src="/empires/game.js"></script>
  
      <div id="page">
  
@@ -35,9 +35,9 @@
        <div id="message-area">
        </div>
  
-      <div id="loading" class="show-state-none">
-        <h1>The Game of Empires</h1>
+      <h1>The Game of Empires</h1>
  
+      <div id="loading" class="show-state-none">
          <p>
            Contacting server. Please wait...
          </p>
@@ -45,36 +45,29 @@
  
        <div id="pre-game" class="show-state-join">
  
-        <h1>The Game of Empires</h1>
+        <h2>Choose your character</h2>
  
          <p>
-          To join the game, type your own name below. Also, choose the
-          name of a character that you want to play as. This can be
-          anyone (real or fictional) that everyone playing the game
-          would be likely to know, (for example "Albert Einstein" or
-          "Harry Potter").
+          This can be anyone (real or fictional), but should be
+          someone that all players of the game are familiar with.
          </p>
  
          <p>
-          Note: After you have joined the game, another player can use
-          this same device to join the game as well.
+          Hint: Choosing an ideal character name is the key to doing
+          well in Empires. You definitely don't want a character that
+          everyone will know that only you would have chosen.
          </p>
  
          <!-- The return false prevents the page from being reloaded -->
          <form id="register-form" onsubmit="register(this); return false">
-          <div class="form-field medium left">
-            <label for="name">Your name</label>
-            <input type="text" id="name" required>
-          </div>
-
-          <div class="form-field medium right">
+          <div class="form-field large">
              <label for="character">Character name</label>
-            <input type="text" id="character" autocomplete="off" required>
+            <input type="text" id="character" autocomplete="off" required autofocus>
            </div>
  
            <div class="form-field large">
              <button type="submit">
-              Join game
+              Choose character
              </button>
            </div>
          </form>
@@ -87,8 +80,6 @@
          <span id="character-reveal"></span>
        </div>
  
-      <br>
-
        <div class="hide-state-reveal" id="players-div">
          <h1>Players in the game</h1>