empires: Bring in game client code as a template

So far, this is identical to the static HTML file we were using
before, but the idea is that, here as a template, we can add some
dynamic elements, (such as the game ID).

diff --git a/empires.js b/empires.js
index d8cff6f70314623f01c06135d426e32e6749de72..e6b7e77979736a6269a27250899e3420c89fe178 100644 (file)
--- a/empires.js
+++ b/empires.js
@@ -259,7 +259,7 @@ app.get('/', (request, response) => {
   if (! request.session.nickname)
     response.render('choose-nickname.html');
   else
-    response.sendFile(path.join(__dirname, './game.html'));
+    response.render('empires-game.html');
 });
 
 app.post('/register', (request, response) => {

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 %}
+