git.cworth.org Git - lmno.games/blob - empires/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>The Game of Empires</title>
   5
   6     <link rel="stylesheet" href="style.css" type="text/css" />
   7   </head>
   8 <body>
   9
  10   <script src="empires-client.js"></script>
  11
  12   <div id="message-area">
  13   </div>
  14
  15   <div id="loading" class="show-state-none">
  16     <h1>The Game of Empires</h1>
  17
  18     <p>
  19       Contacting server. Please wait...
  20     </p>
  21   </div>
  22
  23   <div id="pre-game" class="show-state-join">
  24
  25     <h1>Welcome to the game of Empires!</h1>
  26
  27     <p>
  28       To join the game, type your own name below. Also, choose the name
  29       of a character that you want to play as. This can be anyone (real
  30       or fictional) that everyone playing the game would be likely to
  31       know, (for example "Albert Einstein" or "Harry Potter").
  32     </p>
  33
  34     <p>
  35       Note: After you have joined the game, another player can use this
  36       same device to join the game as well.
  37     </p>
  38
  39     <!-- The return false prevents the page from being reloaded -->
  40     <form onsubmit="register(this); return false">
  41       <label for="name">Your name</label>
  42       <input type="text" id="name" required>
  43
  44       <label for="character">Character name</label>
  45       <input type="text" id="character" autocomplete="off" required>
  46
  47       <input type="submit" value="Join game">
  48     </form>
  49
  50   </div>
  51
  52   <div class="show-state-reveal">
  53     <h1>Watch and memorize each character!</h1>
  54
  55     <h1 id="character-reveal"></h1>
  56   </div>
  57
  58   <div class="hide-state-reveal" id="players-div">
  59     <h1>Players in the game</h1>
  60
  61     <ul id="players">
  62     </ul>
  63
  64   </div>
  65
  66 </body>
  67 </html>