From 0da8dc16fb26e9df5d0efd7c7a463e354d8e00cf Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sun, 6 Jul 2025 12:58:07 +0200
Subject: Transitioned back to a traditional flask app

---
 templates/macros.j2 | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 templates/macros.j2

(limited to 'templates/macros.j2')
diff --git a/templates/macros.j2 b/templates/macros.j2
new file mode 100644
index 0000000..2974744
--- /dev/null
+++ b/templates/macros.j2
@@ -0,0 +1,99 @@
+{% macro court_button(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_button(player) -%}
+<button class="button is-responsive {% if player.status %}is-success{% else %}is-danger {% endif %}" 
+        hx-post="{{ "/player-toggle/" ~ player.id}}"
+        hx-swap="outerHTML"> {{ player.first + " " + player.last}} </button>
+{%- endmacro %}
+
+{% macro guest_control(level, value) -%}
+<div class="field center has-addons is-centered" id="guests_{{level}}">
+    <div class="control">
+        <button class="button is-responsive is-dark" 
+                hx-post="/decrement_guest" 
+                hx-swap="outerHTML"
+                hx-vals='{"level": "{{ level }}"}'
+                hx-target="#guests_{{ level }}"><span class="icon"><i class="fas fa-light fa-minus"></i></span></button>
+    </div>
+    <div class="control">
+        <input class="input is-responsive" type="text" style="text-align:center" value="{{ value }}" disabled>
+    </div>
+    <div class="control">
+        <button class="button is-responsive is-dark" 
+                hx-post="/increment_guest"
+                hx-swap="outerHTML"
+                hx-vals='{"level": "{{ level }}"}'
+                hx-target="#guests_{{ level }}"><span class="icon"><i class="fas fa-light fa-plus"></i></span></button>
+    </div>
+</div>
+{%- endmacro %}
+
+{% macro header(url_for) -%}
+<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='notyf.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
+    <script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='notyf.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='fontawesome.js') }}"></script>
+    <script defer src="{{ url_for('static', filename='custom.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>, <a href="https://carlosroso.com/notyf/">Notyf</a> and <a href="https://bulma.io">Bulma</a></div>
+{%- endmacro %}
+
+{% macro navbar(url_for) -%}
+<nav class="level">
+    <p class="level-item has-text-centered">
+        <button class="button is-link" onclick="location.href = '/';">Games</button>
+    </p>
+    <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-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">
+        <p class="title">Match Up!</p>
+    </div>
+    <div class="level-item has-text-centered"></div>
+    <div class="level-item has-text-centered"></div>
+    <div class="level-right">
+        <div class="field has-addons has-addons-centered">
+            <div class="control"><button class="button is-dark" id="timer-dec">
+                <span class="icon"><i class="fas fa-light fa-minus"></i></span>
+            </button></div>
+            <p class="control has-icons-left has-icons-right">
+                <input class="input is-responsive" id="timer-display" type="text" style="text-align:center; " readonly>
+                <span class="icon is-small is-left">
+                    <i class="fas fa-light fa-clock"></i>
+                </span>
+            </p>
+            <div class="control"><button class="button is-dark" id="timer-inc">
+                <span class="icon"><i class="fas fa-light fa-plus"></i></span>
+            </button></div>
+            <div class="control"><button class="button is-dark" id="timer-start">
+                <span class="icon"><i class="fas fa-light fa-play"></i></span>
+            </button></div>
+            <div class="control"><button class="button is-dark" id="timer-stop">
+                <span class="icon"><i class="fas fa-light fa-stop"></i></span>
+            </button></div>
+        </div>
+    </div>
+</nav>
+{%- endmacro %}
\ No newline at end of file
-- 
cgit v1.3.1

