From b5208e5ca76b5df8fc5f619a73409aca95683820 Mon Sep 17 00:00:00 2001
From: Niklas Kapelle <niklas@kapelle.org>
Date: Thu, 9 Jan 2025 21:22:42 +0100
Subject: [PATCH] IT'S WORKING

---
 web/src/App.svelte        |  2 +-
 web/src/pages/Game.svelte | 65 +++++++++++++++++++++++----------------
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index ce2eae7..81f46f7 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -4,6 +4,6 @@
 
 <main>
 </main>
-    <Game />
+    <Game gameID="1" />
 <style>
 </style>
diff --git a/web/src/pages/Game.svelte b/web/src/pages/Game.svelte
index b3b10db..2f863b8 100644
--- a/web/src/pages/Game.svelte
+++ b/web/src/pages/Game.svelte
@@ -1,41 +1,54 @@
 <script lang="ts">
     import { request } from "graphql-request";
     import { graphql } from "./../gql";
+    import { onMount } from "svelte";
+    import type { GetGameQuery } from "../gql/graphql";
+
+    let { gameID } : {
+        gameID: string
+    } = $props()
 
     const doc = graphql(`
-        query hello {
-            game(id: "1") {
+        query getGame($gameID: ID!) {
+            game(id: $gameID) {
+                added
+                overtime
                 score
+                team0player0 {
+                    ID
+                }
+                team0player1 {
+                    ID
+                }
+                team1player0 {
+                    ID
+                }
+                team1player1 {
+                    ID
+                }
             }
         }
     `);
 
-    request("http://localhost:5173/graphql", doc).then((e) => {
-        console.log(e.game?.score);
+    let loading = $state(true);
+    let data: GetGameQuery | undefined = $state(undefined);
+
+    onMount(() => {
+        request("http://localhost:5173/graphql", doc, { gameID }).then(
+            (e) => {
+                console.log(e.game);
+
+                data = e;
+                loading = false;
+            },
+        );
     });
-
-    let game = {
-        id: "myid",
-        added: new Date(),
-        author: "authorid",
-        score: 3,
-        overtime: true,
-        team0player0: "T0P0",
-        team0player1: "T0P1",
-        team1player0: "T1P0",
-        team1player1: "T1P1",
-    };
-
-    let scoreTeam0 = game.score > 0 ? game.score : 0;
-    let scoreTeam1 = game.score < 0 ? game.score : 0;
 </script>
 
 <h1 class="text-2xl">Game</h1>
 
-Played at: {game.added} <br />
-Added by: {game.author} <br />
-Overtime: {game.overtime} <br />
-
-Team 1: {scoreTeam0} Team2: {scoreTeam1} <br />
-{game.team0player0} | {game.team1player0} <br />
-{game.team0player1} | {game.team1player1} <br />
+{#if loading}
+    Loading...
+{:else}
+    {data?.game?.score}
+{/if}