feat: add boilerplate

app/templates/play.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% block content %}
+<section class="play-layout" data-session="{{ session.id }}" data-token="{{ player.token }}" data-host="{{ '1' if player.is_host else '0' }}" data-player="{{ player.id }}">
+  <aside class="pixel-panel board">
+    <h2>PLAYERS</h2>
+    <ol id="players"></ol>
+    <p class="tiny" id="invite"></p>
+    {% if player.is_host %}
+    <form class="stack host-settings" method="post" action="/play/{{ session.id }}/settings" id="host-form">
+      <h3>HOST SETTINGS</h3>
+      <label>PLAYERS
+        <input type="number" name="max_players" min="2" max="12" value="{{ session.max_players }}" />
+      </label>
+      <label>ROUNDS
+        <input type="number" name="num_rounds" min="4" max="32" value="{{ session.num_rounds }}" />
+      </label>
+      <label class="check"><input type="checkbox" name="extra_guesses" {% if session.extra_guesses %}checked{% endif %} /> Extra clues</label>
+      <label class="check"><input type="checkbox" name="hide_company" {% if session.hide_company %}checked{% endif %} /> Hide company</label>
+      <label class="check"><input type="checkbox" name="hide_subject" {% if session.hide_subject %}checked{% endif %} /> Hide subject</label>
+      <button class="btn btn-small" type="submit">SAVE</button>
+    </form>
+    <button class="btn" id="start-btn" type="button">START GAME</button>
+    <button class="btn btn-ghost" id="next-btn" type="button" hidden>NEXT ROUND</button>
+    {% endif %}
+  </aside>
+  <div class="pixel-panel stage">
+    <div class="mascot-wrap compact">
+      {% include "mascot.html" %}
+      <p class="speech" id="tip">Waiting in the lobby. The host will start the match.</p>
+    </div>
+    <div id="stage"></div>
+  </div>
+</section>
+{% endblock %}
+{% block scripts %}
+<script src="/static/js/play.js"></script>
+{% endblock %}