diff options
| -rw-r--r-- | web/pw-server/package.json | 2 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 57 |
2 files changed, 51 insertions, 8 deletions
diff --git a/web/pw-server/package.json b/web/pw-server/package.json index 54a9580..a43f82b 100644 --- a/web/pw-server/package.json +++ b/web/pw-server/package.json @@ -21,6 +21,7 @@ "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", + "luxon": "^2.3.0", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.4.0", "sass": "^1.49.7", @@ -33,6 +34,7 @@ "vite-plugin-wasm-pack": "^0.1.9" }, "dependencies": { + "@types/luxon": "^2.0.9", "ace-builds": "^1.4.14", "dayjs": "^1.10.7", "planetwars-rs": "file:../planetwars-rs/pkg", 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> |