consume new match API

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",

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)}
+            on:click={() => selectMatch(match.id)}
-            class:selected={match.matchId === selectedMatchId}
+            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>