stuff

web/src/App.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import Game from "./pages/Game.svelte"
+    import Player from "./pages/Player.svelte";
 </script>
 
 <main>
 </main>
     <Game gameID="1" />
+    <Player playerID="niklas" />
 <style>
 </style>

web/src/pages/Game.svelte

@@ -4,9 +4,11 @@
     import { onMount } from "svelte";
     import type { GetGameQuery } from "../gql/graphql";
 
-    let { gameID } : {
+    let {
-        gameID: string
+        gameID,
-    } = $props()
+    }: {
+        gameID: string;
+    } = $props();
 
     const doc = graphql(`
         query getGame($gameID: ID!) {
@@ -31,17 +33,13 @@
     `);
 
     let loading = $state(true);
-    let data: GetGameQuery | undefined = $state(undefined);
+    let data: GetGameQuery | undefined = $state();
 
     onMount(() => {
-        request("http://localhost:5173/graphql", doc, { gameID }).then(
+        request("http://localhost:5173/graphql", doc, { gameID }).then((e) => {
-            (e) => {
-                console.log(e.game);
-
             data = e;
             loading = false;
-            },
+        });
-        );
     });
 </script>
 
@@ -49,6 +47,8 @@
 
 {#if loading}
     Loading...
+{:else if data == null || data.game == null}
+    Game not found.
 {:else}
-    {data?.game?.score}
+    {data.game.score}
 {/if}

web/src/pages/Player.svelte

@@ -1,10 +1,42 @@
 <script lang="ts">
-    let player = {
+    import { request } from "graphql-request";
-        id: "playerid",
+    import { graphql } from "./../gql";
-        currentElo: 1001,
+    import { onMount } from "svelte";
-        games: 3,
+    import type { GetPlayerQuery } from "../gql/graphql";
+
+    let {
+        playerID,
+    }: {
+        playerID: string;
+    } = $props();
+
+    const doc = graphql(`
+        query getPlayer($playerID: ID!) {
+            player(id: $playerID) {
+                ID
             }
+        }
+    `);
+
+    let loading = $state(true);
+    let data: GetPlayerQuery | undefined = $state();
+
+    onMount(() => {
+        request("http://localhost:5173/graphql", doc, { playerID }).then(
+            (e) => {
+                data = e;
+                loading = false;
+            },
+        );
+    });
 </script>
 
 <h1 class="text-2xl">Player</h1>
+{#if loading}
+    Loading...
+{:else if data == null || data.player == null}
+    Player not found.
+{:else}
+    {data.player.ID}
+{/if}