xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

extract MatchList component

Browse source
This commit is contained in:
Ilion Beyst 2022-08-05 19:21:32 +02:00
parent 3113f762d8
commit 6e75cac7cc
2 changed files with 97 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
web/pw-server/src/lib/components/matches/MatchList.svelte Normal file
View 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>

106
web/pw-server/src/routes/matches/index.svelte
View file

@ -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>
</style>