add brackets page

src/routes/bracket/+page.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { base } from "$app/paths";
+import { page } from "$app/stores";
+    import { PUBLIC_DATA_URL } from "$env/static/public";
+    import CatSpinner from "$lib/components/cat-spinner.svelte";
+    import Lede from "$lib/components/lede.svelte";
+    import Page from "$lib/components/page.svelte";
+    import { createBusy, type BusyState } from "$lib/kit";
+    import {
+        formatScore,
+      type ScoredPlayer,
+      type TournamentType,
+    } from "$lib/site";
+    import { getFriendlyErrorMsg } from "$lib/util";
+
+    interface ScoredMatchPlayer extends ScoredPlayer {
+      gasUsed: number;
+    }
+
+    interface BracketData {
+      tournamentId: string;
+      time: Date;
+      season: number;
+      type: TournamentType;
+      bracket: number;
+      rankings: ScoredPlayer[],
+      matches: Array<{
+        id: string;
+        duration: number;
+        rankings: ScoredMatchPlayer[];
+      }>;
+    }
+
+    let tournamentId: string | undefined;
+    let seasonIdx: number | undefined;
+    let bracketIdx: number | undefined;
+    let data: BusyState<BracketData>;
+    const dataAwait = createBusy<BracketData>(r => data = r);
+
+    $: {
+      parseQueryParams($page.url.searchParams);
+    }
+
+    $: {
+      if (tournamentId) {
+        dataAwait(async () => {
+            const resp = await fetch(`${PUBLIC_DATA_URL}/results/bracket?${
+              new URLSearchParams({
+                tournament: tournamentId!,
+                season: seasonIdx!.toString(),
+                bracket: bracketIdx!.toString(),
+              })
+            }`);
+            if (!resp.ok) {
+                console.error(await resp.text());
+                throw new Error(resp.statusText);
+            }
+            const bracket = await resp.json();
+            console.log(bracket);
+            return {
+              ...bracket,
+              time: new Date(bracket.time),
+            };
+        });
+      }
+    }
+
+    function parseQueryParams(params: URLSearchParams): void {
+      tournamentId = params.get('tournament') ?? undefined;
+      seasonIdx = Number(params.get('season') ?? '1') - 1;
+      bracketIdx = Number(params.get('bracket') ?? '1') - 1;
+    }
+</script>
+
+<style lang="scss">
+  @use '../../lib/styles/global.scss';
+
+  .matches {
+    .matches-grid {
+      .match {
+        h3 {
+          margin-bottom: 0;
+        }
+        ol {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+</style>
+
+
+<Page title="Bracket Details">
+  {#if data instanceof Promise}
+  <div class="loading"><CatSpinner /></div>
+  {:else if data instanceof Error}
+  <CatSpinner failed />
+  <div class="error">{getFriendlyErrorMsg(data)}</div>
+  {:else if data}
+  <Lede>
+    <h1>
+      Bracket {data.bracket + 1}
+    </h1>
+    <p>
+      <a href={`${base}/tournament?id=${data.tournamentId}&season=${data.season + 1}`}>
+        Season {data.season + 1}
+        {#if data.type == 'scrimmage'}Market Day{:else}Grand Faire{/if}
+        {data.time.toLocaleDateString()}
+      </a>
+    </p>
+  </Lede>
+  <section>
+    <h2>Bracket Ranking</h2>
+    <ol>
+      {#each data.rankings as player (player.address)}
+      <li>
+        <a href={`${base}/player?name=${player.name}`}>{player.name}</a>:
+        {formatScore(player.score)}
+      </li>
+      {/each}
+    </ol>
+  </section>
+  <section class="matches">
+    <h2>Matches</h2>
+    <div>
+      Players: {data.rankings.length},
+      Matches: {data.matches.length}
+      ({data.matches.length / Math.ceil(data.rankings.length / 4)}pp)
+    </div>
+    {#each data.matches as match, i (match.id)}
+    <div class="matches-grid">
+      <div class="match">
+        <h3>Match {i + 1}</h3>
+        <ol>
+          {#each match.rankings as player (player.address)}
+          <li>
+            <a href={`${base}/player?name=${player.name}`}>{player.name}</a>:
+            {player.score.toFixed(3)}</li>
+          {/each}
+        </ol>
+      </div>
+    </div>
+    {/each}
+  </section>
+  {/if}
+</Page>

src/routes/tournament/+page.svelte

@@ -13,13 +13,9 @@ import { page } from "$app/stores";
     } from "$lib/site";
     import { getFriendlyErrorMsg } from "$lib/util";
 
-    interface ScoredPlayerWithWinCount extends ScoredPlayer {
-      winCount: number;
-    }
-
     interface BracketInfo {
       idx: number;
-      rankings: ScoredPlayerWithWinCount[],
+      rankings: ScoredPlayer[],
       matches: string[];
     }
 
@@ -89,14 +85,14 @@ import { page } from "$app/stores";
       {#if data.type == 'scrimmage'}Market Day{:else}Grand Faire{/if} Summary
     </h1>
     <div>
-      Time: {data.time.toLocaleDateString()} {data.time.toLocaleTimeString()}
+      Season: {data.season + 1}
     </div>
     <div>
-      Season: {data.season + 1}
+      Time: {data.time.toLocaleDateString()} {data.time.toLocaleTimeString()}
     </div>
   </Lede>
   <div>
-    <h3>Final Ranking</h3>
+    <h2>Final Ranking</h2>
     <ol>
       {#each data.rankings as player (player.address)}
       <li>
@@ -116,6 +112,10 @@ import { page } from "$app/stores";
         Players: {bracket.rankings.length},
         Matches: {bracket.matches.length}
         ({bracket.matches.length / Math.ceil(bracket.rankings.length / 4)}pp)
+        &nbsp;
+        (<a href={`${base}/bracket?tournament=${data.id}&season=${data.season + 1}&bracket=${bracket.idx + 1}`}><!--
+        -->view matches<!--
+        --></a>)
       </div>
       <div>
         <h3>Bracket Ranking</h3>