From 96d4c8f9d00f65272f788a541ca23a933364f50e Mon Sep 17 00:00:00 2001 From: Lawrence Forman <me@merklejerk.com> Date: Thu, 6 Jun 2024 06:27:20 -0400 Subject: [PATCH] tweaks --- src/lib/site.ts | 4 ++++ src/lib/styles/global.scss | 4 ++-- src/routes/player/+page.svelte | 34 ++++++++++++++++++++---------- src/routes/tournament/+page.svelte | 11 ++++++---- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/lib/site.ts b/src/lib/site.ts index 4616570..41581f8 100644 --- a/src/lib/site.ts +++ b/src/lib/site.ts @@ -61,3 +61,7 @@ export const SITE_CONTEXT_NAME = 'site'; export function getSiteContext(): SiteContext { return getContext(SITE_CONTEXT_NAME); } + +export function formatScore(rawScore: number): string { + return (rawScore * 1e3 + 1e3).toFixed(0); +} \ No newline at end of file diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss index 928a11a..7da4dd6 100644 --- a/src/lib/styles/global.scss +++ b/src/lib/styles/global.scss @@ -33,7 +33,7 @@ h1:first-of-type, h2:first-of-type { } h1, h2 { - margin-bottom: 0; + margin-bottom: 0.5em; color: rgb(176, 138, 40); } @@ -84,7 +84,7 @@ button:not(.custom) { } } -input:not([type]), input[type='text'] { +input:not([type]), input[type='text'], textarea { background: none; border: none; border-image: url('/text-input-border.png') 15% 22.5% / 0.5em 1.75ex round; diff --git a/src/routes/player/+page.svelte b/src/routes/player/+page.svelte index 97af738..3d71754 100644 --- a/src/routes/player/+page.svelte +++ b/src/routes/player/+page.svelte @@ -3,7 +3,7 @@ import { page } from "$app/stores"; import { formatEther, isHex, keccak256, zeroHash, type Address, type Hex } from "viem"; import { PUBLIC_DATA_URL } from "$env/static/public"; - import { getSiteContext } from "$lib/site"; + import { formatScore, getSiteContext } from "$lib/site"; import { encryptPlayerCode } from "$lib/encrypt"; import Lede from "$lib/components/lede.svelte"; import CatSpinner from "$lib/components/cat-spinner.svelte"; @@ -271,10 +271,23 @@ gap: 1ex; } - input.bytecode { - font-family: monospace; - font-size: 1.1em; - letter-spacing: -0.33ex; + .submit-bytecode { + display: flex; + flex-direction: column; + .bytecode { + font-family: monospace; + font-size: 1.1em; + letter-spacing: -0.33ex; + display: block; + width: 0 auto; + } + + button { + flex: 0 1 fit-content; + justify-self: end; + align-self: flex-end; + width: 20ex; + } } .name { @@ -300,7 +313,7 @@ </div> <div class="is-active"> {#if playerIsActive} - Submission received. + Submission received. ✓ {:else} Awaiting submission. {/if} @@ -348,7 +361,7 @@ </div> <div>{tr.type === 'scrimmage' ? 'Market Day' : 'Grand Faire'}</div> <div>{tr.rank+1} / {tr.totalPlayers}</div> - <div>{Math.round(tr.score * 1e3)}</div> + <div>{formatScore(tr.score)}</div> </div> {/each} </div> @@ -377,11 +390,10 @@ If you're providing your code manually, make sure you provide the <em>undeployed</em> bytecode and not the "deployed" one. These are typically named <tt>bytecode</tt> and <tt>deployedBytecode</tt>, respectively, in compiler artifacts. </p> <div> - <form on:submit|preventDefault={onSubmitCode}> - <input + <form on:submit|preventDefault={onSubmitCode} class="submit-bytecode"> + <textarea class="bytecode" - placeholder="bytecode" - pattern='^(0x)?[a-fA-F0-9]+' + placeholder="Drop JSON artifact or paste (hex) bytecode" on:drop|preventDefault={onBytecodeDrop} bind:value={rawCode} /> diff --git a/src/routes/tournament/+page.svelte b/src/routes/tournament/+page.svelte index aaf18ad..7cb0099 100644 --- a/src/routes/tournament/+page.svelte +++ b/src/routes/tournament/+page.svelte @@ -7,6 +7,7 @@ import { page } from "$app/stores"; import Page from "$lib/components/page.svelte"; import { createBusy, type BusyState } from "$lib/kit"; import { + formatScore, type ScoredPlayer, type TournamentType, } from "$lib/site"; @@ -19,7 +20,7 @@ import { page } from "$app/stores"; interface BracketInfo { idx: number; rankings: ScoredPlayerWithWinCount[], - matchCount: number; + matches: string[]; } interface TournamentData { @@ -100,7 +101,7 @@ import { page } from "$app/stores"; {#each data.rankings as player (player.address)} <li> <a href={`${base}/player?name=${player.name}`}>{player.name}</a>: - {Math.round(player.score * 1e3)} + {formatScore(player.score)} </li> {/each} </ol> @@ -112,7 +113,9 @@ import { page } from "$app/stores"; <h2>Bracket {bracket.idx + 1}</h2> </div> <div> - Matches: {bracket.matchCount} + Players: {bracket.rankings.length}, + Matches: {bracket.matches.length} + ({bracket.matches.length / Math.ceil(bracket.rankings.length / 4)}pp) </div> <div> <h3>Bracket Ranking</h3> @@ -120,7 +123,7 @@ import { page } from "$app/stores"; {#each bracket.rankings as player (player.address)} <li> <a href={`${base}/player?name=${player.name}`}>{player.name}</a>: - {Math.round(player.score * 1e3)}</li> + {formatScore(player.score)}</li> {/each} </ol> </div>