diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/pw-server/src/lib/components/Leaderboard.svelte | 8 | ||||
| -rw-r--r-- | web/pw-server/src/lib/components/navbar/UserControls.svelte | 7 | ||||
| -rw-r--r-- | web/pw-server/src/routes/users/[user_name].svelte | 84 |
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 |