diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/pw-frontend/package.json | 1 | ||||
| -rw-r--r-- | web/pw-frontend/src/lib/MatchBrowser.svelte | 51 |
2 files changed, 51 insertions, 1 deletions
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> |