From b1e9490f55e4f360c249a107dcc5809a663dec42 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sat, 25 Dec 2021 21:49:16 +0100
Subject: add match meta header to logs

---
 web/pw-frontend/package.json                |  1 +
 web/pw-frontend/src/lib/MatchBrowser.svelte | 51 ++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

(limited to 'web/pw-frontend')

diff --git a/web/pw-frontend/package.json b/web/pw-frontend/package.json
index 2f31ebb..daf64af 100644
--- a/web/pw-frontend/package.json
+++ b/web/pw-frontend/package.json
@@ -26,6 +26,7 @@
     "buffer": "^6.0.3",
     "extract-svg-path": "^2.1.0",
     "load-svg": "^1.0.0",
+    "moment": "^2.29.1",
     "svg-mesh-3d": "^1.1.0",
     "ts-heap": "^1.1.3"
   }
diff --git a/web/pw-frontend/src/lib/MatchBrowser.svelte b/web/pw-frontend/src/lib/MatchBrowser.svelte
index 71fadb2..6885446 100644
--- a/web/pw-frontend/src/lib/MatchBrowser.svelte
+++ b/web/pw-frontend/src/lib/MatchBrowser.svelte
@@ -1,6 +1,19 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import Visualizer from "./Visualizer.svelte";
+  import moment from "moment";
+
+  const PLAYER_COLORS = [
+    "#FF8000",
+    "#0080FF",
+    "#FF6693",
+    "#3FCB55",
+    "#CBC33F",
+    "#CF40E9",
+    "#FF3F0D",
+    "#1BEEF0",
+    "#0DC5FF",
+  ];
 
   let matches = [];
   let selectedMatch = null;
@@ -21,6 +34,19 @@
         selectedMatchLog = log;
       });
   }
+
+  function showTimestamp(dateStr: string): string {
+    let t = moment(dateStr);
+    if (t.day() == moment().day()) {
+      return moment(dateStr).format("HH:mm");
+    } else {
+      return moment(dateStr).format("DD/MM");
+    }
+  }
+
+  function playerColor(player_num: number): string {
+    return PLAYER_COLORS[player_num % PLAYER_COLORS.length];
+  }
 </script>
 
 <div class="container">
@@ -33,7 +59,15 @@
           class:selected={selectedMatch === match.name}
           class="match-card"
         >
-          {match.name}
+          <span class="match-timestamp"> {showTimestamp(match.timestamp)}</span>
+          <span class="match-mapname">{match.map_name}</span>
+          <ul class="match-player-list">
+            {#each match.players as player, ix}
+              <li class="match-player" style="color: {playerColor(ix)}">
+                {player.name}
+              </li>
+            {/each}
+          </ul>
         </li>
       {/each}
     </ul>
@@ -86,4 +120,19 @@
   .match-card:hover {
     background-color: #333;
   }
+
+  .match-timestamp {
+    color: #ccc;
+  }
+
+  .match-mapname {
+    padding: 0 0.5em;
+  }
+
+  .match-player-list {
+    list-style: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 18px;
+  }
 </style>
-- 
cgit v1.2.3