Rankwall and paywall the tools

This commit is contained in:
pleb 2025-10-29 15:01:17 -07:00
parent e04c6206db
commit f59db0021d
16 changed files with 1204 additions and 474 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,48 @@
<script lang="ts">
import {
formatToolRequirementSummary,
meetsToolRequirement,
type BeatLeaderPlayerProfile,
type ToolRequirement
} from '$lib/utils/plebsaber-utils';
const BL_PATREON_URL = 'https://www.patreon.com/BeatLeader';
export let player: BeatLeaderPlayerProfile | null = null;
export let requirement: ToolRequirement | null = null;
export let customLockedMessage: string | null = null;
export let showCurrentRank = true;
$: hasAccess = meetsToolRequirement(player, requirement);
$: summary = formatToolRequirementSummary(requirement);
$: lockedMessage = customLockedMessage ?? requirement?.lockedMessage ?? null;
$: showLockedMessage = lockedMessage && lockedMessage !== summary ? lockedMessage : null;
$: 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">
Tools are restricted to <a class="underline hover:text-white" href={BL_PATREON_URL} target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> (and the top 3k ranked players).
</p>
{#if summary}
<p class="mt-1">{summary}</p>
{/if}
{#if showLockedMessage}
<p class="mt-1">{showLockedMessage}</p>
{/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. Refresh after your profile updates.
{/if}
</p>
{/if}
</div>
{/if}

View File

@ -1,5 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { dev } from '$app/environment';
import beatleaderLogo from '$lib/assets/beatleader-logo.png';
const links = [
@ -20,17 +21,22 @@
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;
const getProfileUrl = (id?: string) => (id ? `https://beatleader.com/u/${encodeURIComponent(id)}` : 'https://beatleader.com');
@ -44,13 +50,17 @@
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
avatar: typeof avatar === 'string' ? avatar : undefined,
rank: typeof rank === 'number' ? rank : null,
countryRank: typeof countryRank === 'number' ? countryRank : null
};
}
@ -85,6 +95,14 @@
}
})();
});
function toggleMenu() {
menuOpen = !menuOpen;
}
function closeMenu() {
menuOpen = false;
}
</script>
<header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-surface/50 border-b border-white/10">
@ -104,12 +122,12 @@
{#if checkingSession}
<span class="text-sm text-muted">Connecting…</span>
{:else if user}
<a
href={getProfileUrl(user.id)}
<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"
target="_blank"
rel="noreferrer noopener"
title="View your BeatLeader profile"
on:click={toggleMenu}
aria-haspopup="true"
aria-expanded={menuOpen}
>
<img
src={user.avatar ?? beatleaderLogo}
@ -118,7 +136,31 @@
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 typeof user.rank === 'number' && user.rank > 3000}
<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 in the global top 3k.</span>
</div>
{/if}
{#if dev}
<a href="/testing" class="dropdown-item" on:click={closeMenu}>Testing</a>
{/if}
<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" />
@ -142,21 +184,24 @@
{#if checkingSession}
<span class="text-sm text-muted">Connecting…</span>
{:else if user}
<a
href={getProfileUrl(user.id)}
target="_blank"
rel="noreferrer noopener"
on:click={close}
class="flex items-center gap-3 rounded-md border border-white/10 px-3 py-2 text-sm transition hover:bg-white/10"
>
<img
src={user.avatar ?? beatleaderLogo}
alt="BeatLeader avatar"
class="h-10 w-10 rounded-full object-cover shadow-sm"
loading="lazy"
/>
<span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
<div class="border border-white/10 rounded-md overflow-hidden">
{#if typeof user.rank === 'number' && user.rank > 3000}
<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 inside the global top 3k.</span>
</div>
{/if}
{#if dev}
<a href="/testing" class="dropdown-item" on:click={close}>Testing</a>
{/if}
<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" />
@ -168,4 +213,113 @@
{/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>

View File

@ -0,0 +1,125 @@
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);
}
}
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());
}

View File

@ -39,6 +39,21 @@ export type BeatLeaderScoresResponse = {
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;
};
export type ToolRequirement = {
minGlobalRank?: number;
summary: string;
lockedMessage?: string;
};
export type Difficulty = {
name: string;
characteristic: string;
@ -54,6 +69,46 @@ export const DIFFICULTIES = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'] a
export const MODES = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'] as const;
const DEFAULT_PRIVATE_TOOL_REQUIREMENT: ToolRequirement = {
minGlobalRank: 3000,
summary: 'BeatLeader global rank within the top 3000',
lockedMessage: 'You must be a BL Patreon supporter or remain ranked in the global top 3k to use this tool.'
};
export const TOOL_REQUIREMENTS = {
'beatleader-compare': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
'beatleader-headtohead': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
'beatleader-playlist-gap': 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
): boolean {
if (!requirement) return true;
if (requirement.minGlobalRank !== undefined) {
const rank = profile?.rank ?? null;
if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
return rank <= requirement.minGlobalRank;
}
return true;
}
export function formatToolRequirementSummary(requirement: ToolRequirement | null | undefined): string {
if (!requirement) return '';
if (requirement.summary) return requirement.summary;
if (requirement.minGlobalRank !== undefined) {
return `BeatLeader global rank ≤ ${requirement.minGlobalRank}`;
}
return '';
}
// ============================================================================
// 3. BeatSaver & BeatLeader API Functions
// ============================================================================

View File

@ -1,64 +1,82 @@
import type { RequestHandler } from '@sveltejs/kit';
import { createBeatLeaderAPI } from '$lib/server/beatleader';
import { clearTokens, getValidAccessToken } from '$lib/server/beatleaderAuth';
import { getSession } from '../../../../lib/server/sessionStore';
type BeatLeaderIdentity = { id?: string; name?: string };
type BeatLeaderPlayer = { id?: string; name?: string; avatar?: string | null };
const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
const IDENTITY_ENDPOINT = 'https://api.beatleader.com/oauth2/identity';
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;
};
export const GET: RequestHandler = async ({ cookies, fetch }) => {
const token = await getValidAccessToken(cookies);
if (!token) {
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 identityRes = await fetch(IDENTITY_ENDPOINT, {
headers: { Authorization: `Bearer ${token}` }
});
if (identityRes.status === 401) {
clearTokens(cookies);
return new Response(
JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
{ status: 401, headers: { 'content-type': 'application/json' } }
);
}
if (!identityRes.ok) {
return new Response(
JSON.stringify({ error: `Identity lookup failed: ${identityRes.status}` }),
{ status: 502, headers: { 'content-type': 'application/json' } }
);
}
const identityJson = (await identityRes.json()) as BeatLeaderIdentity;
const identity: BeatLeaderIdentity = {
id: typeof identityJson.id === 'string' ? identityJson.id : undefined,
name: typeof identityJson.name === 'string' ? identityJson.name : undefined
id: session.beatleaderId,
name: session.name
};
const playerId = identity.id ?? null;
let player: BeatLeaderPlayer | null = null;
if (playerId) {
let rawPlayer: Record<string, unknown> | null = null;
try {
const api = createBeatLeaderAPI(fetch, token, undefined);
const raw = (await api.getPlayer(playerId)) as Record<string, unknown>;
const candidate: BeatLeaderPlayer = {
id: typeof raw?.id === 'string' ? (raw.id as string) : playerId,
name: typeof raw?.name === 'string' ? (raw.name as string) : identity.name,
avatar: typeof raw?.avatar === 'string' ? (raw.avatar as string) : null
};
player = candidate;
} catch (err) {
console.error('Failed to fetch BeatLeader player profile', err);
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
};
}
} catch (err) {
console.error('Failed to refresh BeatLeader public profile', err);
}
return new Response(JSON.stringify({ identity, player }), {
const payload: ResponsePayload = { identity, player, rawPlayer };
return new Response(JSON.stringify(payload), {
headers: { 'content-type': 'application/json' }
});
};

View File

@ -1,7 +1,8 @@
import type { RequestHandler } from '@sveltejs/kit';
import { consumeAndValidateState, exchangeCodeForTokens, setTokens, clearTokens, consumeRedirectCookie, getValidAccessToken } from '$lib/server/beatleaderAuth';
import { consumeAndValidateState, exchangeCodeForTokens, clearTokens, consumeRedirectCookie } from '$lib/server/beatleaderAuth';
import { upsertSession } from '../../../../lib/server/sessionStore';
export const GET: RequestHandler = async ({ url, cookies }) => {
export const GET: RequestHandler = async ({ url, cookies, fetch }) => {
const code = url.searchParams.get('code');
const state = url.searchParams.get('state');
@ -19,19 +20,47 @@ export const GET: RequestHandler = async ({ url, cookies }) => {
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 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 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 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 } });
};

View File

@ -1,9 +1,11 @@
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 } });
};

View File

@ -1,14 +1,15 @@
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 } });
};

View File

@ -0,0 +1,242 @@
<script lang="ts">
import { onMount } from '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">BeatLeader Testing</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}
<div class="mt-6 grid gap-6 lg:grid-cols-2">
<div class="card">
<h2 class="card-title">Identity</h2>
{#if identity}
<dl class="info-grid">
<div>
<dt>ID</dt>
<dd>{identity.id ?? '—'}</dd>
</div>
<div>
<dt>Name</dt>
<dd>{identity.name ?? '—'}</dd>
</div>
</dl>
{:else}
<p class="empty">No identity data returned.</p>
{/if}
</div>
<div class="card">
<h2 class="card-title">Player</h2>
{#if player}
<div class="player-header">
<img src={player.avatar ?? ''} alt="Avatar" class:placeholder={!player.avatar} />
<div>
<div class="player-name">{player.name ?? 'Unknown'}</div>
<div class="player-meta">
{#if player.country}
<span>{player.country}</span>
{#if player.countryRank !== null}
<span>Rank: {player.countryRank}</span>
{/if}
{/if}
{#if player.rank !== null}
<span>• Global Rank: {player.rank}</span>
{/if}
</div>
</div>
</div>
<dl class="info-grid">
<div>
<dt>ID</dt>
<dd>{player.id ?? '—'}</dd>
</div>
<div>
<dt>Role</dt>
<dd>{player.role ?? '—'}</dd>
</div>
<div>
<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>
<dt>Level</dt>
<dd>{player.level ?? '—'}</dd>
</div>
<div>
<dt>PP (Global)</dt>
<dd>{player.pp ?? '—'}</dd>
</div>
<div>
<dt>Tech PP</dt>
<dd>{player.techPp ?? '—'}</dd>
</div>
<div>
<dt>Acc PP</dt>
<dd>{player.accPp ?? '—'}</dd>
</div>
<div>
<dt>Pass PP</dt>
<dd>{player.passPp ?? '—'}</dd>
</div>
<div>
<dt>Banned</dt>
<dd>{player.banned ? 'Yes' : 'No'}</dd>
</div>
<div>
<dt>Show All Ratings</dt>
<dd>{player.profileSettings?.showAllRatings ? 'Enabled' : 'Disabled'}</dd>
</div>
</dl>
{:else}
<p class="empty">No player profile found for this identity.</p>
{/if}
</div>
</div>
{/if}
</section>
<style>
.card {
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);
}
.card-title {
font-size: 1.05rem;
font-weight: 600;
color: rgba(226, 232, 240, 0.95);
margin-bottom: 1rem;
}
.info-grid {
display: grid;
gap: 0.75rem;
font-size: 0.9rem;
}
dt {
color: rgba(148, 163, 184, 0.75);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
dd {
color: rgba(226, 232, 240, 0.92);
margin: 0;
}
.link {
color: rgba(34, 211, 238, 0.85);
text-decoration: underline;
}
.player-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.player-header img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(34, 211, 238, 0.35);
box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}
.player-header img.placeholder {
opacity: 0.3;
border-style: dashed;
}
.player-name {
font-size: 1.15rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.player-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.8rem;
color: rgba(148, 163, 184, 0.75);
}
.empty {
font-size: 0.85rem;
color: rgba(148, 163, 184, 0.7);
}
</style>

View File

@ -1,16 +1,37 @@
import { redirect } from '@sveltejs/kit';
import { getValidAccessToken } from '$lib/server/beatleaderAuth';
import { getSession } from '../../lib/server/sessionStore';
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, url }) => {
const token = await getValidAccessToken(cookies);
if (!token) {
export const load: LayoutServerLoad = async ({ cookies, fetch, url }) => {
const session = getSession(cookies);
if (!session) {
const pathWithQuery = `${url.pathname}${url.search}` || '/tools';
throw redirect(302, `/auth/beatleader/login?redirect_uri=${encodeURIComponent(pathWithQuery)}`);
}
return { hasBeatLeaderOAuth: true };
let player: BeatLeaderPlayerProfile | null = null;
try {
const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
if (res.ok) {
const data = (await res.json()) as Record<string, unknown>;
player = {
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
};
}
} catch (err) {
console.error('Failed to fetch BeatLeader profile for tools layout', err);
}
return { hasBeatLeaderOAuth: true, player };
};

View File

@ -1,12 +1,14 @@
<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 BeatLeaderScoresResponse,
type Difficulty,
type BeatLeaderPlayerProfile,
loadMetaForHashes,
loadStarsForHashes,
normalizeDifficultyName,
@ -14,7 +16,8 @@
getCutoffEpochFromMonths,
toPlaylistJson,
downloadPlaylist,
ONE_YEAR_SECONDS
ONE_YEAR_SECONDS,
TOOL_REQUIREMENTS
} from '$lib/utils/plebsaber-utils';
type SongItem = {
@ -24,6 +27,12 @@
leaderboardId?: string;
};
export let data: { player: BeatLeaderPlayerProfile | null };
const requirement = TOOL_REQUIREMENTS['beatleader-compare'];
$: playerProfile = data?.player ?? null;
let playerA = '';
let playerB = '';
let loading = false;
@ -189,6 +198,7 @@
<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>
<HasToolAccess player={playerProfile} requirement={requirement}>
<PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare}>
<svelte:fragment slot="extra-buttons">
{#if results.length > 0}
@ -269,6 +279,7 @@
</div>
{/if}
{/if}
</HasToolAccess>
</section>
<style>

View File

@ -2,6 +2,7 @@
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,
@ -21,7 +22,9 @@
percentile,
DIFFICULTIES,
MODES,
ONE_YEAR_SECONDS
ONE_YEAR_SECONDS,
TOOL_REQUIREMENTS,
type BeatLeaderPlayerProfile
} from '$lib/utils/plebsaber-utils';
type H2HItem = {
@ -36,6 +39,12 @@
leaderboardId?: string;
};
export let data: { player: BeatLeaderPlayerProfile | null };
const requirement = TOOL_REQUIREMENTS['beatleader-headtohead'];
$: playerProfile = data?.player ?? null;
let playerA = '';
let playerB = '';
const months = 24;
@ -284,6 +293,7 @@
<h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Head-to-Head</h1>
<p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
<HasToolAccess player={playerProfile} requirement={requirement}>
<PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} />
{#if errorMsg}
@ -508,6 +518,7 @@
</div>
{/if}
{/if}
</HasToolAccess>
</section>
<style>

View File

@ -1,6 +1,11 @@
<script lang="ts">
import SongPlayer from '$lib/components/SongPlayer.svelte';
import HasToolAccess from '$lib/components/HasToolAccess.svelte';
import { onMount } from 'svelte';
import {
TOOL_REQUIREMENTS,
type BeatLeaderPlayerProfile
} from '$lib/utils/plebsaber-utils';
type Difficulty = {
name: string;
@ -45,6 +50,12 @@
mapper?: string;
};
export let data: { player: BeatLeaderPlayerProfile | null };
const requirement = TOOL_REQUIREMENTS['beatleader-playlist-gap'];
$: playerProfile = data?.player ?? null;
let playerId = '';
let selectedFileName: string | null = null;
let parsedTitle: string | null = null;
@ -344,6 +355,7 @@
<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>
<HasToolAccess player={playerProfile} requirement={requirement}>
<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)
@ -441,6 +453,7 @@
{/each}
</div>
{/if}
</HasToolAccess>
</section>
<style>