3 files changed, 95 insertions, 4 deletions

diff --git a/web/pw-server/src/lib/components/Leaderboard.svelte b/web/pw-server/src/lib/components/Leaderboard.svelte
index 75e4807..8582198 100644
--- a/web/pw-server/src/lib/components/Leaderboard.svelte
+++ b/web/pw-server/src/lib/components/Leaderboard.svelte
@@ -44,7 +44,8 @@
         <td class="leaderboard-bot">{entry["bot"]["name"]}</td>
         <td class="leaderboard-author">
           {#if entry["author"]}
-            {entry["author"]["username"]}
+          <!-- TODO: remove duplication -->
+            <a href="/users/{entry["author"]["username"]}">{entry["author"]["username"]}</a>
           {/if}
         </td>
       </tr>
@@ -69,4 +70,9 @@
   .leaderboard-rank {
     color: #333;
   }
+
+  .leaderboard-author a{
+    text-decoration: none;
+    color: black;
+  }
 </style>
diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte
index 0b8413d..a9bd87b 100644
--- a/web/pw-server/src/lib/components/navbar/UserControls.svelte
+++ b/web/pw-server/src/lib/components/navbar/UserControls.svelte
@@ -36,9 +36,9 @@
 
 <div class="user-controls">
   {#if $currentUser}
-    <div class="current-user-name">
-      {$currentUser["username"]}
-    </div>
+    <a class="current-user-name" href="/users/{$currentUser["username"]}">
+        {$currentUser["username"]}
+    </a>
     <div class="sign-out" on:click={signOut}>Sign out</div>
   {:else}
     <a class="account-href" href="login">Sign in</a>
@@ -61,6 +61,7 @@
 
   .current-user-name {
     @include navbar-item;
+    text-decoration: none;
     color: #fff;
   }
 
diff --git a/web/pw-server/src/routes/users/[user_name].svelte b/web/pw-server/src/routes/users/[user_name].svelte
new file mode 100644
index 0000000..fab3a96
--- /dev/null
+++ b/web/pw-server/src/routes/users/[user_name].svelte
@@ -0,0 +1,84 @@
+<script lang="ts" context="module">
+  function fetchJson(url: string): Promise<Response> {
+    return fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  export async function load({ params, fetch }) {
+    const userName = params["user_name"];
+    const userBotsResponse = await fetch(`/api/users/${userName}/bots`);
+    return {
+      props: {
+        userName,
+        bots: await userBotsResponse.json(),
+      },
+    };
+
+    // return {
+    //   status: matchDataResponse.status,
+    //   error: new Error("failed to load match"),
+    // };
+  }
+</script>
+
+<script lang="ts">
+  export let userName: string;
+  export let bots: object[];
+</script>
+
+<div class="container">
+  <div class="header">
+    <h1 class="user-name">{userName}</h1>
+  </div>
+  <h2>Bots</h2>
+  <ul class="bot-list">
+    {#each bots as bot}
+    <li class="bot">
+      <span class="bot-name">{bot['name']}</span>
+    </li>
+    {/each}
+  </ul>
+</div>
+
+<style lang="scss">
+  .container {
+    min-width: 600px;
+    max-width: 800px;
+    margin: 50px auto;
+  }
+
+  .header {
+    margin-bottom: 60px;
+    border-bottom: 1px solid black;
+  }
+
+  .user-name {
+    margin-bottom: .5em;
+  }
+
+  .bot-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  $border-color: #d0d7de;
+
+  .bot {
+    display: block;
+    padding: 24px 0;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .bot-name {
+    font-size: 20px;
+    font-weight: 400;
+  }
+
+  .bot:first-child {
+    border-top: 1px solid $border-color;
+  }
+
+</style>
\ No newline at end of file