tabbed bot page

This commit is contained in:
Ilion Beyst 2022-10-31 20:31:03 +01:00
parent 8d556bbff1
commit 06a8ed945b
3 changed files with 90 additions and 45 deletions

View file

@ -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>

View file

@ -57,15 +57,6 @@
</form> --> </form> -->
<div class="container"> <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"]} {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
<div> <div>
<!-- TODO: can we avoid hardcoding the url? --> <!-- TODO: can we avoid hardcoding the url? -->
@ -126,28 +117,6 @@
padding-bottom: 24px; 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 { .btn-container {
padding: 24px; padding: 24px;
text-align: center; text-align: center;

View file

@ -12,11 +12,10 @@
apiClient.get("/api/leaderboard"), apiClient.get("/api/leaderboard"),
]); ]);
const { bot, owner } = botData; const { bot } = botData;
return { return {
props: { props: {
bot, bot,
owner,
botStats, botStats,
leaderboard, leaderboard,
}, },
@ -29,7 +28,7 @@
} }
} }
function mergedStats(rawStats: object) { function calcMergedStats(rawStats: object) {
return Object.fromEntries( return Object.fromEntries(
Object.entries(rawStats).map(([opponent, ms]) => { Object.entries(rawStats).map(([opponent, ms]) => {
const mapStats = ms as { k: MatchupStats }; const mapStats = ms as { k: MatchupStats };
@ -59,23 +58,13 @@
<script lang="ts"> <script lang="ts">
export let bot: object; export let bot: object;
export let owner: object;
export let botStats: object; export let botStats: object;
export let leaderboard: object[]; export let leaderboard: object[];
$: mergedStats = mergedStats(botStats); $: mergedStats = calcMergedStats(botStats);
</script> </script>
<div class="container"> <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"> <table class="leaderboard">
<tr class="leaderboard-row leaderboard-header"> <tr class="leaderboard-row leaderboard-header">
<th class="leaderboard-rank">Rank</th> <th class="leaderboard-rank">Rank</th>