Fix the gear toggle to work the first time it is clicked

[empires-html] / index.html
diff --git a/index.html b/index.html

index 1e9e8586582edfc5b4ed04780cec820a95b1e669..b5994048533120b073688fc7f03e80126ca1ac01 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,17 +1,50 @@
  <!DOCTYPE html>
  <html>
    <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=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" />
    </head>
  <body>
  
    <script src="empires-client.js"></script>
  
-  <div id="pre-game">
+<div id="page">
+
+  <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
+    ⚙
+  </span>
+
+  <div id="host-tools">
+    <button onclick="post_reveal()">
+      Reveal Characters
+    </button>
+    <button onclick="post_start()">
+      Start Game
+    </button>
+    <button onclick="post_reset()">
+      Reset Game
+    </button>
+  </div>
+
+  <div id="message-area">
+  </div>
+
+  <div id="loading" class="show-state-none">
+    <h1>The Game of Empires</h1>
+
+    <p>
+      Contacting server. Please wait...
+    </p>
+  </div>
+
+  <div id="pre-game" class="show-state-join">
  
-    <h1>Welcome to the game of Empires!</h1>
+    <h1>The Game of Empires</h1>
  
      <p>
        To join the game, type your own name below. Also, choose the name
@@ -25,23 +58,34 @@
        same device to join the game as well.
      </p>
  
-    <div id="message-area">
-    </div>
-
      <!-- The return false prevents the page from being reloaded -->
-    <form onsubmit="register(this); return false">
-      <label for="name">Your name</label>
-      <input type="text" id="name" required>
+    <form id="register-form" onsubmit="register(this); return false">
+      <div class="form-row medium left">
+        <label for="name">Your name</label>
+        <input type="text" id="name" required>
+      </div>
  
-      <label for="character">Character name</label>
-      <input type="text" id="character" autocomplete="off" required>
+      <div class="form-row medium right">
+        <label for="character">Character name</label>
+        <input type="text" id="character" autocomplete="off" required>
+      </div>
  
-      <input type="submit" value="Join game">
+      <div class="form-row large">
+        <button type="submit">
+          Join game
+        </button>
+      </div>
      </form>
  
    </div>
  
-  <div>
+  <div class="show-state-reveal">
+    <h1>Watch and memorize each character!</h1>
+
+    <span id="character-reveal"></span>
+  </div>
+
+  <div class="hide-state-reveal" id="players-div">
      <h1>Players in the game</h1>
  
      <ul id="players">
@@ -49,5 +93,6 @@
  
    </div>
  
+</div>
  </body>
  </html>