diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-05-18 22:03:46 +0200 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-05-18 22:03:46 +0200 |
commit | 17d29c5397f5b2a39d76587722d20467a53014a8 (patch) | |
tree | 091a63396a503f09a6e48ddcac2fa7d030d47799 /web/pw-server/src/lib | |
parent | 30de8107b499741808150db61abecd623bf1581b (diff) | |
download | planetwars.dev-17d29c5397f5b2a39d76587722d20467a53014a8.tar.xz planetwars.dev-17d29c5397f5b2a39d76587722d20467a53014a8.zip |
add basic leaderboard view
Diffstat (limited to 'web/pw-server/src/lib')
-rw-r--r-- | web/pw-server/src/lib/components/Leaderboard.svelte | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/web/pw-server/src/lib/components/Leaderboard.svelte b/web/pw-server/src/lib/components/Leaderboard.svelte new file mode 100644 index 0000000..75e4807 --- /dev/null +++ b/web/pw-server/src/lib/components/Leaderboard.svelte @@ -0,0 +1,72 @@ +<script lang="ts"> + import { onMount } from "svelte"; + + let leaderboard = []; + + onMount(async () => { + const res = await fetch("/api/leaderboard", { + headers: { + "Content-Type": "application/json", + }, + }); + + if (res.ok) { + leaderboard = await res.json(); + console.log(leaderboard); + } + }); + + function formatRating(entry: object): any { + const rating = entry["rating"]; + if (rating != null) { + return rating.toFixed(0); + } else { + // why does this happen? + return "-inf"; + } + } +</script> + +<div class="container"> + <table class="leaderboard"> + <tr class="leaderboard-row leaderboard-header"> + <th class="leaderboard-rank" /> + <th class="leaderboard-rating">Rating</th> + <th class="leaderboard-bot">Bot</th> + <th class="leaderboard-author">Author</th> + </tr> + {#each leaderboard as entry, index} + <tr class="leaderboard-row"> + <td class="leaderboard-rank">{index + 1}</td> + <td class="leaderboard-rating"> + {formatRating(entry)} + </td> + <td class="leaderboard-bot">{entry["bot"]["name"]}</td> + <td class="leaderboard-author"> + {#if entry["author"]} + {entry["author"]["username"]} + {/if} + </td> + </tr> + {/each} + </table> +</div> + +<style lang="scss"> + .container { + overflow-y: scroll; + height: 100%; + } + .leaderboard { + margin: 18px auto; + text-align: center; + } + + .leaderboard th, + .leaderboard td { + padding: 8px 16px; + } + .leaderboard-rank { + color: #333; + } +</style> |