git.cworth.org Git - lmno-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     let nickname = form.nickname.value;
  13     if (nickname === "")
  14       nickname = "Guest";
  15
  16     var request = new XMLHttpRequest();
  17     request.addEventListener("loadend", () => set_nickname_loadend());
  18     request.open("PUT", "/profile");
  19     request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  20     request.send(`{"nickname": "${nickname}"}`);
  21   }
  22 </script>
  23 {% endblock %}
  24
  25 {% block page %}
  26 <h1>
  27   Welcome to {{ game_name }}
  28 </h1>
  29
  30 <p>
  31   To join the game, please set your own nickname:
  32 </p>
  33
  34 <!-- The return false prevents the page from being reloaded -->
  35 <form id="nickname-form" onsubmit="set_nickname(this); return false">
  36   <div class="form-field large">
  37     <label for="nickname">Your name or nickname</label>
  38     <input type="text" id="nickname"
  39            {% if options.allow_guest %}
  40            placeholder="Guest"
  41            {% else %}
  42            required
  43            {% endif %}
  44            autofocus>
  45   </div>
  46
  47   <div class="form-field large">
  48     <button type="submit">
  49       Join the game
  50     </button>
  51   </div>
  52 </form>
  53 {% endblock %}