tweaks

dragonfly-xyz · Jun 6, 2024 · 96d4c8f · 96d4c8f
1 parent 39602af
commit 96d4c8f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git 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);
+}
diff --git 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
@@ -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
@@ -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,15 +113,17 @@ 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>
         <ol>
           {#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>