Compare commits
No commits in common. "0d404a8d84e4fefaf7c12e8a472e3634da53928b" and "0eb11db7d864d7bb358dcf826d9dbe19d7cbb46d" have entirely different histories.
0d404a8d84
...
0eb11db7d8
@ -1,2 +0,0 @@
|
||||
.env
|
||||
archive
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -22,6 +22,3 @@ Thumbs.db
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
.data
|
||||
|
||||
.env
|
||||
archive
|
||||
19
AGENTS.md
19
AGENTS.md
@ -1,19 +0,0 @@
|
||||
# AGENT NOTES
|
||||
|
||||
- SvelteKit app under `src/`; tools require BeatLeader auth and rank gating.
|
||||
- Shared logic lives in `src/lib/utils/plebsaber-utils.ts` (requirements, playlist helpers, etc.).
|
||||
- Tool routes (`/tools/*`) use a layout that fetches the BeatLeader profile once (`+layout.server.ts`).
|
||||
- UI components for gating (e.g., `HasToolAccess.svelte`) handle supporter/top-3k restrictions.
|
||||
- BeatLeader session info exposed via `/api/beatleader/me`; navbar warns if outside allowed rank.
|
||||
- OAuth callback stores identity in a long-lived session (`plebsaber_session` via `.data/plebsaber_sessions.json`).
|
||||
- Tools expect BeatLeader supporter or global rank better than pleb's current rank; navbar dropdown warns when outside that threshold.
|
||||
- Global navigation lives in `src/lib/components/NavBar.svelte`; it houses the BeatLeader login dropdown with profile, testing (dev) and logout actions.
|
||||
- Core BeatLeader tool pages reuse shared components such as `PlayerCompareForm.svelte`, `MapCard.svelte`, `PlayerCard.svelte`, and `SongPlayer.svelte` for consistent UI/UX.
|
||||
- `/player-info` route consumes `/api/beatleader/me` to display and log raw BeatLeader session data for debugging.
|
||||
- `/tools/stats` (admin-only, BL id `76561199407393962`) lists every stored BeatLeader session with full player profiles, skill triangles, and last-seen timestamps; navigation link only appears for that account.
|
||||
- `/tools/compare-histories` compares two players' play histories and displays their profiles with skill triangles when comparing.
|
||||
|
||||
## Shell command guidance
|
||||
|
||||
- Whitelisted commands: `grep`
|
||||
- DO NOT USE: `cd` (prefer `pwd`)
|
||||
@ -4,10 +4,13 @@
|
||||
"path": "."
|
||||
},
|
||||
{
|
||||
"path": "../../../src/beatleader/beatleader-website"
|
||||
"path": "../../../src/beatleader-website"
|
||||
},
|
||||
{
|
||||
"path": "../../../src/beatleader/beatleader-server"
|
||||
"path": "../../../src/beatleader-server"
|
||||
},
|
||||
{
|
||||
"path": "../../../src/beatleader-mod"
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 383 B |
Binary file not shown.
|
Before Width: | Height: | Size: 534 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
@ -1,22 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let diffName: string;
|
||||
export let modeName: string = 'Standard';
|
||||
|
||||
function difficultyToColor(name: string | undefined): string {
|
||||
const n = (name ?? 'ExpertPlus').toLowerCase();
|
||||
if (n === 'easy') return 'MediumSeaGreen';
|
||||
if (n === 'normal') return '#59b0f4';
|
||||
if (n === 'hard') return 'tomato';
|
||||
if (n === 'expert') return '#bf2a42';
|
||||
if (n === 'expertplus' || n === 'expert+' || n === 'ex+' ) return '#8f48db';
|
||||
return '#8f48db';
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
|
||||
{modeName} ·
|
||||
<span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(diffName)}; color: #fff;">
|
||||
{diffName}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
meetsToolRequirement,
|
||||
DEFAULT_ADMIN_RANK_FALLBACK,
|
||||
PLEB_BEATLEADER_ID,
|
||||
type BeatLeaderPlayerProfile,
|
||||
type ToolRequirement
|
||||
} from '$lib/utils/plebsaber-utils';
|
||||
import PlayerCard from '$lib/components/PlayerCard.svelte';
|
||||
|
||||
const BL_PATREON_URL = 'https://www.patreon.com/BeatLeader';
|
||||
|
||||
export let player: BeatLeaderPlayerProfile | null = null;
|
||||
export let requirement: ToolRequirement | null = null;
|
||||
export let showCurrentRank = true;
|
||||
export let adminRank: number | null = null;
|
||||
export let adminPlayer: BeatLeaderPlayerProfile | null = null;
|
||||
|
||||
$: requirementContext = { adminRank };
|
||||
$: hasAccess = meetsToolRequirement(player, requirement, requirementContext);
|
||||
$: fallbackBaseline = DEFAULT_ADMIN_RANK_FALLBACK;
|
||||
$: resolvedBaseline =
|
||||
typeof adminRank === 'number' && Number.isFinite(adminRank) && adminRank > 0 ? adminRank : fallbackBaseline;
|
||||
$: plebProfile = adminPlayer;
|
||||
$: plebName = plebProfile?.name;
|
||||
$: baselineCopy = resolvedBaseline
|
||||
? `players ranked better than ${plebName} (#${resolvedBaseline.toLocaleString()})`
|
||||
: `players ranked better than ${plebName}`;
|
||||
$: playerRank = typeof player?.rank === 'number' ? player?.rank ?? null : null;
|
||||
$: playerRankDisplay = playerRank !== null ? `#${playerRank.toLocaleString()}` : null;
|
||||
</script>
|
||||
|
||||
{#if hasAccess}
|
||||
<slot />
|
||||
{:else}
|
||||
<div class="mt-6 rounded-md border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-100 leading-relaxed">
|
||||
<p class="font-semibold text-amber-200">
|
||||
Auth Required: Tools are restricted to <a class="underline hover:text-white" href={BL_PATREON_URL} target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> (and {baselineCopy}).
|
||||
</p>
|
||||
{#if plebProfile}
|
||||
<div class="pleb-card">
|
||||
<PlayerCard
|
||||
name={plebProfile.name ?? plebName}
|
||||
country={plebProfile.country ?? null}
|
||||
rank={plebProfile.rank ?? resolvedBaseline}
|
||||
showRank={Boolean(plebProfile.rank ?? resolvedBaseline)}
|
||||
avatar={plebProfile.avatar ?? null}
|
||||
avatarSize={48}
|
||||
techPp={plebProfile?.techPp}
|
||||
accPp={plebProfile?.accPp}
|
||||
passPp={plebProfile?.passPp}
|
||||
playerId={plebProfile?.id ?? PLEB_BEATLEADER_ID}
|
||||
gradientId="pleb-baseline"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showCurrentRank}
|
||||
<p class="mt-2 text-xs text-amber-200/80">
|
||||
{#if playerRankDisplay}
|
||||
Current global rank: {playerRankDisplay}
|
||||
{:else}
|
||||
We couldn't determine your current BeatLeader rank. Try logging in.
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.pleb-card {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pleb-card :global(.summary-header) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,147 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let hash: string;
|
||||
export let leaderboardId: string | undefined = undefined;
|
||||
export let diffName: string = 'ExpertPlus';
|
||||
export let modeName: string = 'Standard';
|
||||
export let beatsaverKey: string | undefined = undefined;
|
||||
|
||||
// Toast notification state
|
||||
let toastMessage = '';
|
||||
let showToast = false;
|
||||
let toastTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Button feedback state
|
||||
let isLitUp = false;
|
||||
|
||||
function showToastMessage(message: string) {
|
||||
// Clear any existing toast
|
||||
if (toastTimeout) {
|
||||
clearTimeout(toastTimeout);
|
||||
}
|
||||
|
||||
toastMessage = message;
|
||||
showToast = true;
|
||||
|
||||
// Auto-hide toast after 3 seconds
|
||||
toastTimeout = setTimeout(() => {
|
||||
showToast = false;
|
||||
toastMessage = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function lightUpButton() {
|
||||
isLitUp = true;
|
||||
// Remove the lighting effect after 1 second
|
||||
setTimeout(() => {
|
||||
isLitUp = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async function copyBsrCommand() {
|
||||
if (!beatsaverKey) return;
|
||||
|
||||
try {
|
||||
const bsrCommand = `!bsr ${beatsaverKey}`;
|
||||
await navigator.clipboard.writeText(bsrCommand);
|
||||
|
||||
// Show success feedback with the actual command
|
||||
showToastMessage(`Copied "${bsrCommand}" to clipboard`);
|
||||
lightUpButton();
|
||||
} catch (err) {
|
||||
console.error('Failed to copy to clipboard:', err);
|
||||
showToastMessage('Failed to copy to clipboard');
|
||||
}
|
||||
}
|
||||
|
||||
$: beatLeaderUrl = leaderboardId
|
||||
? `https://beatleader.com/leaderboard/global/${leaderboardId}`
|
||||
: `https://beatleader.com/leaderboard/global/${hash}?diff=${encodeURIComponent(diffName)}&mode=${encodeURIComponent(modeName)}`;
|
||||
|
||||
$: beatSaverUrl = beatsaverKey
|
||||
? `https://beatsaver.com/maps/${beatsaverKey}`
|
||||
: `https://beatsaver.com/search/hash/${hash}`;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={beatLeaderUrl}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatLeader"
|
||||
>BL</a
|
||||
>
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={beatSaverUrl}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatSaver"
|
||||
>BS</a
|
||||
>
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
|
||||
class:lit-up={isLitUp}
|
||||
on:click={copyBsrCommand}
|
||||
disabled={!beatsaverKey}
|
||||
title="!bsr"
|
||||
>!bsr</button>
|
||||
</div>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
{#if showToast}
|
||||
<div class="toast-notification" role="status" aria-live="polite">
|
||||
{toastMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* Toast notification styles */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button lighting effect */
|
||||
.lit-up {
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
border-color: #10b981 !important;
|
||||
color: white !important;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
<script lang="ts">
|
||||
import DifficultyLabel from './DifficultyLabel.svelte';
|
||||
import MapActionButtons from './MapActionButtons.svelte';
|
||||
import SongPlayer from './SongPlayer.svelte';
|
||||
|
||||
// Song metadata
|
||||
export let hash: string;
|
||||
export let coverURL: string | undefined = undefined;
|
||||
export let songName: string | undefined = undefined;
|
||||
export let mapper: string | undefined = undefined;
|
||||
export let stars: number | undefined = undefined;
|
||||
export let timeset: number | undefined = undefined;
|
||||
|
||||
// Difficulty info
|
||||
export let diffName: string;
|
||||
export let modeName: string = 'Standard';
|
||||
|
||||
// BeatLeader/BeatSaver links
|
||||
export let leaderboardId: string | undefined = undefined;
|
||||
export let beatsaverKey: string | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if coverURL}
|
||||
<img
|
||||
src={coverURL}
|
||||
alt={songName ?? hash}
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-2xl">☁️</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={songName ?? hash}>
|
||||
{songName ?? hash}
|
||||
</div>
|
||||
{#if mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
|
||||
<span>
|
||||
{mapper}
|
||||
{#if stars !== undefined}
|
||||
<span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if timeset !== undefined}
|
||||
<span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<DifficultyLabel {diffName} {modeName} />
|
||||
<div class="flex-1">
|
||||
<SongPlayer {hash} preferBeatLeader={true} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="content" />
|
||||
|
||||
<div class="mt-3">
|
||||
<MapActionButtons
|
||||
{hash}
|
||||
{leaderboardId}
|
||||
{diffName}
|
||||
{modeName}
|
||||
{beatsaverKey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import beatleaderLogo from '$lib/assets/beatleader-logo.png';
|
||||
import { DEFAULT_ADMIN_RANK_FALLBACK, PLEB_BEATLEADER_ID } from '$lib/utils/plebsaber-utils';
|
||||
const links = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{ href: '/tools', label: 'Tools' },
|
||||
@ -10,189 +7,24 @@
|
||||
let open = false;
|
||||
const toggle = () => (open = !open);
|
||||
const close = () => (open = false);
|
||||
|
||||
type BeatLeaderIdentity = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
};
|
||||
|
||||
type BeatLeaderPlayer = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
avatar?: string | null;
|
||||
rank?: number | null;
|
||||
countryRank?: number | null;
|
||||
};
|
||||
|
||||
type BeatLeaderProfile = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
avatar?: string;
|
||||
rank?: number | null;
|
||||
countryRank?: number | null;
|
||||
};
|
||||
|
||||
let user: BeatLeaderProfile | null = null;
|
||||
let loginHref = '/auth/beatleader/login';
|
||||
let checkingSession = true;
|
||||
let menuOpen = false;
|
||||
let adminRank: number | null = null;
|
||||
let adminFallbackRank = DEFAULT_ADMIN_RANK_FALLBACK;
|
||||
|
||||
const getProfileUrl = (id?: string) => (id ? `https://beatleader.com/u/${encodeURIComponent(id)}` : 'https://beatleader.com');
|
||||
|
||||
function extractPlayer(payload: unknown): BeatLeaderProfile | null {
|
||||
if (!payload || typeof payload !== 'object') return null;
|
||||
const { identity, player } = payload as { identity?: BeatLeaderIdentity | null; player?: BeatLeaderPlayer | null };
|
||||
|
||||
const sourcePlayer = player ?? null;
|
||||
const sourceIdentity = identity ?? null;
|
||||
|
||||
const id = sourcePlayer?.id ?? sourceIdentity?.id;
|
||||
const name = sourcePlayer?.name ?? sourceIdentity?.name;
|
||||
const avatar = sourcePlayer?.avatar ?? null;
|
||||
const rank = sourcePlayer?.rank ?? null;
|
||||
const countryRank = sourcePlayer?.countryRank ?? null;
|
||||
|
||||
if (!id && !name) return null;
|
||||
|
||||
return {
|
||||
id: typeof id === 'string' ? id : undefined,
|
||||
name: typeof name === 'string' ? name : undefined,
|
||||
avatar: typeof avatar === 'string' ? avatar : undefined,
|
||||
rank: typeof rank === 'number' ? rank : null,
|
||||
countryRank: typeof countryRank === 'number' ? countryRank : null
|
||||
};
|
||||
}
|
||||
|
||||
function extractAdminBaseline(payload: unknown): { rank: number | null; fallback: number } | null {
|
||||
if (!payload || typeof payload !== 'object') return null;
|
||||
const baseline = (payload as { adminBaseline?: { rank?: unknown; fallback?: unknown } }).adminBaseline;
|
||||
if (!baseline || typeof baseline !== 'object') return null;
|
||||
const rank = (baseline as { rank?: unknown }).rank;
|
||||
const fallback = (baseline as { fallback?: unknown }).fallback;
|
||||
return {
|
||||
rank: typeof rank === 'number' && Number.isFinite(rank) && rank > 0 ? rank : null,
|
||||
fallback: typeof fallback === 'number' && Number.isFinite(fallback) && fallback > 0 ? fallback : DEFAULT_ADMIN_RANK_FALLBACK
|
||||
};
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const redirectTarget = `${window.location.pathname}${window.location.search}${window.location.hash}` || '/';
|
||||
loginHref = `/auth/beatleader/login?redirect_uri=${encodeURIComponent(redirectTarget)}`;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/beatleader/me');
|
||||
if (res.ok) {
|
||||
const json = (await res.json()) as unknown;
|
||||
const profile = extractPlayer(json);
|
||||
if (profile) {
|
||||
user = profile;
|
||||
}
|
||||
const baseline = extractAdminBaseline(json);
|
||||
if (baseline) {
|
||||
adminRank = baseline.rank;
|
||||
adminFallbackRank = baseline.fallback;
|
||||
}
|
||||
} else if (res.status === 401) {
|
||||
try {
|
||||
const body = (await res.json()) as Record<string, unknown>;
|
||||
const suggested = body?.login;
|
||||
if (typeof suggested === 'string') {
|
||||
loginHref = suggested;
|
||||
}
|
||||
} catch {
|
||||
// ignore JSON parsing errors for 401 responses
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to determine BeatLeader session state', err);
|
||||
} finally {
|
||||
checkingSession = false;
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
function toggleMenu() {
|
||||
menuOpen = !menuOpen;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuOpen = false;
|
||||
}
|
||||
|
||||
$: baselineRank = (adminRank ?? adminFallbackRank ?? DEFAULT_ADMIN_RANK_FALLBACK);
|
||||
$: requiresWarning = typeof user?.rank === 'number' && Number.isFinite(user.rank)
|
||||
? (user.rank as number) > baselineRank
|
||||
: false;
|
||||
$: baselineCopy = baselineRank ? `pleb (#${baselineRank.toLocaleString()})` : 'pleb';
|
||||
const year = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-surface/50 border-b border-white/10">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-14 items-center justify-between">
|
||||
<a href="/" class="flex items-center gap-2">
|
||||
<span class="font-display text-lg tracking-widest">
|
||||
<span class="neon-text">plebsaber</span><span class="text-muted">.stream</span>
|
||||
</span>
|
||||
<span class="h-2 w-2 rounded-full bg-neon-fuchsia" style="box-shadow: 0 0 12px rgba(255,0,229,0.60);"></span>
|
||||
<span class="h-2 w-2 rounded-full bg-neon" style="box-shadow: 0 0 12px rgba(34,211,238,0.60);"></span>
|
||||
<span class="font-display text-lg tracking-widest">
|
||||
<span class="neon-text">PLEBSABER</span><span class="text-muted">.stream</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
{#each links as link}
|
||||
<a href={link.href} class="text-muted hover:text-white transition">{link.label}</a>
|
||||
{/each}
|
||||
{#if checkingSession}
|
||||
<span class="text-sm text-muted">Connecting…</span>
|
||||
{:else if user}
|
||||
<div class="relative">
|
||||
<button
|
||||
class="flex items-center gap-3 rounded-md border border-white/10 px-3 py-1.5 text-sm transition hover:bg-white/10"
|
||||
on:click={toggleMenu}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<img
|
||||
src={user.avatar ?? beatleaderLogo}
|
||||
alt="BeatLeader avatar"
|
||||
class="h-8 w-8 rounded-full object-cover shadow-sm"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
|
||||
<svg class={`h-4 w-4 transition-transform ${menuOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.292l3.71-4.06a.75.75 0 111.08 1.04l-4.25 4.65a.75.75 0 01-1.08 0l-4.25-4.65a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if menuOpen}
|
||||
<div class="dropdown" role="menu">
|
||||
{#if requiresWarning}
|
||||
<div class="dropdown-warning">
|
||||
<strong>Heads up:</strong>
|
||||
<span>Tools are limited to <a class="underline" href="https://www.patreon.com/BeatLeader" target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> or players ranked better than {baselineCopy}.</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if user?.id === PLEB_BEATLEADER_ID}
|
||||
<a href="/tools/stats" class="dropdown-item" on:click={closeMenu}>Stats</a>
|
||||
{/if}
|
||||
<a href="/player-info" class="dropdown-item" on:click={closeMenu}>Player Info</a>
|
||||
<a href={getProfileUrl(user.id)} class="dropdown-item dropdown-item--with-icon" target="_blank" rel="noreferrer noopener" on:click={closeMenu}>
|
||||
<span>Profile</span>
|
||||
<img src={beatleaderLogo} alt="BeatLeader" class="dropdown-icon" />
|
||||
</a>
|
||||
<form action="/auth/beatleader/logout?redirect_uri=%2F" method="POST" class="dropdown-item-form">
|
||||
<button type="submit" class="dropdown-item-button">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<a href={loginHref} class="btn-neon inline-flex items-center gap-2 px-3 py-1.5">
|
||||
<img src={beatleaderLogo} alt="BeatLeader" class="h-6 w-6" />
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a href="/tools/beatleader-compare" class="btn-neon">Compare Players</a>
|
||||
</nav>
|
||||
|
||||
<button class="md:hidden btn-neon px-3 py-1.5" on:click={toggle} aria-expanded={open} aria-controls="mobile-nav">
|
||||
@ -207,146 +39,10 @@
|
||||
{#each links as link}
|
||||
<a href={link.href} on:click={close} class="text-muted hover:text-white transition">{link.label}</a>
|
||||
{/each}
|
||||
{#if checkingSession}
|
||||
<span class="text-sm text-muted">Connecting…</span>
|
||||
{:else if user}
|
||||
<div class="border border-white/10 rounded-md overflow-hidden">
|
||||
{#if requiresWarning}
|
||||
<div class="dropdown-warning mobile">
|
||||
<strong>Heads up:</strong>
|
||||
<span>Tools are limited to <a class="underline" href="https://www.patreon.com/BeatLeader" target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> or players ranked better than {baselineCopy}.</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if user?.id === PLEB_BEATLEADER_ID}
|
||||
<a href="/tools/stats" class="dropdown-item" on:click={close}>Stats</a>
|
||||
{/if}
|
||||
<a href="/player-info" class="dropdown-item" on:click={close}>Player Info</a>
|
||||
<a href={getProfileUrl(user.id)} class="dropdown-item dropdown-item--with-icon" target="_blank" rel="noreferrer noopener" on:click={close}>
|
||||
<span>Profile</span>
|
||||
<img src={beatleaderLogo} alt="BeatLeader" class="dropdown-icon" />
|
||||
</a>
|
||||
<form action="/auth/beatleader/logout?redirect_uri=%2F" method="POST">
|
||||
<button type="submit" class="dropdown-item-button w-full text-left">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
<a href={loginHref} on:click={close} class="btn-neon inline-flex items-center gap-2 w-max px-3 py-2">
|
||||
<img src={beatleaderLogo} alt="BeatLeader" class="h-6 w-6" />
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a href="/tools/beatleader-compare" on:click={close} class="btn-neon w-max">Compare Players</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.5rem);
|
||||
min-width: 14rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(8, 12, 24, 0.98));
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(34, 211, 238, 0.35);
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.35rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
z-index: 50;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: 1.2rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: inherit;
|
||||
transform: rotate(45deg);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
.dropdown-item-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 0.45rem;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dropdown-item--with-icon {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item-button:hover {
|
||||
background: rgba(34, 211, 238, 0.15);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.dropdown-item-button {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.dropdown-item-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-warning {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 0.45rem;
|
||||
background: rgba(255, 152, 0, 0.18);
|
||||
color: rgba(255, 220, 186, 0.95);
|
||||
font-size: 0.8rem;
|
||||
box-shadow: inset 0 0 15px rgba(255, 152, 0, 0.15);
|
||||
}
|
||||
|
||||
.dropdown-warning strong {
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.dropdown-warning.mobile {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dropdown {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.dropdown::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { calculateSkillTriangle } from '$lib/utils/plebsaber-utils';
|
||||
|
||||
export let name: string = 'Unknown';
|
||||
export let country: string | null = null;
|
||||
export let avatar: string | null = null;
|
||||
export let rank: number | null = null;
|
||||
export let showRank: boolean = true;
|
||||
export let width: string = '12em';
|
||||
export let avatarSize: number = 48;
|
||||
export let techPp: number | null | undefined = null;
|
||||
export let accPp: number | null | undefined = null;
|
||||
export let passPp: number | null | undefined = null;
|
||||
// gradientId must be unique per instance to avoid SVG gradient conflicts when multiple cards render on the same page
|
||||
export let gradientId: string = 'summary-triangle';
|
||||
export let playerId: string | null = null;
|
||||
|
||||
$: triangle = calculateSkillTriangle(techPp, accPp, passPp);
|
||||
$: triangleCorners = triangle?.corners;
|
||||
$: normalized = triangle?.normalized;
|
||||
$: hasTriangle = triangle !== null;
|
||||
$: profileUrl = playerId ? `https://beatleader.com/u/${encodeURIComponent(playerId)}` : null;
|
||||
|
||||
const gradientTechId = `${gradientId}-tech`;
|
||||
const gradientAccId = `${gradientId}-acc`;
|
||||
const gradientPassId = `${gradientId}-pass`;
|
||||
</script>
|
||||
|
||||
{#if profileUrl}
|
||||
<a href={profileUrl} target="_blank" rel="noreferrer noopener" class="summary-header clickable" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
|
||||
<img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
|
||||
<div class="summary-body">
|
||||
<div class="summary-name">{name}</div>
|
||||
<div class="summary-meta">
|
||||
{#if country}
|
||||
<span>{country}</span>
|
||||
{/if}
|
||||
{#if showRank && typeof rank === 'number'}
|
||||
<span>Rank: {rank}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if hasTriangle}
|
||||
<div class="summary-triangle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
|
||||
<g transform="matrix(1 0 0 -1 0 86.6)">
|
||||
<defs>
|
||||
<linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g stroke="#fff" stroke-width="0.5">
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
|
||||
</g>
|
||||
<g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
|
||||
<path d="M 50,0 L 0,86.6 100,86.6 Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
|
||||
<img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
|
||||
<div class="summary-body">
|
||||
<div class="summary-name">{name}</div>
|
||||
<div class="summary-meta">
|
||||
{#if country}
|
||||
<span>{country}</span>
|
||||
{/if}
|
||||
{#if showRank && typeof rank === 'number'}
|
||||
<span>Rank: {rank}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if hasTriangle}
|
||||
<div class="summary-triangle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
|
||||
<g transform="matrix(1 0 0 -1 0 86.6)">
|
||||
<defs>
|
||||
<linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g stroke="#fff" stroke-width="0.5">
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
|
||||
</g>
|
||||
<g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
|
||||
<path d="M 50,0 L 0,86.6 100,86.6 Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.summary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: var(--header-width, 50%);
|
||||
max-width: var(--header-width, 50%);
|
||||
min-width: 200px;
|
||||
flex: 0 0 var(--header-width, 50%);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(34, 211, 238, 0.35);
|
||||
box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
|
||||
}
|
||||
|
||||
img.placeholder {
|
||||
opacity: 0.3;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.summary-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.summary-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.summary-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(148, 163, 184, 0.75);
|
||||
}
|
||||
|
||||
.summary-triangle {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-triangle svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
|
||||
}
|
||||
|
||||
.summary-header.clickable {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.summary-header.clickable:hover {
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.summary-header.clickable:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,356 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import PlayerCard from '$lib/components/PlayerCard.svelte';
|
||||
import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
|
||||
|
||||
export let playerA = '';
|
||||
export let playerB = '';
|
||||
export let loading = false;
|
||||
export let hasResults = false;
|
||||
export let oncompare: (() => void) | undefined = undefined;
|
||||
export let currentPlayer: BeatLeaderPlayerProfile | null = null;
|
||||
|
||||
let initialized = false;
|
||||
|
||||
// Local state for default player cards
|
||||
let hasCompared = false;
|
||||
let playerAProfile: BeatLeaderPlayerProfile | null = null;
|
||||
let playerBProfile: BeatLeaderPlayerProfile | null = null;
|
||||
|
||||
// Preview profiles (loaded as user types)
|
||||
let previewAProfile: BeatLeaderPlayerProfile | null = null;
|
||||
let previewBProfile: BeatLeaderPlayerProfile | null = null;
|
||||
let loadingPreviewA = false;
|
||||
let loadingPreviewB = false;
|
||||
|
||||
// Load from URL params on mount
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
const sp = new URLSearchParams(location.search);
|
||||
const urlA = sp.get('a');
|
||||
const urlB = sp.get('b');
|
||||
|
||||
// Prefill playerA with current player if not in URL
|
||||
if (!urlA && !playerA && currentPlayer?.id) {
|
||||
playerA = currentPlayer.id;
|
||||
} else {
|
||||
playerA = urlA ?? playerA;
|
||||
}
|
||||
|
||||
playerB = urlB ?? playerB;
|
||||
initialized = true;
|
||||
|
||||
// Load initial previews if IDs are already present
|
||||
if (playerA.trim()) {
|
||||
void loadPreviewProfile('A', playerA.trim());
|
||||
}
|
||||
if (playerB.trim()) {
|
||||
void loadPreviewProfile('B', playerB.trim());
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
async function fetchPlayerProfile(playerId: string): Promise<BeatLeaderPlayerProfile | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(playerId)}`);
|
||||
if (!res.ok) return null;
|
||||
return (await res.json()) as BeatLeaderPlayerProfile;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDefaultPlayerCards(a: string, b: string): Promise<void> {
|
||||
playerAProfile = null;
|
||||
playerBProfile = null;
|
||||
if (!a || !b) return;
|
||||
const [pa, pb] = await Promise.all([
|
||||
fetchPlayerProfile(a),
|
||||
fetchPlayerProfile(b)
|
||||
]);
|
||||
playerAProfile = pa;
|
||||
playerBProfile = pb;
|
||||
}
|
||||
|
||||
// Debounced preview loading
|
||||
let previewDebounceTimerA: ReturnType<typeof setTimeout> | null = null;
|
||||
let previewDebounceTimerB: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
async function loadPreviewProfile(player: 'A' | 'B', id: string): Promise<void> {
|
||||
if (!id || id.trim().length < 3) {
|
||||
if (player === 'A') previewAProfile = null;
|
||||
else previewBProfile = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmed = id.trim();
|
||||
if (player === 'A') {
|
||||
loadingPreviewA = true;
|
||||
} else {
|
||||
loadingPreviewB = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const profile = await fetchPlayerProfile(trimmed);
|
||||
// Only update if this is still the current player ID
|
||||
const currentId = player === 'A' ? playerA.trim() : playerB.trim();
|
||||
if (currentId === trimmed) {
|
||||
if (player === 'A') {
|
||||
previewAProfile = profile;
|
||||
} else {
|
||||
previewBProfile = profile;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Silently fail - don't show errors for preview loading
|
||||
const currentId = player === 'A' ? playerA.trim() : playerB.trim();
|
||||
if (currentId === trimmed) {
|
||||
if (player === 'A') {
|
||||
previewAProfile = null;
|
||||
} else {
|
||||
previewBProfile = null;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
if (player === 'A') {
|
||||
loadingPreviewA = false;
|
||||
} else {
|
||||
loadingPreviewB = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes to playerA and debounce preview loading
|
||||
$: if (initialized && browser) {
|
||||
const trimmed = playerA.trim();
|
||||
if (previewDebounceTimerA) clearTimeout(previewDebounceTimerA);
|
||||
|
||||
if (trimmed && trimmed.length >= 3) {
|
||||
previewDebounceTimerA = setTimeout(() => {
|
||||
void loadPreviewProfile('A', trimmed);
|
||||
}, 800);
|
||||
} else {
|
||||
previewAProfile = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes to playerB and debounce preview loading
|
||||
$: if (initialized && browser) {
|
||||
const trimmed = playerB.trim();
|
||||
if (previewDebounceTimerB) clearTimeout(previewDebounceTimerB);
|
||||
|
||||
if (trimmed && trimmed.length >= 3) {
|
||||
previewDebounceTimerB = setTimeout(() => {
|
||||
void loadPreviewProfile('B', trimmed);
|
||||
}, 800);
|
||||
} else {
|
||||
previewBProfile = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Computed: which profile to display (post-compare takes priority over preview)
|
||||
$: displayProfileA = hasCompared ? playerAProfile : previewAProfile;
|
||||
$: displayProfileB = hasCompared ? playerBProfile : previewBProfile;
|
||||
$: showCardA = !!(displayProfileA || (loadingPreviewA && playerA.trim().length >= 3));
|
||||
$: showCardB = !!(displayProfileB || (loadingPreviewB && playerB.trim().length >= 3));
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
hasCompared = true;
|
||||
const a = playerA.trim();
|
||||
const b = playerB.trim();
|
||||
// Fire and forget: show default cards irrespective of parent page implementation
|
||||
void loadDefaultPlayerCards(a, b);
|
||||
oncompare?.();
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="mt-6" on:submit={handleSubmit}>
|
||||
<div class="form-grid">
|
||||
<div class="player-column">
|
||||
<div class="input-tile">
|
||||
<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>
|
||||
{#if $$slots['player-a-card']}
|
||||
<slot name="player-a-card" />
|
||||
{:else if showCardA}
|
||||
<div class="player-card-wrapper">
|
||||
{#if displayProfileA}
|
||||
<PlayerCard
|
||||
name={displayProfileA.name ?? 'Player A'}
|
||||
avatar={displayProfileA.avatar ?? null}
|
||||
country={displayProfileA.country ?? null}
|
||||
rank={displayProfileA.rank ?? null}
|
||||
showRank={typeof displayProfileA.rank === 'number'}
|
||||
width="100%"
|
||||
avatarSize={56}
|
||||
techPp={displayProfileA.techPp}
|
||||
accPp={displayProfileA.accPp}
|
||||
passPp={displayProfileA.passPp}
|
||||
playerId={displayProfileA.id ?? null}
|
||||
gradientId="compare-player-a"
|
||||
/>
|
||||
{:else if loadingPreviewA}
|
||||
<div class="loading-profile">Loading player...</div>
|
||||
{:else if hasCompared}
|
||||
<div class="empty-profile">Player A profile not found</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-column">
|
||||
<div class="input-tile">
|
||||
<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>
|
||||
{#if $$slots['player-b-card']}
|
||||
<slot name="player-b-card" />
|
||||
{:else if showCardB}
|
||||
<div class="player-card-wrapper">
|
||||
{#if displayProfileB}
|
||||
<PlayerCard
|
||||
name={displayProfileB.name ?? 'Player B'}
|
||||
avatar={displayProfileB.avatar ?? null}
|
||||
country={displayProfileB.country ?? null}
|
||||
rank={displayProfileB.rank ?? null}
|
||||
showRank={typeof displayProfileB.rank === 'number'}
|
||||
width="100%"
|
||||
avatarSize={56}
|
||||
techPp={displayProfileB.techPp}
|
||||
accPp={displayProfileB.accPp}
|
||||
passPp={displayProfileB.passPp}
|
||||
playerId={displayProfileB.id ?? null}
|
||||
gradientId="compare-player-b"
|
||||
/>
|
||||
{:else if loadingPreviewB}
|
||||
<div class="loading-profile">Loading player...</div>
|
||||
{:else if hasCompared}
|
||||
<div class="empty-profile">Player B profile not found</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button class="btn-neon" type="submit" disabled={loading}>
|
||||
{#if loading}
|
||||
Loading...
|
||||
{:else}
|
||||
Compare
|
||||
{/if}
|
||||
</button>
|
||||
<slot name="extra-buttons" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.player-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.input-tile {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.input-tile:hover {
|
||||
border-color: rgba(148, 163, 184, 0.3);
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.player-card-wrapper {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.empty-profile {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.loading-profile {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,135 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let name: string = 'Unknown';
|
||||
export let country: string | null = null;
|
||||
export let avatar: string | null = null;
|
||||
export let rank: number | null = null;
|
||||
export let showRank: boolean = true;
|
||||
export let width: string = '12em';
|
||||
export let avatarSize: number = 48;
|
||||
export let triangleCorners:
|
||||
| {
|
||||
tech: { x: number; y: number };
|
||||
acc: { x: number; y: number };
|
||||
pass: { x: number; y: number };
|
||||
}
|
||||
| null = null;
|
||||
export let normalized:
|
||||
| {
|
||||
tech: number;
|
||||
acc: number;
|
||||
pass: number;
|
||||
}
|
||||
| null = null;
|
||||
export let gradientId: string = 'summary-triangle';
|
||||
|
||||
const hasTriangle = triangleCorners && normalized;
|
||||
|
||||
const gradientTechId = `${gradientId}-tech`;
|
||||
const gradientAccId = `${gradientId}-acc`;
|
||||
const gradientPassId = `${gradientId}-pass`;
|
||||
</script>
|
||||
|
||||
<div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
|
||||
<img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
|
||||
<div class="summary-body">
|
||||
<div class="summary-name">{name}</div>
|
||||
<div class="summary-meta">
|
||||
{#if country}
|
||||
<span>{country}</span>
|
||||
{/if}
|
||||
{#if showRank && typeof rank === 'number'}
|
||||
<span>Rank: {rank}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if hasTriangle}
|
||||
<div class="summary-triangle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
|
||||
<g transform="matrix(1 0 0 -1 0 86.6)">
|
||||
<defs>
|
||||
<linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
<linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
|
||||
<stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
|
||||
<stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g stroke="#fff" stroke-width="0.5">
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
|
||||
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
|
||||
</g>
|
||||
<g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
|
||||
<path d="M 50,0 L 0,86.6 100,86.6 Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.summary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: var(--header-width, 50%);
|
||||
max-width: var(--header-width, 50%);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(34, 211, 238, 0.35);
|
||||
box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
|
||||
}
|
||||
|
||||
img.placeholder {
|
||||
opacity: 0.3;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.summary-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.summary-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.summary-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(148, 163, 184, 0.75);
|
||||
}
|
||||
|
||||
.summary-triangle {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-triangle svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let hash: string;
|
||||
export let coverURL: string | undefined = undefined;
|
||||
export let songName: string | undefined = undefined;
|
||||
export let mapper: string | undefined = undefined;
|
||||
export let stars: number | undefined = undefined;
|
||||
export let timeset: number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if coverURL}
|
||||
<img
|
||||
src={coverURL}
|
||||
alt={songName ?? hash}
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={songName ?? hash}>
|
||||
{songName ?? hash}
|
||||
</div>
|
||||
{#if mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
|
||||
<span>
|
||||
{mapper}
|
||||
{#if stars !== undefined}
|
||||
<span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if timeset !== undefined}
|
||||
<span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<slot name="difficulty" />
|
||||
<slot name="content" />
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,6 @@ import type { Cookies } from '@sveltejs/kit';
|
||||
import { dev } from '$app/environment';
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import { env } from '$env/dynamic/private';
|
||||
|
||||
const TOKEN_URL = 'https://api.beatleader.com/oauth2/token';
|
||||
|
||||
@ -207,21 +206,10 @@ export async function getValidAccessToken(cookies: Cookies): Promise<string | nu
|
||||
return null;
|
||||
}
|
||||
|
||||
function getClientCredentials(): { client_id: string; client_secret: string } {
|
||||
const envClientId = env.BL_CLIENT_ID;
|
||||
const envClientSecret = env.BL_CLIENT_SECRET;
|
||||
if (envClientId && envClientSecret) {
|
||||
return { client_id: envClientId, client_secret: envClientSecret };
|
||||
}
|
||||
const creds = readJsonPersistent<{ client_id?: string; client_secret?: string }>(CREDS_FILE);
|
||||
if (creds?.client_id && creds?.client_secret) {
|
||||
return { client_id: creds.client_id, client_secret: creds.client_secret };
|
||||
}
|
||||
throw new Error('BeatLeader OAuth is not configured. Set BL_CLIENT_ID and BL_CLIENT_SECRET.');
|
||||
}
|
||||
|
||||
export function buildAuthorizeUrl(origin: string, scopes: string[]): URL {
|
||||
const { client_id: clientId } = getClientCredentials();
|
||||
const creds = readJsonPersistent<{ client_id?: string; client_secret?: string }>(CREDS_FILE);
|
||||
const clientId = creds?.client_id;
|
||||
if (!clientId) throw new Error('BeatLeader OAuth is not configured. Visit /tools/beatleader-oauth to set it up.');
|
||||
const redirectUri = `${origin}/auth/beatleader/callback`;
|
||||
const url = new URL('https://api.beatleader.com/oauth2/authorize');
|
||||
url.searchParams.set('client_id', clientId);
|
||||
@ -234,7 +222,10 @@ export function buildAuthorizeUrl(origin: string, scopes: string[]): URL {
|
||||
}
|
||||
|
||||
export async function exchangeCodeForTokens(origin: string, code: string): Promise<{ access_token: string; refresh_token?: string; expires_in?: number } | null> {
|
||||
const { client_id: clientId, client_secret: clientSecret } = getClientCredentials();
|
||||
const creds = readJsonPersistent<{ client_id?: string; client_secret?: string }>(CREDS_FILE);
|
||||
const clientId = creds?.client_id;
|
||||
const clientSecret = creds?.client_secret;
|
||||
if (!clientId || !clientSecret) return null;
|
||||
const redirectUri = `${origin}/auth/beatleader/callback`;
|
||||
|
||||
const res = await fetch(TOKEN_URL, {
|
||||
@ -296,12 +287,7 @@ export function storeOAuthCredentials(input: { client_id: string; client_secret:
|
||||
}
|
||||
|
||||
export function readOAuthCredentials(): { client_id: string; client_secret: string; scopes?: string[]; redirect_urls?: string[] } | null {
|
||||
try {
|
||||
const { client_id: clientId, client_secret: clientSecret } = getClientCredentials();
|
||||
return { client_id: clientId, client_secret: clientSecret };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return readJsonPersistent(CREDS_FILE);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,130 +0,0 @@
|
||||
import type { Cookies } from '@sveltejs/kit';
|
||||
import { dev } from '$app/environment';
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
|
||||
const SESSION_COOKIE = 'plebsaber_session';
|
||||
const DATA_DIR = '.data';
|
||||
const SESSION_FILE = 'plebsaber_sessions.json';
|
||||
|
||||
export type StoredSession = {
|
||||
sessionId: string;
|
||||
beatleaderId: string;
|
||||
name: string | null;
|
||||
avatar: string | null;
|
||||
createdAt: number;
|
||||
lastSeenAt: number;
|
||||
};
|
||||
|
||||
function ensureDataDir(): void {
|
||||
if (!fs.existsSync(DATA_DIR)) {
|
||||
fs.mkdirSync(DATA_DIR, { recursive: true });
|
||||
}
|
||||
}
|
||||
|
||||
function sessionFilePath(): string {
|
||||
return path.join(process.cwd(), DATA_DIR, SESSION_FILE);
|
||||
}
|
||||
|
||||
function readSessions(): Record<string, StoredSession> {
|
||||
try {
|
||||
const file = sessionFilePath();
|
||||
if (!fs.existsSync(file)) return {};
|
||||
const raw = fs.readFileSync(file, 'utf-8');
|
||||
const parsed = JSON.parse(raw);
|
||||
if (parsed && typeof parsed === 'object') {
|
||||
return parsed as Record<string, StoredSession>;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to read session store', err);
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
function writeSessions(sessions: Record<string, StoredSession>): void {
|
||||
try {
|
||||
ensureDataDir();
|
||||
fs.writeFileSync(sessionFilePath(), JSON.stringify(sessions, null, 2), 'utf-8');
|
||||
} catch (err) {
|
||||
console.error('Failed to persist session store', err);
|
||||
}
|
||||
}
|
||||
|
||||
export function getAllSessions(): StoredSession[] {
|
||||
const sessions = readSessions();
|
||||
return Object.values(sessions);
|
||||
}
|
||||
|
||||
function baseCookieOptions() {
|
||||
return {
|
||||
path: '/',
|
||||
httpOnly: true as const,
|
||||
sameSite: 'lax' as const,
|
||||
secure: !dev
|
||||
};
|
||||
}
|
||||
|
||||
export function upsertSession(
|
||||
cookies: Cookies,
|
||||
input: { beatleaderId: string; name: string | null; avatar: string | null }
|
||||
): StoredSession {
|
||||
const sessions = readSessions();
|
||||
const existingSessionId = cookies.get(SESSION_COOKIE);
|
||||
const now = Date.now();
|
||||
|
||||
if (existingSessionId && sessions[existingSessionId]?.beatleaderId === input.beatleaderId) {
|
||||
const current = sessions[existingSessionId];
|
||||
const updated: StoredSession = {
|
||||
...current,
|
||||
name: input.name,
|
||||
avatar: input.avatar,
|
||||
lastSeenAt: now
|
||||
};
|
||||
sessions[existingSessionId] = updated;
|
||||
writeSessions(sessions);
|
||||
cookies.set(SESSION_COOKIE, existingSessionId, { ...baseCookieOptions(), maxAge: 10 * 365 * 24 * 3600 });
|
||||
return updated;
|
||||
}
|
||||
|
||||
const sessionId = crypto.randomUUID();
|
||||
const session: StoredSession = {
|
||||
sessionId,
|
||||
beatleaderId: input.beatleaderId,
|
||||
name: input.name,
|
||||
avatar: input.avatar,
|
||||
createdAt: now,
|
||||
lastSeenAt: now
|
||||
};
|
||||
|
||||
sessions[sessionId] = session;
|
||||
writeSessions(sessions);
|
||||
|
||||
cookies.set(SESSION_COOKIE, sessionId, { ...baseCookieOptions(), maxAge: 10 * 365 * 24 * 3600 });
|
||||
return session;
|
||||
}
|
||||
|
||||
export function getSession(cookies: Cookies): StoredSession | null {
|
||||
const sessionId = cookies.get(SESSION_COOKIE);
|
||||
if (!sessionId) return null;
|
||||
const sessions = readSessions();
|
||||
const session = sessions[sessionId];
|
||||
if (!session) return null;
|
||||
|
||||
session.lastSeenAt = Date.now();
|
||||
sessions[sessionId] = session;
|
||||
writeSessions(sessions);
|
||||
return session;
|
||||
}
|
||||
|
||||
export function clearSession(cookies: Cookies): void {
|
||||
const sessionId = cookies.get(SESSION_COOKIE);
|
||||
if (!sessionId) return;
|
||||
|
||||
const sessions = readSessions();
|
||||
if (sessions[sessionId]) {
|
||||
delete sessions[sessionId];
|
||||
writeSessions(sessions);
|
||||
}
|
||||
|
||||
cookies.delete(SESSION_COOKIE, baseCookieOptions());
|
||||
}
|
||||
@ -1,689 +0,0 @@
|
||||
/**
|
||||
* Shared utilities for PlebSaber tools
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// 1. Type Definitions
|
||||
// ============================================================================
|
||||
|
||||
export type MapMeta = {
|
||||
songName?: string;
|
||||
key?: string;
|
||||
coverURL?: string;
|
||||
mapper?: string;
|
||||
};
|
||||
|
||||
export type StarInfo = {
|
||||
stars?: number;
|
||||
accRating?: number;
|
||||
passRating?: number;
|
||||
techRating?: number;
|
||||
status?: number;
|
||||
};
|
||||
|
||||
export type BeatLeaderScore = {
|
||||
timeset?: string | number;
|
||||
accuracy?: number;
|
||||
acc?: number;
|
||||
rank?: number;
|
||||
leaderboard?: {
|
||||
id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
song?: { hash?: string | null };
|
||||
difficulty?: { value?: number | string | null; modeName?: string | null };
|
||||
};
|
||||
};
|
||||
|
||||
export type BeatLeaderScoresResponse = {
|
||||
data?: BeatLeaderScore[];
|
||||
metadata?: { page?: number; itemsPerPage?: number; total?: number };
|
||||
};
|
||||
|
||||
export type BeatLeaderPlayerProfile = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
avatar?: string | null;
|
||||
country?: string | null;
|
||||
rank?: number | null;
|
||||
countryRank?: number | null;
|
||||
techPp?: number | null;
|
||||
accPp?: number | null;
|
||||
passPp?: number | null;
|
||||
};
|
||||
|
||||
export type RequirementContext = {
|
||||
adminRank?: number | null;
|
||||
};
|
||||
|
||||
export type ToolRequirement = {
|
||||
minGlobalRank?: number;
|
||||
requiresBetterRankThanAdmin?: boolean;
|
||||
summary: string;
|
||||
lockedMessage?: string;
|
||||
};
|
||||
|
||||
export type Difficulty = {
|
||||
name: string;
|
||||
characteristic: string;
|
||||
};
|
||||
|
||||
export type TriangleCorners = {
|
||||
tech: { x: number; y: number };
|
||||
acc: { x: number; y: number };
|
||||
pass: { x: number; y: number };
|
||||
};
|
||||
|
||||
export type TriangleNormalized = {
|
||||
tech: number;
|
||||
acc: number;
|
||||
pass: number;
|
||||
};
|
||||
|
||||
export type TriangleData = {
|
||||
corners: TriangleCorners;
|
||||
normalized: TriangleNormalized;
|
||||
} | null;
|
||||
|
||||
// ============================================================================
|
||||
// 2. Constants
|
||||
// ============================================================================
|
||||
|
||||
export const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
|
||||
export const PLEB_BEATLEADER_ID = '76561199407393962';
|
||||
export const DEFAULT_ADMIN_RANK_FALLBACK = 3000;
|
||||
|
||||
export const DIFFICULTIES = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'] as const;
|
||||
|
||||
export const MODES = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'] as const;
|
||||
|
||||
const DEFAULT_PRIVATE_TOOL_REQUIREMENT: ToolRequirement = {
|
||||
requiresBetterRankThanAdmin: true,
|
||||
summary: 'Ranked higher than pleb on BeatLeader',
|
||||
lockedMessage: 'You must either contribute to BL Patreon (or be ranked higher than pleb) to use this tool'
|
||||
};
|
||||
|
||||
export const TOOL_REQUIREMENTS = {
|
||||
'compare-histories': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
|
||||
'player-headtohead': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
|
||||
'player-playlist-gaps': DEFAULT_PRIVATE_TOOL_REQUIREMENT
|
||||
} as const satisfies Record<string, ToolRequirement>;
|
||||
|
||||
export type ToolKey = keyof typeof TOOL_REQUIREMENTS;
|
||||
|
||||
export function getToolRequirement(key: string): ToolRequirement | null {
|
||||
return TOOL_REQUIREMENTS[key as ToolKey] ?? null;
|
||||
}
|
||||
|
||||
export function meetsToolRequirement(
|
||||
profile: BeatLeaderPlayerProfile | null | undefined,
|
||||
requirement: ToolRequirement | null | undefined,
|
||||
context?: RequirementContext
|
||||
): boolean {
|
||||
if (!requirement) return true;
|
||||
const rank = profile?.rank ?? null;
|
||||
|
||||
if (requirement.requiresBetterRankThanAdmin) {
|
||||
const baseline = resolveAdminBaseline(context);
|
||||
if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
|
||||
return rank <= (baseline ?? DEFAULT_ADMIN_RANK_FALLBACK);
|
||||
}
|
||||
|
||||
if (requirement.minGlobalRank !== undefined) {
|
||||
if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
|
||||
return rank <= requirement.minGlobalRank;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function resolveAdminBaseline(context?: RequirementContext): number | null {
|
||||
const val = context?.adminRank;
|
||||
if (typeof val === 'number' && Number.isFinite(val) && val > 0) {
|
||||
return val;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function formatToolRequirementSummary(
|
||||
requirement: ToolRequirement | null | undefined,
|
||||
context?: RequirementContext
|
||||
): string {
|
||||
if (!requirement) return '';
|
||||
if (requirement.requiresBetterRankThanAdmin) {
|
||||
const baseline = resolveAdminBaseline(context);
|
||||
if (baseline) {
|
||||
return `BeatLeader global rank ≤ ${baseline.toLocaleString()} (pleb's current rank)`;
|
||||
}
|
||||
return requirement.summary || `BeatLeader global rank ≤ ${DEFAULT_ADMIN_RANK_FALLBACK.toLocaleString()}`;
|
||||
}
|
||||
if (requirement.summary) return requirement.summary;
|
||||
if (requirement.minGlobalRank !== undefined) {
|
||||
return `BeatLeader global rank ≤ ${requirement.minGlobalRank}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 3. BeatSaver & BeatLeader API Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Fetch BeatSaver metadata for a given song hash
|
||||
*/
|
||||
export async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const data: any = await res.json();
|
||||
const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
|
||||
return {
|
||||
songName: data?.metadata?.songName ?? data?.name ?? undefined,
|
||||
key: data?.id ?? undefined,
|
||||
coverURL: cover,
|
||||
mapper: data?.uploader?.name ?? undefined
|
||||
};
|
||||
} catch {
|
||||
// Fallback to CDN cover only
|
||||
return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch BeatLeader star ratings for a given song hash
|
||||
* Returns a map keyed by `${hash}|${difficultyName}|${modeName}`
|
||||
*/
|
||||
export async function fetchBeatLeaderStarsByHash(
|
||||
hash: string,
|
||||
normalizeDifficultyName: (value: number | string | null | undefined) => string
|
||||
): Promise<Record<string, StarInfo>> {
|
||||
try {
|
||||
const res = await fetch(`/api/beatleader?path=/leaderboards/hash/${encodeURIComponent(hash)}`);
|
||||
if (!res.ok) return {};
|
||||
const data: any = await res.json();
|
||||
const leaderboards: any[] = Array.isArray(data?.leaderboards) ? data.leaderboards : Array.isArray(data) ? data : [];
|
||||
const result: Record<string, StarInfo> = {};
|
||||
for (const lb of leaderboards) {
|
||||
const diffName: string | undefined = lb?.difficulty?.difficultyName ?? lb?.difficulty?.name ?? undefined;
|
||||
const modeName: string | undefined = lb?.difficulty?.modeName ?? lb?.modeName ?? 'Standard';
|
||||
if (!diffName || !modeName) continue;
|
||||
const normalized = normalizeDifficultyName(diffName);
|
||||
const key = `${hash}|${normalized}|${modeName}`;
|
||||
const info: StarInfo = {
|
||||
stars: lb?.difficulty?.stars ?? lb?.stars,
|
||||
accRating: lb?.difficulty?.accRating,
|
||||
passRating: lb?.difficulty?.passRating,
|
||||
techRating: lb?.difficulty?.techRating,
|
||||
status: lb?.difficulty?.status
|
||||
};
|
||||
result[key] = info;
|
||||
}
|
||||
return result;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load metadata for a list of items with unique hashes
|
||||
* Only loads metadata that isn't already in the cache
|
||||
*/
|
||||
export async function loadMetaForHashes(
|
||||
hashes: string[],
|
||||
existingCache: Record<string, MapMeta>,
|
||||
onProgress?: (loaded: number, total: number) => void
|
||||
): Promise<Record<string, MapMeta>> {
|
||||
const uniqueHashes = Array.from(new Set(hashes));
|
||||
const needed = uniqueHashes.filter((h) => !existingCache[h]);
|
||||
if (needed.length === 0) return existingCache;
|
||||
|
||||
const newCache = { ...existingCache };
|
||||
for (let i = 0; i < needed.length; i++) {
|
||||
const h = needed[i];
|
||||
const meta = await fetchBeatSaverMeta(h);
|
||||
if (meta) newCache[h] = meta;
|
||||
if (onProgress) onProgress(i + 1, needed.length);
|
||||
}
|
||||
return newCache;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load star ratings for a list of hashes
|
||||
* Only loads ratings that aren't already in the cache
|
||||
*/
|
||||
export async function loadStarsForHashes(
|
||||
hashes: string[],
|
||||
existingCache: Record<string, StarInfo>,
|
||||
normalizeFn: (value: number | string | null | undefined) => string,
|
||||
onProgress?: (loaded: number, total: number) => void
|
||||
): Promise<Record<string, StarInfo>> {
|
||||
const uniqueHashes = Array.from(new Set(hashes));
|
||||
// Check if we need to load stars for these hashes
|
||||
const needed = uniqueHashes.filter((h) => {
|
||||
// Check if we have any star data for this hash
|
||||
return !Object.keys(existingCache).some(key => key.startsWith(`${h}|`));
|
||||
});
|
||||
|
||||
if (needed.length === 0) return existingCache;
|
||||
|
||||
const newCache = { ...existingCache };
|
||||
for (let i = 0; i < needed.length; i++) {
|
||||
const h = needed[i];
|
||||
const stars = await fetchBeatLeaderStarsByHash(h, normalizeFn);
|
||||
Object.assign(newCache, stars);
|
||||
if (onProgress) onProgress(i + 1, needed.length);
|
||||
}
|
||||
return newCache;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch recent scores for a player filtered by difficulty
|
||||
*/
|
||||
export async function fetchAllRecentScoresForDiff(
|
||||
playerId: string,
|
||||
cutoffEpoch: number,
|
||||
reqDiff: string,
|
||||
maxPages = 100
|
||||
): Promise<BeatLeaderScore[]> {
|
||||
const qs = new URLSearchParams({ diff: reqDiff, cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
|
||||
const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
|
||||
const data = (await res.json()) as BeatLeaderScoresResponse;
|
||||
return data.data ?? [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch recent scores for a player across all difficulties
|
||||
*/
|
||||
export async function fetchAllRecentScoresAllDiffs(
|
||||
playerId: string,
|
||||
cutoffEpoch: number,
|
||||
normalizeFn: (value: number | string | null | undefined) => string,
|
||||
parseFn: (ts: string | number | undefined) => number
|
||||
): Promise<BeatLeaderScore[]> {
|
||||
const arrays = await Promise.all(
|
||||
DIFFICULTIES.map((d) => fetchAllRecentScoresForDiff(playerId, cutoffEpoch, d))
|
||||
);
|
||||
// Merge and dedupe by leaderboard key (hash|diff|mode) and timeset
|
||||
const merged = new Map<string, BeatLeaderScore>();
|
||||
for (const arr of arrays) {
|
||||
for (const s of arr) {
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeFn(s.leaderboard?.difficulty?.value ?? undefined);
|
||||
const key = `${hashLower}|${diffName}|${modeName}`;
|
||||
const prev = merged.get(key);
|
||||
if (!prev || parseFn(prev.timeset) < parseFn(s.timeset)) merged.set(key, s);
|
||||
}
|
||||
}
|
||||
return Array.from(merged.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all scores for a player (no time limit) by paginating through the BeatLeader API
|
||||
* Useful for playlist gap analysis where we need to check all historical plays
|
||||
*/
|
||||
export async function fetchAllPlayerScores(playerId: string, maxPages = 200): Promise<BeatLeaderScore[]> {
|
||||
const pageSize = 100;
|
||||
let page = 1;
|
||||
const all: BeatLeaderScore[] = [];
|
||||
while (page <= maxPages) {
|
||||
const url = `/api/beatleader/player/${encodeURIComponent(playerId)}?scores=1&count=${pageSize}&page=${page}&sortBy=date&order=desc`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
|
||||
const data = (await res.json()) as BeatLeaderScoresResponse;
|
||||
const batch = data.data ?? [];
|
||||
if (batch.length === 0) break;
|
||||
all.push(...batch);
|
||||
page += 1;
|
||||
}
|
||||
return all;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 4. Data Processing Helpers
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Normalize difficulty names to standard format
|
||||
*/
|
||||
export function normalizeDifficultyName(value: number | string | null | undefined): string {
|
||||
if (value === null || value === undefined) return 'ExpertPlus';
|
||||
if (typeof value === 'string') {
|
||||
const v = value.toLowerCase();
|
||||
if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
|
||||
if (v.includes('expert')) return 'Expert';
|
||||
if (v.includes('hard')) return 'Hard';
|
||||
if (v.includes('normal')) return 'Normal';
|
||||
if (v.includes('easy')) return 'Easy';
|
||||
return value;
|
||||
}
|
||||
switch (value) {
|
||||
case 1: return 'Easy';
|
||||
case 3: return 'Normal';
|
||||
case 5: return 'Hard';
|
||||
case 7: return 'Expert';
|
||||
case 9: return 'ExpertPlus';
|
||||
default: return 'ExpertPlus';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a timeset value to a number
|
||||
*/
|
||||
export function parseTimeset(ts: string | number | undefined): number {
|
||||
if (ts === undefined) return 0;
|
||||
if (typeof ts === 'number') return ts;
|
||||
const n = Number(ts);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cutoff epoch timestamp from months ago
|
||||
*/
|
||||
export function getCutoffEpochFromMonths(months: number | string): number {
|
||||
const m = Number(months) || 0;
|
||||
const seconds = Math.max(0, m) * 30 * 24 * 60 * 60; // approx 30 days per month
|
||||
return Math.floor(Date.now() / 1000) - seconds;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize accuracy value to percentage (0-100)
|
||||
*/
|
||||
export function normalizeAccuracy(value: number | undefined): number | null {
|
||||
if (value === undefined || value === null) return null;
|
||||
return value <= 1 ? value * 100 : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a map of latest scores by key (hash|diff|mode)
|
||||
*/
|
||||
export function buildLatestByKey(
|
||||
scores: BeatLeaderScore[],
|
||||
cutoffEpoch: number,
|
||||
normalizeFn: (value: number | string | null | undefined) => string,
|
||||
parseFn: (ts: string | number | undefined) => number
|
||||
): Map<string, BeatLeaderScore> {
|
||||
const byKey = new Map<string, BeatLeaderScore>();
|
||||
for (const s of scores) {
|
||||
const t = parseFn(s.timeset);
|
||||
if (!t || t < cutoffEpoch - ONE_YEAR_SECONDS) continue; // sanity guard
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeFn(s.leaderboard?.difficulty?.value ?? undefined);
|
||||
const key = `${hashLower}|${diffName}|${modeName}`;
|
||||
const prev = byKey.get(key);
|
||||
if (!prev || parseFn(prev.timeset) < t) byKey.set(key, s);
|
||||
}
|
||||
return byKey;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 5. Statistical Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Calculate the mean (average) of an array of numbers
|
||||
*/
|
||||
export function mean(values: number[]): number {
|
||||
if (!values.length) return 0;
|
||||
return values.reduce((a, b) => a + b, 0) / values.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the median of an array of numbers
|
||||
*/
|
||||
export function median(values: number[]): number {
|
||||
if (!values.length) return 0;
|
||||
const v = [...values].sort((a, b) => a - b);
|
||||
const mid = Math.floor(v.length / 2);
|
||||
return v.length % 2 ? v[mid] : (v[mid - 1] + v[mid]) / 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate a percentile of an array of numbers
|
||||
*/
|
||||
export function percentile(values: number[], p: number): number {
|
||||
if (!values.length) return 0;
|
||||
const v = [...values].sort((a, b) => a - b);
|
||||
const idx = Math.min(v.length - 1, Math.max(0, Math.floor((p / 100) * (v.length - 1))));
|
||||
return v[idx];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 6. Skill Triangle Calculations
|
||||
// ============================================================================
|
||||
|
||||
const DEFAULT_MAX_TECH_PP = 1300;
|
||||
const DEFAULT_MAX_ACC_PP = 15000;
|
||||
const DEFAULT_MAX_PASS_PP = 6000;
|
||||
const GYRON_LENGTH = 57.74;
|
||||
|
||||
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
|
||||
|
||||
/**
|
||||
* Calculate skill triangle data from player's PP values
|
||||
* Returns corner coordinates and normalized values for rendering the skill triangle
|
||||
*/
|
||||
export function calculateSkillTriangle(
|
||||
techPp: number | null | undefined,
|
||||
accPp: number | null | undefined,
|
||||
passPp: number | null | undefined
|
||||
): TriangleData {
|
||||
const tech = typeof techPp === 'number' ? techPp : 0;
|
||||
const acc = typeof accPp === 'number' ? accPp : 0;
|
||||
const pass = typeof passPp === 'number' ? passPp : 0;
|
||||
|
||||
// If all values are zero, return null
|
||||
if (tech === 0 && acc === 0 && pass === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Calculate triangle scale
|
||||
const triangleScale = Math.max(
|
||||
1,
|
||||
tech > 0 ? tech / DEFAULT_MAX_TECH_PP : 0,
|
||||
acc > 0 ? acc / DEFAULT_MAX_ACC_PP : 0,
|
||||
pass > 0 ? pass / DEFAULT_MAX_PASS_PP : 0
|
||||
);
|
||||
|
||||
const maxTechPp = DEFAULT_MAX_TECH_PP * triangleScale;
|
||||
const maxAccPp = DEFAULT_MAX_ACC_PP * triangleScale;
|
||||
const maxPassPp = DEFAULT_MAX_PASS_PP * triangleScale;
|
||||
|
||||
// Normalize PP values
|
||||
const normalizedTechPp = maxTechPp ? clamp(tech / maxTechPp, 0, 1) : 0;
|
||||
const normalizedAccPp = maxAccPp ? clamp(acc / maxAccPp, 0, 1) : 0;
|
||||
const normalizedPassPp = maxPassPp ? clamp(pass / maxPassPp, 0, 1) : 0;
|
||||
|
||||
// Calculate corner positions
|
||||
const cornerTech = {
|
||||
x: (GYRON_LENGTH - normalizedTechPp * GYRON_LENGTH) * 0.866,
|
||||
y: 86.6 - (GYRON_LENGTH - normalizedTechPp * GYRON_LENGTH) / 2
|
||||
};
|
||||
const cornerAcc = {
|
||||
x: 100 - (GYRON_LENGTH - normalizedAccPp * GYRON_LENGTH) * 0.866,
|
||||
y: 86.6 - (GYRON_LENGTH - normalizedAccPp * GYRON_LENGTH) / 2
|
||||
};
|
||||
const cornerPass = {
|
||||
x: 50,
|
||||
y: (86.6 - GYRON_LENGTH / 2) * (1 - normalizedPassPp)
|
||||
};
|
||||
|
||||
return {
|
||||
corners: {
|
||||
tech: cornerTech,
|
||||
acc: cornerAcc,
|
||||
pass: cornerPass
|
||||
},
|
||||
normalized: {
|
||||
tech: normalizedTechPp,
|
||||
acc: normalizedAccPp,
|
||||
pass: normalizedPassPp
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 7. Playlist Generation
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Increment and return the playlist count for a given key
|
||||
*/
|
||||
export function incrementPlaylistCount(key: string): number {
|
||||
try {
|
||||
const raw = localStorage.getItem('playlist_counts');
|
||||
const obj = raw ? (JSON.parse(raw) as Record<string, number>) : {};
|
||||
const next = (obj[key] ?? 0) + 1;
|
||||
obj[key] = next;
|
||||
localStorage.setItem('playlist_counts', JSON.stringify(obj));
|
||||
return next;
|
||||
} catch {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a list of songs to Beat Saber playlist JSON format
|
||||
*/
|
||||
export function toPlaylistJson(
|
||||
songs: Array<{ hash: string; difficulties: Difficulty[] }>,
|
||||
playlistKey: string,
|
||||
description: string
|
||||
): unknown {
|
||||
const count = incrementPlaylistCount(playlistKey);
|
||||
const playlistTitle = `${playlistKey}-${String(count).padStart(2, '0')}`;
|
||||
return {
|
||||
playlistTitle,
|
||||
playlistAuthor: 'SaberList Tool',
|
||||
songs: songs.map((s) => ({
|
||||
hash: s.hash,
|
||||
difficulties: s.difficulties,
|
||||
})),
|
||||
description,
|
||||
allowDuplicates: false,
|
||||
customData: {}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Download a playlist as a .bplist file
|
||||
*/
|
||||
export function downloadPlaylist(playlistData: unknown): void {
|
||||
const title = (playlistData as any).playlistTitle ?? 'playlist';
|
||||
const blob = new Blob([JSON.stringify(playlistData, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${title}.bplist`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 8. Pagination Utilities
|
||||
// ============================================================================
|
||||
|
||||
export type PaginationResult<T> = {
|
||||
pageItems: T[];
|
||||
totalPages: number;
|
||||
validPage: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate pagination for a list of items
|
||||
*/
|
||||
export function calculatePagination<T>(
|
||||
items: T[],
|
||||
page: number,
|
||||
pageSize: number
|
||||
): PaginationResult<T> {
|
||||
const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
|
||||
const validPage = Math.min(Math.max(1, page), totalPages);
|
||||
const startIdx = (validPage - 1) * pageSize;
|
||||
const endIdx = startIdx + pageSize;
|
||||
const pageItems = items.slice(startIdx, endIdx);
|
||||
|
||||
return {
|
||||
pageItems,
|
||||
totalPages,
|
||||
validPage
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 9. URL Parameter Utilities
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Parse URL search parameters with type safety
|
||||
*/
|
||||
export function getUrlParam(
|
||||
searchParams: URLSearchParams,
|
||||
key: string,
|
||||
defaultValue?: string
|
||||
): string | undefined {
|
||||
return searchParams.get(key) ?? defaultValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a URL parameter as a number
|
||||
*/
|
||||
export function getUrlParamAsNumber(
|
||||
searchParams: URLSearchParams,
|
||||
key: string,
|
||||
defaultValue: number
|
||||
): number {
|
||||
const value = searchParams.get(key);
|
||||
if (!value) return defaultValue;
|
||||
const num = Number(value);
|
||||
return Number.isFinite(num) ? num : defaultValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a URL parameter as one of a set of allowed values
|
||||
*/
|
||||
export function getUrlParamAsEnum<T extends string>(
|
||||
searchParams: URLSearchParams,
|
||||
key: string,
|
||||
allowedValues: readonly T[],
|
||||
defaultValue: T
|
||||
): T {
|
||||
const value = searchParams.get(key);
|
||||
if (!value) return defaultValue;
|
||||
return (allowedValues as readonly string[]).includes(value) ? (value as T) : defaultValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update URL without triggering navigation
|
||||
*/
|
||||
export function updateUrlParams(
|
||||
params: Record<string, string | number | boolean | undefined | null>,
|
||||
replace = true
|
||||
): void {
|
||||
const sp = new URLSearchParams(window.location.search);
|
||||
|
||||
for (const [key, value] of Object.entries(params)) {
|
||||
if (value === undefined || value === null || value === '' || value === false) {
|
||||
sp.delete(key);
|
||||
} else {
|
||||
sp.set(key, String(value));
|
||||
}
|
||||
}
|
||||
|
||||
const qs = sp.toString();
|
||||
const url = window.location.pathname + (qs ? `?${qs}` : '');
|
||||
|
||||
if (replace) {
|
||||
window.history.replaceState(null, '', url);
|
||||
} else {
|
||||
window.history.pushState(null, '', url);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { getSession } from '../../../../lib/server/sessionStore';
|
||||
import { PLEB_BEATLEADER_ID, DEFAULT_ADMIN_RANK_FALLBACK } from '../../../../lib/utils/plebsaber-utils';
|
||||
|
||||
const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
|
||||
|
||||
type BeatLeaderIdentity = { id: string; name: string | null };
|
||||
type BeatLeaderPlayer = {
|
||||
id: string;
|
||||
name: string | null;
|
||||
avatar: string | null;
|
||||
country: string | null;
|
||||
role: string | null;
|
||||
rank: number | null;
|
||||
countryRank: number | null;
|
||||
techPp: number | null;
|
||||
accPp: number | null;
|
||||
passPp: number | null;
|
||||
pp: number | null;
|
||||
mapperId: number | null;
|
||||
level: number | null;
|
||||
banned: boolean;
|
||||
profileSettings: { showAllRatings: boolean } | null;
|
||||
};
|
||||
|
||||
type ResponsePayload = {
|
||||
identity: BeatLeaderIdentity;
|
||||
player: BeatLeaderPlayer | null;
|
||||
rawPlayer: Record<string, unknown> | null;
|
||||
adminBaseline: {
|
||||
rank: number | null;
|
||||
fallback: number;
|
||||
};
|
||||
};
|
||||
|
||||
export const GET: RequestHandler = async ({ cookies, fetch }) => {
|
||||
const session = getSession(cookies);
|
||||
if (!session) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
|
||||
{ status: 401, headers: { 'content-type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const identity: BeatLeaderIdentity = {
|
||||
id: session.beatleaderId,
|
||||
name: session.name
|
||||
};
|
||||
|
||||
let player: BeatLeaderPlayer | null = null;
|
||||
let rawPlayer: Record<string, unknown> | null = null;
|
||||
|
||||
let adminRank: number | null = null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
|
||||
if (res.ok) {
|
||||
rawPlayer = (await res.json()) as Record<string, unknown>;
|
||||
player = {
|
||||
id: typeof rawPlayer.id === 'string' ? (rawPlayer.id as string) : session.beatleaderId,
|
||||
name: typeof rawPlayer.name === 'string' ? (rawPlayer.name as string) : session.name,
|
||||
avatar: typeof rawPlayer.avatar === 'string' ? (rawPlayer.avatar as string) : session.avatar,
|
||||
country: typeof rawPlayer.country === 'string' ? (rawPlayer.country as string) : null,
|
||||
role: typeof rawPlayer.role === 'string' ? (rawPlayer.role as string) : null,
|
||||
rank: typeof rawPlayer.rank === 'number' ? (rawPlayer.rank as number) : null,
|
||||
countryRank: typeof rawPlayer.countryRank === 'number' ? (rawPlayer.countryRank as number) : null,
|
||||
techPp: typeof rawPlayer.techPp === 'number' ? (rawPlayer.techPp as number) : null,
|
||||
accPp: typeof rawPlayer.accPp === 'number' ? (rawPlayer.accPp as number) : null,
|
||||
passPp: typeof rawPlayer.passPp === 'number' ? (rawPlayer.passPp as number) : null,
|
||||
pp: typeof rawPlayer.pp === 'number' ? (rawPlayer.pp as number) : null,
|
||||
mapperId: typeof rawPlayer.mapperId === 'number' ? (rawPlayer.mapperId as number) : null,
|
||||
level: typeof rawPlayer.level === 'number' ? (rawPlayer.level as number) : null,
|
||||
banned: Boolean(rawPlayer.banned),
|
||||
profileSettings: typeof rawPlayer.profileSettings === 'object' && rawPlayer.profileSettings !== null
|
||||
? {
|
||||
showAllRatings: Boolean((rawPlayer.profileSettings as Record<string, unknown>).showAllRatings)
|
||||
}
|
||||
: null
|
||||
};
|
||||
if (session.beatleaderId === PLEB_BEATLEADER_ID) {
|
||||
adminRank = typeof rawPlayer.rank === 'number' ? (rawPlayer.rank as number) : adminRank;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to refresh BeatLeader public profile', err);
|
||||
}
|
||||
|
||||
if (adminRank === null) {
|
||||
try {
|
||||
const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(PLEB_BEATLEADER_ID)}?stats=true`);
|
||||
if (res.ok) {
|
||||
const admin = (await res.json()) as Record<string, unknown>;
|
||||
const rankValue = admin?.rank;
|
||||
if (typeof rankValue === 'number') {
|
||||
adminRank = rankValue;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to refresh BeatLeader admin profile', err);
|
||||
}
|
||||
}
|
||||
|
||||
const payload: ResponsePayload = {
|
||||
identity,
|
||||
player,
|
||||
rawPlayer,
|
||||
adminBaseline: {
|
||||
rank: adminRank,
|
||||
fallback: DEFAULT_ADMIN_RANK_FALLBACK
|
||||
}
|
||||
};
|
||||
return new Response(JSON.stringify(payload), {
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { consumeAndValidateState, exchangeCodeForTokens, clearTokens, consumeRedirectCookie } from '$lib/server/beatleaderAuth';
|
||||
import { upsertSession } from '../../../../lib/server/sessionStore';
|
||||
import { consumeAndValidateState, exchangeCodeForTokens, setTokens, clearTokens, consumeRedirectCookie, getValidAccessToken } from '$lib/server/beatleaderAuth';
|
||||
|
||||
export const GET: RequestHandler = async ({ url, cookies, fetch }) => {
|
||||
export const GET: RequestHandler = async ({ url, cookies }) => {
|
||||
const code = url.searchParams.get('code');
|
||||
const state = url.searchParams.get('state');
|
||||
|
||||
@ -20,47 +19,19 @@ export const GET: RequestHandler = async ({ url, cookies, fetch }) => {
|
||||
return new Response('Token exchange failed', { status: 400 });
|
||||
}
|
||||
|
||||
setTokens(cookies, tokenData);
|
||||
|
||||
// Best-effort: enable ShowAllRatings so unranked star ratings are visible for supporters
|
||||
try {
|
||||
const identityRes = await fetch('https://api.beatleader.com/oauth2/identity', {
|
||||
headers: { Authorization: `Bearer ${tokenData.access_token}` }
|
||||
});
|
||||
|
||||
if (!identityRes.ok) {
|
||||
clearTokens(cookies);
|
||||
return new Response('Failed to retrieve identity', { status: 502 });
|
||||
const tok = await getValidAccessToken(cookies);
|
||||
if (tok) {
|
||||
const enableUrl = new URL('https://api.beatleader.com/user/profile');
|
||||
enableUrl.searchParams.set('showAllRatings', 'true');
|
||||
await fetch(enableUrl.toString(), { method: 'PATCH', headers: { Authorization: `Bearer ${tok}` } });
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const identity = (await identityRes.json()) as { id?: string; name?: string };
|
||||
if (!identity?.id) {
|
||||
clearTokens(cookies);
|
||||
return new Response('BeatLeader identity missing id', { status: 502 });
|
||||
}
|
||||
|
||||
let avatar: string | undefined;
|
||||
try {
|
||||
const profileRes = await fetch(`https://api.beatleader.com/player/${identity.id}`);
|
||||
if (profileRes.ok) {
|
||||
const profileJson = (await profileRes.json()) as { avatar?: string };
|
||||
if (typeof profileJson.avatar === 'string') {
|
||||
avatar = profileJson.avatar;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to prefetch BeatLeader avatar', err);
|
||||
}
|
||||
|
||||
upsertSession(cookies, {
|
||||
beatleaderId: identity.id,
|
||||
name: identity.name ?? null,
|
||||
avatar: avatar ?? null
|
||||
});
|
||||
clearTokens(cookies);
|
||||
} catch (err) {
|
||||
console.error('BeatLeader OAuth callback failed', err);
|
||||
clearTokens(cookies);
|
||||
return new Response('Internal error establishing session', { status: 500 });
|
||||
}
|
||||
|
||||
// Redirect back to original target stored before login
|
||||
const redirectTo = consumeRedirectCookie(cookies) ?? url.searchParams.get('redirect_uri') ?? '/';
|
||||
return new Response(null, { status: 302, headers: { Location: redirectTo } });
|
||||
};
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { clearTokens, clearBeatLeaderSession } from '$lib/server/beatleaderAuth';
|
||||
import { clearSession } from '../../../../lib/server/sessionStore';
|
||||
|
||||
export const POST: RequestHandler = async ({ url, cookies }) => {
|
||||
clearTokens(cookies);
|
||||
clearBeatLeaderSession(cookies);
|
||||
clearSession(cookies);
|
||||
const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
|
||||
return new Response(null, { status: 302, headers: { Location: redirectTo } });
|
||||
};
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { clearTokens } from '$lib/server/beatleaderAuth';
|
||||
import { clearSession } from '../../../../lib/server/sessionStore';
|
||||
|
||||
export const GET: RequestHandler = async ({ url }) => {
|
||||
// For prerendering, redirect to home page
|
||||
const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
|
||||
return new Response(null, { status: 302, headers: { Location: redirectTo } });
|
||||
};
|
||||
|
||||
export const POST: RequestHandler = async ({ url, cookies }) => {
|
||||
clearTokens(cookies);
|
||||
clearSession(cookies);
|
||||
const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
|
||||
return new Response(null, { status: 302, headers: { Location: redirectTo } });
|
||||
};
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { dev } from '$app/environment';
|
||||
</script>
|
||||
|
||||
<section class="py-8 prose prose-invert max-w-none">
|
||||
<h1 class="font-display tracking-widest">Guides</h1>
|
||||
<p>Community-written tips and guides for improving your Beat Saber game. Contributions welcome.</p>
|
||||
|
||||
<div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-6">
|
||||
{#if dev}
|
||||
<a href="/guides/beatleader-auth" class="card-surface p-5 block">
|
||||
<h3 class="font-semibold">BeatLeader Authentication</h3>
|
||||
<p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
|
||||
</a>
|
||||
{/if}
|
||||
<a href="/guides/beatleader-auth" class="card-surface p-5 block">
|
||||
<h3 class="font-semibold">BeatLeader Authentication</h3>
|
||||
<p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
|
||||
</a>
|
||||
<a href="/guides/finding-new-songs" class="card-surface p-5 block">
|
||||
<h3 class="font-semibold">Finding New Songs (BeatLeader)</h3>
|
||||
<p class="mt-1 text-sm text-muted">Month-by-month search using unranked stars, tech rating, and friend filters.</p>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import { dev } from '$app/environment';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
if (!dev) {
|
||||
throw error(404, 'Not found');
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
@ -27,12 +27,8 @@
|
||||
Educational use only: The information and resources on this page are for learning purposes. Do not use them for real authentication or accessing accounts.
|
||||
</div>
|
||||
<p>
|
||||
For this app, I explored three ways to access your BeatLeader data: Steam, OAuth, or a website‑style session.
|
||||
This app supports three ways to access your BeatLeader data: Steam, OAuth, and a website‑style session.
|
||||
</p>
|
||||
<p>
|
||||
I wanted tools like <a href="/tools/beatleader-compare">Compare Players</a> to show unranked star ratings when your BeatLeader account is a supporter and <code>ShowAllRatings</code> is enabled. That turns out to not be possible without implementing Steam ticket handling using the Steamworks SDK. <strong>The rest of the notes here were written before I realized that.</strong>
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Top navigation -->
|
||||
<nav class="not-prose mt-4 flex flex-wrap gap-2">
|
||||
@ -86,6 +82,11 @@
|
||||
Default API auth is <strong>Steam</strong>. You can override per request using <code>?auth=steam|oauth|session|auto|none</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tools like <a href="/tools/beatleader-compare">Compare Players</a>
|
||||
can show unranked star ratings when your BeatLeader account is a supporter and <code>ShowAllRatings</code> is enabled.
|
||||
</p>
|
||||
|
||||
<h2 id="steam">Steam Login</h2>
|
||||
<p>
|
||||
Authenticate via Steam OpenID to link your Steam account. Then use the <a href="/tools/beatleader-auth">BeatLeader Auth Tool</a> with your Steam session ticket to capture a website session.
|
||||
|
||||
@ -1,200 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import PlayerCard from '$lib/components/PlayerCard.svelte';
|
||||
|
||||
type Identity = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
};
|
||||
|
||||
type Player = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
avatar?: string | null;
|
||||
country?: string | null;
|
||||
role?: string | null;
|
||||
rank?: number | null;
|
||||
countryRank?: number | null;
|
||||
techPp?: number | null;
|
||||
accPp?: number | null;
|
||||
passPp?: number | null;
|
||||
pp?: number | null;
|
||||
mapperId?: number | null;
|
||||
level?: number | null;
|
||||
banned?: boolean;
|
||||
profileSettings?: { showAllRatings: boolean } | null;
|
||||
patreon?: unknown;
|
||||
};
|
||||
|
||||
let identity: Identity | null = null;
|
||||
let player: Player | null = null;
|
||||
let rawPlayer: unknown = null;
|
||||
let error: string | null = null;
|
||||
let loading = true;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/beatleader/me');
|
||||
if (!res.ok) {
|
||||
const body = await res.text();
|
||||
throw new Error(body || `Request failed: ${res.status}`);
|
||||
}
|
||||
const data = (await res.json()) as { identity?: Identity; player?: Player | null; rawPlayer?: unknown };
|
||||
identity = data.identity ?? null;
|
||||
player = data.player ?? null;
|
||||
rawPlayer = data.rawPlayer ?? null;
|
||||
console.log('BeatLeader /me raw player:', rawPlayer ?? player ?? data);
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">Player Info</h1>
|
||||
<p class="mt-2 text-muted text-sm">Debug view for the current BeatLeader OAuth session.</p>
|
||||
|
||||
{#if loading}
|
||||
<div class="mt-6 text-sm text-muted">Loading player info…</div>
|
||||
{:else if error}
|
||||
<div class="mt-6 rounded border border-rose-500/40 bg-rose-500/10 px-4 py-3 text-rose-200 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
{:else}
|
||||
{#if player}
|
||||
<div class="mt-6">
|
||||
<div class="player-tile">
|
||||
<PlayerCard
|
||||
name={player.name ?? identity?.name ?? 'Unknown'}
|
||||
country={player.country ?? null}
|
||||
rank={player.rank ?? null}
|
||||
showRank={typeof player.rank === 'number'}
|
||||
avatar={player.avatar ?? null}
|
||||
width="100%"
|
||||
avatarSize={64}
|
||||
techPp={player.techPp}
|
||||
accPp={player.accPp}
|
||||
passPp={player.passPp}
|
||||
playerId={player.id ?? null}
|
||||
gradientId="player-header"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="stat-tile">
|
||||
<dt>Country Rank</dt>
|
||||
<dd>{typeof player.countryRank === 'number' ? `#${player.countryRank.toLocaleString()}` : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Global Rank</dt>
|
||||
<dd>{typeof player.rank === 'number' ? `#${player.rank.toLocaleString()}` : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>PP (Global)</dt>
|
||||
<dd>{typeof player.pp === 'number' ? player.pp.toFixed(2) : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Tech PP</dt>
|
||||
<dd>{typeof player.techPp === 'number' ? player.techPp.toFixed(2) : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Acc PP</dt>
|
||||
<dd>{typeof player.accPp === 'number' ? player.accPp.toFixed(2) : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Pass PP</dt>
|
||||
<dd>{typeof player.passPp === 'number' ? player.passPp.toFixed(2) : '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Level</dt>
|
||||
<dd>{player.level ?? '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Role</dt>
|
||||
<dd>{player.role ?? '—'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Mapper</dt>
|
||||
<dd>
|
||||
{#if player.mapperId}
|
||||
<a class="link" href={`https://beatsaver.com/profile/${player.mapperId}`} target="_blank" rel="noreferrer">
|
||||
{player.mapperId}
|
||||
</a>
|
||||
{:else}
|
||||
—
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Banned</dt>
|
||||
<dd>{player.banned ? 'Yes' : 'No'}</dd>
|
||||
</div>
|
||||
<div class="stat-tile">
|
||||
<dt>Show All Ratings</dt>
|
||||
<dd>{player.profileSettings?.showAllRatings ? 'Enabled' : 'Disabled'}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-6 player-tile">
|
||||
<p class="empty">No player profile found for this identity.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.player-tile {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(5, 9, 20, 0.92));
|
||||
box-shadow: 0 20px 40px rgba(8, 14, 35, 0.35);
|
||||
}
|
||||
|
||||
.stat-tile {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(5, 9, 20, 0.85));
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-tile:hover {
|
||||
border-color: rgba(34, 211, 238, 0.25);
|
||||
}
|
||||
|
||||
dt {
|
||||
color: rgba(148, 163, 184, 0.75);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.35rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
dd {
|
||||
color: rgba(226, 232, 240, 0.95);
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: rgba(34, 211, 238, 0.85);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: rgba(34, 211, 238, 1);
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
import { getSession } from '../../lib/server/sessionStore';
|
||||
import { PLEB_BEATLEADER_ID } from '../../lib/utils/plebsaber-utils';
|
||||
import type { BeatLeaderPlayerProfile } from '../../lib/utils/plebsaber-utils';
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const load: LayoutServerLoad = async ({ cookies, fetch }) => {
|
||||
const session = getSession(cookies);
|
||||
|
||||
let player: BeatLeaderPlayerProfile | null = null;
|
||||
let adminRank: number | null = null;
|
||||
let adminPlayer: BeatLeaderPlayerProfile | null = null;
|
||||
|
||||
if (session) {
|
||||
try {
|
||||
const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
|
||||
if (res.ok) {
|
||||
const data = (await res.json()) as Record<string, unknown>;
|
||||
const profile: BeatLeaderPlayerProfile = {
|
||||
id: typeof data.id === 'string' ? (data.id as string) : session.beatleaderId,
|
||||
name: typeof data.name === 'string' ? (data.name as string) : session.name ?? undefined,
|
||||
avatar: typeof data.avatar === 'string' ? (data.avatar as string) : session.avatar ?? null,
|
||||
country: typeof data.country === 'string' ? (data.country as string) : null,
|
||||
rank: typeof data.rank === 'number' ? (data.rank as number) : null,
|
||||
countryRank: typeof data.countryRank === 'number' ? (data.countryRank as number) : null,
|
||||
techPp: typeof data.techPp === 'number' ? (data.techPp as number) : null,
|
||||
accPp: typeof data.accPp === 'number' ? (data.accPp as number) : null,
|
||||
passPp: typeof data.passPp === 'number' ? (data.passPp as number) : null
|
||||
};
|
||||
player = profile;
|
||||
if (session.beatleaderId === PLEB_BEATLEADER_ID) {
|
||||
adminRank = typeof data.rank === 'number' ? (data.rank as number) : null;
|
||||
adminPlayer = profile;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch BeatLeader profile for tools layout', err);
|
||||
}
|
||||
}
|
||||
|
||||
if (!adminPlayer || adminRank === null) {
|
||||
try {
|
||||
const adminRes = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(PLEB_BEATLEADER_ID)}?stats=true`);
|
||||
if (adminRes.ok) {
|
||||
const adminData = (await adminRes.json()) as Record<string, unknown>;
|
||||
const rankValue = adminData?.rank;
|
||||
if (typeof rankValue === 'number') {
|
||||
adminRank = rankValue;
|
||||
}
|
||||
adminPlayer = {
|
||||
id: typeof adminData.id === 'string' ? (adminData.id as string) : PLEB_BEATLEADER_ID,
|
||||
name: typeof adminData.name === 'string' ? (adminData.name as string) : undefined,
|
||||
avatar: typeof adminData.avatar === 'string' ? (adminData.avatar as string) : null,
|
||||
country: typeof adminData.country === 'string' ? (adminData.country as string) : null,
|
||||
rank: typeof adminData.rank === 'number' ? (adminData.rank as number) : null,
|
||||
countryRank: typeof adminData.countryRank === 'number' ? (adminData.countryRank as number) : null,
|
||||
techPp: typeof adminData.techPp === 'number' ? (adminData.techPp as number) : null,
|
||||
accPp: typeof adminData.accPp === 'number' ? (adminData.accPp as number) : null,
|
||||
passPp: typeof adminData.passPp === 'number' ? (adminData.passPp as number) : null
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch BeatLeader admin baseline', err);
|
||||
}
|
||||
}
|
||||
|
||||
return { hasBeatLeaderOAuth: Boolean(session), player, adminRank, adminPlayer };
|
||||
};
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
|
||||
<div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each [
|
||||
{ name: 'Compare Play Histories', href: '/tools/compare-histories', desc: 'Find songs A played that B has not' },
|
||||
{ name: 'Player Playlist Gaps', href: '/tools/player-playlist-gaps', desc: 'Upload a playlist and find songs a player has not played' },
|
||||
{ name: 'Player Head-to-Head', href: '/tools/player-headtohead', desc: 'Compare two players on the same map/difficulty' }
|
||||
{ name: 'BeatLeader Compare Players', href: '/tools/beatleader-compare', desc: 'Find songs A played that B has not' },
|
||||
{ name: 'BeatLeader Playlist Gap', href: '/tools/beatleader-playlist-gap', desc: 'Upload a playlist and find songs a player has not played' },
|
||||
{ name: 'BeatLeader Head-to-Head', href: '/tools/beatleader-headtohead', desc: 'Compare two players on the same map/difficulty' }
|
||||
] as tool}
|
||||
<a href={tool.href} class="card-surface p-5 block">
|
||||
<div class="font-semibold">{tool.name}</div>
|
||||
|
||||
634
src/routes/tools/beatleader-compare/+page.svelte
Normal file
634
src/routes/tools/beatleader-compare/+page.svelte
Normal file
@ -0,0 +1,634 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import SongPlayer from '$lib/components/SongPlayer.svelte';
|
||||
|
||||
type BeatLeaderScore = {
|
||||
timeset?: string | number;
|
||||
leaderboard?: {
|
||||
// BeatLeader tends to expose a short id for the leaderboard route
|
||||
id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
song?: { hash?: string | null };
|
||||
difficulty?: { value?: number | string | null; modeName?: string | null };
|
||||
};
|
||||
};
|
||||
|
||||
type BeatLeaderScoresResponse = {
|
||||
data?: BeatLeaderScore[];
|
||||
metadata?: { page?: number; itemsPerPage?: number; total?: number };
|
||||
};
|
||||
|
||||
type Difficulty = {
|
||||
name: string;
|
||||
characteristic: string;
|
||||
};
|
||||
|
||||
type SongItem = {
|
||||
hash: string;
|
||||
difficulties: Difficulty[];
|
||||
timeset: number;
|
||||
leaderboardId?: string;
|
||||
};
|
||||
|
||||
const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
|
||||
|
||||
let playerA = '';
|
||||
let playerB = '';
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
let results: SongItem[] = [];
|
||||
let loadingMeta = false;
|
||||
|
||||
// Sorting and pagination state
|
||||
let sortBy: 'date' | 'difficulty' = 'date';
|
||||
let sortDir: 'asc' | 'desc' = 'desc';
|
||||
let page = 1;
|
||||
let pageSize: number | string = 24;
|
||||
$: pageSizeNum = Number(pageSize) || 24;
|
||||
|
||||
// Configurable lookback windows (months)
|
||||
let monthsA: number | string = 6; // default 6 months
|
||||
let monthsB: number | string = 24; // default 24 months
|
||||
|
||||
// Derived lists
|
||||
$: sortedResults = [...results].sort((a, b) => {
|
||||
let cmp = 0;
|
||||
if (sortBy === 'date') {
|
||||
cmp = a.timeset - b.timeset;
|
||||
} else {
|
||||
const an = a.difficulties[0]?.name ?? '';
|
||||
const bn = b.difficulties[0]?.name ?? '';
|
||||
cmp = an.localeCompare(bn);
|
||||
}
|
||||
return sortDir === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
$: totalPages = Math.max(1, Math.ceil(sortedResults.length / pageSizeNum));
|
||||
$: page = Math.min(page, totalPages);
|
||||
$: pageItems = sortedResults.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
|
||||
|
||||
type MapMeta = {
|
||||
songName?: string;
|
||||
key?: string;
|
||||
coverURL?: string;
|
||||
mapper?: string;
|
||||
};
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
|
||||
type StarInfo = {
|
||||
stars?: number;
|
||||
accRating?: number;
|
||||
passRating?: number;
|
||||
techRating?: number;
|
||||
status?: number;
|
||||
};
|
||||
// Keyed by `${hash}|${difficultyName}|${modeName}` for precise lookup
|
||||
let starsByKey: Record<string, StarInfo> = {};
|
||||
let loadingStars = false;
|
||||
|
||||
// Toast notification state
|
||||
let toastMessage = '';
|
||||
let showToast = false;
|
||||
let toastTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Button feedback state - track which buttons are currently "lit up"
|
||||
let litButtons = new Set<string>();
|
||||
|
||||
function showToastMessage(message: string) {
|
||||
// Clear any existing toast
|
||||
if (toastTimeout) {
|
||||
clearTimeout(toastTimeout);
|
||||
}
|
||||
|
||||
toastMessage = message;
|
||||
showToast = true;
|
||||
|
||||
// Auto-hide toast after 3 seconds
|
||||
toastTimeout = setTimeout(() => {
|
||||
showToast = false;
|
||||
toastMessage = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function lightUpButton(buttonId: string) {
|
||||
litButtons.add(buttonId);
|
||||
// Reassign here too to trigger reactivity immediately
|
||||
litButtons = litButtons;
|
||||
// Remove the lighting effect after 1 second
|
||||
setTimeout(() => {
|
||||
litButtons.delete(buttonId);
|
||||
litButtons = litButtons; // Trigger reactivity
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async function copyBsrCommand(key: string, hash: string) {
|
||||
try {
|
||||
const bsrCommand = `!bsr ${key}`;
|
||||
await navigator.clipboard.writeText(bsrCommand);
|
||||
|
||||
// Show success feedback with the actual command
|
||||
showToastMessage(`Copied "${bsrCommand}" to clipboard`);
|
||||
lightUpButton(`bsr-${hash}`);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy to clipboard:', err);
|
||||
showToastMessage('Failed to copy to clipboard');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const data: any = await res.json();
|
||||
const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
|
||||
return {
|
||||
songName: data?.metadata?.songName ?? data?.name ?? undefined,
|
||||
key: data?.id ?? undefined,
|
||||
coverURL: cover,
|
||||
mapper: data?.uploader?.name ?? undefined
|
||||
};
|
||||
} catch {
|
||||
// Fallback to CDN cover only
|
||||
return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMetaForResults(items: SongItem[]): Promise<void> {
|
||||
const needed = Array.from(new Set(items.map((i) => i.hash))).filter((h) => !metaByHash[h]);
|
||||
if (needed.length === 0) return;
|
||||
loadingMeta = true;
|
||||
for (const h of needed) {
|
||||
const meta = await fetchBeatSaverMeta(h);
|
||||
if (meta) metaByHash = { ...metaByHash, [h]: meta };
|
||||
}
|
||||
loadingMeta = false;
|
||||
}
|
||||
|
||||
async function fetchBeatLeaderStarsByHash(hash: string): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`/api/beatleader?path=/leaderboards/hash/${encodeURIComponent(hash)}`);
|
||||
if (!res.ok) return;
|
||||
const data: any = await res.json();
|
||||
const leaderboards: any[] = Array.isArray(data?.leaderboards) ? data.leaderboards : Array.isArray(data) ? data : [];
|
||||
for (const lb of leaderboards) {
|
||||
const diffName: string | undefined = lb?.difficulty?.difficultyName ?? lb?.difficulty?.name ?? undefined;
|
||||
const modeName: string | undefined = lb?.difficulty?.modeName ?? lb?.modeName ?? 'Standard';
|
||||
if (!diffName || !modeName) continue;
|
||||
const normalized = normalizeDifficultyName(diffName);
|
||||
const key = `${hash}|${normalized}|${modeName}`;
|
||||
const info: StarInfo = {
|
||||
stars: lb?.difficulty?.stars ?? lb?.stars,
|
||||
accRating: lb?.difficulty?.accRating,
|
||||
passRating: lb?.difficulty?.passRating,
|
||||
techRating: lb?.difficulty?.techRating,
|
||||
status: lb?.difficulty?.status
|
||||
};
|
||||
starsByKey = { ...starsByKey, [key]: info };
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStarsForResults(items: SongItem[]): Promise<void> {
|
||||
const neededHashes = Array.from(new Set(items.map((i) => i.hash)));
|
||||
if (neededHashes.length === 0) return;
|
||||
loadingStars = true;
|
||||
for (const h of neededHashes) {
|
||||
await fetchBeatLeaderStarsByHash(h);
|
||||
}
|
||||
loadingStars = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function difficultyToColor(name: string | undefined): string {
|
||||
const n = (name ?? 'ExpertPlus').toLowerCase();
|
||||
if (n === 'easy') return 'MediumSeaGreen';
|
||||
if (n === 'normal') return '#59b0f4';
|
||||
if (n === 'hard') return 'tomato';
|
||||
if (n === 'expert') return '#bf2a42';
|
||||
if (n === 'expertplus' || n === 'expert+' || n === 'ex+' ) return '#8f48db';
|
||||
return '#8f48db';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function normalizeDifficultyName(value: number | string | null | undefined): string {
|
||||
if (value === null || value === undefined) return 'ExpertPlus';
|
||||
if (typeof value === 'string') {
|
||||
const v = value.toLowerCase();
|
||||
if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
|
||||
if (v.includes('expert')) return 'Expert';
|
||||
if (v.includes('hard')) return 'Hard';
|
||||
if (v.includes('normal')) return 'Normal';
|
||||
if (v.includes('easy')) return 'Easy';
|
||||
return value;
|
||||
}
|
||||
switch (value) {
|
||||
case 1:
|
||||
return 'Easy';
|
||||
case 3:
|
||||
return 'Normal';
|
||||
case 5:
|
||||
return 'Hard';
|
||||
case 7:
|
||||
return 'Expert';
|
||||
case 9:
|
||||
return 'ExpertPlus';
|
||||
default:
|
||||
return 'ExpertPlus';
|
||||
}
|
||||
}
|
||||
|
||||
function parseTimeset(ts: string | number | undefined): number {
|
||||
if (ts === undefined) return 0;
|
||||
if (typeof ts === 'number') return ts;
|
||||
const n = Number(ts);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function getCutoffEpochFromMonths(months: number | string): number {
|
||||
const m = Number(months) || 0;
|
||||
const seconds = Math.max(0, m) * 30 * 24 * 60 * 60; // approx 30 days per month
|
||||
return Math.floor(Date.now() / 1000) - seconds;
|
||||
}
|
||||
|
||||
async function fetchAllRecentScores(playerId: string, cutoffEpoch: number, maxPages = 15): Promise<BeatLeaderScore[]> {
|
||||
const qs = new URLSearchParams({ diff: 'ExpertPlus', cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
|
||||
const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
|
||||
const data = (await res.json()) as BeatLeaderScoresResponse;
|
||||
return data.data ?? [];
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function incrementPlaylistCount(): number {
|
||||
try {
|
||||
const raw = localStorage.getItem('playlist_counts');
|
||||
const obj = raw ? (JSON.parse(raw) as Record<string, number>) : {};
|
||||
const key = 'beatleader_compare_players';
|
||||
const next = (obj[key] ?? 0) + 1;
|
||||
obj[key] = next;
|
||||
localStorage.setItem('playlist_counts', JSON.stringify(obj));
|
||||
return next;
|
||||
} catch {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
function toPlaylistJson(songs: SongItem[]): unknown {
|
||||
const count = incrementPlaylistCount();
|
||||
const playlistTitle = `beatleader_compare_players-${String(count).padStart(2, '0')}`;
|
||||
return {
|
||||
playlistTitle,
|
||||
playlistAuthor: 'SaberList Tool',
|
||||
songs: songs.map((s) => ({
|
||||
hash: s.hash,
|
||||
difficulties: s.difficulties,
|
||||
})),
|
||||
description: `A's recent songs not played by B. Generated ${new Date().toISOString()}`,
|
||||
allowDuplicates: false,
|
||||
customData: {}
|
||||
};
|
||||
}
|
||||
|
||||
function downloadPlaylist(): void {
|
||||
const payload = toPlaylistJson(results);
|
||||
const title = (payload as any).playlistTitle ?? 'playlist';
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${title}.bplist`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function onCompare(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
const a = playerA.trim();
|
||||
const b = playerB.trim();
|
||||
if (!a || !b) {
|
||||
errorMsg = 'Please enter both Player A and Player B IDs.';
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
const cutoff = getCutoffEpochFromMonths(monthsA);
|
||||
const cutoffB = getCutoffEpochFromMonths(monthsB);
|
||||
const [aScores, bScores] = await Promise.all([
|
||||
fetchAllRecentScores(a, cutoff),
|
||||
fetchAllRecentScores(b, cutoffB, 100)
|
||||
]);
|
||||
|
||||
const bLeaderboardIds = new Set<string>();
|
||||
const bExpertPlusKeys = new Set<string>(); // `${hashLower}|ExpertPlus|${modeName}`
|
||||
for (const s of bScores) {
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const hashLower = rawHash ? String(rawHash).toLowerCase() : undefined;
|
||||
const lbIdRaw = (s.leaderboard as any)?.id ?? (s.leaderboard as any)?.leaderboardId;
|
||||
const lbId = lbIdRaw != null ? String(lbIdRaw) : undefined;
|
||||
const bDiffValue = s.leaderboard?.difficulty?.value ?? undefined;
|
||||
const bModeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
const bDiffName = normalizeDifficultyName(bDiffValue);
|
||||
if (bDiffName !== 'ExpertPlus') continue; // ignore non-ExpertPlus for B
|
||||
if (lbId) bLeaderboardIds.add(lbId);
|
||||
if (hashLower) bExpertPlusKeys.add(`${hashLower}|ExpertPlus|${bModeName}`);
|
||||
}
|
||||
|
||||
|
||||
const runSeen = new Set<string>(); // avoid duplicates within this run
|
||||
|
||||
const candidates: SongItem[] = [];
|
||||
for (const entry of aScores) {
|
||||
const t = parseTimeset(entry.timeset);
|
||||
if (!t || t < cutoff) continue;
|
||||
|
||||
const rawHash = entry.leaderboard?.song?.hash ?? undefined;
|
||||
const diffValue = entry.leaderboard?.difficulty?.value ?? undefined;
|
||||
const modeName = entry.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
const leaderboardIdRaw = (entry.leaderboard as any)?.id ?? (entry.leaderboard as any)?.leaderboardId;
|
||||
const leaderboardId = leaderboardIdRaw != null ? String(leaderboardIdRaw) : undefined;
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeDifficultyName(diffValue);
|
||||
if (diffName !== 'ExpertPlus') continue; // Only compare ExpertPlus for A
|
||||
// B has played ExpertPlus of same map+mode if matching leaderboard or key exists
|
||||
if ((leaderboardId && bLeaderboardIds.has(leaderboardId)) || bExpertPlusKeys.has(`${hashLower}|${diffName}|${modeName}`)) continue;
|
||||
|
||||
|
||||
const key = `${rawHash}|${diffName}|${modeName}`;
|
||||
if (runSeen.has(key)) continue;
|
||||
runSeen.add(key);
|
||||
|
||||
candidates.push({
|
||||
hash: rawHash,
|
||||
difficulties: [{ name: diffName, characteristic: modeName ?? 'Standard' }],
|
||||
timeset: t,
|
||||
leaderboardId
|
||||
});
|
||||
}
|
||||
|
||||
candidates.sort((x, y) => y.timeset - x.timeset);
|
||||
const limited = candidates; // return all; pagination handled client-side
|
||||
|
||||
|
||||
|
||||
results = limited;
|
||||
page = 1;
|
||||
// Load BeatSaver metadata (covers, titles) for tiles
|
||||
loadMetaForResults(limited);
|
||||
// Load BeatLeader star ratings per hash/diff
|
||||
loadStarsForResults(limited);
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
||||
<form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onCompare}>
|
||||
<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>
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex items-center gap-3 text-sm text-muted">
|
||||
<span>{results.length} songs</span>
|
||||
<span>·</span>
|
||||
<label class="flex items-center gap-2">Sort
|
||||
<select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={sortBy}>
|
||||
<option value="date">Date</option>
|
||||
<option value="difficulty">Difficulty</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Dir
|
||||
<select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={sortDir}>
|
||||
<option value="desc">Desc</option>
|
||||
<option value="asc">Asc</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Page size
|
||||
<select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={pageSize}>
|
||||
<option value={12}>12</option>
|
||||
<option value={24}>24</option>
|
||||
<option value={36}>36</option>
|
||||
<option value={48}>48</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
{#if loadingStars}
|
||||
<div class="mt-2 text-xs text-muted">Loading star ratings…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each pageItems as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if metaByHash[item.hash]?.coverURL}
|
||||
<img
|
||||
src={metaByHash[item.hash].coverURL}
|
||||
alt={metaByHash[item.hash]?.songName ?? item.hash}
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={metaByHash[item.hash]?.songName ?? item.hash}>
|
||||
{metaByHash[item.hash]?.songName ?? item.hash}
|
||||
</div>
|
||||
{#if metaByHash[item.hash]?.mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
|
||||
<span>
|
||||
{metaByHash[item.hash]?.mapper}
|
||||
{#if starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
|
||||
<span class="ml-3" title="BeatLeader star rating">★ {starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars?.toFixed(2)}</span>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="text-[11px] ml-2">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
|
||||
{item.difficulties[0]?.characteristic ?? 'Standard'} ·
|
||||
<span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(item.difficulties[0]?.name)}; color: #fff;">
|
||||
{item.difficulties[0]?.name}
|
||||
</span>
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<SongPlayer hash={item.hash} preferBeatLeader={true} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={item.leaderboardId
|
||||
? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
|
||||
: `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatLeader"
|
||||
>BL</a
|
||||
>
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatSaver"
|
||||
>BS</a
|
||||
>
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
|
||||
class:lit-up={litButtons.has(`bsr-${item.hash}`)}
|
||||
on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
|
||||
disabled={!metaByHash[item.hash]?.key}
|
||||
title="!bsr"
|
||||
>!bsr</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if totalPages > 1}
|
||||
<div class="mt-6 flex items-center justify-center gap-2">
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>
|
||||
Prev
|
||||
</button>
|
||||
<span class="text-sm text-muted">Page {page} / {totalPages}</span>
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
{#if showToast}
|
||||
<div class="toast-notification" role="status" aria-live="polite">
|
||||
{toastMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
|
||||
/* Toast notification styles */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button lighting effect */
|
||||
.lit-up {
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
border-color: #10b981;
|
||||
color: white;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
945
src/routes/tools/beatleader-headtohead/+page.svelte
Normal file
945
src/routes/tools/beatleader-headtohead/+page.svelte
Normal file
@ -0,0 +1,945 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import SongPlayer from '$lib/components/SongPlayer.svelte';
|
||||
|
||||
type BeatLeaderScore = {
|
||||
timeset?: string | number;
|
||||
accuracy?: number;
|
||||
acc?: number;
|
||||
rank?: number;
|
||||
leaderboard?: {
|
||||
id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
song?: { hash?: string | null };
|
||||
difficulty?: { value?: number | string | null; modeName?: string | null };
|
||||
};
|
||||
};
|
||||
|
||||
type BeatLeaderScoresResponse = { data?: BeatLeaderScore[] };
|
||||
|
||||
type MapMeta = {
|
||||
songName?: string;
|
||||
key?: string;
|
||||
coverURL?: string;
|
||||
mapper?: string;
|
||||
};
|
||||
|
||||
type H2HItem = {
|
||||
hash: string;
|
||||
diffName: string;
|
||||
modeName: string;
|
||||
timeset: number; // most recent between the two
|
||||
accA: number | null;
|
||||
accB: number | null;
|
||||
rankA?: number;
|
||||
rankB?: number;
|
||||
leaderboardId?: string;
|
||||
};
|
||||
|
||||
const difficulties = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'];
|
||||
const modes = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'];
|
||||
const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
|
||||
|
||||
let playerA = '';
|
||||
let playerB = '';
|
||||
let months: number | string = 6;
|
||||
|
||||
// UI state
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
|
||||
// Results state
|
||||
let items: H2HItem[] = [];
|
||||
let sortDir: 'asc' | 'desc' = 'desc';
|
||||
let page = 1;
|
||||
let pageSize: number | string = 24;
|
||||
let filterWinMargin: string = 'all'; // 'all', '1', '2'
|
||||
$: pageSizeNum = Number(pageSize) || 24;
|
||||
$: filtered = (() => {
|
||||
if (filterWinMargin === 'all') return items;
|
||||
const margin = Number(filterWinMargin);
|
||||
return items.filter(i => {
|
||||
if (i.accA == null || i.accB == null) return false;
|
||||
return i.accA > i.accB && (i.accA - i.accB) > margin;
|
||||
});
|
||||
})();
|
||||
$: sorted = [...filtered].sort((a, b) => (sortDir === 'asc' ? a.timeset - b.timeset : b.timeset - a.timeset));
|
||||
$: totalPages = Math.max(1, Math.ceil(sorted.length / pageSizeNum));
|
||||
$: page = Math.min(page, totalPages);
|
||||
$: pageItems = sorted.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
|
||||
|
||||
// Meta cache
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
let loadingMeta = false;
|
||||
|
||||
// Toast notification state
|
||||
let toastMessage = '';
|
||||
let showToast = false;
|
||||
let toastTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Button feedback state - track which buttons are currently "lit up"
|
||||
let litButtons = new Set<string>();
|
||||
|
||||
function showToastMessage(message: string) {
|
||||
// Clear any existing toast
|
||||
if (toastTimeout) {
|
||||
clearTimeout(toastTimeout);
|
||||
}
|
||||
|
||||
toastMessage = message;
|
||||
showToast = true;
|
||||
|
||||
// Auto-hide toast after 3 seconds
|
||||
toastTimeout = setTimeout(() => {
|
||||
showToast = false;
|
||||
toastMessage = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function lightUpButton(buttonId: string) {
|
||||
litButtons.add(buttonId);
|
||||
// Reassign here too to trigger reactivity immediately
|
||||
litButtons = litButtons;
|
||||
// Remove the lighting effect after 1 second
|
||||
setTimeout(() => {
|
||||
litButtons.delete(buttonId);
|
||||
litButtons = litButtons; // Trigger reactivity
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async function copyBsrCommand(key: string, hash: string) {
|
||||
try {
|
||||
const bsrCommand = `!bsr ${key}`;
|
||||
await navigator.clipboard.writeText(bsrCommand);
|
||||
|
||||
// Show success feedback with the actual command
|
||||
showToastMessage(`Copied "${bsrCommand}" to clipboard`);
|
||||
lightUpButton(`bsr-${hash}`);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy to clipboard:', err);
|
||||
showToastMessage('Failed to copy to clipboard');
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeAccuracy(value: number | undefined): number | null {
|
||||
if (value === undefined || value === null) return null;
|
||||
return value <= 1 ? value * 100 : value;
|
||||
}
|
||||
|
||||
function normalizeDifficultyName(value: number | string | null | undefined): string {
|
||||
if (value === null || value === undefined) return 'ExpertPlus';
|
||||
if (typeof value === 'string') {
|
||||
const v = value.toLowerCase();
|
||||
if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
|
||||
if (v.includes('expert')) return 'Expert';
|
||||
if (v.includes('hard')) return 'Hard';
|
||||
if (v.includes('normal')) return 'Normal';
|
||||
if (v.includes('easy')) return 'Easy';
|
||||
return value;
|
||||
}
|
||||
switch (value) {
|
||||
case 1: return 'Easy';
|
||||
case 3: return 'Normal';
|
||||
case 5: return 'Hard';
|
||||
case 7: return 'Expert';
|
||||
case 9: return 'ExpertPlus';
|
||||
default: return 'ExpertPlus';
|
||||
}
|
||||
}
|
||||
|
||||
function parseTimeset(ts: string | number | undefined): number {
|
||||
if (ts === undefined) return 0;
|
||||
if (typeof ts === 'number') return ts;
|
||||
const n = Number(ts);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function getCutoffEpochFromMonths(m: number | string): number {
|
||||
const monthsNum = Number(m) || 0;
|
||||
const seconds = Math.max(0, monthsNum) * 30 * 24 * 60 * 60;
|
||||
return Math.floor(Date.now() / 1000) - seconds;
|
||||
}
|
||||
|
||||
async function fetchBeatSaverMeta(inHash: string): Promise<MapMeta | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(inHash)}`);
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const data: any = await res.json();
|
||||
const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${inHash.toLowerCase()}.jpg`;
|
||||
return {
|
||||
songName: data?.metadata?.songName ?? data?.name ?? undefined,
|
||||
key: data?.id ?? undefined,
|
||||
coverURL: cover,
|
||||
mapper: data?.uploader?.name ?? undefined
|
||||
};
|
||||
} catch {
|
||||
return { coverURL: `https://cdn.beatsaver.com/${inHash.toLowerCase()}.jpg` };
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMetaForResults(list: H2HItem[]): Promise<void> {
|
||||
const needed = Array.from(new Set(list.map((i) => i.hash))).filter((h) => !metaByHash[h]);
|
||||
if (needed.length === 0) return;
|
||||
loadingMeta = true;
|
||||
for (const h of needed) {
|
||||
const m = await fetchBeatSaverMeta(h);
|
||||
if (m) metaByHash = { ...metaByHash, [h]: m };
|
||||
}
|
||||
loadingMeta = false;
|
||||
}
|
||||
|
||||
async function fetchAllRecentScoresForDiff(playerId: string, cutoffEpoch: number, reqDiff: string, maxPages = 100): Promise<BeatLeaderScore[]> {
|
||||
const qs = new URLSearchParams({ diff: reqDiff, cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
|
||||
const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
|
||||
const data = (await res.json()) as BeatLeaderScoresResponse;
|
||||
return data.data ?? [];
|
||||
}
|
||||
|
||||
async function fetchAllRecentScoresAllDiffs(playerId: string, cutoffEpoch: number): Promise<BeatLeaderScore[]> {
|
||||
const arrays = await Promise.all(
|
||||
difficulties.map((d) => fetchAllRecentScoresForDiff(playerId, cutoffEpoch, d))
|
||||
);
|
||||
// Merge and dedupe by leaderboard key (hash|diff|mode) and timeset
|
||||
const merged = new Map<string, BeatLeaderScore>();
|
||||
for (const arr of arrays) {
|
||||
for (const s of arr) {
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeDifficultyName(s.leaderboard?.difficulty?.value ?? undefined);
|
||||
const key = `${hashLower}|${diffName}|${modeName}`;
|
||||
const prev = merged.get(key);
|
||||
if (!prev || parseTimeset(prev.timeset) < parseTimeset(s.timeset)) merged.set(key, s);
|
||||
}
|
||||
}
|
||||
return Array.from(merged.values());
|
||||
}
|
||||
|
||||
function buildLatestByKey(scores: BeatLeaderScore[], cutoffEpoch: number): Map<string, BeatLeaderScore> {
|
||||
const byKey = new Map<string, BeatLeaderScore>();
|
||||
for (const s of scores) {
|
||||
const t = parseTimeset(s.timeset);
|
||||
if (!t || t < cutoffEpoch - ONE_YEAR_SECONDS) continue; // sanity guard
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeDifficultyName(s.leaderboard?.difficulty?.value ?? undefined);
|
||||
const key = `${hashLower}|${diffName}|${modeName}`;
|
||||
const prev = byKey.get(key);
|
||||
if (!prev || parseTimeset(prev.timeset) < t) byKey.set(key, s);
|
||||
}
|
||||
return byKey;
|
||||
}
|
||||
|
||||
function toH2HItems(aMap: Map<string, BeatLeaderScore>, bMap: Map<string, BeatLeaderScore>): H2HItem[] {
|
||||
const out: H2HItem[] = [];
|
||||
for (const [key, aScore] of aMap) {
|
||||
if (!bMap.has(key)) continue;
|
||||
const bScore = bMap.get(key)!;
|
||||
const [hashLower, diffName, modeName] = key.split('|');
|
||||
const rawHash = (aScore.leaderboard?.song?.hash ?? bScore.leaderboard?.song?.hash ?? hashLower);
|
||||
const hash = String(rawHash).toLowerCase();
|
||||
const tA = parseTimeset(aScore.timeset);
|
||||
const tB = parseTimeset(bScore.timeset);
|
||||
const accA = normalizeAccuracy((aScore.accuracy ?? aScore.acc) as number | undefined);
|
||||
const accB = normalizeAccuracy((bScore.accuracy ?? bScore.acc) as number | undefined);
|
||||
const lbIdRaw = (aScore.leaderboard as any)?.id ?? (aScore.leaderboard as any)?.leaderboardId ?? (bScore.leaderboard as any)?.id ?? (bScore.leaderboard as any)?.leaderboardId;
|
||||
const leaderboardId = lbIdRaw != null ? String(lbIdRaw) : undefined;
|
||||
out.push({
|
||||
hash,
|
||||
diffName,
|
||||
modeName,
|
||||
timeset: Math.max(tA, tB),
|
||||
accA,
|
||||
accB,
|
||||
rankA: aScore.rank,
|
||||
rankB: bScore.rank,
|
||||
leaderboardId
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
async function onCompare(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
// Push current params into URL on user action
|
||||
updateUrl(false);
|
||||
errorMsg = null; items = []; metaByHash = {};
|
||||
const a = playerA.trim();
|
||||
const b = playerB.trim();
|
||||
if (!a || !b) { errorMsg = 'Please enter both Player A and Player B IDs.'; return; }
|
||||
loading = true;
|
||||
try {
|
||||
const cutoff = getCutoffEpochFromMonths(months);
|
||||
const [aScores, bScores] = await Promise.all([
|
||||
fetchAllRecentScoresAllDiffs(a, cutoff),
|
||||
fetchAllRecentScoresAllDiffs(b, cutoff)
|
||||
]);
|
||||
const aLatest = buildLatestByKey(aScores, cutoff - ONE_YEAR_SECONDS);
|
||||
const bLatest = buildLatestByKey(bScores, cutoff - ONE_YEAR_SECONDS);
|
||||
const combined = toH2HItems(aLatest, bLatest);
|
||||
combined.sort((x, y) => y.timeset - x.timeset);
|
||||
items = combined;
|
||||
page = 1;
|
||||
loadMetaForResults(combined);
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
if (dir === 'asc' || dir === 'desc') sortDir = dir;
|
||||
const size = sp.get('size') ?? sp.get('ps');
|
||||
if (size) pageSize = Number(size) || pageSize;
|
||||
const filter = sp.get('filter');
|
||||
if (filter && ['all', '1', '2'].includes(filter)) filterWinMargin = filter;
|
||||
initialized = true;
|
||||
});
|
||||
|
||||
// Short labels for players
|
||||
$: playerAId = playerA.trim();
|
||||
$: playerBId = playerB.trim();
|
||||
$: idShortA = playerAId ? playerAId.slice(0, 6) : 'A';
|
||||
$: idShortB = playerBId ? playerBId.slice(0, 6) : 'B';
|
||||
|
||||
// URL param sync
|
||||
let initialized = false;
|
||||
let urlSyncInProgress = false;
|
||||
function updateUrl(replace = true) {
|
||||
if (!initialized || urlSyncInProgress) return;
|
||||
try {
|
||||
urlSyncInProgress = true;
|
||||
const sp = new URLSearchParams(location.search);
|
||||
if (playerAId) sp.set('a', playerAId); else sp.delete('a');
|
||||
if (playerBId) sp.set('b', playerBId); else sp.delete('b');
|
||||
sp.delete('diff');
|
||||
sp.delete('mode');
|
||||
const monthsVal = Number(months) || 0;
|
||||
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');
|
||||
if (filterWinMargin !== 'all') sp.set('filter', filterWinMargin); else sp.delete('filter');
|
||||
const qs = sp.toString();
|
||||
const url = location.pathname + (qs ? `?${qs}` : '');
|
||||
if (replace) history.replaceState(null, '', url); else history.pushState(null, '', url);
|
||||
} finally {
|
||||
urlSyncInProgress = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Sync URL on state changes
|
||||
$: updateUrl(true);
|
||||
|
||||
// ===== Derived Stats for Visualizations =====
|
||||
function mean(values: number[]): number {
|
||||
if (!values.length) return 0;
|
||||
return values.reduce((a, b) => a + b, 0) / values.length;
|
||||
}
|
||||
function median(values: number[]): number {
|
||||
if (!values.length) return 0;
|
||||
const v = [...values].sort((a, b) => a - b);
|
||||
const mid = Math.floor(v.length / 2);
|
||||
return v.length % 2 ? v[mid] : (v[mid - 1] + v[mid]) / 2;
|
||||
}
|
||||
function percentile(values: number[], p: number): number {
|
||||
if (!values.length) return 0;
|
||||
const v = [...values].sort((a, b) => a - b);
|
||||
const idx = Math.min(v.length - 1, Math.max(0, Math.floor((p / 100) * (v.length - 1))));
|
||||
return v[idx];
|
||||
}
|
||||
|
||||
$: comparable = items.filter((i) => i.accA != null && i.accB != null) as Array<{
|
||||
hash: string; diffName: string; modeName: string; timeset: number; accA: number; accB: number; rankA?: number; rankB?: number; leaderboardId?: string;
|
||||
}>;
|
||||
$: totalComparable = comparable.length;
|
||||
$: winsA = comparable.filter((i) => i.accA > i.accB).length;
|
||||
$: winsB = comparable.filter((i) => i.accB > i.accA).length;
|
||||
$: ties = comparable.filter((i) => i.accA === i.accB).length;
|
||||
|
||||
$: accAList = comparable.map((i) => i.accA);
|
||||
$: accBList = comparable.map((i) => i.accB);
|
||||
$: avgAccA = mean(accAList);
|
||||
$: avgAccB = mean(accBList);
|
||||
$: medAccA = median(accAList);
|
||||
$: medAccB = median(accBList);
|
||||
|
||||
$: deltas = comparable.map((i) => i.accA - i.accB);
|
||||
$: absMargins = deltas.map((x) => Math.abs(x));
|
||||
$: avgMargin = mean(absMargins);
|
||||
$: p95Margin = percentile(absMargins, 95);
|
||||
|
||||
$: chronological = [...comparable].sort((a, b) => a.timeset - b.timeset);
|
||||
$: longestA = (() => {
|
||||
let cur = 0, best = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accA > i.accB) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
|
||||
}
|
||||
return best;
|
||||
})();
|
||||
$: longestB = (() => {
|
||||
let cur = 0, best = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accB > i.accA) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
|
||||
}
|
||||
return best;
|
||||
})();
|
||||
|
||||
// Win share (bar + donut)
|
||||
$: shareA = totalComparable ? winsA / totalComparable : 0;
|
||||
$: shareT = totalComparable ? ties / totalComparable : 0;
|
||||
$: shareB = totalComparable ? winsB / totalComparable : 0;
|
||||
// Donut chart calculations
|
||||
const donutR = 44;
|
||||
$: donutCircumference = 2 * Math.PI * donutR;
|
||||
$: donutALen = donutCircumference * shareA;
|
||||
$: donutTLen = donutCircumference * shareT;
|
||||
$: donutBLen = donutCircumference * shareB;
|
||||
|
||||
// Histogram of signed margins (A - B)
|
||||
$: maxAbsDelta = Math.max(0, ...deltas.map((x) => Math.abs(x)));
|
||||
$: histBins = 14;
|
||||
$: histRangeMin = -maxAbsDelta;
|
||||
$: histRangeMax = maxAbsDelta;
|
||||
$: histBinWidth = histBins ? (histRangeMax - histRangeMin) / histBins : 1;
|
||||
$: histogram = (() => {
|
||||
const bins = Array.from({ length: histBins }, () => 0);
|
||||
for (const x of deltas) {
|
||||
if (!Number.isFinite(x)) continue;
|
||||
let idx = Math.floor((x - histRangeMin) / histBinWidth);
|
||||
if (idx < 0) idx = 0; if (idx >= histBins) idx = histBins - 1;
|
||||
bins[idx] += 1;
|
||||
}
|
||||
return bins;
|
||||
})();
|
||||
$: histMaxCount = Math.max(1, ...histogram);
|
||||
|
||||
// Cumulative wins over time sparkline
|
||||
$: cumSeries = (() => {
|
||||
const pts: { t: number; a: number; b: number }[] = [];
|
||||
let a = 0, b = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accA > i.accB) a += 1; else if (i.accB > i.accA) b += 1;
|
||||
pts.push({ t: i.timeset, a, b });
|
||||
}
|
||||
return pts;
|
||||
})();
|
||||
$: tMin = cumSeries.length ? cumSeries[0].t : 0;
|
||||
$: tMax = cumSeries.length ? cumSeries[cumSeries.length - 1].t : 1;
|
||||
function mapX(t: number, w: number): number {
|
||||
if (tMax === tMin) return 0;
|
||||
return ((t - tMin) / (tMax - tMin)) * w;
|
||||
}
|
||||
function mapY(v: number, h: number, vMax?: number): number {
|
||||
const maxV = vMax ?? Math.max(1, cumSeries.length ? Math.max(cumSeries[cumSeries.length - 1].a, cumSeries[cumSeries.length - 1].b) : 1);
|
||||
return h - (v / maxV) * h;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<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}>
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
{#if items.length > 0}
|
||||
<!-- KPI Tiles -->
|
||||
<div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-label">Shared Maps</div>
|
||||
<div class="kpi-value">{totalComparable}</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-label">Wins {idShortA}</div>
|
||||
<div class="kpi-value">{winsA}</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-label">Wins {idShortB}</div>
|
||||
<div class="kpi-value">{winsB}</div>
|
||||
</div>
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-label">Ties</div>
|
||||
<div class="kpi-value">{ties}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Avg Acc {idShortA}</div>
|
||||
<div class="kpi-subvalue">{avgAccA.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Avg Acc {idShortB}</div>
|
||||
<div class="kpi-subvalue">{avgAccB.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Median {idShortA}</div>
|
||||
<div class="kpi-subvalue">{medAccA.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Median {idShortB}</div>
|
||||
<div class="kpi-subvalue">{medAccB.toFixed(2)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-sublabel">Avg Win Margin</div>
|
||||
<div class="kpi-subvalue">{avgMargin.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-sublabel">95th %ile Margin</div>
|
||||
<div class="kpi-subvalue">{p95Margin.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Longest Streak {idShortA}</div>
|
||||
<div class="kpi-subvalue">{longestA}</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Longest Streak {idShortB}</div>
|
||||
<div class="kpi-subvalue">{longestB}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Win Share: Bar + Donut -->
|
||||
<div class="mt-6 grid gap-4 lg:grid-cols-2">
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Win Share</div>
|
||||
<div class="winshare-bar">
|
||||
<div class="seg a" style={`width: ${(shareA * 100).toFixed(2)}%`}></div>
|
||||
<div class="seg t" style={`width: ${(shareT * 100).toFixed(2)}%`}></div>
|
||||
<div class="seg b" style={`width: ${(shareB * 100).toFixed(2)}%`}></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-muted flex gap-3">
|
||||
<span class="badge a"></span> {idShortA} {(shareA * 100).toFixed(1)}%
|
||||
<span class="badge t"></span> Ties {(shareT * 100).toFixed(1)}%
|
||||
<span class="badge b"></span> {idShortB} {(shareB * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-surface p-4 flex items-center justify-center">
|
||||
<svg viewBox="0 0 120 120" width="160" height="160">
|
||||
<!-- Donut background -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="16" />
|
||||
{#if totalComparable > 0}
|
||||
<!-- A -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="16" stroke-dasharray={`${donutALen} ${donutCircumference - donutALen}`} stroke-dashoffset={0} />
|
||||
<!-- Ties -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(200,200,200,0.7)" stroke-width="16" stroke-dasharray={`${donutTLen} ${donutCircumference - donutTLen}`} stroke-dashoffset={-donutALen} />
|
||||
<!-- B -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="16" stroke-dasharray={`${donutBLen} ${donutCircumference - donutBLen}`} stroke-dashoffset={-(donutALen + donutTLen)} />
|
||||
{/if}
|
||||
<text x="60" y="64" text-anchor="middle" font-size="14" fill="#9ca3af">{totalComparable} maps</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Win Margin Histogram & Cumulative Wins -->
|
||||
<div class="mt-6 grid gap-4 lg:grid-cols-2">
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Win Margin Histogram (A − B, %)</div>
|
||||
<div class="hist">
|
||||
{#each histogram as count, i}
|
||||
<div
|
||||
class="bar"
|
||||
title={`${(histRangeMin + (i + 0.5) * histBinWidth).toFixed(2)}%`}
|
||||
style={`left:${(i / histogram.length) * 100}%; width:${(1 / histogram.length) * 100}%; height:${((count / histMaxCount) * 100).toFixed(1)}%; background:${(histRangeMin + (i + 0.5) * histBinWidth) >= 0 ? 'rgba(0,255,204,0.8)' : 'rgba(255,0,170,0.8)'};`}
|
||||
></div>
|
||||
{/each}
|
||||
<div class="zero-line"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-muted">Left (magenta) favors {idShortB}, Right (cyan) favors {idShortA}</div>
|
||||
</div>
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Cumulative Wins Over Time</div>
|
||||
<svg viewBox="0 0 600 140" class="spark">
|
||||
<!-- Axes bg -->
|
||||
<rect x="0" y="0" width="600" height="140" fill="transparent" />
|
||||
{#if cumSeries.length > 1}
|
||||
{#key cumSeries.length}
|
||||
<!-- A line -->
|
||||
<polyline fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.a, 120)}`).join(' ')} />
|
||||
<!-- B line -->
|
||||
<polyline fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.b, 120)}`).join(' ')} />
|
||||
{/key}
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if items.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-muted">
|
||||
{filtered.length} / {items.length} songs
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
|
||||
<label class="flex items-center gap-3">
|
||||
<span class="filter-label {filterWinMargin !== 'all' ? 'active' : ''}">Options:</span>
|
||||
<select class="neon-select {filterWinMargin !== 'all' ? 'active' : ''}" bind:value={filterWinMargin}>
|
||||
<option value="all">All Songs</option>
|
||||
<option value="1">{idShortA} wins by >1%</option>
|
||||
<option value="2">{idShortA} wins by >2%</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Dir
|
||||
<select class="neon-select" bind:value={sortDir}>
|
||||
<option value="desc">Desc</option>
|
||||
<option value="asc">Asc</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Page size
|
||||
<select class="neon-select" bind:value={pageSize}>
|
||||
<option value={12}>12</option>
|
||||
<option value={24}>24</option>
|
||||
<option value={36}>36</option>
|
||||
<option value={48}>48</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each pageItems as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if metaByHash[item.hash]?.coverURL}
|
||||
<img src={metaByHash[item.hash].coverURL} alt={metaByHash[item.hash]?.songName ?? item.hash} loading="lazy" class="h-full w-full object-cover" />
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={metaByHash[item.hash]?.songName ?? item.hash}>{metaByHash[item.hash]?.songName ?? item.hash}</div>
|
||||
{#if metaByHash[item.hash]?.mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash]?.mapper}</div>
|
||||
{/if}
|
||||
<div class="mt-2 flex items-center justify-between text-[11px]">
|
||||
<span class="rounded bg-white/10 px-2 py-0.5">
|
||||
{item.modeName} · <span class="rounded px-1 ml-1" style="background-color: var(--neon-diff)">{item.diffName}</span>
|
||||
</span>
|
||||
<span class="text-muted">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="mt-3 grid grid-cols-2 gap-3 neon-surface">
|
||||
<div class="player-card playerA {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner' : ''}">
|
||||
<div class="label {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-label' : ''}">{idShortA}</div>
|
||||
<div class="value {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-value' : ''}">{item.accA != null ? item.accA.toFixed(2) + '%' : '—'}</div>
|
||||
<div class="sub">{item.rankA ? `Rank #${item.rankA}` : ''}</div>
|
||||
</div>
|
||||
<div class="player-card playerB {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner' : ''}">
|
||||
<div class="label {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-label' : ''}">{idShortB}</div>
|
||||
<div class="value {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-value' : ''}">{item.accB != null ? item.accB.toFixed(2) + '%' : '—'}</div>
|
||||
<div class="sub">{item.rankB ? `Rank #${item.rankB}` : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center text-sm">
|
||||
{#if item.accA != null && item.accB != null}
|
||||
{#if item.accA === item.accB}
|
||||
<span class="chip chip-draw">Tie</span>
|
||||
{:else if item.accA > item.accB}
|
||||
<span class="chip chip-win-a">Winner: {idShortA}</span>
|
||||
<span class="ml-2 text-muted margin-text {(item.accA - item.accB) > 1 ? 'margin-bold' : ''} {(item.accA - item.accB) > 2 ? 'margin-bright' : ''}">by {(item.accA - item.accB).toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="chip chip-win-b">Winner: {idShortB}</span>
|
||||
<span class="ml-2 text-muted margin-text {(item.accB - item.accA) > 1 ? 'margin-bold' : ''} {(item.accB - item.accA) > 2 ? 'margin-bright' : ''}">by {(item.accB - item.accA).toFixed(2)}%</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="chip">Incomplete</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<div class="w-1/2 flex flex-wrap gap-2">
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={item.leaderboardId
|
||||
? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
|
||||
: `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.diffName)}&mode=${encodeURIComponent(item.modeName)}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatLeader"
|
||||
>BL</a
|
||||
>
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatSaver"
|
||||
>BS</a
|
||||
>
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
|
||||
class:lit-up={litButtons.has(`bsr-${item.hash}`)}
|
||||
on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
|
||||
disabled={!metaByHash[item.hash]?.key}
|
||||
title="!bsr"
|
||||
>!bsr</button>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<SongPlayer hash={item.hash} preferBeatLeader={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if totalPages > 1}
|
||||
<div class="mt-6 flex items-center justify-center gap-2">
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>Prev</button>
|
||||
<span class="text-sm text-muted">Page {page} / {totalPages}</span>
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>Next</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
{#if showToast}
|
||||
<div class="toast-notification" role="status" aria-live="polite">
|
||||
{toastMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
|
||||
/* Cyberpunk neon aesthetics */
|
||||
.neon-surface {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: radial-gradient(1200px 400px at -10% -10%, rgba(0, 255, 204, 0.08), transparent),
|
||||
radial-gradient(1200px 400px at 110% 110%, rgba(255, 0, 170, 0.08), transparent),
|
||||
rgba(12,12,18,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 204, 0.08), 0 0 30px rgba(255, 0, 170, 0.06) inset;
|
||||
}
|
||||
.player-card {
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(10,10,18,0.6));
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.player-card.playerA { border-color: rgba(0, 255, 204, 0.25); box-shadow: 0 0 12px rgba(0, 255, 204, 0.08) inset; }
|
||||
.player-card.playerB { border-color: rgba(255, 0, 170, 0.5); box-shadow: 0 0 12px rgba(255, 0, 170, 0.15) inset; }
|
||||
.player-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.player-card .label { color: #9ca3af; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s ease; }
|
||||
.player-card .label.winner-label { color: #ff8800; font-weight: 700; text-shadow: 0 0 8px rgba(255, 136, 0, 0.5); }
|
||||
.player-card .value { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; color: #9ca3af; transition: all 0.2s ease; }
|
||||
.player-card .value.winner-value { color: #ffffff; }
|
||||
.player-card .sub { margin-top: 6px; font-size: 12px; color: #9ca3af; }
|
||||
.player-card.playerA.winner {
|
||||
box-shadow: 0 0 0 1px rgba(0, 255, 204, 0.2) inset, 0 0 18px rgba(0, 255, 204, 0.14);
|
||||
border-color: rgba(0, 255, 204, 0.35);
|
||||
}
|
||||
.player-card.playerB.winner {
|
||||
box-shadow: 0 0 0 1px rgba(255, 0, 170, 0.3) inset, 0 0 18px rgba(255, 0, 170, 0.25);
|
||||
border-color: rgba(255, 0, 170, 0.7);
|
||||
}
|
||||
.chip {
|
||||
display: inline-block;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
.chip-win-a {
|
||||
border-color: rgba(0, 255, 204, 0.5);
|
||||
background: linear-gradient(90deg, rgba(0, 255, 204, 0.18), rgba(0, 255, 170, 0.10));
|
||||
}
|
||||
.chip-win-b {
|
||||
border-color: rgba(255, 0, 170, 0.5);
|
||||
background: linear-gradient(90deg, rgba(255, 0, 170, 0.18), rgba(255, 102, 204, 0.10));
|
||||
}
|
||||
.chip-draw {
|
||||
border-color: rgba(255, 255, 0, 0.5);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.14), rgba(255, 215, 0, 0.08));
|
||||
}
|
||||
|
||||
/* Margin text styling */
|
||||
.margin-text.margin-bold { font-weight: 700; }
|
||||
.margin-text.margin-bright { color: #ffffff; }
|
||||
|
||||
/* KPI tiles */
|
||||
.kpi-tile {
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(15,15,25,0.6));
|
||||
}
|
||||
.kpi-tile.a { box-shadow: 0 0 0 1px rgba(0,255,204,0.14) inset; }
|
||||
.kpi-tile.b { box-shadow: 0 0 0 1px rgba(255,0,170,0.14) inset; }
|
||||
.kpi-label { font-size: 12px; color: #9ca3af; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.kpi-value { font-size: 28px; font-weight: 800; margin-top: 2px; }
|
||||
.kpi-sublabel { font-size: 11px; color: #9ca3af; }
|
||||
.kpi-subvalue { font-size: 20px; font-weight: 700; margin-top: 2px; }
|
||||
|
||||
/* Win share bar */
|
||||
.winshare-bar {
|
||||
height: 16px;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.winshare-bar .seg { height: 100%; }
|
||||
.winshare-bar .seg.a { background: rgba(0,255,204,0.9); }
|
||||
.winshare-bar .seg.t { background: rgba(200,200,200,0.7); }
|
||||
.winshare-bar .seg.b { background: rgba(255,0,170,0.9); }
|
||||
.badge { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; margin-right: 6px; }
|
||||
.badge.a { background: rgba(0,255,204,0.9); }
|
||||
.badge.t { background: rgba(200,200,200,0.7); }
|
||||
.badge.b { background: rgba(255,0,170,0.9); }
|
||||
|
||||
/* Histogram */
|
||||
.hist { position: relative; height: 120px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
|
||||
.hist .bar { position: absolute; bottom: 0; }
|
||||
.hist .zero-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.15); }
|
||||
|
||||
/* Sparkline */
|
||||
.spark { width: 100%; height: 140px; }
|
||||
|
||||
/* Filter label styling */
|
||||
.filter-label {
|
||||
font-size: 1em;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 0, 170, 0.95);
|
||||
text-shadow: 0 0 8px rgba(255, 0, 170, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-display);
|
||||
line-height: 1;
|
||||
}
|
||||
.filter-label.active {
|
||||
color: rgba(255, 0, 170, 1);
|
||||
text-shadow: 0 0 12px rgba(255, 0, 170, 0.5);
|
||||
}
|
||||
|
||||
/* Neon select dropdown */
|
||||
.neon-select {
|
||||
border-radius: 0.375rem;
|
||||
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));
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(148, 163, 184, 1);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.neon-select.active {
|
||||
border-color: rgba(34, 211, 238, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
|
||||
}
|
||||
.neon-select: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-select: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);
|
||||
}
|
||||
.neon-select option {
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Toast notification styles */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button lighting effect */
|
||||
.lit-up {
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
border-color: #10b981;
|
||||
color: white;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
283
src/routes/tools/beatleader-oauth/+page.svelte
Normal file
283
src/routes/tools/beatleader-oauth/+page.svelte
Normal file
@ -0,0 +1,283 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
let name = '';
|
||||
let clientId = '';
|
||||
let origin = '';
|
||||
let redirectUrls = '';
|
||||
let scopes: string[] = ['scp:profile', 'scp:offline_access'];
|
||||
let iconFile: File | null = null;
|
||||
let message: string | null = null;
|
||||
let created: any = null;
|
||||
let existing: { client_id: string; client_secret: string } | null = null;
|
||||
let manualClientId = '';
|
||||
let manualClientSecret = '';
|
||||
let recommendedClientId = generateDefaultClientId();
|
||||
let copying: string | null = null;
|
||||
let returnTo: string | null = null;
|
||||
let blCredsStatus: 'unknown' | 'configured' | 'missing' = 'unknown';
|
||||
let blManageUrl: string | null = null;
|
||||
|
||||
onMount(async () => {
|
||||
if (browser) {
|
||||
try { origin = location.origin; } catch {}
|
||||
try { redirectUrls = origin + '/auth/beatleader/callback'; } catch {}
|
||||
}
|
||||
try {
|
||||
const sp = new URLSearchParams(location.search);
|
||||
const ret = sp.get('return');
|
||||
if (ret) returnTo = ret;
|
||||
} catch {}
|
||||
try {
|
||||
const redirect = location.pathname + (location.search || '');
|
||||
blManageUrl = `/tools/beatleader-oauth?return=${encodeURIComponent(redirect)}`;
|
||||
const statusRes = await fetch('/api/beatleader/oauth/status');
|
||||
if (statusRes.ok) {
|
||||
const st: any = await statusRes.json();
|
||||
blCredsStatus = st?.hasCreds ? 'configured' : 'missing';
|
||||
} else {
|
||||
blCredsStatus = 'unknown';
|
||||
}
|
||||
} catch {
|
||||
blCredsStatus = 'unknown';
|
||||
}
|
||||
try {
|
||||
const res = await fetch('/api/beatleader/oauth/creds');
|
||||
if (res.ok) {
|
||||
const data: any = await res.json();
|
||||
const hasId = typeof data?.client_id === 'string' && data.client_id.length > 0;
|
||||
const hasSecret = typeof data?.client_secret === 'string' && data.client_secret.length > 0;
|
||||
existing = hasId && hasSecret ? { client_id: data.client_id, client_secret: data.client_secret } : null;
|
||||
} else {
|
||||
existing = null;
|
||||
}
|
||||
} catch {}
|
||||
});
|
||||
|
||||
function onIconChange(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement;
|
||||
const f = input.files?.[0] ?? null;
|
||||
if (!f) {
|
||||
iconFile = null;
|
||||
return;
|
||||
}
|
||||
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
|
||||
if (!validTypes.includes(f.type)) {
|
||||
message = 'Icon must be JPG, PNG, or GIF';
|
||||
iconFile = null;
|
||||
return;
|
||||
}
|
||||
if (f.size > 5 * 1024 * 1024) {
|
||||
message = 'Icon must be under 5MB';
|
||||
iconFile = null;
|
||||
return;
|
||||
}
|
||||
message = null;
|
||||
iconFile = f;
|
||||
}
|
||||
|
||||
async function saveManual(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
message = null;
|
||||
try {
|
||||
const res = await fetch('/api/beatleader/oauth/creds', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ client_id: manualClientId, client_secret: manualClientSecret })
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
existing = { client_id: manualClientId, client_secret: manualClientSecret };
|
||||
manualClientId = '';
|
||||
manualClientSecret = '';
|
||||
message = 'Saved credentials.';
|
||||
} catch (err) {
|
||||
message = err instanceof Error ? err.message : 'Failed to save credentials';
|
||||
}
|
||||
}
|
||||
|
||||
async function register(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
message = null;
|
||||
created = null;
|
||||
try {
|
||||
// Perform registration directly against BeatLeader using browser cookies (must be logged in on beatleader.com)
|
||||
const url = new URL('https://api.beatleader.com/developer/app');
|
||||
url.searchParams.set('name', name);
|
||||
url.searchParams.set('clientId', clientId || generateClientId());
|
||||
url.searchParams.set('scopes', scopes.join(','));
|
||||
url.searchParams.set('redirectUrls', redirectUrls);
|
||||
|
||||
let blRes: Response;
|
||||
if (iconFile) {
|
||||
const buf = await iconFile.arrayBuffer();
|
||||
blRes = await fetch(url.toString(), {
|
||||
method: 'POST',
|
||||
body: buf,
|
||||
credentials: 'include'
|
||||
});
|
||||
} else {
|
||||
blRes = await fetch(url.toString(), {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
});
|
||||
}
|
||||
|
||||
if (!blRes.ok) throw new Error(await blRes.text());
|
||||
const data = await blRes.json();
|
||||
created = data;
|
||||
|
||||
const savedClientId = data?.clientId ?? data?.client_id;
|
||||
const savedClientSecret = data?.clientSecret ?? data?.client_secret;
|
||||
if (!savedClientId || !savedClientSecret) throw new Error('BeatLeader response missing credentials');
|
||||
|
||||
// Persist credentials locally
|
||||
const saveRes = await fetch('/api/beatleader/oauth/creds', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ client_id: savedClientId, client_secret: savedClientSecret })
|
||||
});
|
||||
if (!saveRes.ok) throw new Error(await saveRes.text());
|
||||
|
||||
existing = { client_id: savedClientId, client_secret: savedClientSecret };
|
||||
message = 'Registered successfully. Credentials saved.';
|
||||
} catch (err) {
|
||||
const base = err instanceof Error ? err.message : 'Registration failed';
|
||||
message = base || 'Registration failed. Ensure you are logged into BeatLeader in this browser.';
|
||||
}
|
||||
}
|
||||
|
||||
function generateClientId(): string {
|
||||
return 'bl_' + Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
|
||||
}
|
||||
|
||||
function generateDefaultClientId(): string {
|
||||
try {
|
||||
// Prefer uuid for readability; strip dashes
|
||||
const uuid = (crypto?.randomUUID?.() ?? '') as string;
|
||||
if (uuid) return 'bl_' + uuid.replace(/-/g, '');
|
||||
} catch {}
|
||||
return generateClientId();
|
||||
}
|
||||
|
||||
async function copy(text: string, kind: string) {
|
||||
try {
|
||||
copying = kind;
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setTimeout(() => (copying = null), 800);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">BeatLeader OAuth Setup</h1>
|
||||
<p class="mt-2 text-muted">Register an OAuth application and store credentials for this site.</p>
|
||||
|
||||
<div class="mt-2 text-xs text-muted flex flex-wrap items-center gap-2">
|
||||
{#if blCredsStatus === 'unknown'}
|
||||
<span class="rounded bg-white/10 px-2 py-1">Checking BeatLeader access…</span>
|
||||
{:else if blCredsStatus === 'configured'}
|
||||
<span class="rounded bg-emerald-500/20 text-emerald-300 px-2 py-1">BeatLeader access: Connected</span>
|
||||
{#if blManageUrl}
|
||||
<a class="underline hover:text-white" href={blManageUrl}>Manage</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="rounded bg-rose-500/20 text-rose-300 px-2 py-1">BeatLeader access: Not connected</span>
|
||||
{#if blManageUrl}
|
||||
<a class="underline hover:text-white" href={blManageUrl}>Configure</a>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if returnTo}
|
||||
<div class="mt-4">
|
||||
<a class="rounded-md border border-white/10 px-3 py-1.5 text-sm hover:border-white/20" href={returnTo}>Return to previous page</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-6 grid gap-3 max-w-xl text-sm">
|
||||
<div class="text-muted">Manual setup (recommended):</div>
|
||||
<ol class="list-decimal pl-5 grid gap-2">
|
||||
<li>
|
||||
Open the BeatLeader developer portal:
|
||||
<a class="underline" href="https://beatleader.com/developer" target="_blank" rel="noreferrer">beatleader.com/developer</a>
|
||||
</li>
|
||||
<li>
|
||||
Create a new application using the following values:
|
||||
<div class="mt-2 grid gap-2">
|
||||
<div>
|
||||
<div class="text-muted">Suggested Client ID</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<code>{recommendedClientId}</code>
|
||||
<button type="button" class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20" on:click={() => copy(recommendedClientId, 'clientId')}>
|
||||
{copying === 'clientId' ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted">Redirect URL</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<code>{origin}/auth/beatleader/callback</code>
|
||||
<button type="button" class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20" on:click={() => copy(`${origin}/auth/beatleader/callback`, 'redirect')}>
|
||||
{copying === 'redirect' ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted">Scopes</div>
|
||||
<code>scp:profile{scopes.includes('scp:offline_access') ? ',scp:offline_access' : ''}</code>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
After creation, copy the shown client secret and paste both values below to save locally.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{#if existing}
|
||||
<div class="mt-4 text-sm">
|
||||
<div class="text-muted">Existing credentials found.</div>
|
||||
<div class="mt-1">Client ID: <code>{existing.client_id}</code></div>
|
||||
<div>Client Secret: <code>{existing.client_secret}</code></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<details class="mt-4">
|
||||
<summary class="cursor-pointer text-sm text-muted">Enter credentials manually</summary>
|
||||
<form class="mt-3 grid gap-3 max-w-xl" on:submit|preventDefault={saveManual}>
|
||||
<div>
|
||||
<label class="block text-sm text-muted" for="mClientId">Client ID</label>
|
||||
<input id="mClientId" class="w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={manualClientId} required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-muted" for="mClientSecret">Client Secret</label>
|
||||
<input id="mClientSecret" class="w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={manualClientSecret} required />
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn-neon">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
|
||||
|
||||
{#if message}
|
||||
<div class="mt-4 text-sm">{message}</div>
|
||||
{/if}
|
||||
|
||||
{#if created}
|
||||
<div class="mt-6 text-sm">
|
||||
<div><strong>Client ID:</strong> <code>{created.clientId}</code></div>
|
||||
<div><strong>Client Secret:</strong> <code>{created.clientSecret}</code></div>
|
||||
<div class="mt-2">
|
||||
<a class="rounded-md border border-white/10 px-3 py-1.5 text-sm hover:border-white/20" href="/auth/beatleader/login">Proceed to Login</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
453
src/routes/tools/beatleader-playlist-gap/+page.svelte
Normal file
453
src/routes/tools/beatleader-playlist-gap/+page.svelte
Normal file
@ -0,0 +1,453 @@
|
||||
<script lang="ts">
|
||||
import SongPlayer from '$lib/components/SongPlayer.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
type Difficulty = {
|
||||
name: string;
|
||||
characteristic: string;
|
||||
};
|
||||
|
||||
type PlaylistSong = {
|
||||
hash: string;
|
||||
difficulties?: Difficulty[];
|
||||
key?: string;
|
||||
levelId?: string;
|
||||
songName?: string;
|
||||
};
|
||||
|
||||
type Playlist = {
|
||||
playlistTitle?: string;
|
||||
songs?: PlaylistSong[];
|
||||
playlistAuthor?: string;
|
||||
image?: string | null;
|
||||
coverImage?: string | null;
|
||||
description?: string;
|
||||
allowDuplicates?: boolean;
|
||||
customData?: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
type BeatLeaderScore = {
|
||||
leaderboard?: {
|
||||
id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
song?: { hash?: string | null };
|
||||
};
|
||||
};
|
||||
|
||||
type BeatLeaderScoresResponse = {
|
||||
data?: BeatLeaderScore[];
|
||||
};
|
||||
|
||||
type MapMeta = {
|
||||
songName?: string;
|
||||
key?: string;
|
||||
coverURL?: string;
|
||||
mapper?: string;
|
||||
};
|
||||
|
||||
let playerId = '';
|
||||
let selectedFileName: string | null = null;
|
||||
let parsedTitle: string | null = null;
|
||||
let playlistSongs: PlaylistSong[] = [];
|
||||
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
|
||||
let results: PlaylistSong[] = [];
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
let loadingMeta = false;
|
||||
let blUrlByHash: Record<string, string> = {};
|
||||
|
||||
// Persist playerId across refreshes (client-side only)
|
||||
let hasMounted = false;
|
||||
const PLAYER_ID_KEY = 'ps_bl_gap_playerId';
|
||||
const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
|
||||
type PersistedPlayerId = {
|
||||
value: string;
|
||||
expiresAt: number;
|
||||
};
|
||||
|
||||
function loadPlayerIdFromStorage(): void {
|
||||
if (typeof localStorage === 'undefined') return;
|
||||
const raw = localStorage.getItem(PLAYER_ID_KEY);
|
||||
if (!raw) return;
|
||||
try {
|
||||
const parsed = JSON.parse(raw) as Partial<PersistedPlayerId> | string;
|
||||
if (typeof parsed === 'string') {
|
||||
playerId = parsed;
|
||||
return;
|
||||
}
|
||||
const expiresAt = typeof parsed?.expiresAt === 'number' ? parsed.expiresAt : 0;
|
||||
if (expiresAt && Date.now() > expiresAt) {
|
||||
localStorage.removeItem(PLAYER_ID_KEY);
|
||||
return;
|
||||
}
|
||||
const value = typeof parsed?.value === 'string' ? parsed.value : '';
|
||||
if (value) playerId = value;
|
||||
} catch {
|
||||
// Backward-compat for plain string values
|
||||
playerId = raw;
|
||||
}
|
||||
}
|
||||
onMount(() => {
|
||||
try {
|
||||
loadPlayerIdFromStorage();
|
||||
} finally {
|
||||
hasMounted = true;
|
||||
}
|
||||
});
|
||||
$: if (hasMounted && typeof localStorage !== 'undefined') {
|
||||
if (playerId && playerId.trim().length > 0) {
|
||||
const record: PersistedPlayerId = { value: playerId, expiresAt: Date.now() + WEEK_MS };
|
||||
localStorage.setItem(PLAYER_ID_KEY, JSON.stringify(record));
|
||||
} else {
|
||||
localStorage.removeItem(PLAYER_ID_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
async function onFileChange(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
selectedFileName = file.name;
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
playlistSongs = [];
|
||||
parsedTitle = null;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text) as Playlist;
|
||||
const songs = Array.isArray(data?.songs) ? data.songs : [];
|
||||
const cleaned = songs
|
||||
.filter((s) => s && typeof s.hash === 'string' && s.hash.trim().length > 0)
|
||||
.map((s) => ({
|
||||
hash: s.hash.trim(),
|
||||
difficulties: Array.isArray(s.difficulties) ? s.difficulties : [],
|
||||
key: s.key,
|
||||
levelId: s.levelId,
|
||||
songName: s.songName
|
||||
}));
|
||||
if (cleaned.length === 0) {
|
||||
throw new Error('No valid songs found in playlist.');
|
||||
}
|
||||
playlistSongs = cleaned;
|
||||
parsedTitle = data?.playlistTitle ?? null;
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Failed to parse playlist file.';
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAllScoresAnyTime(player: string, maxPages = 200): Promise<BeatLeaderScore[]> {
|
||||
const pageSize = 100;
|
||||
let page = 1;
|
||||
const all: BeatLeaderScore[] = [];
|
||||
while (page <= maxPages) {
|
||||
const url = `/api/beatleader/player/${encodeURIComponent(player)}?scores=1&count=${pageSize}&page=${page}&sortBy=date&order=desc`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Failed to fetch scores for ${player}: ${res.status}`);
|
||||
const data = (await res.json()) as BeatLeaderScoresResponse;
|
||||
const batch = data.data ?? [];
|
||||
if (batch.length === 0) break;
|
||||
all.push(...batch);
|
||||
page += 1;
|
||||
}
|
||||
return all;
|
||||
}
|
||||
|
||||
async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const data: any = await res.json();
|
||||
const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
|
||||
return {
|
||||
songName: data?.metadata?.songName ?? data?.name ?? undefined,
|
||||
key: data?.id ?? undefined,
|
||||
coverURL: cover,
|
||||
mapper: data?.uploader?.name ?? undefined
|
||||
};
|
||||
} catch {
|
||||
return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMetaForResults(items: PlaylistSong[]): Promise<void> {
|
||||
const needed = Array.from(new Set(items.map((i) => i.hash.toLowerCase()))).filter((h) => !metaByHash[h]);
|
||||
if (needed.length === 0) return;
|
||||
loadingMeta = true;
|
||||
for (const h of needed) {
|
||||
const meta = await fetchBeatSaverMeta(h);
|
||||
if (meta) metaByHash = { ...metaByHash, [h]: meta };
|
||||
}
|
||||
loadingMeta = false;
|
||||
}
|
||||
|
||||
type BLDifficulty = {
|
||||
modeName?: string;
|
||||
difficultyName?: string;
|
||||
value?: number;
|
||||
ModeName?: string;
|
||||
DifficultyName?: string;
|
||||
Value?: number;
|
||||
};
|
||||
type BLLeaderboardInfo = {
|
||||
id?: string | number | null;
|
||||
Id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
LeaderboardId?: string | number | null;
|
||||
difficulty?: BLDifficulty;
|
||||
Difficulty?: BLDifficulty;
|
||||
};
|
||||
type BLLeaderboardsByHashResponse = {
|
||||
leaderboards?: BLLeaderboardInfo[];
|
||||
Leaderboards?: BLLeaderboardInfo[];
|
||||
};
|
||||
|
||||
function normalizeName(name?: string | null): string {
|
||||
return (name ?? '').toString().toLowerCase().replace(/\s+/g, '');
|
||||
}
|
||||
function difficultyRankIndex(diffName?: string | null): number {
|
||||
const order = ['easy', 'normal', 'hard', 'expert', 'expert+', 'expertplus'];
|
||||
const n = normalizeName(diffName).replace('expertplus', 'expert+');
|
||||
const idx = order.indexOf(n);
|
||||
return idx === -1 ? -1 : idx;
|
||||
}
|
||||
function getDifficulty(obj?: BLDifficulty | null): BLDifficulty {
|
||||
const o = obj ?? {} as BLDifficulty;
|
||||
return {
|
||||
modeName: (o.modeName ?? (o as any).ModeName) as string | undefined,
|
||||
difficultyName: (o.difficultyName ?? (o as any).DifficultyName) as string | undefined,
|
||||
value: (o.value ?? (o as any).Value) as number | undefined
|
||||
};
|
||||
}
|
||||
function pickPreferredLeaderboard(lbs: BLLeaderboardInfo[] | null | undefined): BLLeaderboardInfo | null {
|
||||
if (!Array.isArray(lbs) || lbs.length === 0) return null;
|
||||
const getDiff = (lb: BLLeaderboardInfo) => getDifficulty(lb.difficulty ?? (lb as any).Difficulty);
|
||||
const isStandard = (lb: BLLeaderboardInfo) => normalizeName(getDiff(lb)?.modeName) === 'standard';
|
||||
const inStandard = lbs.filter(isStandard);
|
||||
const pool = inStandard.length > 0 ? inStandard : lbs;
|
||||
const expertPlus = pool.find((lb) => {
|
||||
const n = normalizeName(getDiff(lb)?.difficultyName);
|
||||
return n === 'expertplus' || n === 'expert+';
|
||||
});
|
||||
if (expertPlus) return expertPlus;
|
||||
// Fallback to highest difficulty by known order, then by numeric value if available
|
||||
const byKnownOrder = [...pool].sort((a, b) => difficultyRankIndex(getDiff(a)?.difficultyName) - difficultyRankIndex(getDiff(b)?.difficultyName));
|
||||
const bestByOrder = byKnownOrder[byKnownOrder.length - 1];
|
||||
if (bestByOrder && difficultyRankIndex(getDiff(bestByOrder)?.difficultyName) >= 0) return bestByOrder;
|
||||
const byValue = [...pool].sort((a, b) => (getDiff(a)?.value ?? 0) - (getDiff(b)?.value ?? 0));
|
||||
return byValue[byValue.length - 1] ?? pool[0] ?? null;
|
||||
}
|
||||
async function fetchBLLeaderboardsByHash(hash: string): Promise<BLLeaderboardInfo[] | null> {
|
||||
try {
|
||||
const res = await fetch(`/api/beatleader?path=${encodeURIComponent('/leaderboards/hash/' + hash)}`);
|
||||
if (!res.ok) return null;
|
||||
const data = (await res.json()) as BLLeaderboardsByHashResponse | unknown;
|
||||
const leaderboards = (data as any)?.leaderboards ?? (data as any)?.Leaderboards;
|
||||
return Array.isArray(leaderboards) ? (leaderboards as BLLeaderboardInfo[]) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function extractLeaderboardId(lb: BLLeaderboardInfo | null): string | null {
|
||||
if (!lb) return null;
|
||||
const anyLb: any = lb as any;
|
||||
const id = anyLb.id ?? anyLb.leaderboardId ?? anyLb.Id ?? anyLb.LeaderboardId;
|
||||
return id != null ? String(id) : null;
|
||||
}
|
||||
function buildBLUrlFromLeaderboard(lb: BLLeaderboardInfo | null, hash: string): string {
|
||||
const id = extractLeaderboardId(lb);
|
||||
if (id && id.length > 0) {
|
||||
return `https://beatleader.com/leaderboard/global/${id}`;
|
||||
}
|
||||
// Fallback: search by hash on the site
|
||||
return `https://beatleader.com/leaderboards?search=${encodeURIComponent(hash)}`;
|
||||
}
|
||||
|
||||
async function openBeatLeader(hash: string): Promise<void> {
|
||||
const key = (hash ?? '').toLowerCase();
|
||||
let url = blUrlByHash[key];
|
||||
if (!url) {
|
||||
const lbs = await fetchBLLeaderboardsByHash(key);
|
||||
const picked = pickPreferredLeaderboard(lbs ?? undefined);
|
||||
url = buildBLUrlFromLeaderboard(picked, hash);
|
||||
blUrlByHash = { ...blUrlByHash, [key]: url };
|
||||
}
|
||||
if (typeof window !== 'undefined' && url) {
|
||||
window.open(url, '_blank', 'noopener');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadPlaylist(): void {
|
||||
const title = `playlist_gap_${playerId || 'player'}`;
|
||||
const payload = {
|
||||
playlistTitle: title,
|
||||
playlistAuthor: 'SaberList Tool',
|
||||
songs: results.map((s) => ({ hash: s.hash, difficulties: s.difficulties ?? [] })),
|
||||
description: `Subset of ${(parsedTitle ?? 'playlist')} that ${playerId} has not played. Generated ${new Date().toISOString()}`,
|
||||
allowDuplicates: false,
|
||||
customData: {}
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${title}.bplist`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function onAnalyze(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
metaByHash = {};
|
||||
if (!playerId.trim()) {
|
||||
errorMsg = 'Please enter a BeatLeader player ID or SteamID64.';
|
||||
return;
|
||||
}
|
||||
if (playlistSongs.length === 0) {
|
||||
errorMsg = 'Please select a valid .bplist file first.';
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
const scores = await fetchAllScoresAnyTime(playerId.trim(), 150);
|
||||
const playedHashes = new Set<string>();
|
||||
for (const s of scores) {
|
||||
const raw = s.leaderboard?.song?.hash ?? undefined;
|
||||
if (!raw) continue;
|
||||
playedHashes.add(String(raw).toLowerCase());
|
||||
}
|
||||
const unplayed: PlaylistSong[] = [];
|
||||
for (const song of playlistSongs) {
|
||||
const h = song.hash?.toLowerCase?.() ?? '';
|
||||
if (!h) continue;
|
||||
if (!playedHashes.has(h)) {
|
||||
unplayed.push(song);
|
||||
}
|
||||
}
|
||||
results = unplayed;
|
||||
loadMetaForResults(unplayed);
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Playlist Gap</h1>
|
||||
<p class="mt-2 text-muted">Upload a .bplist and enter a player ID to find songs they have not played.</p>
|
||||
|
||||
<form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onAnalyze}>
|
||||
<div class="sm:col-span-2 lg:col-span-2">
|
||||
<label class="block text-sm text-muted">Playlist file (.bplist)
|
||||
<input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="file" accept=".bplist,application/json" on:change={onFileChange} />
|
||||
</label>
|
||||
{#if selectedFileName}
|
||||
<div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-muted">Player 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={playerId} placeholder="7656119... or BL ID" required />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn-neon" disabled={loading}>
|
||||
{#if loading}
|
||||
Loading...
|
||||
{:else}
|
||||
Analyze
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="mt-4 text-danger">{errorMsg}</div>
|
||||
{/if}
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex items-center gap-3 text-sm text-muted">
|
||||
<span>{results.length} songs not played</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each results as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if metaByHash[item.hash?.toLowerCase?.() || '']?.coverURL}
|
||||
<img
|
||||
src={metaByHash[item.hash.toLowerCase()].coverURL}
|
||||
alt={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
|
||||
{metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
|
||||
</div>
|
||||
{#if metaByHash[item.hash.toLowerCase()]?.mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash.toLowerCase()]?.mapper}</div>
|
||||
{/if}
|
||||
<div class="mt-3">
|
||||
<SongPlayer hash={item.hash} preferBeatLeader={true} />
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={blUrlByHash[item.hash.toLowerCase()] ?? undefined}
|
||||
on:click|preventDefault={() => openBeatLeader(item.hash)}
|
||||
on:auxclick|preventDefault={() => openBeatLeader(item.hash)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatLeader"
|
||||
>BL</a>
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={metaByHash[item.hash.toLowerCase()]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash.toLowerCase()]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatSaver"
|
||||
>BSR</a>
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
|
||||
on:click={() => { const key = metaByHash[item.hash.toLowerCase()]?.key; if (key) navigator.clipboard.writeText(`!bsr ${key}`); }}
|
||||
disabled={!metaByHash[item.hash.toLowerCase()]?.key}
|
||||
title="Copy !bsr"
|
||||
>Copy !bsr</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
.btn-neon { cursor: pointer; }
|
||||
.card-surface { border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
|
||||
.text-muted { color: rgba(255,255,255,0.7); }
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,293 +0,0 @@
|
||||
<script lang="ts">
|
||||
import MapCard from '$lib/components/MapCard.svelte';
|
||||
import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
|
||||
import HasToolAccess from '$lib/components/HasToolAccess.svelte';
|
||||
import {
|
||||
type MapMeta,
|
||||
type StarInfo,
|
||||
type BeatLeaderScore,
|
||||
type Difficulty,
|
||||
type BeatLeaderPlayerProfile,
|
||||
loadMetaForHashes,
|
||||
loadStarsForHashes,
|
||||
normalizeDifficultyName,
|
||||
parseTimeset,
|
||||
getCutoffEpochFromMonths,
|
||||
toPlaylistJson,
|
||||
downloadPlaylist,
|
||||
fetchAllRecentScoresForDiff,
|
||||
TOOL_REQUIREMENTS
|
||||
} from '$lib/utils/plebsaber-utils';
|
||||
|
||||
type SongItem = {
|
||||
hash: string;
|
||||
difficulties: Difficulty[];
|
||||
timeset: number;
|
||||
leaderboardId?: string;
|
||||
};
|
||||
|
||||
export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
|
||||
|
||||
const requirement = TOOL_REQUIREMENTS['compare-histories'];
|
||||
|
||||
$: playerProfile = data?.player ?? null;
|
||||
$: adminRank = data?.adminRank ?? null;
|
||||
$: adminPlayer = data?.adminPlayer ?? null;
|
||||
|
||||
let playerA = '';
|
||||
let playerB = '';
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
let results: SongItem[] = [];
|
||||
let loadingMeta = false;
|
||||
|
||||
// Sorting and pagination state
|
||||
let sortDir: 'asc' | 'desc' = 'desc';
|
||||
let page = 1;
|
||||
let pageSize: number | string = 24;
|
||||
$: pageSizeNum = Number(pageSize) || 24;
|
||||
|
||||
// Configurable lookback windows (months)
|
||||
const monthsA = 24; // default 24 months
|
||||
const monthsB = 24; // default 24 months
|
||||
|
||||
// Derived lists - always sort by date
|
||||
$: sortedResults = [...results].sort((a, b) => {
|
||||
const cmp = a.timeset - b.timeset;
|
||||
return sortDir === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
$: totalPages = Math.max(1, Math.ceil(sortedResults.length / pageSizeNum));
|
||||
$: page = Math.min(page, totalPages);
|
||||
$: pageItems = sortedResults.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
|
||||
|
||||
// Metadata caches
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
let starsByKey: Record<string, StarInfo> = {};
|
||||
let loadingStars = false;
|
||||
|
||||
// Lazy load metadata when pageItems changes
|
||||
$: if (pageItems.length > 0) {
|
||||
loadPageMetadata(pageItems);
|
||||
}
|
||||
|
||||
async function loadPageMetadata(items: SongItem[]): Promise<void> {
|
||||
const hashes = items.map(i => i.hash);
|
||||
|
||||
// Load BeatSaver metadata
|
||||
loadingMeta = true;
|
||||
metaByHash = await loadMetaForHashes(hashes, metaByHash);
|
||||
loadingMeta = false;
|
||||
|
||||
// Load star ratings
|
||||
loadingStars = true;
|
||||
starsByKey = await loadStarsForHashes(hashes, starsByKey, normalizeDifficultyName);
|
||||
loadingStars = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handleDownloadPlaylist(): void {
|
||||
const payload = toPlaylistJson(
|
||||
results,
|
||||
'beatleader_compare_players',
|
||||
`A's recent songs not played by B. Generated ${new Date().toISOString()}`
|
||||
);
|
||||
downloadPlaylist(payload);
|
||||
}
|
||||
|
||||
async function onCompare() {
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
const a = playerA.trim();
|
||||
const b = playerB.trim();
|
||||
if (!a || !b) {
|
||||
errorMsg = 'Please enter both Player A and Player B IDs.';
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
const cutoff = getCutoffEpochFromMonths(monthsA);
|
||||
const cutoffB = getCutoffEpochFromMonths(monthsB);
|
||||
const [aScores, bScores] = await Promise.all([
|
||||
fetchAllRecentScoresForDiff(a, cutoff, 'ExpertPlus', 15),
|
||||
fetchAllRecentScoresForDiff(b, cutoffB, 'ExpertPlus', 100)
|
||||
]);
|
||||
|
||||
const bLeaderboardIds = new Set<string>();
|
||||
const bExpertPlusKeys = new Set<string>(); // `${hashLower}|ExpertPlus|${modeName}`
|
||||
for (const s of bScores) {
|
||||
const rawHash = s.leaderboard?.song?.hash ?? undefined;
|
||||
const hashLower = rawHash ? String(rawHash).toLowerCase() : undefined;
|
||||
const lbIdRaw = (s.leaderboard as any)?.id ?? (s.leaderboard as any)?.leaderboardId;
|
||||
const lbId = lbIdRaw != null ? String(lbIdRaw) : undefined;
|
||||
const bDiffValue = s.leaderboard?.difficulty?.value ?? undefined;
|
||||
const bModeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
const bDiffName = normalizeDifficultyName(bDiffValue);
|
||||
if (bDiffName !== 'ExpertPlus') continue; // ignore non-ExpertPlus for B
|
||||
if (lbId) bLeaderboardIds.add(lbId);
|
||||
if (hashLower) bExpertPlusKeys.add(`${hashLower}|ExpertPlus|${bModeName}`);
|
||||
}
|
||||
|
||||
|
||||
const runSeen = new Set<string>(); // avoid duplicates within this run
|
||||
|
||||
const candidates: SongItem[] = [];
|
||||
for (const entry of aScores) {
|
||||
const t = parseTimeset(entry.timeset);
|
||||
if (!t || t < cutoff) continue;
|
||||
|
||||
const rawHash = entry.leaderboard?.song?.hash ?? undefined;
|
||||
const diffValue = entry.leaderboard?.difficulty?.value ?? undefined;
|
||||
const modeName = entry.leaderboard?.difficulty?.modeName ?? 'Standard';
|
||||
const leaderboardIdRaw = (entry.leaderboard as any)?.id ?? (entry.leaderboard as any)?.leaderboardId;
|
||||
const leaderboardId = leaderboardIdRaw != null ? String(leaderboardIdRaw) : undefined;
|
||||
if (!rawHash) continue;
|
||||
const hashLower = String(rawHash).toLowerCase();
|
||||
const diffName = normalizeDifficultyName(diffValue);
|
||||
if (diffName !== 'ExpertPlus') continue; // Only compare ExpertPlus for A
|
||||
// B has played ExpertPlus of same map+mode if matching leaderboard or key exists
|
||||
if ((leaderboardId && bLeaderboardIds.has(leaderboardId)) || bExpertPlusKeys.has(`${hashLower}|${diffName}|${modeName}`)) continue;
|
||||
|
||||
|
||||
const key = `${rawHash}|${diffName}|${modeName}`;
|
||||
if (runSeen.has(key)) continue;
|
||||
runSeen.add(key);
|
||||
|
||||
candidates.push({
|
||||
hash: rawHash,
|
||||
difficulties: [{ name: diffName, characteristic: modeName ?? 'Standard' }],
|
||||
timeset: t,
|
||||
leaderboardId
|
||||
});
|
||||
}
|
||||
|
||||
candidates.sort((x, y) => y.timeset - x.timeset);
|
||||
const limited = candidates; // return all; pagination handled client-side
|
||||
|
||||
results = limited;
|
||||
page = 1;
|
||||
// Metadata will be loaded lazily via reactive statement when pageItems changes
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">Compare Play Histories</h1>
|
||||
<p class="mt-2 text-muted">Maps Player A has played that Player B hasn't — configurable lookback.</p>
|
||||
|
||||
<HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
|
||||
<PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare} currentPlayer={playerProfile}>
|
||||
<svelte:fragment slot="extra-buttons">
|
||||
{#if results.length > 0}
|
||||
<button type="button" class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={handleDownloadPlaylist}>Download .bplist</button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</PlayerCompareForm>
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="mt-4 text-danger">{errorMsg}</div>
|
||||
{/if}
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-muted">
|
||||
{results.length} songs
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
|
||||
<label class="flex items-center gap-2">
|
||||
<select class="neon-select" bind:value={sortDir}>
|
||||
<option value="desc">Newest First</option>
|
||||
<option value="asc">Oldest First</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Page size
|
||||
<select class="neon-select" bind:value={pageSize}>
|
||||
<option value={12}>12</option>
|
||||
<option value={24}>24</option>
|
||||
<option value={36}>36</option>
|
||||
<option value={48}>48</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
{#if loadingStars}
|
||||
<div class="mt-2 text-xs text-muted">Loading star ratings…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each pageItems as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<MapCard
|
||||
hash={item.hash}
|
||||
coverURL={metaByHash[item.hash]?.coverURL}
|
||||
songName={metaByHash[item.hash]?.songName}
|
||||
mapper={metaByHash[item.hash]?.mapper}
|
||||
stars={starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
|
||||
timeset={item.timeset}
|
||||
diffName={item.difficulties[0]?.name ?? 'ExpertPlus'}
|
||||
modeName={item.difficulties[0]?.characteristic ?? 'Standard'}
|
||||
leaderboardId={item.leaderboardId}
|
||||
beatsaverKey={metaByHash[item.hash]?.key}
|
||||
/>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if totalPages > 1}
|
||||
<div class="mt-6 flex items-center justify-center gap-2">
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>
|
||||
Prev
|
||||
</button>
|
||||
<span class="text-sm text-muted">Page {page} / {totalPages}</span>
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</HasToolAccess>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
|
||||
/* Neon select dropdown */
|
||||
.neon-select {
|
||||
border-radius: 0.375rem;
|
||||
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));
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(148, 163, 184, 1);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.neon-select: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-select: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);
|
||||
}
|
||||
.neon-select option {
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,701 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import MapCard from '$lib/components/MapCard.svelte';
|
||||
import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
|
||||
import HasToolAccess from '$lib/components/HasToolAccess.svelte';
|
||||
import {
|
||||
type MapMeta,
|
||||
type StarInfo,
|
||||
type BeatLeaderScore,
|
||||
type BeatLeaderScoresResponse,
|
||||
loadMetaForHashes,
|
||||
loadStarsForHashes,
|
||||
normalizeDifficultyName,
|
||||
parseTimeset,
|
||||
getCutoffEpochFromMonths,
|
||||
normalizeAccuracy,
|
||||
buildLatestByKey,
|
||||
fetchAllRecentScoresForDiff,
|
||||
fetchAllRecentScoresAllDiffs,
|
||||
mean,
|
||||
median,
|
||||
percentile,
|
||||
DIFFICULTIES,
|
||||
MODES,
|
||||
ONE_YEAR_SECONDS,
|
||||
TOOL_REQUIREMENTS,
|
||||
type BeatLeaderPlayerProfile
|
||||
} from '$lib/utils/plebsaber-utils';
|
||||
|
||||
type H2HItem = {
|
||||
hash: string;
|
||||
diffName: string;
|
||||
modeName: string;
|
||||
timeset: number; // most recent between the two
|
||||
accA: number | null;
|
||||
accB: number | null;
|
||||
rankA?: number;
|
||||
rankB?: number;
|
||||
leaderboardId?: string;
|
||||
};
|
||||
|
||||
export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
|
||||
|
||||
const requirement = TOOL_REQUIREMENTS['player-headtohead'];
|
||||
|
||||
$: playerProfile = data?.player ?? null;
|
||||
$: adminRank = data?.adminRank ?? null;
|
||||
$: adminPlayer = data?.adminPlayer ?? null;
|
||||
|
||||
let playerA = '';
|
||||
let playerB = '';
|
||||
const months = 24;
|
||||
|
||||
// UI state
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
|
||||
// Results state
|
||||
let items: H2HItem[] = [];
|
||||
let sortDir: 'asc' | 'desc' = 'desc';
|
||||
let page = 1;
|
||||
let pageSize: number | string = 24;
|
||||
let filterWinMargin: string = 'all'; // 'all', 'a1', 'a2', 'b1', 'b2'
|
||||
$: pageSizeNum = Number(pageSize) || 24;
|
||||
$: filtered = (() => {
|
||||
if (filterWinMargin === 'all') return items;
|
||||
if (filterWinMargin === 'a1') {
|
||||
return items.filter(i => {
|
||||
if (i.accA == null || i.accB == null) return false;
|
||||
return i.accA > i.accB && (i.accA - i.accB) > 1;
|
||||
});
|
||||
}
|
||||
if (filterWinMargin === 'a2') {
|
||||
return items.filter(i => {
|
||||
if (i.accA == null || i.accB == null) return false;
|
||||
return i.accA > i.accB && (i.accA - i.accB) > 2;
|
||||
});
|
||||
}
|
||||
if (filterWinMargin === 'b1') {
|
||||
return items.filter(i => {
|
||||
if (i.accA == null || i.accB == null) return false;
|
||||
return i.accB > i.accA && (i.accB - i.accA) > 1;
|
||||
});
|
||||
}
|
||||
if (filterWinMargin === 'b2') {
|
||||
return items.filter(i => {
|
||||
if (i.accA == null || i.accB == null) return false;
|
||||
return i.accB > i.accA && (i.accB - i.accA) > 2;
|
||||
});
|
||||
}
|
||||
return items;
|
||||
})();
|
||||
$: sorted = [...filtered].sort((a, b) => (sortDir === 'asc' ? a.timeset - b.timeset : b.timeset - a.timeset));
|
||||
$: totalPages = Math.max(1, Math.ceil(sorted.length / pageSizeNum));
|
||||
$: page = Math.min(page, totalPages);
|
||||
$: pageItems = sorted.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
|
||||
|
||||
// Metadata caches
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
let starsByKey: Record<string, StarInfo> = {};
|
||||
let loadingMeta = false;
|
||||
let loadingStars = false;
|
||||
|
||||
// Lazy load metadata when pageItems changes
|
||||
$: if (pageItems.length > 0) {
|
||||
loadPageMetadata(pageItems);
|
||||
}
|
||||
|
||||
async function loadPageMetadata(list: H2HItem[]): Promise<void> {
|
||||
const hashes = list.map(i => i.hash);
|
||||
|
||||
// Load BeatSaver metadata
|
||||
loadingMeta = true;
|
||||
metaByHash = await loadMetaForHashes(hashes, metaByHash);
|
||||
loadingMeta = false;
|
||||
|
||||
// Load star ratings
|
||||
loadingStars = true;
|
||||
starsByKey = await loadStarsForHashes(hashes, starsByKey, normalizeDifficultyName);
|
||||
loadingStars = false;
|
||||
}
|
||||
|
||||
function toH2HItems(aMap: Map<string, BeatLeaderScore>, bMap: Map<string, BeatLeaderScore>): H2HItem[] {
|
||||
const out: H2HItem[] = [];
|
||||
for (const [key, aScore] of aMap) {
|
||||
if (!bMap.has(key)) continue;
|
||||
const bScore = bMap.get(key)!;
|
||||
const [hashLower, diffName, modeName] = key.split('|');
|
||||
const rawHash = (aScore.leaderboard?.song?.hash ?? bScore.leaderboard?.song?.hash ?? hashLower);
|
||||
const hash = String(rawHash).toLowerCase();
|
||||
const tA = parseTimeset(aScore.timeset);
|
||||
const tB = parseTimeset(bScore.timeset);
|
||||
const accA = normalizeAccuracy((aScore.accuracy ?? aScore.acc) as number | undefined);
|
||||
const accB = normalizeAccuracy((bScore.accuracy ?? bScore.acc) as number | undefined);
|
||||
const lbIdRaw = (aScore.leaderboard as any)?.id ?? (aScore.leaderboard as any)?.leaderboardId ?? (bScore.leaderboard as any)?.id ?? (bScore.leaderboard as any)?.leaderboardId;
|
||||
const leaderboardId = lbIdRaw != null ? String(lbIdRaw) : undefined;
|
||||
out.push({
|
||||
hash,
|
||||
diffName,
|
||||
modeName,
|
||||
timeset: Math.max(tA, tB),
|
||||
accA,
|
||||
accB,
|
||||
rankA: aScore.rank,
|
||||
rankB: bScore.rank,
|
||||
leaderboardId
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
async function onCompare() {
|
||||
// Push current params into URL on user action
|
||||
updateUrl(false);
|
||||
errorMsg = null; items = []; metaByHash = {};
|
||||
const a = playerA.trim();
|
||||
const b = playerB.trim();
|
||||
if (!a || !b) { errorMsg = 'Please enter both Player A and Player B IDs.'; return; }
|
||||
loading = true;
|
||||
try {
|
||||
const cutoff = getCutoffEpochFromMonths(months);
|
||||
const [aScores, bScores] = await Promise.all([
|
||||
fetchAllRecentScoresAllDiffs(a, cutoff, normalizeDifficultyName, parseTimeset),
|
||||
fetchAllRecentScoresAllDiffs(b, cutoff, normalizeDifficultyName, parseTimeset)
|
||||
]);
|
||||
const aLatest = buildLatestByKey(aScores, cutoff - ONE_YEAR_SECONDS, normalizeDifficultyName, parseTimeset);
|
||||
const bLatest = buildLatestByKey(bScores, cutoff - ONE_YEAR_SECONDS, normalizeDifficultyName, parseTimeset);
|
||||
const combined = toH2HItems(aLatest, bLatest);
|
||||
combined.sort((x, y) => y.timeset - x.timeset);
|
||||
items = combined;
|
||||
page = 1;
|
||||
// Metadata will be loaded lazily via reactive statement when pageItems changes
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const sp = new URLSearchParams(location.search);
|
||||
const p = sp.get('page');
|
||||
if (p) page = Math.max(1, Number(p) || 1);
|
||||
const dir = sp.get('dir');
|
||||
if (dir === 'asc' || dir === 'desc') sortDir = dir;
|
||||
const size = sp.get('size') ?? sp.get('ps');
|
||||
if (size) pageSize = Number(size) || pageSize;
|
||||
const filter = sp.get('filter');
|
||||
if (filter && ['all', 'a1', 'a2', 'b1', 'b2'].includes(filter)) filterWinMargin = filter;
|
||||
initialized = true;
|
||||
});
|
||||
|
||||
// Short labels for players
|
||||
$: playerAId = playerA.trim();
|
||||
$: playerBId = playerB.trim();
|
||||
$: idShortA = playerAId ? playerAId.slice(0, 6) : 'A';
|
||||
$: idShortB = playerBId ? playerBId.slice(0, 6) : 'B';
|
||||
|
||||
// URL param sync
|
||||
let initialized = false;
|
||||
let urlSyncInProgress = false;
|
||||
function updateUrl(replace = true) {
|
||||
if (!initialized || urlSyncInProgress) return;
|
||||
try {
|
||||
urlSyncInProgress = true;
|
||||
const sp = new URLSearchParams(location.search);
|
||||
// playerA and playerB are now handled by PlayerCompareForm component
|
||||
sp.delete('diff');
|
||||
sp.delete('mode');
|
||||
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');
|
||||
if (filterWinMargin !== 'all') sp.set('filter', filterWinMargin); else sp.delete('filter');
|
||||
const qs = sp.toString();
|
||||
const url = location.pathname + (qs ? `?${qs}` : '');
|
||||
if (replace) history.replaceState(null, '', url); else history.pushState(null, '', url);
|
||||
} finally {
|
||||
urlSyncInProgress = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Sync URL on state changes
|
||||
$: updateUrl(true);
|
||||
|
||||
// ===== Derived Stats for Visualizations =====
|
||||
$: comparable = items.filter((i) => i.accA != null && i.accB != null) as Array<{
|
||||
hash: string; diffName: string; modeName: string; timeset: number; accA: number; accB: number; rankA?: number; rankB?: number; leaderboardId?: string;
|
||||
}>;
|
||||
$: totalComparable = comparable.length;
|
||||
$: winsA = comparable.filter((i) => i.accA > i.accB).length;
|
||||
$: winsB = comparable.filter((i) => i.accB > i.accA).length;
|
||||
$: ties = comparable.filter((i) => i.accA === i.accB).length;
|
||||
|
||||
$: accAList = comparable.map((i) => i.accA);
|
||||
$: accBList = comparable.map((i) => i.accB);
|
||||
$: avgAccA = mean(accAList);
|
||||
$: avgAccB = mean(accBList);
|
||||
$: medAccA = median(accAList);
|
||||
$: medAccB = median(accBList);
|
||||
|
||||
$: deltas = comparable.map((i) => i.accA - i.accB);
|
||||
$: absMargins = deltas.map((x) => Math.abs(x));
|
||||
$: avgMargin = mean(absMargins);
|
||||
$: p95Margin = percentile(absMargins, 95);
|
||||
|
||||
$: chronological = [...comparable].sort((a, b) => a.timeset - b.timeset);
|
||||
$: longestA = (() => {
|
||||
let cur = 0, best = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accA > i.accB) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
|
||||
}
|
||||
return best;
|
||||
})();
|
||||
$: longestB = (() => {
|
||||
let cur = 0, best = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accB > i.accA) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
|
||||
}
|
||||
return best;
|
||||
})();
|
||||
|
||||
// Win share (bar + donut)
|
||||
$: shareA = totalComparable ? winsA / totalComparable : 0;
|
||||
$: shareT = totalComparable ? ties / totalComparable : 0;
|
||||
$: shareB = totalComparable ? winsB / totalComparable : 0;
|
||||
// Donut chart calculations
|
||||
const donutR = 44;
|
||||
$: donutCircumference = 2 * Math.PI * donutR;
|
||||
$: donutALen = donutCircumference * shareA;
|
||||
$: donutTLen = donutCircumference * shareT;
|
||||
$: donutBLen = donutCircumference * shareB;
|
||||
|
||||
// Histogram of signed margins (A - B)
|
||||
$: maxAbsDelta = Math.max(0, ...deltas.map((x) => Math.abs(x)));
|
||||
$: histBins = 14;
|
||||
$: histRangeMin = -maxAbsDelta;
|
||||
$: histRangeMax = maxAbsDelta;
|
||||
$: histBinWidth = histBins ? (histRangeMax - histRangeMin) / histBins : 1;
|
||||
$: histogram = (() => {
|
||||
const bins = Array.from({ length: histBins }, () => 0);
|
||||
for (const x of deltas) {
|
||||
if (!Number.isFinite(x)) continue;
|
||||
let idx = Math.floor((x - histRangeMin) / histBinWidth);
|
||||
if (idx < 0) idx = 0; if (idx >= histBins) idx = histBins - 1;
|
||||
bins[idx] += 1;
|
||||
}
|
||||
return bins;
|
||||
})();
|
||||
$: histMaxCount = Math.max(1, ...histogram);
|
||||
|
||||
// Cumulative wins over time sparkline
|
||||
$: cumSeries = (() => {
|
||||
const pts: { t: number; a: number; b: number }[] = [];
|
||||
let a = 0, b = 0;
|
||||
for (const i of chronological) {
|
||||
if (i.accA > i.accB) a += 1; else if (i.accB > i.accA) b += 1;
|
||||
pts.push({ t: i.timeset, a, b });
|
||||
}
|
||||
return pts;
|
||||
})();
|
||||
$: tMin = cumSeries.length ? cumSeries[0].t : 0;
|
||||
$: tMax = cumSeries.length ? cumSeries[cumSeries.length - 1].t : 1;
|
||||
function mapX(t: number, w: number): number {
|
||||
if (tMax === tMin) return 0;
|
||||
return ((t - tMin) / (tMax - tMin)) * w;
|
||||
}
|
||||
function mapY(v: number, h: number, vMax?: number): number {
|
||||
const maxV = vMax ?? Math.max(1, cumSeries.length ? Math.max(cumSeries[cumSeries.length - 1].a, cumSeries[cumSeries.length - 1].b) : 1);
|
||||
return h - (v / maxV) * h;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">Player Head-to-Head</h1>
|
||||
<p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
|
||||
|
||||
<HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
|
||||
<PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} currentPlayer={playerProfile} />
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="mt-4 text-danger">{errorMsg}</div>
|
||||
{/if}
|
||||
|
||||
{#if items.length > 0}
|
||||
<!-- KPI Tiles -->
|
||||
<div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-label">Shared Maps</div>
|
||||
<div class="kpi-value">{totalComparable}</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-label">Wins {idShortA}</div>
|
||||
<div class="kpi-value">{winsA}</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-label">Wins {idShortB}</div>
|
||||
<div class="kpi-value">{winsB}</div>
|
||||
</div>
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-label">Ties</div>
|
||||
<div class="kpi-value">{ties}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Avg Acc {idShortA}</div>
|
||||
<div class="kpi-subvalue">{avgAccA.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Avg Acc {idShortB}</div>
|
||||
<div class="kpi-subvalue">{avgAccB.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Median {idShortA}</div>
|
||||
<div class="kpi-subvalue">{medAccA.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Median {idShortB}</div>
|
||||
<div class="kpi-subvalue">{medAccB.toFixed(2)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-sublabel">Avg Win Margin</div>
|
||||
<div class="kpi-subvalue">{avgMargin.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile">
|
||||
<div class="kpi-sublabel">95th %ile Margin</div>
|
||||
<div class="kpi-subvalue">{p95Margin.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="kpi-tile a">
|
||||
<div class="kpi-sublabel">Longest Streak {idShortA}</div>
|
||||
<div class="kpi-subvalue">{longestA}</div>
|
||||
</div>
|
||||
<div class="kpi-tile b">
|
||||
<div class="kpi-sublabel">Longest Streak {idShortB}</div>
|
||||
<div class="kpi-subvalue">{longestB}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Win Share: Bar + Donut -->
|
||||
<div class="mt-6 grid gap-4 lg:grid-cols-2">
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Win Share</div>
|
||||
<div class="winshare-bar">
|
||||
<div class="seg a" style={`width: ${(shareA * 100).toFixed(2)}%`}></div>
|
||||
<div class="seg t" style={`width: ${(shareT * 100).toFixed(2)}%`}></div>
|
||||
<div class="seg b" style={`width: ${(shareB * 100).toFixed(2)}%`}></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-muted flex gap-3">
|
||||
<span class="badge a"></span> {idShortA} {(shareA * 100).toFixed(1)}%
|
||||
<span class="badge t"></span> Ties {(shareT * 100).toFixed(1)}%
|
||||
<span class="badge b"></span> {idShortB} {(shareB * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-surface p-4 flex items-center justify-center">
|
||||
<svg viewBox="0 0 120 120" width="160" height="160">
|
||||
<!-- Donut background -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="16" />
|
||||
{#if totalComparable > 0}
|
||||
<!-- A -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="16" stroke-dasharray={`${donutALen} ${donutCircumference - donutALen}`} stroke-dashoffset={0} />
|
||||
<!-- Ties -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(200,200,200,0.7)" stroke-width="16" stroke-dasharray={`${donutTLen} ${donutCircumference - donutTLen}`} stroke-dashoffset={-donutALen} />
|
||||
<!-- B -->
|
||||
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="16" stroke-dasharray={`${donutBLen} ${donutCircumference - donutBLen}`} stroke-dashoffset={-(donutALen + donutTLen)} />
|
||||
{/if}
|
||||
<text x="60" y="64" text-anchor="middle" font-size="14" fill="#9ca3af">{totalComparable} maps</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Win Margin Histogram & Cumulative Wins -->
|
||||
<div class="mt-6 grid gap-4 lg:grid-cols-2">
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Win Margin Histogram (A − B, %)</div>
|
||||
<div class="hist">
|
||||
{#each histogram as count, i}
|
||||
<div
|
||||
class="bar"
|
||||
title={`${(histRangeMin + (i + 0.5) * histBinWidth).toFixed(2)}%`}
|
||||
style={`left:${(i / histogram.length) * 100}%; width:${(1 / histogram.length) * 100}%; height:${((count / histMaxCount) * 100).toFixed(1)}%; background:${(histRangeMin + (i + 0.5) * histBinWidth) >= 0 ? 'rgba(0,255,204,0.8)' : 'rgba(255,0,170,0.8)'};`}
|
||||
></div>
|
||||
{/each}
|
||||
<div class="zero-line"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-muted">Left (magenta) favors {idShortB}, Right (cyan) favors {idShortA}</div>
|
||||
</div>
|
||||
<div class="card-surface p-4">
|
||||
<div class="text-sm text-muted mb-2">Cumulative Wins Over Time</div>
|
||||
<svg viewBox="0 0 600 140" class="spark">
|
||||
<!-- Axes bg -->
|
||||
<rect x="0" y="0" width="600" height="140" fill="transparent" />
|
||||
{#if cumSeries.length > 1}
|
||||
{#key cumSeries.length}
|
||||
<!-- A line -->
|
||||
<polyline fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.a, 120)}`).join(' ')} />
|
||||
<!-- B line -->
|
||||
<polyline fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.b, 120)}`).join(' ')} />
|
||||
{/key}
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if items.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-muted">
|
||||
{filtered.length} / {items.length} songs
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
|
||||
<label class="flex items-center gap-3">
|
||||
<span class="filter-label {filterWinMargin !== 'all' ? 'active' : ''}">Options:</span>
|
||||
<select class="neon-select {filterWinMargin !== 'all' ? 'active' : ''}" bind:value={filterWinMargin}>
|
||||
<option value="all">All Songs</option>
|
||||
<option value="a1">{idShortA} wins by >1%</option>
|
||||
<option value="a2">{idShortA} wins by >2%</option>
|
||||
<option value="b1">{idShortB} wins by >1%</option>
|
||||
<option value="b2">{idShortB} wins by >2%</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Dir
|
||||
<select class="neon-select" bind:value={sortDir}>
|
||||
<option value="desc">Desc</option>
|
||||
<option value="asc">Asc</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">Page size
|
||||
<select class="neon-select" bind:value={pageSize}>
|
||||
<option value={12}>12</option>
|
||||
<option value={24}>24</option>
|
||||
<option value={36}>36</option>
|
||||
<option value={48}>48</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
{#if loadingStars}
|
||||
<div class="mt-2 text-xs text-muted">Loading star ratings…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each pageItems as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<MapCard
|
||||
hash={item.hash}
|
||||
coverURL={metaByHash[item.hash]?.coverURL}
|
||||
songName={metaByHash[item.hash]?.songName}
|
||||
mapper={metaByHash[item.hash]?.mapper}
|
||||
stars={starsByKey[`${item.hash}|${item.diffName}|${item.modeName}`]?.stars}
|
||||
timeset={item.timeset}
|
||||
diffName={item.diffName}
|
||||
modeName={item.modeName}
|
||||
leaderboardId={item.leaderboardId}
|
||||
beatsaverKey={metaByHash[item.hash]?.key}
|
||||
>
|
||||
<div slot="content">
|
||||
<div class="mt-3 grid grid-cols-2 gap-3 neon-surface">
|
||||
<div class="player-card playerA {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner' : ''}">
|
||||
<div class="label {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-label' : ''}">{idShortA}</div>
|
||||
<div class="value {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-value' : ''}">{item.accA != null ? item.accA.toFixed(2) + '%' : '—'}</div>
|
||||
<div class="sub">{item.rankA ? `Rank #${item.rankA}` : ''}</div>
|
||||
</div>
|
||||
<div class="player-card playerB {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner' : ''}">
|
||||
<div class="label {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-label' : ''}">{idShortB}</div>
|
||||
<div class="value {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-value' : ''}">{item.accB != null ? item.accB.toFixed(2) + '%' : '—'}</div>
|
||||
<div class="sub">{item.rankB ? `Rank #${item.rankB}` : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center text-sm">
|
||||
{#if item.accA != null && item.accB != null}
|
||||
{#if item.accA === item.accB}
|
||||
<span class="chip chip-draw">TIE?!</span>
|
||||
{:else if item.accA > item.accB}
|
||||
<span class="chip chip-win-a">Winner: {idShortA}</span>
|
||||
<span class="ml-2 text-muted margin-text {(item.accA - item.accB) > 1 ? 'margin-bold' : ''} {(item.accA - item.accB) > 2 ? 'margin-bright' : ''}">by {(item.accA - item.accB).toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="chip chip-win-b">Winner: {idShortB}</span>
|
||||
<span class="ml-2 text-muted margin-text {(item.accB - item.accA) > 1 ? 'margin-bold' : ''} {(item.accB - item.accA) > 2 ? 'margin-bright' : ''}">by {(item.accB - item.accA).toFixed(2)}%</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="chip">Incomplete</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</MapCard>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if totalPages > 1}
|
||||
<div class="mt-6 flex items-center justify-center gap-2">
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>Prev</button>
|
||||
<span class="text-sm text-muted">Page {page} / {totalPages}</span>
|
||||
<button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>Next</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</HasToolAccess>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
|
||||
/* Cyberpunk neon aesthetics */
|
||||
.neon-surface {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: radial-gradient(1200px 400px at -10% -10%, rgba(0, 255, 204, 0.08), transparent),
|
||||
radial-gradient(1200px 400px at 110% 110%, rgba(255, 0, 170, 0.08), transparent),
|
||||
rgba(12,12,18,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 204, 0.08), 0 0 30px rgba(255, 0, 170, 0.06) inset;
|
||||
}
|
||||
.player-card {
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(10,10,18,0.6));
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.player-card.playerA { border-color: rgba(0, 255, 204, 0.25); box-shadow: 0 0 12px rgba(0, 255, 204, 0.08) inset; }
|
||||
.player-card.playerB { border-color: rgba(255, 0, 170, 0.5); box-shadow: 0 0 12px rgba(255, 0, 170, 0.15) inset; }
|
||||
.player-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.player-card .label { color: #9ca3af; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s ease; }
|
||||
.player-card .label.winner-label { color: #ff8800; font-weight: 700; text-shadow: 0 0 8px rgba(255, 136, 0, 0.5); }
|
||||
.player-card .value { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; color: #9ca3af; transition: all 0.2s ease; }
|
||||
.player-card .value.winner-value { color: #ffffff; }
|
||||
.player-card .sub { margin-top: 6px; font-size: 12px; color: #9ca3af; }
|
||||
.player-card.playerA.winner {
|
||||
box-shadow: 0 0 0 1px rgba(0, 255, 204, 0.2) inset, 0 0 18px rgba(0, 255, 204, 0.14);
|
||||
border-color: rgba(0, 255, 204, 0.35);
|
||||
}
|
||||
.player-card.playerB.winner {
|
||||
box-shadow: 0 0 0 1px rgba(255, 0, 170, 0.3) inset, 0 0 18px rgba(255, 0, 170, 0.25);
|
||||
border-color: rgba(255, 0, 170, 0.7);
|
||||
}
|
||||
.chip {
|
||||
display: inline-block;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
.chip-win-a {
|
||||
border-color: rgba(0, 255, 204, 0.5);
|
||||
background: linear-gradient(90deg, rgba(0, 255, 204, 0.18), rgba(0, 255, 170, 0.10));
|
||||
}
|
||||
.chip-win-b {
|
||||
border-color: rgba(255, 0, 170, 0.5);
|
||||
background: linear-gradient(90deg, rgba(255, 0, 170, 0.18), rgba(255, 102, 204, 0.10));
|
||||
}
|
||||
.chip-draw {
|
||||
border-color: rgba(255, 255, 0, 0.5);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.14), rgba(255, 215, 0, 0.08));
|
||||
}
|
||||
|
||||
/* Margin text styling */
|
||||
.margin-text.margin-bold { font-weight: 700; }
|
||||
.margin-text.margin-bright { color: #ffffff; }
|
||||
|
||||
/* KPI tiles */
|
||||
.kpi-tile {
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(15,15,25,0.6));
|
||||
}
|
||||
.kpi-tile.a { box-shadow: 0 0 0 1px rgba(0,255,204,0.14) inset; }
|
||||
.kpi-tile.b { box-shadow: 0 0 0 1px rgba(255,0,170,0.14) inset; }
|
||||
.kpi-label { font-size: 12px; color: #9ca3af; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.kpi-value { font-size: 28px; font-weight: 800; margin-top: 2px; }
|
||||
.kpi-sublabel { font-size: 11px; color: #9ca3af; }
|
||||
.kpi-subvalue { font-size: 20px; font-weight: 700; margin-top: 2px; }
|
||||
|
||||
/* Win share bar */
|
||||
.winshare-bar {
|
||||
height: 16px;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.winshare-bar .seg { height: 100%; }
|
||||
.winshare-bar .seg.a { background: rgba(0,255,204,0.9); }
|
||||
.winshare-bar .seg.t { background: rgba(200,200,200,0.7); }
|
||||
.winshare-bar .seg.b { background: rgba(255,0,170,0.9); }
|
||||
.badge { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; margin-right: 6px; }
|
||||
.badge.a { background: rgba(0,255,204,0.9); }
|
||||
.badge.t { background: rgba(200,200,200,0.7); }
|
||||
.badge.b { background: rgba(255,0,170,0.9); }
|
||||
|
||||
/* Histogram */
|
||||
.hist { position: relative; height: 120px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
|
||||
.hist .bar { position: absolute; bottom: 0; }
|
||||
.hist .zero-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.15); }
|
||||
|
||||
/* Sparkline */
|
||||
.spark { width: 100%; height: 140px; }
|
||||
|
||||
/* Filter label styling */
|
||||
.filter-label {
|
||||
font-size: 1em;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 0, 170, 0.95);
|
||||
text-shadow: 0 0 8px rgba(255, 0, 170, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-display);
|
||||
line-height: 1;
|
||||
}
|
||||
.filter-label.active {
|
||||
color: rgba(255, 0, 170, 1);
|
||||
text-shadow: 0 0 12px rgba(255, 0, 170, 0.5);
|
||||
}
|
||||
|
||||
/* Neon select dropdown */
|
||||
.neon-select {
|
||||
border-radius: 0.375rem;
|
||||
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));
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(148, 163, 184, 1);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.neon-select.active {
|
||||
border-color: rgba(34, 211, 238, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
|
||||
}
|
||||
.neon-select: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-select: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);
|
||||
}
|
||||
.neon-select option {
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,611 +0,0 @@
|
||||
<script lang="ts">
|
||||
import SongPlayer from '$lib/components/SongPlayer.svelte';
|
||||
import HasToolAccess from '$lib/components/HasToolAccess.svelte';
|
||||
import PlayerCard from '$lib/components/PlayerCard.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
TOOL_REQUIREMENTS,
|
||||
type BeatLeaderPlayerProfile,
|
||||
fetchAllPlayerScores,
|
||||
fetchBeatSaverMeta,
|
||||
type MapMeta
|
||||
} from '$lib/utils/plebsaber-utils';
|
||||
|
||||
type Difficulty = {
|
||||
name: string;
|
||||
characteristic: string;
|
||||
};
|
||||
|
||||
type PlaylistSong = {
|
||||
hash: string;
|
||||
difficulties?: Difficulty[];
|
||||
key?: string;
|
||||
levelId?: string;
|
||||
songName?: string;
|
||||
};
|
||||
|
||||
type Playlist = {
|
||||
playlistTitle?: string;
|
||||
songs?: PlaylistSong[];
|
||||
playlistAuthor?: string;
|
||||
image?: string | null;
|
||||
coverImage?: string | null;
|
||||
description?: string;
|
||||
allowDuplicates?: boolean;
|
||||
customData?: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
type BeatLeaderScore = {
|
||||
leaderboard?: {
|
||||
id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
song?: { hash?: string | null };
|
||||
};
|
||||
};
|
||||
|
||||
export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
|
||||
|
||||
const requirement = TOOL_REQUIREMENTS['player-playlist-gaps'];
|
||||
|
||||
$: playerProfile = data?.player ?? null;
|
||||
$: adminRank = data?.adminRank ?? null;
|
||||
$: adminPlayer = data?.adminPlayer ?? null;
|
||||
|
||||
let playerId = '';
|
||||
let selectedFileName: string | null = null;
|
||||
let parsedTitle: string | null = null;
|
||||
let playlistSongs: PlaylistSong[] = [];
|
||||
|
||||
let loading = false;
|
||||
let errorMsg: string | null = null;
|
||||
|
||||
let results: PlaylistSong[] = [];
|
||||
let metaByHash: Record<string, MapMeta> = {};
|
||||
let loadingMeta = false;
|
||||
let blUrlByHash: Record<string, string> = {};
|
||||
|
||||
let hasAnalyzed = false;
|
||||
let analyzedPlayerProfile: BeatLeaderPlayerProfile | null = null;
|
||||
let previewPlayerProfile: BeatLeaderPlayerProfile | null = null;
|
||||
let loadingPreview = false;
|
||||
|
||||
// Persist playerId across refreshes (client-side only)
|
||||
let hasMounted = false;
|
||||
const PLAYER_ID_KEY = 'ps_bl_gap_playerId';
|
||||
const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
|
||||
type PersistedPlayerId = {
|
||||
value: string;
|
||||
expiresAt: number;
|
||||
};
|
||||
|
||||
function loadPlayerIdFromStorage(): void {
|
||||
if (typeof localStorage === 'undefined') return;
|
||||
const raw = localStorage.getItem(PLAYER_ID_KEY);
|
||||
if (!raw) return;
|
||||
try {
|
||||
const parsed = JSON.parse(raw) as Partial<PersistedPlayerId> | string;
|
||||
if (typeof parsed === 'string') {
|
||||
playerId = parsed;
|
||||
return;
|
||||
}
|
||||
const expiresAt = typeof parsed?.expiresAt === 'number' ? parsed.expiresAt : 0;
|
||||
if (expiresAt && Date.now() > expiresAt) {
|
||||
localStorage.removeItem(PLAYER_ID_KEY);
|
||||
return;
|
||||
}
|
||||
const value = typeof parsed?.value === 'string' ? parsed.value : '';
|
||||
if (value) playerId = value;
|
||||
} catch {
|
||||
// Backward-compat for plain string values
|
||||
playerId = raw;
|
||||
}
|
||||
}
|
||||
onMount(() => {
|
||||
try {
|
||||
// Prefill with logged-in player ID if available
|
||||
if (!playerId && playerProfile?.id) {
|
||||
playerId = playerProfile.id;
|
||||
// Load preview immediately for prefilled user
|
||||
void loadPreviewProfile(playerProfile.id);
|
||||
} else {
|
||||
loadPlayerIdFromStorage();
|
||||
// Load preview for stored player ID
|
||||
if (playerId && playerId.trim()) {
|
||||
void loadPreviewProfile(playerId.trim());
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
hasMounted = true;
|
||||
}
|
||||
});
|
||||
$: if (hasMounted && typeof localStorage !== 'undefined') {
|
||||
if (playerId && playerId.trim().length > 0) {
|
||||
const record: PersistedPlayerId = { value: playerId, expiresAt: Date.now() + WEEK_MS };
|
||||
localStorage.setItem(PLAYER_ID_KEY, JSON.stringify(record));
|
||||
} else {
|
||||
localStorage.removeItem(PLAYER_ID_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced preview loading
|
||||
let previewDebounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
$: {
|
||||
if (hasMounted && playerId) {
|
||||
const trimmed = playerId.trim();
|
||||
if (previewDebounceTimer) clearTimeout(previewDebounceTimer);
|
||||
|
||||
if (trimmed) {
|
||||
// Debounce for 800ms to avoid excessive requests
|
||||
previewDebounceTimer = setTimeout(() => {
|
||||
void loadPreviewProfile(trimmed);
|
||||
}, 800);
|
||||
} else {
|
||||
previewPlayerProfile = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPreviewProfile(id: string): Promise<void> {
|
||||
if (!id || id.trim().length < 3) {
|
||||
previewPlayerProfile = null;
|
||||
return;
|
||||
}
|
||||
|
||||
loadingPreview = true;
|
||||
try {
|
||||
const profile = await fetchPlayerProfile(id);
|
||||
// Only update if this is still the current player ID
|
||||
if (playerId.trim() === id) {
|
||||
previewPlayerProfile = profile;
|
||||
}
|
||||
} catch {
|
||||
// Silently fail - don't show errors for preview loading
|
||||
if (playerId.trim() === id) {
|
||||
previewPlayerProfile = null;
|
||||
}
|
||||
} finally {
|
||||
loadingPreview = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onFileChange(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
selectedFileName = file.name;
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
playlistSongs = [];
|
||||
parsedTitle = null;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text) as Playlist;
|
||||
const songs = Array.isArray(data?.songs) ? data.songs : [];
|
||||
const cleaned = songs
|
||||
.filter((s) => s && typeof s.hash === 'string' && s.hash.trim().length > 0)
|
||||
.map((s) => ({
|
||||
hash: s.hash.trim(),
|
||||
difficulties: Array.isArray(s.difficulties) ? s.difficulties : [],
|
||||
key: s.key,
|
||||
levelId: s.levelId,
|
||||
songName: s.songName
|
||||
}));
|
||||
if (cleaned.length === 0) {
|
||||
throw new Error('No valid songs found in playlist.');
|
||||
}
|
||||
playlistSongs = cleaned;
|
||||
parsedTitle = data?.playlistTitle ?? null;
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Failed to parse playlist file.';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function loadMetaForResults(items: PlaylistSong[]): Promise<void> {
|
||||
const needed = Array.from(new Set(items.map((i) => i.hash.toLowerCase()))).filter((h) => !metaByHash[h]);
|
||||
if (needed.length === 0) return;
|
||||
loadingMeta = true;
|
||||
for (const h of needed) {
|
||||
const meta = await fetchBeatSaverMeta(h);
|
||||
if (meta) metaByHash = { ...metaByHash, [h]: meta };
|
||||
}
|
||||
loadingMeta = false;
|
||||
}
|
||||
|
||||
type BLDifficulty = {
|
||||
modeName?: string;
|
||||
difficultyName?: string;
|
||||
value?: number;
|
||||
ModeName?: string;
|
||||
DifficultyName?: string;
|
||||
Value?: number;
|
||||
};
|
||||
type BLLeaderboardInfo = {
|
||||
id?: string | number | null;
|
||||
Id?: string | number | null;
|
||||
leaderboardId?: string | number | null;
|
||||
LeaderboardId?: string | number | null;
|
||||
difficulty?: BLDifficulty;
|
||||
Difficulty?: BLDifficulty;
|
||||
};
|
||||
type BLLeaderboardsByHashResponse = {
|
||||
leaderboards?: BLLeaderboardInfo[];
|
||||
Leaderboards?: BLLeaderboardInfo[];
|
||||
};
|
||||
|
||||
function normalizeName(name?: string | null): string {
|
||||
return (name ?? '').toString().toLowerCase().replace(/\s+/g, '');
|
||||
}
|
||||
function difficultyRankIndex(diffName?: string | null): number {
|
||||
const order = ['easy', 'normal', 'hard', 'expert', 'expert+', 'expertplus'];
|
||||
const n = normalizeName(diffName).replace('expertplus', 'expert+');
|
||||
const idx = order.indexOf(n);
|
||||
return idx === -1 ? -1 : idx;
|
||||
}
|
||||
function getDifficulty(obj?: BLDifficulty | null): BLDifficulty {
|
||||
const o = obj ?? {} as BLDifficulty;
|
||||
return {
|
||||
modeName: (o.modeName ?? (o as any).ModeName) as string | undefined,
|
||||
difficultyName: (o.difficultyName ?? (o as any).DifficultyName) as string | undefined,
|
||||
value: (o.value ?? (o as any).Value) as number | undefined
|
||||
};
|
||||
}
|
||||
function pickPreferredLeaderboard(lbs: BLLeaderboardInfo[] | null | undefined): BLLeaderboardInfo | null {
|
||||
if (!Array.isArray(lbs) || lbs.length === 0) return null;
|
||||
const getDiff = (lb: BLLeaderboardInfo) => getDifficulty(lb.difficulty ?? (lb as any).Difficulty);
|
||||
const isStandard = (lb: BLLeaderboardInfo) => normalizeName(getDiff(lb)?.modeName) === 'standard';
|
||||
const inStandard = lbs.filter(isStandard);
|
||||
const pool = inStandard.length > 0 ? inStandard : lbs;
|
||||
const expertPlus = pool.find((lb) => {
|
||||
const n = normalizeName(getDiff(lb)?.difficultyName);
|
||||
return n === 'expertplus' || n === 'expert+';
|
||||
});
|
||||
if (expertPlus) return expertPlus;
|
||||
// Fallback to highest difficulty by known order, then by numeric value if available
|
||||
const byKnownOrder = [...pool].sort((a, b) => difficultyRankIndex(getDiff(a)?.difficultyName) - difficultyRankIndex(getDiff(b)?.difficultyName));
|
||||
const bestByOrder = byKnownOrder[byKnownOrder.length - 1];
|
||||
if (bestByOrder && difficultyRankIndex(getDiff(bestByOrder)?.difficultyName) >= 0) return bestByOrder;
|
||||
const byValue = [...pool].sort((a, b) => (getDiff(a)?.value ?? 0) - (getDiff(b)?.value ?? 0));
|
||||
return byValue[byValue.length - 1] ?? pool[0] ?? null;
|
||||
}
|
||||
async function fetchBLLeaderboardsByHash(hash: string): Promise<BLLeaderboardInfo[] | null> {
|
||||
try {
|
||||
const res = await fetch(`/api/beatleader?path=${encodeURIComponent('/leaderboards/hash/' + hash)}`);
|
||||
if (!res.ok) return null;
|
||||
const data = (await res.json()) as BLLeaderboardsByHashResponse | unknown;
|
||||
const leaderboards = (data as any)?.leaderboards ?? (data as any)?.Leaderboards;
|
||||
return Array.isArray(leaderboards) ? (leaderboards as BLLeaderboardInfo[]) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function extractLeaderboardId(lb: BLLeaderboardInfo | null): string | null {
|
||||
if (!lb) return null;
|
||||
const anyLb: any = lb as any;
|
||||
const id = anyLb.id ?? anyLb.leaderboardId ?? anyLb.Id ?? anyLb.LeaderboardId;
|
||||
return id != null ? String(id) : null;
|
||||
}
|
||||
function buildBLUrlFromLeaderboard(lb: BLLeaderboardInfo | null, hash: string): string {
|
||||
const id = extractLeaderboardId(lb);
|
||||
if (id && id.length > 0) {
|
||||
return `https://beatleader.com/leaderboard/global/${id}`;
|
||||
}
|
||||
// Fallback: search by hash on the site
|
||||
return `https://beatleader.com/leaderboards?search=${encodeURIComponent(hash)}`;
|
||||
}
|
||||
|
||||
async function openBeatLeader(hash: string): Promise<void> {
|
||||
const key = (hash ?? '').toLowerCase();
|
||||
let url = blUrlByHash[key];
|
||||
if (!url) {
|
||||
const lbs = await fetchBLLeaderboardsByHash(key);
|
||||
const picked = pickPreferredLeaderboard(lbs ?? undefined);
|
||||
url = buildBLUrlFromLeaderboard(picked, hash);
|
||||
blUrlByHash = { ...blUrlByHash, [key]: url };
|
||||
}
|
||||
if (typeof window !== 'undefined' && url) {
|
||||
window.open(url, '_blank', 'noopener');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadPlaylist(): void {
|
||||
const title = `playlist_gap_${playerId || 'player'}`;
|
||||
const payload = {
|
||||
playlistTitle: title,
|
||||
playlistAuthor: 'SaberList Tool',
|
||||
songs: results.map((s) => ({ hash: s.hash, difficulties: s.difficulties ?? [] })),
|
||||
description: `Subset of ${(parsedTitle ?? 'playlist')} that ${playerId} has not played. Generated ${new Date().toISOString()}`,
|
||||
allowDuplicates: false,
|
||||
customData: {}
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${title}.bplist`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function fetchPlayerProfile(id: string): Promise<BeatLeaderPlayerProfile | null> {
|
||||
try {
|
||||
const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(id)}`);
|
||||
if (!res.ok) return null;
|
||||
return (await res.json()) as BeatLeaderPlayerProfile;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function onAnalyze(ev: SubmitEvent) {
|
||||
ev.preventDefault();
|
||||
errorMsg = null;
|
||||
results = [];
|
||||
metaByHash = {};
|
||||
analyzedPlayerProfile = null;
|
||||
hasAnalyzed = false;
|
||||
if (!playerId.trim()) {
|
||||
errorMsg = 'Please enter a BeatLeader player ID or SteamID64.';
|
||||
return;
|
||||
}
|
||||
if (playlistSongs.length === 0) {
|
||||
errorMsg = 'Please select a valid .bplist file first.';
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
const [scores, profile] = await Promise.all([
|
||||
fetchAllPlayerScores(playerId.trim(), 150),
|
||||
fetchPlayerProfile(playerId.trim())
|
||||
]);
|
||||
analyzedPlayerProfile = profile;
|
||||
hasAnalyzed = true;
|
||||
|
||||
const playedHashes = new Set<string>();
|
||||
for (const s of scores) {
|
||||
const raw = s.leaderboard?.song?.hash ?? undefined;
|
||||
if (!raw) continue;
|
||||
playedHashes.add(String(raw).toLowerCase());
|
||||
}
|
||||
const unplayed: PlaylistSong[] = [];
|
||||
for (const song of playlistSongs) {
|
||||
const h = song.hash?.toLowerCase?.() ?? '';
|
||||
if (!h) continue;
|
||||
if (!playedHashes.has(h)) {
|
||||
unplayed.push(song);
|
||||
}
|
||||
}
|
||||
results = unplayed;
|
||||
loadMetaForResults(unplayed);
|
||||
} catch (err) {
|
||||
errorMsg = err instanceof Error ? err.message : 'Unknown error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm(): void {
|
||||
hasAnalyzed = false;
|
||||
analyzedPlayerProfile = null;
|
||||
results = [];
|
||||
metaByHash = {};
|
||||
blUrlByHash = {};
|
||||
errorMsg = null;
|
||||
selectedFileName = null;
|
||||
parsedTitle = null;
|
||||
playlistSongs = [];
|
||||
// Don't reset playerId - let user keep it for next analysis
|
||||
}
|
||||
|
||||
// Computed: which profile to display (analyzed takes priority over preview)
|
||||
$: displayProfile = hasAnalyzed ? analyzedPlayerProfile : previewPlayerProfile;
|
||||
$: showPlayerCard = !!(displayProfile || (loadingPreview && playerId.trim().length >= 3));
|
||||
</script>
|
||||
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">Player Playlist Gaps</h1>
|
||||
<p class="mt-2 text-muted">Upload a .bplist and enter a player ID to find songs they have not played.</p>
|
||||
|
||||
<HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
|
||||
{#if !hasAnalyzed}
|
||||
<form class="mt-6" on:submit|preventDefault={onAnalyze}>
|
||||
<div class="grid gap-4 sm:grid-cols-2 items-end">
|
||||
<div>
|
||||
<label class="block text-sm text-muted">Playlist file (.bplist)
|
||||
<input class="mt-1 rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none file-input" type="file" accept=".bplist,application/json" on:change={onFileChange} />
|
||||
</label>
|
||||
{#if selectedFileName}
|
||||
<div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="input-tile">
|
||||
<label class="block text-sm text-muted">Player 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={playerId} placeholder="7656119... or BL ID" required />
|
||||
</label>
|
||||
{#if showPlayerCard}
|
||||
<div class="player-card-wrapper">
|
||||
{#if displayProfile}
|
||||
<PlayerCard
|
||||
name={displayProfile.name ?? 'Player'}
|
||||
avatar={displayProfile.avatar ?? null}
|
||||
country={displayProfile.country ?? null}
|
||||
rank={displayProfile.rank ?? null}
|
||||
showRank={typeof displayProfile.rank === 'number'}
|
||||
width="100%"
|
||||
avatarSize={56}
|
||||
techPp={displayProfile.techPp}
|
||||
accPp={displayProfile.accPp}
|
||||
passPp={displayProfile.passPp}
|
||||
playerId={displayProfile.id ?? null}
|
||||
gradientId="playlist-gap-player-preview"
|
||||
/>
|
||||
{:else}
|
||||
<div class="loading-placeholder">Loading player...</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button class="btn-neon" disabled={loading}>
|
||||
{#if loading}
|
||||
Loading...
|
||||
{:else}
|
||||
Analyze
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="mt-6 flex items-start gap-4">
|
||||
{#if displayProfile}
|
||||
<div class="analyzed-player-summary">
|
||||
<PlayerCard
|
||||
name={displayProfile.name ?? 'Player'}
|
||||
avatar={displayProfile.avatar ?? null}
|
||||
country={displayProfile.country ?? null}
|
||||
rank={displayProfile.rank ?? null}
|
||||
showRank={typeof displayProfile.rank === 'number'}
|
||||
width="100%"
|
||||
avatarSize={56}
|
||||
techPp={displayProfile.techPp}
|
||||
accPp={displayProfile.accPp}
|
||||
passPp={displayProfile.passPp}
|
||||
playerId={displayProfile.id ?? null}
|
||||
gradientId="playlist-gap-player"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-3 py-2 text-sm hover:bg-white/10 transition-colors"
|
||||
on:click={resetForm}
|
||||
title="Reset and analyze another playlist"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="mt-4 text-danger">{errorMsg}</div>
|
||||
{/if}
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex items-center gap-3 text-sm text-muted">
|
||||
<span>{results.length} songs not played</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loadingMeta}
|
||||
<div class="mt-2 text-xs text-muted">Loading covers…</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each results as item}
|
||||
<article class="card-surface overflow-hidden">
|
||||
<div class="aspect-square bg-black/30">
|
||||
{#if metaByHash[item.hash?.toLowerCase?.() || '']?.coverURL}
|
||||
<img
|
||||
src={metaByHash[item.hash.toLowerCase()].coverURL}
|
||||
alt={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
|
||||
{metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
|
||||
</div>
|
||||
{#if metaByHash[item.hash.toLowerCase()]?.mapper}
|
||||
<div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash.toLowerCase()]?.mapper}</div>
|
||||
{/if}
|
||||
<div class="mt-3">
|
||||
<SongPlayer hash={item.hash} preferBeatLeader={true} />
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={blUrlByHash[item.hash.toLowerCase()] ?? undefined}
|
||||
on:click|preventDefault={() => openBeatLeader(item.hash)}
|
||||
on:auxclick|preventDefault={() => openBeatLeader(item.hash)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatLeader"
|
||||
>BL</a>
|
||||
<a
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
|
||||
href={metaByHash[item.hash.toLowerCase()]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash.toLowerCase()]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="Open in BeatSaver"
|
||||
>BS</a>
|
||||
<button
|
||||
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
|
||||
on:click={() => { const key = metaByHash[item.hash.toLowerCase()]?.key; if (key) navigator.clipboard.writeText(`!bsr ${key}`); }}
|
||||
disabled={!metaByHash[item.hash.toLowerCase()]?.key}
|
||||
title="Copy !bsr"
|
||||
>Copy !bsr</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</HasToolAccess>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.text-danger { color: #dc2626; }
|
||||
.btn-neon { cursor: pointer; }
|
||||
.card-surface { border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
|
||||
.text-muted { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.file-input {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.input-tile {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.input-tile:hover {
|
||||
border-color: rgba(148, 163, 184, 0.3);
|
||||
}
|
||||
|
||||
.player-card-wrapper {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.loading-placeholder {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.analyzed-player-summary {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
max-width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { getAllSessions, getSession } from '$lib/server/sessionStore';
|
||||
import { PLEB_BEATLEADER_ID } from '$lib/utils/plebsaber-utils';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
type StatsUser = {
|
||||
beatleaderId: string;
|
||||
name: string | null;
|
||||
avatar: string | null;
|
||||
country: string | null;
|
||||
rank: number | null;
|
||||
techPp: number | null;
|
||||
accPp: number | null;
|
||||
passPp: number | null;
|
||||
lastSeenAt: number;
|
||||
lastSeenIso: string;
|
||||
};
|
||||
|
||||
type BeatLeaderPlayer = {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
country?: string;
|
||||
rank?: number;
|
||||
techPp?: number;
|
||||
accPp?: number;
|
||||
passPp?: number;
|
||||
};
|
||||
|
||||
async function fetchBeatLeaderProfile(playerId: string): Promise<BeatLeaderPlayer | null> {
|
||||
try {
|
||||
const response = await fetch(`https://api.beatleader.xyz/player/${playerId}`);
|
||||
if (!response.ok) return null;
|
||||
return (await response.json()) as BeatLeaderPlayer;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = async ({ cookies }) => {
|
||||
const currentSession = getSession(cookies);
|
||||
if (!currentSession) {
|
||||
throw redirect(302, '/auth/beatleader/login?redirect_uri=%2Ftools%2Fstats');
|
||||
}
|
||||
|
||||
if (currentSession.beatleaderId !== PLEB_BEATLEADER_ID) {
|
||||
throw error(403, 'Forbidden');
|
||||
}
|
||||
|
||||
const sessions = getAllSessions();
|
||||
const aggregated = new Map<string, { session: typeof sessions[0] }>();
|
||||
|
||||
for (const stored of sessions) {
|
||||
const existing = aggregated.get(stored.beatleaderId);
|
||||
if (!existing || stored.lastSeenAt > existing.session.lastSeenAt) {
|
||||
aggregated.set(stored.beatleaderId, { session: stored });
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch all player profiles in parallel
|
||||
const userPromises = Array.from(aggregated.values()).map(async ({ session }) => {
|
||||
const profile = await fetchBeatLeaderProfile(session.beatleaderId);
|
||||
return {
|
||||
beatleaderId: session.beatleaderId,
|
||||
name: profile?.name ?? session.name,
|
||||
avatar: profile?.avatar ?? session.avatar,
|
||||
country: profile?.country ?? null,
|
||||
rank: profile?.rank ?? null,
|
||||
techPp: profile?.techPp ?? null,
|
||||
accPp: profile?.accPp ?? null,
|
||||
passPp: profile?.passPp ?? null,
|
||||
lastSeenAt: session.lastSeenAt,
|
||||
lastSeenIso: new Date(session.lastSeenAt).toISOString()
|
||||
} satisfies StatsUser;
|
||||
});
|
||||
|
||||
const users = (await Promise.all(userPromises)).sort((a, b) => b.lastSeenAt - a.lastSeenAt);
|
||||
|
||||
return {
|
||||
users
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,207 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import PlayerCard from '$lib/components/PlayerCard.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
|
||||
const ranges: Array<{ unit: Intl.RelativeTimeFormatUnit; ms: number }> = [
|
||||
{ unit: 'year', ms: 1000 * 60 * 60 * 24 * 365 },
|
||||
{ unit: 'month', ms: 1000 * 60 * 60 * 24 * 30 },
|
||||
{ unit: 'week', ms: 1000 * 60 * 60 * 24 * 7 },
|
||||
{ unit: 'day', ms: 1000 * 60 * 60 * 24 },
|
||||
{ unit: 'hour', ms: 1000 * 60 * 60 },
|
||||
{ unit: 'minute', ms: 1000 * 60 },
|
||||
{ unit: 'second', ms: 1000 }
|
||||
];
|
||||
|
||||
let now = Date.now();
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const formatTimeSince = (timestamp: number): string => {
|
||||
const diff = timestamp - now;
|
||||
for (const { unit, ms } of ranges) {
|
||||
const value = diff / ms;
|
||||
if (Math.abs(value) >= 1 || unit === 'second') {
|
||||
return formatter.format(Math.round(value), unit);
|
||||
}
|
||||
}
|
||||
return formatter.format(0, 'second');
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
timer = setInterval(() => {
|
||||
now = Date.now();
|
||||
}, 60_000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>plebsaber · Stats</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="page-wrapper">
|
||||
<header class="page-header">
|
||||
<h1>Historical BeatLeader Logins</h1>
|
||||
<p class="page-subtitle">Tracking everyone who has authenticated with plebsaber tools.</p>
|
||||
<p class="page-meta">Total users: {data.users.length}</p>
|
||||
</header>
|
||||
|
||||
{#if data.users.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No BeatLeader sessions have been recorded yet.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="user-grid" aria-live="polite">
|
||||
{#each data.users as user, index}
|
||||
<li class="user-card">
|
||||
<div class="card-header">
|
||||
<PlayerCard
|
||||
name={user.name ?? 'Unknown BeatLeader user'}
|
||||
avatar={user.avatar ?? null}
|
||||
country={user.country ?? null}
|
||||
rank={user.rank ?? null}
|
||||
showRank={typeof user.rank === 'number'}
|
||||
width="100%"
|
||||
avatarSize={64}
|
||||
techPp={user.techPp}
|
||||
accPp={user.accPp}
|
||||
passPp={user.passPp}
|
||||
playerId={user.beatleaderId}
|
||||
gradientId={`stats-player-${index}`}
|
||||
/>
|
||||
</div>
|
||||
<div class="user-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">ID</span>
|
||||
<span class="meta-value">{user.beatleaderId}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Last Session</span>
|
||||
<time class="meta-value" datetime={user.lastSeenIso}>
|
||||
{formatTimeSince(user.lastSeenAt)}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-wrapper {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
}
|
||||
|
||||
.page-meta {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(226, 232, 240, 0.55);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 3rem;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.35);
|
||||
border-radius: 0.75rem;
|
||||
text-align: center;
|
||||
color: rgba(148, 163, 184, 0.85);
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
.user-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.85rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(34, 211, 238, 0.05);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.user-card:hover,
|
||||
.user-card:focus-within {
|
||||
border-color: rgba(34, 211, 238, 0.35);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(34, 211, 238, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.15);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(148, 163, 184, 0.6);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.user-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user