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

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8"/>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   6
   7     <title>The Game of Empires</title>
   8
   9     <link rel="stylesheet" href="/reset.css" type="text/css" />
  10     <link rel="stylesheet" href="/style.css" type="text/css" />
  11     <link rel="stylesheet" href="/empires/game.css" type="text/css" />
  12   </head>
  13   <body>
  14
  15     <script src="/empires/game.js"></script>
  16
  17     <div id="page">
  18
  19       <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
  20         ⚙
  21       </span>
  22
  23       <div id="host-tools">
  24         <button onclick="post_reveal()">
  25           Reveal Characters
  26         </button>
  27         <button onclick="post_start()">
  28           Start Game
  29         </button>
  30         <button onclick="post_reset()">
  31           Reset Game
  32         </button>
  33       </div>
  34
  35       <div id="message-area">
  36       </div>
  37
  38       <h1>The Game of Empires</h1>
  39
  40       <div id="loading" class="show-state-none">
  41         <p>
  42           Contacting server. Please wait...
  43         </p>
  44       </div>
  45
  46       <div id="pre-game" class="show-state-join">
  47
  48         <h2>Choose your character</h2>
  49
  50         <p>
  51           This can be anyone (real or fictional), but should be
  52           someone that all players of the game are familiar with.
  53         </p>
  54
  55         <p>
  56           Hint: Choosing an ideal character name is the key to doing
  57           well in Empires. You definitely don't want a character that
  58           everyone will know that only you would have chosen.
  59         </p>
  60
  61         <!-- The return false prevents the page from being reloaded -->
  62         <form id="register-form" onsubmit="register(this); return false">
  63           <div class="form-field large">
  64             <label for="character">Character name</label>
  65             <input type="text" id="character" autocomplete="off" required autofocus>
  66           </div>
  67
  68           <div class="form-field large">
  69             <button type="submit">
  70               Choose character
  71             </button>
  72           </div>
  73         </form>
  74
  75       </div>
  76
  77       <div class="show-state-reveal">
  78         <h1>Watch and memorize each character!</h1>
  79
  80         <span id="character-reveal"></span>
  81       </div>
  82
  83       <div class="hide-state-reveal" id="players-div">
  84         <h1>Players in the game</h1>
  85
  86         <ul id="players">
  87         </ul>
  88
  89       </div>
  90
  91     </div>
  92   </body>
  93 </html>