aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-server/src')
-rw-r--r--web/pw-server/src/routes/index.svelte57
1 files changed, 49 insertions, 8 deletions
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index f8dc03f..3bab27a 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -4,6 +4,8 @@
import { onMount } from "svelte";
import "./style.css";
+ import { DateTime } from "luxon";
+
import type { Ace } from "ace-builds";
import ace from "ace-builds/src-noconflict/ace?client";
import * as AcePythonMode from "ace-builds/src-noconflict/mode-python?client";
@@ -41,9 +43,9 @@
let responseData = await response.json();
- let matchId = responseData["match_id"];
+ let matchData = responseData["match"];
- matches.push({ matchId: matchId });
+ matches.push(matchData);
matches = matches;
}
@@ -55,7 +57,7 @@
}
async function loadMatch(matchId: string) {
- const res = await fetch(`/api/submission_match_log/${matchId}`, {
+ const res = await fetch(`/api/matches/${matchId}`, {
headers: {
"Content-Type": "application/json",
},
@@ -69,6 +71,15 @@
selectedMatchId = undefined;
selectedMatchLog = undefined;
}
+
+ function formatMatchTimestamp(timestampString: string): string {
+ let timestamp = DateTime.fromISO(timestampString);
+ if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) {
+ return timestamp.toFormat("HH:mm");
+ } else {
+ return timestamp.toFormat("dd/MM");
+ }
+ }
</script>
<div class="outer-container">
@@ -76,20 +87,23 @@
<div class="container">
<div class="sidebar-left">
<div
- class="sidebar-item"
+ class="editor-button sidebar-item"
class:selected={selectedMatchId === undefined}
on:click={selectEditor}
>
Editor
</div>
+ <div class="sidebar-header">match history</div>
<ul class="match-list">
{#each matches as match}
<li
class="match-card sidebar-item"
- on:click={() => selectMatch(match.matchId)}
- class:selected={match.matchId === selectedMatchId}
+ on:click={() => selectMatch(match.id)}
+ class:selected={match.id === selectedMatchId}
>
- <div class="match-name">{match.matchId}</div>
+ <span class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</span>
+ <!-- hardcode hex for now, maps are not yet implemented -->
+ <span class="match-mapname">hex</span>
</li>
{/each}
</ul>
@@ -161,8 +175,11 @@
cursor: pointer;
}
- .sidebar-item {
+ .editor-button {
padding: 15px;
+ }
+
+ .sidebar-item {
color: #eee;
}
@@ -177,5 +194,29 @@
.match-list {
list-style: none;
color: #eee;
+ padding-top: 15px;
+ }
+
+ .match-card {
+ padding: 10px 15px;
+ font-size: 11pt;
+ }
+
+ .match-timestamp {
+ color: #ccc;
+ }
+
+ .match-mapname {
+ padding: 0 0.5em;
+ }
+
+ .sidebar-header {
+ margin-top: 2em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 14px;
+ font-family: "Open Sans", sans-serif;
+ padding-left: 14px;
}
</style>