Rankwall and paywall the tools

src/lib/components/HasToolAccess.svelte

@@ -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}
+

src/lib/components/NavBar.svelte

@@ -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,21 +122,45 @@
         {#if checkingSession}
           <span class="text-sm text-muted">Connecting…</span>
         {:else if user}
-          <a
-            href={getProfileUrl(user.id)}
-            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"
-          >
-            <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>
-          </a>
+          <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 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>
-          </a>
+          <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>
+
 

src/lib/server/sessionStore.ts

@@ -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());
+}

src/lib/utils/plebsaber-utils.ts

@@ -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
 // ============================================================================