feat: Add global leaderboard with Cloudflare D1

- Add D1 database schema for players table
- Add /leaderboard and /leaderboard/sync endpoints to worker
- Update frontend to fetch from global Cloudflare API
- Backend syncs scores to global leaderboard on every update
- Auto-sync on auth to populate existing scores

Scores now persist globally - users see each other on leaderboard
without requiring the host's machine to be running.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Spacehunterz

apps/dashboard/backend/routers/game.py

@@ -9,6 +9,13 @@
 router = APIRouter(prefix="/api/game", tags=["game"])
 
 
+# =============================================================================
+# Global Leaderboard Configuration
+# =============================================================================
+
+GLOBAL_LEADERBOARD_API = "https://elf-oauth.elf0auth.workers.dev/leaderboard/sync"
+
+
 # =============================================================================
 # Leaderboard Models
 # =============================================================================
@@ -327,19 +334,77 @@ async def sync_score(request: Request, payload: Dict[str, Any] = Body(...)):
     # Basic Anti-Cheat: Rate limiting / Delta checks could go here.
     # For now, we trust the client's score addition but log it.
     score_delta = payload.get("score_delta", 0)
-    
+
     with get_db() as conn:
         cursor = conn.cursor()
         cursor.execute("SELECT score FROM game_state WHERE user_id = ?", (user_id,))
         current_score = cursor.fetchone()["score"]
-        
+
         new_score = current_score + score_delta
-        
+
         cursor.execute("UPDATE game_state SET score = ? WHERE user_id = ?", (new_score, user_id))
         conn.commit()
-        
+
+    # Sync to global leaderboard (non-blocking)
+    try:
+        token = request.cookies.get("session_token")
+        if token:
+            session = await get_session(token)
+            if session and session.access_token:
+                async with httpx.AsyncClient() as client:
+                    await client.post(
+                        GLOBAL_LEADERBOARD_API,
+                        json={"score": new_score},
+                        headers={"Authorization": f"Bearer {session.access_token}"},
+                        timeout=5.0
+                    )
+    except Exception:
+        pass
+
     return {"success": True, "new_score": new_score}
 
+@router.post("/sync-global")
+async def sync_to_global(request: Request):
+    """Manually sync current score to global leaderboard."""
+    user_id = await get_user_id(request)
+    if not user_id:
+        return {"success": False, "message": "Login required"}
+
+    # Get current score from local DB
+    with get_db() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT score FROM game_state WHERE user_id = ?", (user_id,))
+        row = cursor.fetchone()
+        if not row:
+            return {"success": False, "message": "No game state found"}
+        current_score = row["score"]
+
+    # Sync to global leaderboard
+    try:
+        token = request.cookies.get("session_token")
+        if not token:
+            return {"success": False, "message": "Session expired"}
+
+        session = await get_session(token)
+        if not session or not session.access_token:
+            return {"success": False, "message": "Session expired"}
+
+        async with httpx.AsyncClient() as client:
+            res = await client.post(
+                GLOBAL_LEADERBOARD_API,
+                json={"score": current_score},
+                headers={"Authorization": f"Bearer {session.access_token}"},
+                timeout=5.0
+            )
+            if res.status_code == 200:
+                data = res.json()
+                return {"success": True, "rank": data.get("rank"), "score": current_score}
+            else:
+                return {"success": False, "message": "Global sync failed"}
+    except Exception as e:
+        return {"success": False, "message": str(e)}
+
+
 @router.post("/equip")
 async def equip_item(request: Request, payload: Dict[str, str] = Body(...)):
     """Server-side equip (prevents client from forcing locked items)."""

apps/dashboard/frontend/src/components/game/Leaderboard.tsx

@@ -44,21 +44,10 @@ export interface LeaderboardProps {
 }
 
 // ============================================================================
-// Mock Data (for demonstration - remove in production)
+// API Configuration
 // ============================================================================
 
-const MOCK_LEADERBOARD: LeaderboardEntry[] = [
-    { rank: 1, username: 'CosmicDestroyer', score: 2847500, level: 42, avatar_url: 'https://avatars.githubusercontent.com/u/1?v=4' },
-    { rank: 2, username: 'StarPilot_X', score: 2156000, level: 38, avatar_url: 'https://avatars.githubusercontent.com/u/2?v=4' },
-    { rank: 3, username: 'NebulaCrusher', score: 1892300, level: 35, avatar_url: 'https://avatars.githubusercontent.com/u/3?v=4' },
-    { rank: 4, username: 'VoidWalker99', score: 1654200, level: 32 },
-    { rank: 5, username: 'PhotonRider', score: 1423100, level: 29, avatar_url: 'https://avatars.githubusercontent.com/u/5?v=4' },
-    { rank: 6, username: 'GalacticAce', score: 1287600, level: 27 },
-    { rank: 7, username: 'AsteroidHunter', score: 1098500, level: 24, avatar_url: 'https://avatars.githubusercontent.com/u/7?v=4' },
-    { rank: 8, username: 'WarpDriveMaster', score: 956400, level: 22 },
-    { rank: 9, username: 'CometChaser', score: 823700, level: 20, avatar_url: 'https://avatars.githubusercontent.com/u/9?v=4' },
-    { rank: 10, username: 'SolarFlareKid', score: 712300, level: 18 },
-];
+const GLOBAL_LEADERBOARD_API = 'https://elf-oauth.elf0auth.workers.dev/leaderboard';
 
 // ============================================================================
 // Utility Functions
@@ -365,21 +354,13 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                     const data = await fetchLeaderboard();
                     setEntries(data);
                 } else {
-                    // Try to fetch from API, fallback to mock data
-                    try {
-                        const res = await fetch('/api/game/leaderboard', {
-                            credentials: 'include'
-                        });
-                        if (res.ok) {
-                            const data = await res.json();
-                            setEntries(data.entries || []);
-                        } else {
-                            // Use mock data for demo
-                            setEntries(MOCK_LEADERBOARD);
-                        }
-                    } catch {
-                        // Use mock data for demo
-                        setEntries(MOCK_LEADERBOARD);
+                    // Fetch from global leaderboard API
+                    const res = await fetch(GLOBAL_LEADERBOARD_API);
+                    if (res.ok) {
+                        const data = await res.json();
+                        setEntries(data.entries || []);
+                    } else {
+                        throw new Error('Failed to fetch leaderboard');
                     }
                 }
             } catch (err) {

apps/dashboard/frontend/src/context/GameContext.tsx

@@ -94,6 +94,12 @@ export const GameProvider: React.FC<{ children: React.ReactNode }> = ({ children
                     talkinheadUnlocked: gameData.talkinhead_unlocked || false,
                     talkinheadAutolaunch: gameData.talkinhead_autolaunch || false,
                 }));
+
+                // 3. Sync to global leaderboard (non-blocking)
+                fetch('http://localhost:8888/api/game/sync-global', {
+                    method: 'POST',
+                    credentials: 'include'
+                }).catch(() => {/* Ignore errors - global sync is best-effort */});
             }
         } catch (err) {
             console.error("Failed to sync game state:", err);

infra/cloudflare-worker/schema.sql

@@ -0,0 +1,10 @@
+CREATE TABLE IF NOT EXISTS players (
+    github_id INTEGER PRIMARY KEY,
+    username TEXT NOT NULL,
+    avatar_url TEXT,
+    score INTEGER DEFAULT 0,
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now'))
+);
+
+CREATE INDEX IF NOT EXISTS idx_players_score ON players(score DESC);

infra/cloudflare-worker/worker.js

@@ -8,11 +8,19 @@ function corsHeaders(origin) {
   const allowedOrigin = ALLOWED_ORIGINS.includes(origin) ? origin : ALLOWED_ORIGINS[0];
   return {
     'Access-Control-Allow-Origin': allowedOrigin,
-    'Access-Control-Allow-Methods': 'POST, OPTIONS',
-    'Access-Control-Allow-Headers': 'Content-Type',
+    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    'Access-Control-Allow-Credentials': 'true',
   };
 }
 
+function jsonResponse(data, status = 200, origin = '') {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
+  });
+}
+
 export default {
   async fetch(request, env) {
     const origin = request.headers.get('Origin') || '';
@@ -24,29 +32,25 @@ export default {
     const url = new URL(request.url);
 
     if (url.pathname === '/oauth/config' && request.method === 'GET') {
-      return new Response(JSON.stringify({
+      return jsonResponse({
         client_id: env.GITHUB_CLIENT_ID,
         redirect_uri: env.OAUTH_REDIRECT_URI || 'http://localhost:8888/api/auth/callback'
-      }), {
-        headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-      });
+      }, 200, origin);
     }
 
-    if (request.method !== 'POST') {
-      return new Response(JSON.stringify({ error: 'Method not allowed' }), {
-        status: 405,
-        headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-      });
+    if (url.pathname === '/oauth/token' && request.method === 'POST') {
+      return handleTokenExchange(request, env, origin);
     }
 
-    if (url.pathname === '/oauth/token') {
-      return handleTokenExchange(request, env, origin);
+    if (url.pathname === '/leaderboard' && request.method === 'GET') {
+      return handleGetLeaderboard(request, env, origin);
     }
 
-    return new Response(JSON.stringify({ error: 'Not found' }), {
-      status: 404,
-      headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-    });
+    if (url.pathname === '/leaderboard/sync' && request.method === 'POST') {
+      return handleSyncScore(request, env, origin);
+    }
+
+    return jsonResponse({ error: 'Not found' }, 404, origin);
   }
 };
 
@@ -56,10 +60,7 @@ async function handleTokenExchange(request, env, origin) {
     const { code, redirect_uri } = body;
 
     if (!code) {
-      return new Response(JSON.stringify({ error: 'Missing code parameter' }), {
-        status: 400,
-        headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-      });
+      return jsonResponse({ error: 'Missing code parameter' }, 400, origin);
     }
 
     const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
@@ -79,27 +80,118 @@ async function handleTokenExchange(request, env, origin) {
     const tokenData = await tokenResponse.json();
 
     if (tokenData.error) {
-      return new Response(JSON.stringify({
+      return jsonResponse({
         error: tokenData.error,
         error_description: tokenData.error_description
-      }), {
-        status: 400,
-        headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-      });
+      }, 400, origin);
     }
 
-    return new Response(JSON.stringify({
+    return jsonResponse({
       access_token: tokenData.access_token,
       token_type: tokenData.token_type,
       scope: tokenData.scope
-    }), {
-      headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
-    });
+    }, 200, origin);
+
+  } catch (error) {
+    return jsonResponse({ error: 'Token exchange failed' }, 500, origin);
+  }
+}
+
+async function handleGetLeaderboard(request, env, origin) {
+  try {
+    const url = new URL(request.url);
+    const limit = Math.min(parseInt(url.searchParams.get('limit') || '10'), 100);
+    const offset = parseInt(url.searchParams.get('offset') || '0');
+
+    const result = await env.DB.prepare(`
+      SELECT github_id, username, avatar_url, score,
+             DENSE_RANK() OVER (ORDER BY score DESC) as rank
+      FROM players
+      WHERE score > 0
+      ORDER BY score DESC
+      LIMIT ? OFFSET ?
+    `).bind(limit, offset).all();
+
+    const countResult = await env.DB.prepare(
+      'SELECT COUNT(*) as total FROM players WHERE score > 0'
+    ).first();
+
+    return jsonResponse({
+      entries: result.results.map(row => ({
+        rank: row.rank,
+        github_id: row.github_id,
+        username: row.username,
+        avatar_url: row.avatar_url,
+        score: row.score
+      })),
+      total_players: countResult?.total || 0,
+      has_more: (offset + limit) < (countResult?.total || 0)
+    }, 200, origin);
 
   } catch (error) {
-    return new Response(JSON.stringify({ error: 'Token exchange failed' }), {
-      status: 500,
-      headers: { ...corsHeaders(origin), 'Content-Type': 'application/json' }
+    return jsonResponse({ error: 'Failed to fetch leaderboard', details: error.message }, 500, origin);
+  }
+}
+
+async function handleSyncScore(request, env, origin) {
+  try {
+    const authHeader = request.headers.get('Authorization');
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return jsonResponse({ error: 'Missing authorization' }, 401, origin);
+    }
+
+    const accessToken = authHeader.substring(7);
+
+    const userResponse = await fetch('https://api.github.com/user', {
+      headers: {
+        'Authorization': `token ${accessToken}`,
+        'Accept': 'application/vnd.github+json',
+        'User-Agent': 'ELF-Leaderboard'
+      }
     });
+
+    if (!userResponse.ok) {
+      return jsonResponse({ error: 'Invalid token' }, 401, origin);
+    }
+
+    const userData = await userResponse.json();
+    const body = await request.json();
+    const { score } = body;
+
+    if (typeof score !== 'number' || score < 0) {
+      return jsonResponse({ error: 'Invalid score' }, 400, origin);
+    }
+
+    const existing = await env.DB.prepare(
+      'SELECT score FROM players WHERE github_id = ?'
+    ).bind(userData.id).first();
+
+    if (existing) {
+      if (score > existing.score) {
+        await env.DB.prepare(`
+          UPDATE players SET score = ?, username = ?, avatar_url = ?, updated_at = datetime('now')
+          WHERE github_id = ?
+        `).bind(score, userData.login, userData.avatar_url, userData.id).run();
+      }
+    } else {
+      await env.DB.prepare(`
+        INSERT INTO players (github_id, username, avatar_url, score)
+        VALUES (?, ?, ?, ?)
+      `).bind(userData.id, userData.login, userData.avatar_url, score).run();
+    }
+
+    const rankResult = await env.DB.prepare(`
+      SELECT COUNT(*) + 1 as rank FROM players WHERE score > ?
+    `).bind(score).first();
+
+    return jsonResponse({
+      success: true,
+      score: score,
+      rank: rankResult?.rank || 1,
+      username: userData.login
+    }, 200, origin);
+
+  } catch (error) {
+    return jsonResponse({ error: 'Sync failed', details: error.message }, 500, origin);
   }
 }

infra/cloudflare-worker/wrangler.toml

@@ -4,3 +4,8 @@ compatibility_date = "2024-01-01"
 
 [vars]
 OAUTH_REDIRECT_URI = "http://localhost:8888/api/auth/callback"
+
+[[d1_databases]]
+binding = "DB"
+database_name = "elf-leaderboard"
+database_id = "a4a602bb-9f75-4c50-94f4-6a0daaaa2660"