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

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