component cleanup

src/lib/components/MapCard.svelte

@@ -18,9 +18,6 @@
   // BeatLeader/BeatSaver links
   export let leaderboardId: string | undefined = undefined;
   export let beatsaverKey: string | undefined = undefined;
-
-  // Layout control
-  export let playerWithDifficulty: boolean = true; // if false, player goes with buttons
 </script>
 
 <div class="aspect-square bg-black/30">
@@ -53,22 +50,15 @@
     </div>
   {/if}
   
-  {#if playerWithDifficulty}
   <div class="mt-2 flex items-center gap-2">
     <DifficultyLabel {diffName} {modeName} />
     <div class="flex-1">
       <SongPlayer {hash} preferBeatLeader={true} />
     </div>
   </div>
-  {:else}
-    <div class="mt-2">
-      <DifficultyLabel {diffName} {modeName} />
-    </div>
-  {/if}
 
   <slot name="content" />
 
-  {#if playerWithDifficulty}
   <div class="mt-3">
     <MapActionButtons
       {hash}
@@ -78,21 +68,5 @@
       {beatsaverKey}
     />
   </div>
-  {:else}
-    <div class="mt-3 flex items-center gap-2">
-      <div class="w-1/2">
-        <MapActionButtons
-          {hash}
-          {leaderboardId}
-          {diffName}
-          {modeName}
-          {beatsaverKey}
-        />
-      </div>
-      <div class="w-1/2">
-        <SongPlayer {hash} preferBeatLeader={true} />
-      </div>
-    </div>
-  {/if}
 </div>
 

src/lib/components/PlayerCompareForm.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+
+  export let playerA = '';
+  export let playerB = '';
+  export let loading = false;
+  export let hasResults = false;
+  export let oncompare: (() => void) | undefined = undefined;
+
+  let initialized = false;
+
+  // Load from URL params on mount
+  onMount(() => {
+    if (browser) {
+      const sp = new URLSearchParams(location.search);
+      playerA = sp.get('a') ?? playerA;
+      playerB = sp.get('b') ?? playerB;
+      initialized = true;
+    }
+  });
+
+  // Sync to URL params when values change
+  $: if (browser && initialized) {
+    const sp = new URLSearchParams(location.search);
+    if (playerA.trim()) {
+      sp.set('a', playerA.trim());
+    } else {
+      sp.delete('a');
+    }
+    if (playerB.trim()) {
+      sp.set('b', playerB.trim());
+    } else {
+      sp.delete('b');
+    }
+    const qs = sp.toString();
+    const url = location.pathname + (qs ? `?${qs}` : '');
+    history.replaceState(null, '', url);
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    oncompare?.();
+  }
+</script>
+
+<form class="mt-6 grid gap-4 sm:grid-cols-3 items-end" on:submit={handleSubmit}>
+  <div>
+    <label class="block text-sm text-muted">Player A ID
+      <input 
+        class="mt-1 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none {hasResults ? 'border-white/10' : 'neon-input'}" 
+        bind:value={playerA} 
+        placeholder="7656119... or BL ID" 
+        required 
+      />
+    </label>
+  </div>
+  <div>
+    <label class="block text-sm text-muted">Player B ID
+      <input 
+        class="mt-1 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none {hasResults ? 'border-white/10' : 'neon-input'}" 
+        bind:value={playerB} 
+        placeholder="7656119... or BL ID" 
+        required 
+      />
+    </label>
+  </div>
+  <div>
+    <button class="btn-neon" type="submit" disabled={loading}>
+      {#if loading}
+        Loading...
+      {:else}
+        Compare
+      {/if}
+    </button>
+    <slot name="extra-buttons" />
+  </div>
+</form>
+
+<style>
+  .neon-input {
+    border: 1px solid rgba(34, 211, 238, 0.3);
+    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,15,23,0.95));
+    color: rgba(148, 163, 184, 1);
+    transition: all 0.2s ease;
+    box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
+  }
+  .neon-input:hover {
+    border-color: rgba(34, 211, 238, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
+  }
+  .neon-input:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.7);
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 0 2px rgba(34, 211, 238, 0.1);
+    color: rgba(255, 255, 255, 1);
+  }
+</style>
+

src/routes/tools/beatleader-compare/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import MapCard from '$lib/components/MapCard.svelte';
+  import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
 
   type BeatLeaderScore = {
     timeset?: string | number;
@@ -47,8 +47,8 @@
   $: pageSizeNum = Number(pageSize) || 24;
 
   // Configurable lookback windows (months)
-  let monthsA: number | string = 6; // default 6 months
+  const monthsA = 24; // default 24 months
-  let monthsB: number | string = 24; // default 24 months
+  const monthsB = 24; // default 24 months
 
   // Derived lists
   $: sortedResults = [...results].sort((a, b) => {
@@ -247,8 +247,7 @@
     URL.revokeObjectURL(url);
   }
 
-  async function onCompare(ev: SubmitEvent) {
+  async function onCompare() {
-    ev.preventDefault();
     errorMsg = null;
     results = [];
     const a = playerA.trim();
@@ -333,53 +332,19 @@
     }
   }
 
-  onMount(() => {
-    // Try prefill from URL params if present
-    const sp = new URLSearchParams(location.search);
-    playerA = sp.get('a') ?? '';
-    playerB = sp.get('b') ?? '';
-  });
 </script>
 
 <section class="py-8">
   <h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Compare Players</h1>
   <p class="mt-2 text-muted">Maps Player A has played that Player B hasn't — configurable lookback.</p>
   
-
+  <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare}>
-  <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onCompare}>
+    <svelte:fragment slot="extra-buttons">
-    <div>
-      <label class="block text-sm text-muted">Player A ID (source)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerA} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B ID (target)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerB} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player A lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={monthsA} />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={monthsB} />
-      </label>
-    </div>
-    <div class="flex items-center gap-3">
-      <button class="btn-neon" disabled={loading}>
-        {#if loading}
-          Loading...
-        {:else}
-          Compare
-        {/if}
-      </button>
       {#if results.length > 0}
         <button type="button" class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
       {/if}
-    </div>
+    </svelte:fragment>
-  </form>
+  </PlayerCompareForm>
 
   {#if errorMsg}
     <div class="mt-4 text-danger">{errorMsg}</div>
@@ -436,7 +401,6 @@
             modeName={item.difficulties[0]?.characteristic ?? 'Standard'}
             leaderboardId={item.leaderboardId}
             beatsaverKey={metaByHash[item.hash]?.key}
-            playerWithDifficulty={true}
           />
         </article>
       {/each}

src/routes/tools/beatleader-headtohead/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import MapCard from '$lib/components/MapCard.svelte';
+  import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
 
   type BeatLeaderScore = {
     timeset?: string | number;
@@ -42,7 +43,7 @@
 
   let playerA = '';
   let playerB = '';
-  let months: number | string = 6;
+  const months = 24;
 
   // UI state
   let loading = false;
@@ -215,8 +216,7 @@
     return out;
   }
 
-  async function onCompare(ev: SubmitEvent) {
+  async function onCompare() {
-    ev.preventDefault();
     // Push current params into URL on user action
     updateUrl(false);
     errorMsg = null; items = []; metaByHash = {};
@@ -246,10 +246,6 @@
 
   onMount(() => {
     const sp = new URLSearchParams(location.search);
-    playerA = sp.get('a') ?? '';
-    playerB = sp.get('b') ?? '';
-    const m = sp.get('m') ?? sp.get('months');
-    if (m) months = Number(m);
     const p = sp.get('page');
     if (p) page = Math.max(1, Number(p) || 1);
     const dir = sp.get('dir');
@@ -275,12 +271,10 @@
     try {
       urlSyncInProgress = true;
       const sp = new URLSearchParams(location.search);
-      if (playerAId) sp.set('a', playerAId); else sp.delete('a');
+      // playerA and playerB are now handled by PlayerCompareForm component
-      if (playerBId) sp.set('b', playerBId); else sp.delete('b');
       sp.delete('diff');
       sp.delete('mode');
-      const monthsVal = Number(months) || 0;
+      sp.delete('months');
-      if (monthsVal) sp.set('months', String(monthsVal)); else sp.delete('months');
       if (page > 1) sp.set('page', String(page)); else sp.delete('page');
       if (sortDir !== 'desc') sp.set('dir', sortDir); else sp.delete('dir');
       if (pageSizeNum !== 24) sp.set('size', String(pageSizeNum)); else sp.delete('size');
@@ -405,28 +399,7 @@
   <h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Head-to-Head</h1>
   <p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
 
-  <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 items-end" on:submit|preventDefault={onCompare}>
+  <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} />
-    <div>
-      <label class="block text-sm text-muted">Player A ID
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerA} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B ID
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerB} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={months} />
-      </label>
-    </div>
-    <div>
-      <button class="btn-neon" disabled={loading}>
-        {#if loading}Loading...{:else}Compare{/if}
-      </button>
-    </div>
-  </form>
 
   {#if errorMsg}
     <div class="mt-4 text-danger">{errorMsg}</div>
@@ -603,7 +576,6 @@
             modeName={item.modeName}
             leaderboardId={item.leaderboardId}
             beatsaverKey={metaByHash[item.hash]?.key}
-            playerWithDifficulty={false}
           >
             <div slot="content">
               <div class="mt-3 grid grid-cols-2 gap-3 neon-surface">