planetwars.dev/web/pw-server/src/routes/bots/[bot_name].svelte

168 lines
3.8 KiB
Svelte
Raw Normal View History

2022-07-24 16:45:29 +02:00
<script lang="ts" context="module">
2022-08-06 15:23:02 +02:00
import { ApiClient } from "$lib/api_client";
2022-07-24 16:45:29 +02:00
export async function load({ params, fetch }) {
2022-08-06 15:23:02 +02:00
const apiClient = new ApiClient(fetch);
2022-07-24 16:45:29 +02:00
2022-08-06 15:23:02 +02:00
try {
const [botData, matches] = await Promise.all([
apiClient.get(`/api/bots/${params["bot_name"]}`),
2022-08-14 11:02:08 +02:00
apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
2022-08-06 15:23:02 +02:00
]);
2022-08-05 20:28:51 +02:00
2022-08-06 15:23:02 +02:00
const { bot, owner, versions } = botData;
2022-07-24 16:45:29 +02:00
versions.sort((a: string, b: string) =>
dayjs(a["created_at"]).isAfter(b["created_at"]) ? -1 : 1
);
return {
props: {
bot,
owner,
versions,
2022-08-05 20:28:51 +02:00
matches,
2022-07-24 16:45:29 +02:00
},
};
2022-08-06 15:23:02 +02:00
} catch (error) {
return {
status: error.status,
error: error,
};
2022-07-24 16:45:29 +02:00
}
}
</script>
<script lang="ts">
import dayjs from "dayjs";
import { currentUser } from "$lib/stores/current_user";
2022-08-05 20:28:51 +02:00
import MatchList from "$lib/components/matches/MatchList.svelte";
2022-07-24 16:45:29 +02:00
export let bot: object;
export let owner: object;
export let versions: object[];
2022-08-05 20:28:51 +02:00
export let matches: object[];
2022-07-24 16:45:29 +02:00
// function last_updated() {
// versions.sort()
// }
// let files;
// async function submitCode() {
// console.log("click");
// const token = get_session_token();
// const formData = new FormData();
// formData.append("File", files[0]);
// const res = await fetch(`/api/bots/${bot["id"]}/upload`, {
// method: "POST",
// headers: {
// // the content type header will be set by the browser
// Authorization: `Bearer ${token}`,
// },
// body: formData,
// });
// console.log(res.statusText);
// }
</script>
<!--
<div>Upload code</div>
<form on:submit|preventDefault={submitCode}>
<input type="file" bind:files />
<button type="submit">Submit</button>
</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? -->
Publish a new version by pushing a docker container to
<code>registry.planetwars.dev/{bot["name"]}:latest</code>, or using the web editor.
</div>
{/if}
2022-08-05 20:28:51 +02:00
<div class="matches">
<h3>Recent matches</h3>
<MatchList {matches} />
2022-08-14 11:02:08 +02:00
{#if matches.length > 0}
<div class="btn-container">
<a class="btn-view-more" href={`/matches?bot=${bot["name"]}`}>All matches</a>
</div>
{/if}
2022-08-05 20:28:51 +02:00
</div>
<!-- <div class="versions">
2022-07-24 16:45:29 +02:00
<h4>Versions</h4>
<ul class="version-list">
{#each versions as version}
<li>
{dayjs(version["created_at"]).format("YYYY-MM-DD HH:mm")}
</li>
{/each}
</ul>
2022-07-24 18:09:04 +02:00
{#if versions.length == 0}
This bot does not have any versions yet.
{/if}
2022-08-05 20:28:51 +02:00
</div> -->
2022-07-24 16:45:29 +02:00
</div>
<style lang="scss">
.container {
width: 800px;
max-width: 80%;
margin: 50px auto;
}
.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;
}
2022-08-14 11:02:08 +02:00
$borderColor: rgba(27, 31, 36, 0.25);
.btn-container {
padding: 24px;
text-align: center;
}
.btn-view-more {
color: rgb(9, 105, 218);
font-size: 14px;
text-decoration: none;
padding: 6px 16px;
border: 1px solid $borderColor;
border-radius: 5px;
}
2022-07-24 16:45:29 +02:00
.versions {
margin: 30px 0;
}
</style>