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