From f5c265a37681597965e98b395959166a40504420 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Wed, 30 Aug 2023 21:48:08 +0200
Subject: [PATCH] Added app bar

---
 src/lib/components/Header.svelte | 18 +++++------
 src/routes/results/+page.svelte  | 52 +++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 61cb543..75d762b 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,11 +1,8 @@
-<div class="app-bar flex justify-between items-center m-4">
-    <div class="app-bar-slot">
-        <h1 class="text-3xl">Blackbird Chess</h1>
-    </div>
-    <div class="app-bar-slot">
-        <p class="badge variant-filled-surface">24e herfstschaaktornooi</p>
-    </div>
-    <div class="app-bar-slot">
+<AppBar background="bg-transparent" gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
+    <svelte:fragment slot="lead"><h1 class="text-3xl">Blackbird Chess</h1></svelte:fragment>
+    <p class="badge variant-filled-surface">24e herfstschaaktornooi</p>
+
+    <svelte:fragment slot="trail">
         <button class="btn">
             <i class="icon icon-gear"></i>
             <span>Settings</span>
@@ -14,12 +11,13 @@
             <i class="icon icon-sign-out"></i>
             <span>Logout</span>
         </button>
-    </div>
-</div>
+    </svelte:fragment>
+</AppBar>
 
 <script>
     import {sessionstore, globalstore} from "$lib/stores.js";
     import {goto} from "$app/navigation";
+    import { AppBar } from '@skeletonlabs/skeleton';
 
     let sessionvars;
     sessionstore.subscribe(value => {
diff --git a/src/routes/results/+page.svelte b/src/routes/results/+page.svelte
index cc085c9..707e53f 100644
--- a/src/routes/results/+page.svelte
+++ b/src/routes/results/+page.svelte
@@ -23,22 +23,66 @@
         <tbody>
             <tr>
                 <td class="text-left">Person A</td>
-                <td class="text-center">0-1</td>
+                <td class="text-center">
+                    <select class="select w-auto">
+                        <option value="-">-</option>
+                        <option value="1-0" selected>1-0</option>
+                        <option value="5-5">&frac12;-&frac12;</option>
+                        <option value="0-1">0-1</option>
+                        <option value="1-0FF">1-0FF</option>
+                        <option value="0-1FF">0-1FF</option>
+                        <option value="5-5FF">&frac12;-&frac12;FF</option>
+                        <option value="0-0FF">0-0FF</option>
+                    </select>
+                </td>
                 <td class="text-right">Person B</td>
             </tr>
             <tr>
                 <td class="text-left">Person C</td>
-                <td class="text-center">&frac12;-&frac12;</td>
+                <td class="text-center">
+                    <select class="select w-auto">
+                        <option value="-">-</option>
+                        <option value="1-0">1-0</option>
+                        <option value="5-5" selected>&frac12;-&frac12;</option>
+                        <option value="0-1">0-1</option>
+                        <option value="1-0FF">1-0FF</option>
+                        <option value="0-1FF">0-1FF</option>
+                        <option value="5-5FF">&frac12;-&frac12;FF</option>
+                        <option value="0-0FF">0-0FF</option>
+                    </select>
+                </td>
                 <td class="text-right">Person D</td>
             </tr>
             <tr>
                 <td class="text-left">Person E</td>
-                <td class="text-center">&frac12;-&frac12;</td>
+                <td class="text-center">
+                    <select class="select w-auto">
+                        <option value="-">-</option>
+                        <option value="1-0">1-0</option>
+                        <option value="5-5">&frac12;-&frac12;</option>
+                        <option value="0-1" selected>0-1</option>
+                        <option value="1-0FF">1-0FF</option>
+                        <option value="0-1FF">0-1FF</option>
+                        <option value="5-5FF">&frac12;-&frac12;FF</option>
+                        <option value="0-0FF">0-0FF</option>
+                    </select>
+                </td>
                 <td class="text-right">Person F</td>
             </tr>
             <tr>
                 <td class="text-left">Person G</td>
-                <td class="text-center">0-1FF</td>
+                <td class="text-center">
+                    <select class="select w-auto">
+                        <option value="-" selected>-</option>
+                        <option value="1-0">1-0</option>
+                        <option value="5-5">&frac12;-&frac12;</option>
+                        <option value="0-1">0-1</option>
+                        <option value="1-0FF">1-0FF</option>
+                        <option value="0-1FF">0-1FF</option>
+                        <option value="5-5FF">&frac12;-&frac12;FF</option>
+                        <option value="0-0FF">0-0FF</option>
+                    </select>
+                </td>
                 <td class="text-right">Person H</td>
             </tr>
         </tbody>