diff options
Diffstat (limited to 'src/match_up/templates')
| -rw-r--r-- | src/match_up/templates/controls.j2 | 56 | ||||
| -rw-r--r-- | src/match_up/templates/games.j2 | 21 | ||||
| -rw-r--r-- | src/match_up/templates/index.j2 | 13 | ||||
| -rw-r--r-- | src/match_up/templates/macros.j2 | 67 | ||||
| -rw-r--r-- | src/match_up/templates/players.j2 | 17 |
5 files changed, 174 insertions, 0 deletions
diff --git a/src/match_up/templates/controls.j2 b/src/match_up/templates/controls.j2 new file mode 100644 index 0000000..6ba724a --- /dev/null +++ b/src/match_up/templates/controls.j2 @@ -0,0 +1,56 @@ +{% from "macros.j2" import court %} +<div class="fixed-grid has-6-cols"> + <div class="grid"> + {% for key, value in courts.items() %} + {{ court(key, value) }} + {% endfor %} + </div> +</div> +<div class="columns"> + <div class="column"> + <div class="field has-addons"> + <div class="control"> + <button class="button is-responsive is-dark" + hx-post="/decrement" + hx-swap="outerHTML" + hx-target="#guests">-</button> + </div> + <div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div> + <div class="control"> + <button class="button is-responsive is-dark" + hx-post="/increment" + hx-swap="outerHTML" + hx-target="#guests">+</button> + </div> + </div> + </div> + <div class="column"> + <div class="select is-responsive"> + <select name="type"> + <option>10 Levels</option> + <option>8 Levels</option> + <option>6 Levels</option> + <option>4 Levels</option> + <option>2 Levels</option> + <option>0 Levels</option> + </select> + </div> + </div> + <div class="column"> + <button class="button is-dark is-responsive" + hx-post="/propose" + hx-target="#games" + hx-include="[name='type']">New Round</button> + </div> + <div class="column"></div> + <div class="column"> + <button class="button is-dark is-responsive" + hx-post="/confirm" + hx-target="#games">Start Round</button> + </div> + <div class="column"> + <button class="button is-dark is-responsive" + hx-post="/clear" + hx-target="#games">Reset</button> + </div> +</div>
\ No newline at end of file diff --git a/src/match_up/templates/games.j2 b/src/match_up/templates/games.j2 new file mode 100644 index 0000000..d5afef1 --- /dev/null +++ b/src/match_up/templates/games.j2 @@ -0,0 +1,21 @@ +<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="games"> +<thead> + <th colspan="5" align="center"> {{ title }} </th> +</thead> +<thead> + <th align="center"> Court </th> + <th colspan="2" align="center"> Team 1 </th> + <th colspan="2" align="center"> Team 2 </th> +</thead> +<tbody> +{% for game in games %} + <tr {% if game.team1.player1 == 'RESERVED' %} class="is-danger" {% endif %}> + <th align="center" style="width: 8%;">{{ game.court }}</th> + <td style="width: 23%;">{{ game.team1.player1 }}</th> + <td style="width: 23%;">{{ game.team1.player2 }}</th> + <td style="width: 23%;">{{ game.team2.player1 }}</th> + <td style="width: 23%;">{{ game.team2.player2 }}</th> + </tr> +{% endfor %} +</tbody> +</table>
\ No newline at end of file diff --git a/src/match_up/templates/index.j2 b/src/match_up/templates/index.j2 new file mode 100644 index 0000000..832dbfb --- /dev/null +++ b/src/match_up/templates/index.j2 @@ -0,0 +1,13 @@ +{% from "macros.j2" import header, footer, navbar %} +<!doctype html> +<html lang="en"> + {{ header() }} + <body> + <section class="section"> + {{ navbar() }} + <div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div> + <div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div> + {{ footer() }} + </section> + </body> +</html> diff --git a/src/match_up/templates/macros.j2 b/src/match_up/templates/macros.j2 new file mode 100644 index 0000000..8d05bb0 --- /dev/null +++ b/src/match_up/templates/macros.j2 @@ -0,0 +1,67 @@ +{% macro court(id, status) -%} +<button class= "button is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" + hx-post="{{ "/court-toggle/" ~ id}}" + hx-swap="outerHTML"> Court {{ id }}</button> +{%- endmacro %} + +{% macro player(id, status, name) -%} +<button class="button is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" + hx-post="{{ "/player-toggle/" ~ id}}" + hx-swap="outerHTML"> {{ name }} </button> +{%- endmacro %} + +{% macro guests(count) -%} +<div class="control" id="guests"> + <input class="input is-responsive" type="text" style="text-align:center" value="{{ count }} Guests" disabled> +</div> +{%- endmacro %} + +{% macro timer(mins, secs) -%} +<div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s"> + <p class="title">⏲️ {{mins}}:{{secs}}</p> +</div> +{%- endmacro %} + +{% macro header() -%} +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Match Up!</title> + <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='bulma.min.css') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}"> + <script src="{{ url_for('static', filename='htmx.min.js') }}"></script> +</head> +{%- endmacro %} + +{% macro footer() -%} +<div class="content has-text-centered">Made by <a href="https://karanjayachandra.com/">Karan</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a> and <a href="https://bulma.io">Bulma</a></div> +{%- endmacro %} + +{% macro navbar() -%} +<nav class="level"> + <div class="level-left"> + <div class="level-item"> + <figure class="image container is-128x128"> + <img src="{{ url_for('static', filename='logo.png') }}"/> + </figure> + </div> + </div> + <div class="level-item has-text-centered"></div> + <p class="level-item has-text-centered"> + <button class="button is-link" onclick="location.href = '/';">Games</button> + </p> + <div class="level-item has-text-centered"></div> + <div class="level-item has-text-centered"> + <p class="title">Match Up!</p> + </div> + <div class="level-item has-text-centered"></div> + <p class="level-item has-text-centered"> + <button class="button is-link" onclick="location.href = '/players';">Players</button> + </p> + <div class="level-item has-text-centered"></div> + <div class="level-right"> + <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> + </div> +</nav> +{%- endmacro %}
\ No newline at end of file diff --git a/src/match_up/templates/players.j2 b/src/match_up/templates/players.j2 new file mode 100644 index 0000000..ae6afe0 --- /dev/null +++ b/src/match_up/templates/players.j2 @@ -0,0 +1,17 @@ +{% from "macros.j2" import header, navbar, footer, player %} +<!doctype html> +<html lang="en"> + {{ header() }} + <body> + <section class="section"> + {{ navbar() }} + <div class="fixed-grid has-4-cols"> + <div class="grid"> + {% for id, value in players.items() %} + <div class="cell"> {{ player(id, value.status, value.name) }} </div> + {% endfor %} + </div> + {{ footer() }} + </section> + </body> +</html>
\ No newline at end of file |