diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-05 19:21:32 +0200 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-05 19:21:32 +0200 |
commit | 6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b (patch) | |
tree | c261bf843bfdb7e7a00e6c2d04678e26474f23cb /web/pw-server/src/lib/components | |
parent | 3113f762d83fab020e63d008d1a6cbd15b441362 (diff) | |
download | planetwars.dev-6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b.tar.xz planetwars.dev-6e75cac7cca1dc46f83e9eb7a7624cfdbe09ab3b.zip |
extract MatchList component
Diffstat (limited to 'web/pw-server/src/lib/components')
-rw-r--r-- | web/pw-server/src/lib/components/matches/MatchList.svelte | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/web/pw-server/src/lib/components/matches/MatchList.svelte b/web/pw-server/src/lib/components/matches/MatchList.svelte new file mode 100644 index 0000000..aea59c2 --- /dev/null +++ b/web/pw-server/src/lib/components/matches/MatchList.svelte @@ -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> |