Implement support for the "game-state" and "character-reveal" events

[lmno.games] / empires / index.html

diff --git a/empires/index.html b/empires/index.html
index 132c5e85cf49da8969babf19345f5a89e2db4789..7bf1753549a997170630ad6b4ddd4e2fab69a4ff 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -9,7 +9,18 @@
 
   <script src="empires-client.js"></script>
 
-  <div id="pre-game">
+  <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>
 
@@ -25,23 +36,26 @@
       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>
 
       <label for="character">Character name</label>
-      <input type="text" id="character" required>
+      <input type="text" id="character" autocomplete="off" required>
 
       <input type="submit" value="Join game">
     </form>
 
   </div>
 
-  <div>
+  <div class="show-state-reveal">
+    <h1>Watch and memorize each character!</h1>
+
+    <h1 id="character-reveal"></h1>
+  </div>
+
+  <div class="hide-state-reveal">
     <h1>Players in the game</h1>
 
     <ul id="players">