aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-05-28 11:22:44 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-05-28 11:22:44 +0200
commit80c60ac69c9b0d86a4536eeac82cf266eb4430bc (patch)
treebc2ac0c803be27395c0297123f0794e1b8904676 /web
parent643c0e7706ab927ef270e4a5b62ada0c38b651b9 (diff)
parentfadcda850332f8adb0a4382da9f04f78db3f6d1a (diff)
downloadplanetwars.dev-80c60ac69c9b0d86a4536eeac82cf266eb4430bc.tar.xz
planetwars.dev-80c60ac69c9b0d86a4536eeac82cf266eb4430bc.zip
Merge branch 'feature/leaderboard'
Diffstat (limited to 'web')
-rw-r--r--web/pw-server/src/lib/components/Leaderboard.svelte72
-rw-r--r--web/pw-server/src/routes/index.svelte28
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 376b324..08dc60a 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">
@@ -220,16 +231,9 @@
height: 100%;
}
- .editor-button {
- padding: 15px;
- }
-
- .rules-button {
- padding: 15px;
- }
-
.sidebar-item {
color: #eee;
+ padding: 15px;
}
.sidebar-item:hover {