git.cworth.org Git - empires-server/blob - templates/choose-nickname.html

   1 {% extends "base.html" %}
   2
   3 {% block head %}
   4 <script>
   5   function set_nickname_loadend() {
   6     console.log("Attempting reload...");
   7     /* Reload page to get actual game content instead of nickname form. */
   8     window.location.reload(true);
   9   }
  10
  11   function set_nickname(form) {
  12     const nickname = form.nickname.value;
  13
  14     var request = new XMLHttpRequest();
  15     request.addEventListener("loadend", () => set_nickname_loadend());
  16     request.open("PUT", "/profile");
  17     request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  18     request.send(`{"nickname": "${nickname}"}`);
  19   }
  20 </script>
  21 {% endblock %}
  22
  23 {% block page %}
  24 <h1>
  25   Welcome to {{ game_name }}
  26 </h1>
  27
  28 <p>
  29   To join the game, please set your own nickname:
  30 </p>
  31
  32 <!-- The return false prevents the page from being reloaded -->
  33 <form id="nickname-form" onsubmit="set_nickname(this); return false">
  34   <div class="form-field large">
  35     <label for="nickname">Nickname</label>
  36     <input type="text" id="nickname" required>
  37   </div>
  38
  39   <div class="form-field large">
  40     <button type="submit">
  41       Join the game
  42     </button>
  43   </div>
  44 </form>
  45 {% endblock %}