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; maximum-scale=1.0; user-scalable=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="../game.css" type="text/css" />
  12   </head>
  13   <body>
  14
  15     <script src="../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       <div id="loading" class="show-state-none">
  39         <h1>The Game of Empires</h1>
  40
  41         <p>
  42           Contacting server. Please wait...
  43         </p>
  44       </div>
  45
  46       <div id="pre-game" class="show-state-join">
  47
  48         <h1>The Game of Empires</h1>
  49
  50         <p>
  51           To join the game, type your own name below. Also, choose the
  52           name of a character that you want to play as. This can be
  53           anyone (real or fictional) that everyone playing the game
  54           would be likely to know, (for example "Albert Einstein" or
  55           "Harry Potter").
  56         </p>
  57
  58         <p>
  59           Note: After you have joined the game, another player can use
  60           this same device to join the game as well.
  61         </p>
  62
  63         <!-- The return false prevents the page from being reloaded -->
  64         <form id="register-form" onsubmit="register(this); return false">
  65           <div class="form-field medium left">
  66             <label for="name">Your name</label>
  67             <input type="text" id="name" required>
  68           </div>
  69
  70           <div class="form-field medium right">
  71             <label for="character">Character name</label>
  72             <input type="text" id="character" autocomplete="off" required>
  73           </div>
  74
  75           <div class="form-field large">
  76             <button type="submit">
  77               Join game
  78             </button>
  79           </div>
  80         </form>
  81
  82       </div>
  83
  84       <div class="show-state-reveal">
  85         <h1>Watch and memorize each character!</h1>
  86
  87         <span id="character-reveal"></span>
  88       </div>
  89
  90       <div class="hide-state-reveal" id="players-div">
  91         <h1>Players in the game</h1>
  92
  93         <ul id="players">
  94         </ul>
  95
  96       </div>
  97
  98     </div>
  99   </body>
 100 </html>