show map info for matches

This commit is contained in:
Ilion Beyst 2022-08-27 17:41:32 +02:00
parent c80ce33279
commit 49a5735e07
3 changed files with 30 additions and 6 deletions

View file

@ -15,6 +15,8 @@ use crate::{
DatabaseConnection, GlobalConfig, DatabaseConnection, GlobalConfig,
}; };
use super::maps::ApiMap;
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
pub struct ApiMatch { pub struct ApiMatch {
id: i32, id: i32,
@ -22,6 +24,7 @@ pub struct ApiMatch {
state: MatchState, state: MatchState,
players: Vec<ApiMatchPlayer>, players: Vec<ApiMatchPlayer>,
winner: Option<i32>, winner: Option<i32>,
map: Option<ApiMap>,
} }
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
@ -102,6 +105,7 @@ pub fn match_data_to_api(data: matches::FullMatchData) -> ApiMatch {
}) })
.collect(), .collect(),
winner: data.base.winner, winner: data.base.winner,
map: data.map.map(|m| ApiMap { name: m.name }),
} }
} }

View file

@ -16,6 +16,7 @@
<th /> <th />
<th /> <th />
<th class="col-player-2">player 2</th> <th class="col-player-2">player 2</th>
<th class="col-map">map</th>
</tr> </tr>
{#each matches as match} {#each matches as match}
<tr class="match-table-row" on:click={() => goto(match_url(match))}> <tr class="match-table-row" on:click={() => goto(match_url(match))}>
@ -38,6 +39,9 @@
<td class="col-player-2"> <td class="col-player-2">
{match["players"][1]["bot_name"]} {match["players"][1]["bot_name"]}
</td> </td>
<td class="col-map">
{match["map"]?.name || ""}
</td>
</tr> </tr>
{/each} {/each}
</table> </table>
@ -84,6 +88,10 @@
text-align: left; text-align: left;
} }
.col-map {
text-align: right;
}
.matches-table { .matches-table {
margin: 12px auto; margin: 12px auto;
border-collapse: collapse; border-collapse: collapse;

View file

@ -12,6 +12,7 @@
import { debounce } from "$lib/utils"; import { debounce } from "$lib/utils";
import SubmitPane from "$lib/components/SubmitPane.svelte"; import SubmitPane from "$lib/components/SubmitPane.svelte";
import OutputPane from "$lib/components/OutputPane.svelte"; import OutputPane from "$lib/components/OutputPane.svelte";
import BotName from "./bots/[bot_name].svelte";
enum ViewMode { enum ViewMode {
Editor, Editor,
@ -138,11 +139,12 @@
on:click={() => selectMatch(match.id)} on:click={() => selectMatch(match.id)}
class:selected={match.id === selectedMatchId} class:selected={match.id === selectedMatchId}
> >
<span class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</span> <div class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</div>
<!-- hex is hardcoded for now, don't show map name --> <div class="match-card-body">
<!-- <span class="match-mapname">hex</span> --> <!-- ugly temporary hardcode -->
<!-- ugly temporary hardcode --> <div class="match-opponent">{match["players"][1]["bot_name"]}</div>
<span class="match-opponent">{match["players"][1]["bot_name"]}</span> <div class="match-map">{match["map"]?.name}</div>
</div>
</li> </li>
{/each} {/each}
</ul> </ul>
@ -221,14 +223,24 @@
.match-card { .match-card {
padding: 10px 15px; padding: 10px 15px;
font-size: 11pt; font-size: 11pt;
display: flex;
} }
.match-timestamp { .match-timestamp {
color: #ccc; color: #ccc;
} }
.match-card-body {
margin: 0 8px;
}
.match-opponent { .match-opponent {
padding: 0 0.5em; font-weight: 600;
color: #eee;
}
.match-map {
color: #ccc;
} }
.sidebar-header { .sidebar-header {