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