let's goHEADmain

7 files changed, 220 insertions, 0 deletions

diff --git a/src/templates/404.zmpl b/src/templates/404.zmpl
new file mode 100644
index 0000000..03332b4
--- /dev/null
+++ b/src/templates/404.zmpl
@@ -0,0 +1 @@
+<h1>Not Found</h1>
diff --git a/src/templates/_nav.zmpl b/src/templates/_nav.zmpl
new file mode 100644
index 0000000..37ea090
--- /dev/null
+++ b/src/templates/_nav.zmpl
@@ -0,0 +1,8 @@
+<nav>
+<ul>
+    <li><a href="/" class="logo">team<span>draft</span></a></li>
+</ul>
+<ul>
+    <li><a href="/about">about</a></li>
+</ul>
+</nav>
diff --git a/src/templates/about.zmpl b/src/templates/about.zmpl
new file mode 100644
index 0000000..9d13f89
--- /dev/null
+++ b/src/templates/about.zmpl
@@ -0,0 +1,37 @@
+<p>Team Draft is a 2-person sports team fantasy scoring league, where you draft sports teams and score points throughout the season based on wins and playoff appearances. The idea was taken from Mina Kimes's yearly NFL Team Draft with Mike Golic, Jr. on the <a href="https://www.espn.com/radio/play/_/id/32078500">Mina Kimes Show podcast</a>.</p>
+<h2><a id="scoring">Scoring</a></h2>
+<h3>NFL</h3>
+<table class="striped">
+    <thead>
+        <tr>
+          <th scope="col">When your team:</th>
+          <th scope="col">You score:</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Wins</th>
+          <td>1</td>
+        </tr>
+        <tr>
+          <td>Makes the playoffs</th>
+          <td>5</td>
+        </tr>
+        <tr>
+          <td>Makes the divisional round</th>
+          <td>5</td>
+        </tr>
+        <tr>
+          <td>Makes the conference championship game</th>
+          <td>10</td>
+        </tr>
+        <tr>
+          <td>Wins the Super Bowl</th>
+          <td>5</td>
+        </tr>
+    </tbody>
+</table>
+<h2>Who made this?</h2>
+<p>This was made by <a href="https://sadbeast.com">me</a>, and it's <a href="https://git.sadbeast.com/teamdraft">open source</a>.</p>
+<p>If you have any issues, reach out at <a href="mailto:sadbeast@sadbeast.com">sadbeast@sadbeast.com</a>.</p>
+
diff --git a/src/templates/body.zmpl b/src/templates/body.zmpl
new file mode 100644
index 0000000..e3f8387
--- /dev/null
+++ b/src/templates/body.zmpl
@@ -0,0 +1,6 @@
+<main class="container">
+  @partial nav
+<div>
+  {{zmpl.content}}
+</div>
+</main>
diff --git a/src/templates/draft.zmpl b/src/templates/draft.zmpl
new file mode 100644
index 0000000..8957b29
--- /dev/null
+++ b/src/templates/draft.zmpl
@@ -0,0 +1,60 @@
+@zig {
+const can_pick = data.getPresence("can_pick");
+    if (!data.getPresence("running")) {
+        <div id="qrcode"></div>
+        @html HTML
+        <script>
+            const qrcode = new QRCode(document.getElementById('qrcode'), {
+              text: 'https://teamdraft.net/invite/{{.code}}',
+              width: 128,
+              height: 128,
+              colorDark : '#000',
+              colorLight : '#fff',
+              correctLevel : QRCode.CorrectLevel.H
+            });
+        </script>
+        HTML 
+        <p><pre>https://teamdraft.net/invite/{{.code}}</pre></p>
+    }
+<div hx-select="#draft" id="draft" hx-get="/drafts/{{.draft_id}}" hx-trigger="every 1s">
+<div class="sticky">
+    if (data.getPresence("running")) {
+        <br/>Round Time Remaining: {{.round_time_remaining}}
+    }
+    <br/>{{.message}}
+</div>
+    if (zmpl.get("teams")) |teams| {
+        <div>
+            <table class="striped">
+                <thead>
+                    <tr>
+                        <th>Team</th>
+                        <th colspan="2">Rank</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    for (teams.items(.array)) |team| {
+                        const id = team.get("id");
+                        const rank = team.get("rank");
+                        const name = team.get("name");
+                        const picked: bool = team.getT(.boolean, "picked") orelse true;
+                        const pick_user = team.get("pick_user");
+                        <tr>
+                            <td>{{name}}</td>
+                            <td>{{rank}}</td>
+                            <td>
+                                {{pick_user}}
+                                if (can_pick and !picked) {
+                                    <form method="post" action="/drafts/{{.draft_id}}/pick?team_id={{id}}">
+                                        <input type="submit" value="Pick" style="" />
+                                    </form>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    }
+}
+</div>
diff --git a/src/templates/index.zmpl b/src/templates/index.zmpl
new file mode 100644
index 0000000..78127d3
--- /dev/null
+++ b/src/templates/index.zmpl
@@ -0,0 +1,39 @@
+<div class="grid">
+    <div>
+        <p>Welcome! Team Draft is a 2-person fantasy sports league, where you draft entire sports teams - not players - and score points throughout the season based on wins and playoff appearances. The idea was taken from the <a href="https://www.espn.com/radio/play/_/id/32078500">Mina Kimes Show's yearly NFL Team Draft</a>.</p>
+        <ul>
+            <li>Create a live draft to pick your teams!</li>
+            <li>Manage players' teams manually to support trades</li>
+            <li>Keeps track of <a hx-boost="false" href="/leagues/2?season=2023">game scores</a> automatically</li>
+        </ul>
+        <p>Create a league now, and schedule a live draft!</p>
+    </div>
+    <div>
+        <article>
+            <header>2024 NFL Season</header>
+            <form method="post" action="/drafts">
+              <fieldset class="grid">
+                <label>
+                  Your name
+                  <input name="player1" placeholder="Kim" autocomplete="given-name" required />
+                </label>
+                <label>
+                  Opponent's name
+                  <input name="player2" placeholder="Pat" />
+                </label>
+              </fieldset>
+              <fieldset class="grid">
+                @zig {
+                    <label>
+                      <input id="draft" type="checkbox" name="draft" role="switch" hx-on:change="document.getElementById('draft-label').style.visibility = document.getElementById('draft').checked ? 'inherit' : 'hidden'" checked/> Schedule a draft
+                    </label>
+                    <label id="draft-label">
+                        <input type="datetime-local" name="draft_time" aria-label="Draft start time" value="{{.draft_time}}" />
+                    </label>
+                }
+              </fieldset>
+              <input type="submit" value="Create league" />
+            </form>
+        </article>
+    </div>
+</div>
diff --git a/src/templates/layout.zmpl b/src/templates/layout.zmpl
new file mode 100644
index 0000000..75cda7e
--- /dev/null
+++ b/src/templates/layout.zmpl
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark" />
+    <meta name="htmx-config" content='{"refreshOnHistoryMiss":true}'>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Teko:wght@300..700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.red.min.css" />
+    <script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
+    <title>Team Draft</title>
+<style>
+:root {
+    --pico-font-family: "Atkinson Hyperlegible", sans-serif;
+  }
+.logo {
+font-family: "Teko", sans-serif;
+font-optical-sizing: auto;
+font-weight: 300;
+font-style: normal;
+font-size: 40px;
+line-height: 1em;
+color: inherit;
+}
+
+.logo:hover {
+color: inherit;
+text-decoration: none;
+}
+
+.logo span {
+color: indianred;
+}
+body {
+    --pico-font-family: "Atkinson Hyperlegible", sans-serif;
+    --pico-font-weight: 400;
+font-style: normal;
+}
+.sticky, th {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+}
+th {
+    top: 1.5em;
+}
+.sticky {
+  top: 0;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+}
+</style>
+  </head>
+  <body hx-boost="true">
+    <main class="container">
+      @partial nav
+    <div>
+        {{zmpl.content}}
+    </div>
+    </main>
+    <script>
+        htmx.config.refreshOnHistoryMiss = true;
+    </script>
+  </body>
+</html>
+