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,46 +50,23 @@
     </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 class="mt-2 flex items-center gap-2">
+    <DifficultyLabel {diffName} {modeName} />
+    <div class="flex-1">
+      <SongPlayer {hash} preferBeatLeader={true} />
     </div>
-  {:else}
-    <div class="mt-2">
-      <DifficultyLabel {diffName} {modeName} />
-    </div>
-  {/if}
+  </div>
 
   <slot name="content" />
 
-  {#if playerWithDifficulty}
-    <div class="mt-3">
-      <MapActionButtons
-        {hash}
-        {leaderboardId}
-        {diffName}
-        {modeName}
-        {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 class="mt-3">
+    <MapActionButtons
+      {hash}
+      {leaderboardId}
+      {diffName}
+      {modeName}
+      {beatsaverKey}
+    />
+  </div>
 </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>
+