wtfHEADmain

6 files changed, 219 insertions, 0 deletions

diff --git a/src/views/about.mustache b/src/views/about.mustache
new file mode 100644
index 0000000..f087c0f
--- /dev/null
+++ b/src/views/about.mustache
@@ -0,0 +1,36 @@
+<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/views/draft.mustache b/src/views/draft.mustache
new file mode 100644
index 0000000..a7e52e8
--- /dev/null
+++ b/src/views/draft.mustache
@@ -0,0 +1,27 @@
+<div hx-get="/drafts/{{draft_id}}" hx-trigger="every 1s">
+    <strong>{{user.id}}</strong>
+<!-- <div hx-get="/drafts/{{draft_info.draft_id}}"> -->
+{{#draft_info}}
+<h1>{{league}}</h1>
+<div class="sticky">
+    <p>{{message}}</p>
+    {{#can_pick}}<p>Round Time Remaining: {{round_time_remaining}}</p>{{/can_pick}}
+</div>
+{{/draft_info}}
+    <table class="striped">
+        <thead>
+            <tr>
+                <th>Team</th>
+                <th>Division</th>
+                <th colspan="2">Rank</th>
+            </tr>
+        </thead>
+        <tbody>
+        {{#teams}}
+            <tr id="team-{{team_id}}">
+            {{> pick}}
+            </tr>
+        {{/teams}}
+        </tbody>
+    </table>
+</div>
diff --git a/src/views/index.mustache b/src/views/index.mustache
new file mode 100644
index 0000000..29f8ed9
--- /dev/null
+++ b/src/views/index.mustache
@@ -0,0 +1,46 @@
+    <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>2014 NFL Season</header>
+            <form>
+              <fieldset>
+                <label>
+                  League name
+                  <input name="first_name" placeholder="Pat & Sam's League" required/>
+                </label>
+              </fieldset>
+              <fieldset class="grid">
+                <label>
+                  Your name
+                  <input name="player1" placeholder="Pat" autocomplete="given-name" required />
+                </label>
+                <label>
+                  Opponent's name
+                  <input name="player2" placeholder="Sam" required />
+                </label>
+              </fieldset>
+              <fieldset class="grid">
+                <label>
+                  <input type="checkbox" name="draft" role="switch" checked />
+                  Schedule a draft
+                </label>
+                <label>
+                    <input type="datetime-local" name="draft_time" aria-label="Draft start time" />
+                </label>
+              </fieldset>
+
+              <input type="submit" value="Create league" disabled/>
+              <small>Coming soon...</small>
+            </form>
+            </article>
+        </div>
+    </div>
diff --git a/src/views/layout.mustache b/src/views/layout.mustache
new file mode 100644
index 0000000..614b150
--- /dev/null
+++ b/src/views/layout.mustache
@@ -0,0 +1,70 @@
+<!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" />
+    <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.min.css" />
+    <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
+    <title>Team Draft{{#title}} - {{.}} {{/title}}</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" hx-target="#content">
+    <main class="container">
+      <nav>
+        <ul>
+            <li><a href="/" class="logo">team<span>draft</span></a></li>
+        </ul>
+        <ul>
+            <li><a href="/about">about</a></li>
+        </ul>
+    </nav>
+    <div id="content">
+        {{#content}} {{{.}}} {{/content}}
+    </div>
+    </main>
+  </body>
+</html>
diff --git a/src/views/league.mustache b/src/views/league.mustache
new file mode 100644
index 0000000..46af60a
--- /dev/null
+++ b/src/views/league.mustache
@@ -0,0 +1,36 @@
+<h1>{{league.name}}</h1>
+<div class="grid">
+    {{#player_scores}}
+    <div><strong>{{player}} - {{score}}</strong></div>
+    {{/player_scores}}
+</div>
+<main class="container">
+<table class="striped">
+    <thead>
+        <tr>
+            <th scope="col">Team</th>
+            <th scope="col">Player</th>
+            <th scope="col" style="width: 11em">Total</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{#scores}}
+            <tr>
+                <td scope="row">{{team}}</td>
+                <td>{{player}}</td>
+                <td>
+                  <a href="#">{{total}}</a>
+                  <p>
+                      <small><strong>Wins:</strong> {{win}}
+                      {{#playoffs}}, <strong>Made the Playoffs:</strong> {{.}}{{/playoffs}}
+                      {{#divisional}}, <strong>Made the Divisional Round:</strong> {{.}}{{/divisional}}
+                      {{#conference}}, <strong>Made the Conference Championship:</strong> {{.}}{{/conference}}
+                      {{#champion}}, <strong>Superbowl Winner:</strong> {{.}}{{/champion}}
+                      </small>
+                  </p> 
+                </td>
+            </tr>
+        {{/scores}}
+    </tbody>
+</table>
+</main>
diff --git a/src/views/pick.mustache b/src/views/pick.mustache
new file mode 100644
index 0000000..d045f6f
--- /dev/null
+++ b/src/views/pick.mustache
@@ -0,0 +1,4 @@
+    <td>{{name}}</td>
+    <td>{{division}}</td>
+    <td>{{rank}}</td>
+    <td>{{pick_user}}{{^pick_user}}{{#draft_info}}{{#can_pick}}<button hx-get="/drafts/{{draft_id}}/pick?team_id={{team_id}}" hx-target="#team-{{team_id}}">Pick</button>{{/can_pick}}{{/draft_info}}{{/pick_user}}</td>