empires: Bring in game client code as a template

[lmno-server] / templates / empires-game.html

diff --git a/templates/empires-game.html b/templates/empires-game.html
new file mode 100644 (file)
index 0000000..a3175e5
--- /dev/null
+++ b/templates/empires-game.html
@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+
+{% block head %}
+<link rel="stylesheet" href="/empires/game.css" type="text/css" />
+<script src="/empires/game.js" defer></script>
+{% endblock %}
+
+{% block page %}
+
+<span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
+  ⚙
+</span>
+
+<div id="host-tools">
+  <button onclick="post_reveal()">
+    Reveal Characters
+  </button>
+  <button onclick="post_start()">
+    Start Game
+  </button>
+  <button onclick="post_reset()">
+    Reset Game
+  </button>
+</div>
+
+<h1>The Game of Empires</h1>
+
+<div id="loading" class="show-state-none">
+  <p>
+    Contacting server. Please wait...
+  </p>
+</div>
+
+<div id="pre-game" class="show-state-join">
+
+  <h2>Choose your character</h2>
+
+  <p>
+    This can be anyone (real or fictional), but should be
+    someone that all players of the game are familiar with.
+  </p>
+
+  <p>
+    Hint: Choosing an ideal character name is the key to doing
+    well in Empires. You definitely don't want a character that
+    everyone will know that only you would have chosen.
+  </p>
+
+  <!-- The return false prevents the page from being reloaded -->
+  <form id="register-form" onsubmit="register(this); return false">
+    <div class="form-field large">
+      <label for="character">Character name</label>
+      <input type="text" id="character" autocomplete="off" required>
+    </div>
+
+    <div class="form-field large">
+      <button type="submit">
+        Choose character
+      </button>
+    </div>
+  </form>
+
+</div>
+
+<div class="show-state-reveal">
+  <h1>Watch and memorize each character!</h1>
+
+  <span id="character-reveal"></span>
+</div>
+
+<div class="hide-state-reveal" id="players-div">
+  <h1>Players in the game</h1>
+
+  <ul id="players">
+  </ul>
+</div>
+{% endblock %}
+