extract MatchList component
This commit is contained in:
parent
3113f762d8
commit
6e75cac7cc
2 changed files with 97 additions and 103 deletions
94
web/pw-server/src/lib/components/matches/MatchList.svelte
Normal file
94
web/pw-server/src/lib/components/matches/MatchList.svelte
Normal file
|
@ -0,0 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export let matches: object[];
|
||||
|
||||
function match_url(match: object) {
|
||||
return `/matches/${match["id"]}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<table class="matches-table">
|
||||
<tr>
|
||||
<th class="header-timestamp">timestamp</th>
|
||||
<th class="col-player-1">player 1</th>
|
||||
<th />
|
||||
<th />
|
||||
<th class="col-player-2">player 2</th>
|
||||
</tr>
|
||||
{#each matches as match}
|
||||
<tr class="match-table-row" on:click={() => goto(match_url(match))}>
|
||||
<td class="col-timestamp">
|
||||
{dayjs(match["timestamp"]).format("YYYY-MM-DD HH:mm")}
|
||||
</td>
|
||||
<td class="col-player-1">
|
||||
{match["players"][0]["bot_name"]}
|
||||
</td>
|
||||
{#if match["winner"] == null}
|
||||
<td class="col-score-player-1"> TIE </td>
|
||||
<td class="col-score-player-2"> TIE </td>
|
||||
{:else if match["winner"] == 0}
|
||||
<td class="col-score-player-1"> WIN </td>
|
||||
<td class="col-score-player-2"> LOSS </td>
|
||||
{:else if match["winner"] == 1}
|
||||
<td class="col-score-player-1"> LOSS </td>
|
||||
<td class="col-score-player-2"> WIN </td>
|
||||
{/if}
|
||||
<td class="col-player-2">
|
||||
{match["players"][1]["bot_name"]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
<style lang="scss">
|
||||
.matches-table td,
|
||||
.matches-table th {
|
||||
padding: 8px 16px;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.header-timestamp {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col-timestamp {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.col-player-1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col-player-2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@mixin col-player-score {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.col-score-player-1 {
|
||||
@include col-player-score;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-score-player-2 {
|
||||
@include col-player-score;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.matches-table {
|
||||
margin: 12px auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.match-table-row:hover {
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
|
@ -22,62 +22,13 @@
|
|||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import MatchList from "$lib/components/matches/MatchList.svelte";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
export let matches: object[];
|
||||
|
||||
function match_url(match: object) {
|
||||
return `/matches/${match["id"]}`;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<table class="matches-table">
|
||||
<tr>
|
||||
<th class="header-timestamp">timestamp</th>
|
||||
<th class="col-player-1">player 1</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th class="col-player-2">player 2</th>
|
||||
</tr>
|
||||
{#each matches as match}
|
||||
<tr class="match-table-row" on:click={() => goto(match_url(match))}>
|
||||
<td class="col-timestamp">
|
||||
{dayjs(match["timestamp"]).format("YYYY-MM-DD HH:mm")}
|
||||
</td>
|
||||
<td class="col-player-1">
|
||||
{match["players"][0]["bot_name"]}
|
||||
</td>
|
||||
{#if match["winner"] == null}
|
||||
<td class="col-score-player-1">
|
||||
TIE
|
||||
</td>
|
||||
<td class="col-score-player-2">
|
||||
TIE
|
||||
</td>
|
||||
{:else if match["winner"] == 0}
|
||||
<td class="col-score-player-1">
|
||||
WIN
|
||||
</td>
|
||||
<td class="col-score-player-2">
|
||||
LOSS
|
||||
</td>
|
||||
{:else if match["winner"] == 1}
|
||||
<td class="col-score-player-1">
|
||||
LOSS
|
||||
</td>
|
||||
<td class="col-score-player-2">
|
||||
WIN
|
||||
</td>
|
||||
{/if}
|
||||
<td class="col-player-2">
|
||||
{match["players"][1]["bot_name"]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
<MatchList {matches} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
@ -85,55 +36,4 @@
|
|||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.matches-table td,
|
||||
.matches-table th {
|
||||
padding: 8px 16px;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.header-timestamp {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col-timestamp {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.col-player-1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col-player-2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@mixin col-player-score {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.col-score-player-1 {
|
||||
@include col-player-score;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-score-player-2 {
|
||||
@include col-player-score;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.matches-table {
|
||||
margin: 12px auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.match-table-row:hover {
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
</style>
|
Loading…
Reference in a new issue