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 | |
parent | 30de8107b499741808150db61abecd623bf1581b (diff) | |
download | planetwars.dev-17d29c5397f5b2a39d76587722d20467a53014a8.tar.xz planetwars.dev-17d29c5397f5b2a39d76587722d20467a53014a8.zip |
add basic leaderboard view
Diffstat (limited to 'web')
-rw-r--r-- | web/pw-server/src/lib/components/Leaderboard.svelte | 72 | ||||
-rw-r--r-- | web/pw-server/src/routes/index.svelte | 28 |
2 files changed, 88 insertions, 12 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> diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index 32efe69..243f4da 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -13,11 +13,13 @@ import SubmitPane from "$lib/components/SubmitPane.svelte"; import OutputPane from "$lib/components/OutputPane.svelte"; import RulesView from "$lib/components/RulesView.svelte"; + import Leaderboard from "$lib/components/Leaderboard.svelte"; enum ViewMode { Editor, MatchVisualizer, Rules, + Leaderboard, } let matches = []; @@ -111,10 +113,10 @@ return log; } - function selectEditor() { + function setViewMode(viewMode_: ViewMode) { selectedMatchId = undefined; selectedMatchLog = undefined; - viewMode = ViewMode.Editor; + viewMode = viewMode_; } function selectRules() { @@ -140,17 +142,24 @@ <div class="editor-button sidebar-item" class:selected={viewMode === ViewMode.Editor} - on:click={selectEditor} + on:click={() => setViewMode(ViewMode.Editor)} > Editor </div> <div class="rules-button sidebar-item" class:selected={viewMode === ViewMode.Rules} - on:click={selectRules} + on:click={() => setViewMode(ViewMode.Rules)} > Rules </div> + <div + class="sidebar-item" + class:selected={viewMode === ViewMode.Leaderboard} + on:click={() => setViewMode(ViewMode.Leaderboard)} + > + Leaderboard + </div> <div class="sidebar-header">match history</div> <ul class="match-list"> {#each matches as match} @@ -175,6 +184,8 @@ <EditorView {editSession} /> {:else if viewMode === ViewMode.Rules} <RulesView /> + {:else if viewMode === ViewMode.Leaderboard} + <Leaderboard /> {/if} </div> <div class="sidebar-right"> @@ -218,16 +229,9 @@ height: 100%; } - .editor-button { - padding: 15px; - } - - .rules-button { - padding: 15px; - } - .sidebar-item { color: #eee; + padding: 15px; } .sidebar-item:hover { |