diff options
Diffstat (limited to 'web/pw-server/src/lib/components')
5 files changed, 127 insertions, 8 deletions
diff --git a/web/pw-server/src/lib/components/PlayerLog.svelte b/web/pw-server/src/lib/components/PlayerLog.svelte index 52cae8e..60097d8 100644 --- a/web/pw-server/src/lib/components/PlayerLog.svelte +++ b/web/pw-server/src/lib/components/PlayerLog.svelte @@ -3,6 +3,7 @@ export let matchLog: string; export let playerId: number; + export let showStdErr: boolean = true; let playerLog: PlayerLog; @@ -66,7 +67,7 @@ <div class="bad-command-error">Parse error: {logTurn.action.error}</div> </div> {/if} - {#if logTurn.stderr.length > 0} + {#if showStdErr && logTurn.stderr.length > 0} <div class="stderr-header">stderr</div> <div class="stderr-text-box"> {#each logTurn.stderr as stdErrMsg} diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte index e46166c..b1aaf9e 100644 --- a/web/pw-server/src/lib/components/SubmitPane.svelte +++ b/web/pw-server/src/lib/components/SubmitPane.svelte @@ -122,13 +122,7 @@ </div> <span>Map</span> <div class="map-select"> - <Select - itemId="name" - label="name" - items={maps} - bind:value={$selectedMap} - clearable={false} - /> + <Select itemId="name" label="name" items={maps} bind:value={$selectedMap} clearable={false} /> </div> <button class="submit-button play-button" on:click={submitBot}>Play</button> </div> diff --git a/web/pw-server/src/lib/components/matches/BotMatchCard.svelte b/web/pw-server/src/lib/components/matches/BotMatchCard.svelte new file mode 100644 index 0000000..2f50173 --- /dev/null +++ b/web/pw-server/src/lib/components/matches/BotMatchCard.svelte @@ -0,0 +1,104 @@ +<script lang="ts"> + import type { BotMatch } from "$lib/matches"; + import dayjs from "dayjs"; + + export let botMatch: BotMatch; +</script> + +<a class="bot-match-card-wrapper" href={`/matches/${botMatch.id}`}> + <div class="bot-match-card"> + <div class="bot-match-outcome"> + {botMatch.outcome} + </div> + <div class="bot-match-card-main"> + <div class="opponent-name"> + <a class="bot-link" href={`/bots/${botMatch.opponent.bot_name}`} + >{botMatch.opponent.bot_name}</a + > + </div> + <div class="map-name"> + {botMatch.map.name} + </div> + </div> + <div class="bot-card-right"> + <div class="match-timestamp"> + {dayjs(botMatch.timestamp).format("YYYY-MM-DD HH:mm")} + </div> + <div class="match-errors"> + {#if botMatch.hadErrors} + ! Had errors + {/if} + </div> + </div> + </div> +</a> + +<style lang="scss"> + @use "src/styles/variables"; + + .bot-match-card { + margin: 4px; + padding: 12px; + display: flex; + border: 1px solid variables.$light-grey; + } + + .bot-match-outcome { + font-size: 24pt; + font-weight: 600; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; + color: #333; + width: 75px; + display: flex; + justify-content: center; + margin-top: -4px; + } + + .bot-match-card-main { + flex-grow: 1; + padding: 0 25px; + } + + .bot-card-right { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + } + + .opponent-name { + font-size: 18pt; + color: variables.$blue-primary; + padding-bottom: 4px; + } + + .match-errors { + color: red; + font-weight: 600; + text-align: right; + } + + .match-timestamp { + text-align: right; + } + + .bot-link { + color: variables.$blue-primary; + text-decoration: none; + } + + .bot-link:hover { + text-decoration: underline; + } + + .bot-match-card:hover { + background-color: rgb(246, 248, 250); + } + + .bot-match-card-wrapper { + text-decoration: none; + color: black; + display: block; + } +</style> diff --git a/web/pw-server/src/lib/components/matches/BotMatchList.svelte b/web/pw-server/src/lib/components/matches/BotMatchList.svelte new file mode 100644 index 0000000..959cd07 --- /dev/null +++ b/web/pw-server/src/lib/components/matches/BotMatchList.svelte @@ -0,0 +1,19 @@ +<script lang="ts"> + import type { BotMatch } from "$lib/matches"; + import BotMatchCard from "./BotMatchCard.svelte"; + + export let botMatches: BotMatch[]; + + function match_url(match: object) { + return `/matches/${match["id"]}`; + } +</script> + +<div> + {#each botMatches as botMatch} + <BotMatchCard {botMatch} /> + {/each} +</div> + +<style lang="scss"> +</style> diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte index 334b3b4..fa920ad 100644 --- a/web/pw-server/src/lib/components/navbar/UserControls.svelte +++ b/web/pw-server/src/lib/components/navbar/UserControls.svelte @@ -39,6 +39,7 @@ <a class="current-user-name" href="/users/{$currentUser['username']}"> {$currentUser["username"]} </a> + <!-- svelte-ignore a11y-click-events-have-key-events --> <div class="sign-out" on:click={signOut}>Sign out</div> {:else} <a class="account-href" href="/login">Sign in</a> |