empires: Add an initial "choose nickname" step before joining a game

[empires-server] / templates / choose-nickname.html

diff --git a/templates/choose-nickname.html b/templates/choose-nickname.html
new file mode 100644 (file)
index 0000000..86c3413
--- /dev/null
+++ b/templates/choose-nickname.html
@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block head %}
+<script>
+  function set_nickname_loadend() {
+    console.log("Attempting reload...");
+    /* Reload page to get actual game content instead of nickname form. */
+    window.location.reload(true);
+  }
+
+  function set_nickname(form) {
+    const nickname = form.nickname.value;
+
+    var request = new XMLHttpRequest();
+    request.addEventListener("loadend", () => set_nickname_loadend());
+    request.open("PUT", "/profile");
+    request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    request.send(`{"nickname": "${nickname}"}`);
+  }
+</script>
+{% endblock %}
+
+{% block page %}
+<h1>
+  Welcome to Empires
+</h1>
+
+<p>
+  To join the game, please set your own nickname:
+</p>
+
+<!-- The return false prevents the page from being reloaded -->
+<form id="nickname-form" onsubmit="set_nickname(this); return false">
+  <div class="form-field large">
+    <label for="nickname">Nickname</label>
+    <input type="text" id="nickname" required>
+  </div>
+
+  <div class="form-field large">
+    <button type="submit">
+      Join the game
+    </button>
+  </div>
+</form>
+{% endblock %}