diff options
Diffstat (limited to 'web/pw-server/src/routes/bots')
3 files changed, 90 insertions, 45 deletions
diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte new file mode 100644 index 0000000..baa8f99 --- /dev/null +++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte @@ -0,0 +1,87 @@ +<script lang="ts" context="module"> + import { ApiClient } from "$lib/api_client"; + + export async function load({ params, fetch }) { + const apiClient = new ApiClient(fetch); + const botName = params["bot_name"]; + const { bot, owner } = await apiClient.get(`/api/bots/${botName}`); + + return { + props: { + bot, + owner, + }, + }; + } +</script> + +<script lang="ts"> + export let bot; + export let owner; +</script> + +<div class="header"> + <div class="header-title-line"> + <h1 class="bot-name">{bot["name"]}</h1> + {#if owner} + <span class="title-line-owner"> + by + <a class="owner-name" href="/users/{owner['username']}"> + {owner["username"]} + </a> + </span> + {/if} + </div> + <div class="bot-tabs"> + <a class="bot-tab" href={`/bots/${bot.name}`}>index</a> + <a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a> + <a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a> + </div> +</div> +<slot /> + +<style lang="scss"> + .header { + padding: 0 16px; + border-bottom: 1px solid black; + } + + .header-title-line { + display: flex; + align-items: baseline; + } + + .title-line-owner { + padding: 0 16px; + color: #333; + } + + $header-space-above-line: 12px; + + .bot-name { + font-size: 24pt; + margin-bottom: $header-space-above-line; + } + + .owner-name { + font-size: 14pt; + // font-weight: 600; + text-decoration: none; + color: black; + margin-bottom: $header-space-above-line; + } + + .bot-tabs { + display: flex; + } + + .bot-tab { + padding: 8px; + text-decoration: none; + color: black; + } + + .bot-tab:hover { + background-color: rgb(246, 248, 250); + } +</style> diff --git a/web/pw-server/src/routes/bots/[bot_name]/index.svelte b/web/pw-server/src/routes/bots/[bot_name]/index.svelte index a5934b6..afe2cc7 100644 --- a/web/pw-server/src/routes/bots/[bot_name]/index.svelte +++ b/web/pw-server/src/routes/bots/[bot_name]/index.svelte @@ -57,15 +57,6 @@ </form> --> <div class="container"> - <div class="header"> - <h1 class="bot-name">{bot["name"]}</h1> - {#if owner} - <a class="owner-name" href="/users/{owner['username']}"> - {owner["username"]} - </a> - {/if} - </div> - {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]} <div> <!-- TODO: can we avoid hardcoding the url? --> @@ -126,28 +117,6 @@ padding-bottom: 24px; } - .header { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-bottom: 60px; - border-bottom: 1px solid black; - } - - $header-space-above-line: 12px; - - .bot-name { - font-size: 24pt; - margin-bottom: $header-space-above-line; - } - - .owner-name { - font-size: 14pt; - text-decoration: none; - color: #333; - margin-bottom: $header-space-above-line; - } - .btn-container { padding: 24px; text-align: center; diff --git a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte index 6b5a2e1..67b769f 100644 --- a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte +++ b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte @@ -12,11 +12,10 @@ apiClient.get("/api/leaderboard"), ]); - const { bot, owner } = botData; + const { bot } = botData; return { props: { bot, - owner, botStats, leaderboard, }, @@ -29,7 +28,7 @@ } } - function mergedStats(rawStats: object) { + function calcMergedStats(rawStats: object) { return Object.fromEntries( Object.entries(rawStats).map(([opponent, ms]) => { const mapStats = ms as { k: MatchupStats }; @@ -59,23 +58,13 @@ <script lang="ts"> export let bot: object; - export let owner: object; export let botStats: object; export let leaderboard: object[]; - $: mergedStats = mergedStats(botStats); + $: mergedStats = calcMergedStats(botStats); </script> <div class="container"> - <div class="header"> - <h1 class="bot-name">{bot["name"]}</h1> - {#if owner} - <a class="owner-name" href="/users/{owner['username']}"> - {owner["username"]} - </a> - {/if} - </div> - <h2>Stats</h2> <table class="leaderboard"> <tr class="leaderboard-row leaderboard-header"> <th class="leaderboard-rank">Rank</th> |