From 49a5735e07e7868195590a13c247698aaa1c5358 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sat, 27 Aug 2022 17:41:32 +0200
Subject: show map info for matches

---
 .../src/lib/components/matches/MatchList.svelte    |  8 ++++++++
 web/pw-server/src/routes/editor.svelte             | 24 ++++++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

(limited to 'web/pw-server')

diff --git a/web/pw-server/src/lib/components/matches/MatchList.svelte b/web/pw-server/src/lib/components/matches/MatchList.svelte
index 01a0b82..e38543e 100644
--- a/web/pw-server/src/lib/components/matches/MatchList.svelte
+++ b/web/pw-server/src/lib/components/matches/MatchList.svelte
@@ -16,6 +16,7 @@
     <th />
     <th />
     <th class="col-player-2">player 2</th>
+    <th class="col-map">map</th>
   </tr>
   {#each matches as match}
     <tr class="match-table-row" on:click={() => goto(match_url(match))}>
@@ -38,6 +39,9 @@
       <td class="col-player-2">
         {match["players"][1]["bot_name"]}
       </td>
+      <td class="col-map">
+        {match["map"]?.name || ""}
+      </td>
     </tr>
   {/each}
 </table>
@@ -84,6 +88,10 @@
     text-align: left;
   }
 
+  .col-map {
+    text-align: right;
+  }
+
   .matches-table {
     margin: 12px auto;
     border-collapse: collapse;
diff --git a/web/pw-server/src/routes/editor.svelte b/web/pw-server/src/routes/editor.svelte
index b1644c8..ff8232c 100644
--- a/web/pw-server/src/routes/editor.svelte
+++ b/web/pw-server/src/routes/editor.svelte
@@ -12,6 +12,7 @@
   import { debounce } from "$lib/utils";
   import SubmitPane from "$lib/components/SubmitPane.svelte";
   import OutputPane from "$lib/components/OutputPane.svelte";
+  import BotName from "./bots/[bot_name].svelte";
 
   enum ViewMode {
     Editor,
@@ -138,11 +139,12 @@
           on:click={() => selectMatch(match.id)}
           class:selected={match.id === selectedMatchId}
         >
-          <span class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</span>
-          <!-- hex is hardcoded for now, don't show map name -->
-          <!-- <span class="match-mapname">hex</span> -->
-          <!-- ugly temporary hardcode -->
-          <span class="match-opponent">{match["players"][1]["bot_name"]}</span>
+          <div class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</div>
+          <div class="match-card-body">
+            <!-- ugly temporary hardcode -->
+            <div class="match-opponent">{match["players"][1]["bot_name"]}</div>
+            <div class="match-map">{match["map"]?.name}</div>
+          </div>
         </li>
       {/each}
     </ul>
@@ -221,14 +223,24 @@
   .match-card {
     padding: 10px 15px;
     font-size: 11pt;
+    display: flex;
   }
 
   .match-timestamp {
     color: #ccc;
   }
 
+  .match-card-body {
+    margin: 0 8px;
+  }
+
   .match-opponent {
-    padding: 0 0.5em;
+    font-weight: 600;
+    color: #eee;
+  }
+
+  .match-map {
+    color: #ccc;
   }
 
   .sidebar-header {
-- 
cgit v1.2.3