aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/routes
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-08-05 19:21:32 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-08-05 19:21:32 +0200
commit6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b (patch)
treec261bf843bfdb7e7a00e6c2d04678e26474f23cb /web/pw-server/src/routes
parent3113f762d83fab020e63d008d1a6cbd15b441362 (diff)
downloadplanetwars.dev-6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b.tar.xz
planetwars.dev-6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b.zip
extract MatchList component
Diffstat (limited to 'web/pw-server/src/routes')
-rw-r--r--web/pw-server/src/routes/matches/index.svelte106
1 files changed, 3 insertions, 103 deletions
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
index 667e551..c89013e 100644
--- a/web/pw-server/src/routes/matches/index.svelte
+++ b/web/pw-server/src/routes/matches/index.svelte
@@ -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> \ No newline at end of file
+</style>