Add leaderboard with HuggingFace OAuth and Supabase integration

README.md

@@ -5,6 +5,8 @@ colorFrom: yellow
 colorTo: red
 sdk: static
 pinned: false
+hf_oauth: true
+hf_oauth_expiration_minutes: 480
 ---
 
 # 🎯 Paper Popularity Game

index.html

@@ -410,6 +410,254 @@
             font-weight: 700;
         }
 
+        /* Top-left buttons container */
+        .top-left-buttons {
+            position: fixed;
+            top: 1.5vh;
+            left: 3vw;
+            display: flex;
+            gap: 10px;
+            z-index: 100;
+        }
+
+        /* Leaderboard Button */
+        .leaderboard-btn {
+            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.1) 100%);
+            padding: clamp(8px, 1vh, 14px) clamp(16px, 2vw, 28px);
+            border-radius: 50px;
+            font-size: clamp(0.8rem, 1.1vw, 1rem);
+            border: 1px solid rgba(255, 215, 0, 0.3);
+            backdrop-filter: blur(10px);
+            font-weight: 600;
+            color: #ffd700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .leaderboard-btn:hover {
+            transform: scale(1.05);
+            border-color: rgba(255, 215, 0, 0.6);
+            box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
+        }
+
+        /* Login Button */
+        .login-btn {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            padding: clamp(8px, 1vh, 14px) clamp(16px, 2vw, 28px);
+            border-radius: 50px;
+            font-size: clamp(0.8rem, 1.1vw, 1rem);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            font-weight: 600;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .login-btn:hover {
+            transform: scale(1.05);
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+
+        /* User Badge (when logged in) */
+        .user-badge {
+            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
+            padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.5vw, 20px);
+            border-radius: 50px;
+            font-size: clamp(0.75rem, 1vw, 0.9rem);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            backdrop-filter: blur(10px);
+            font-weight: 600;
+            color: #22c55e;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .user-badge img {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+        }
+
+        /* Leaderboard Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(8px);
+            z-index: 200;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .modal-overlay.visible {
+            display: flex;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .modal {
+            background: linear-gradient(145deg, rgba(26, 26, 46, 0.98) 0%, rgba(15, 52, 96, 0.98) 100%);
+            border-radius: 24px;
+            padding: clamp(24px, 4vw, 40px);
+            max-width: 500px;
+            width: 100%;
+            max-height: 80vh;
+            overflow-y: auto;
+            border: 1px solid rgba(255, 215, 0, 0.2);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.1);
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from { transform: translateY(-30px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .modal-title {
+            font-size: clamp(1.3rem, 2.5vw, 1.8rem);
+            font-weight: 700;
+            color: #ffd700;
+        }
+
+        .modal-close {
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: #fff;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
+        }
+
+        .modal-close:hover {
+            background: rgba(239, 68, 68, 0.3);
+        }
+
+        /* Leaderboard Table */
+        .leaderboard-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .leaderboard-entry {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            transition: all 0.3s ease;
+        }
+
+        .leaderboard-entry:hover {
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .leaderboard-entry.current-user {
+            background: rgba(255, 215, 0, 0.1);
+            border: 1px solid rgba(255, 215, 0, 0.3);
+        }
+
+        .leaderboard-rank {
+            font-weight: 700;
+            font-size: 1.1rem;
+            width: 32px;
+            text-align: center;
+            color: #64748b;
+        }
+
+        .leaderboard-entry:nth-child(1) .leaderboard-rank { color: #ffd700; }
+        .leaderboard-entry:nth-child(2) .leaderboard-rank { color: #c0c0c0; }
+        .leaderboard-entry:nth-child(3) .leaderboard-rank { color: #cd7f32; }
+
+        .leaderboard-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .leaderboard-name {
+            flex: 1;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .leaderboard-score {
+            font-weight: 700;
+            color: #22c55e;
+            font-size: 1.1rem;
+        }
+
+        .leaderboard-empty {
+            text-align: center;
+            padding: 40px 20px;
+            color: #64748b;
+        }
+
+        .leaderboard-loading {
+            text-align: center;
+            padding: 40px 20px;
+            color: #94a3b8;
+        }
+
+        .login-prompt {
+            text-align: center;
+            padding: 20px;
+            background: rgba(255, 215, 0, 0.1);
+            border-radius: 12px;
+            margin-top: 16px;
+        }
+
+        .login-prompt p {
+            color: #94a3b8;
+            margin-bottom: 12px;
+            font-size: 0.9rem;
+        }
+
+        .login-prompt button {
+            background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
+            color: #1a1a2e;
+            border: none;
+            padding: 10px 24px;
+            border-radius: 50px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .login-prompt button:hover {
+            transform: scale(1.05);
+        }
+
         /* Loading State */
         .loading {
             display: flex;
@@ -604,10 +852,38 @@
     </style>
 </head>
 <body>
+    <!-- Top Left Buttons: Leaderboard & Login -->
+    <div class="top-left-buttons">
+        <button class="leaderboard-btn" id="leaderboardBtn">🏆 Leaderboard</button>
+        <button class="login-btn" id="loginBtn">🤗 Sign in</button>
+        <div class="user-badge" id="userBadge" style="display: none;">
+            <img id="userAvatar" src="" alt="avatar">
+            <span id="userName"></span>
+        </div>
+    </div>
+
+    <!-- High Score -->
     <div class="high-score">
         🏆 Best Streak: <span id="highScore">0</span>
     </div>
 
+    <!-- Leaderboard Modal -->
+    <div class="modal-overlay" id="leaderboardModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h2 class="modal-title">🏆 Global Leaderboard</h2>
+                <button class="modal-close" id="modalClose">✕</button>
+            </div>
+            <div class="leaderboard-list" id="leaderboardList">
+                <div class="leaderboard-loading">Loading leaderboard...</div>
+            </div>
+            <div class="login-prompt" id="loginPrompt" style="display: none;">
+                <p>Sign in with your Hugging Face account to compete!</p>
+                <button id="modalLoginBtn">🤗 Sign in with Hugging Face</button>
+            </div>
+        </div>
+    </div>
+
     <div class="container">
         <header>
             <h1>🎯 Paper Popularity Game</h1>
@@ -641,6 +917,226 @@
         </footer>
     </div>
 
+    <!-- Hugging Face Hub for OAuth -->
+    <script type="module">
+        import { oauthLoginUrl, oauthHandleRedirectIfPresent } from 'https://esm.sh/@huggingface/hub';
+
+        // ========================================
+        // SUPABASE CONFIGURATION
+        // ========================================
+        // To enable the leaderboard, create a free Supabase project at https://supabase.com
+        // Then replace these values with your project's URL and anon key
+        const SUPABASE_URL = 'YOUR_SUPABASE_URL';  // e.g., 'https://xxxxx.supabase.co'
+        const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
+
+        // Check if Supabase is configured
+        const isSupabaseConfigured = SUPABASE_URL !== 'YOUR_SUPABASE_URL' && SUPABASE_ANON_KEY !== 'YOUR_SUPABASE_ANON_KEY';
+
+        let supabase = null;
+        if (isSupabaseConfigured) {
+            const { createClient } = await import('https://esm.sh/@supabase/supabase-js@2');
+            supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+        }
+
+        // ========================================
+        // USER STATE
+        // ========================================
+        let currentUser = null;
+
+        // ========================================
+        // DOM ELEMENTS
+        // ========================================
+        const loginBtn = document.getElementById('loginBtn');
+        const userBadge = document.getElementById('userBadge');
+        const userAvatar = document.getElementById('userAvatar');
+        const userName = document.getElementById('userName');
+        const leaderboardBtn = document.getElementById('leaderboardBtn');
+        const leaderboardModal = document.getElementById('leaderboardModal');
+        const modalClose = document.getElementById('modalClose');
+        const leaderboardList = document.getElementById('leaderboardList');
+        const loginPrompt = document.getElementById('loginPrompt');
+        const modalLoginBtn = document.getElementById('modalLoginBtn');
+
+        // ========================================
+        // HUGGINGFACE OAUTH
+        // ========================================
+        async function initAuth() {
+            try {
+                const oauthResult = await oauthHandleRedirectIfPresent();
+
+                if (oauthResult) {
+                    currentUser = {
+                        id: oauthResult.userInfo.sub,
+                        username: oauthResult.userInfo.preferred_username || oauthResult.userInfo.name,
+                        avatar: oauthResult.userInfo.picture
+                    };
+                    showLoggedInUI();
+
+                    // Sync local high score to leaderboard
+                    const localHighScore = parseInt(localStorage.getItem('paperGameHighScore')) || 0;
+                    if (localHighScore > 0) {
+                        await saveScoreToLeaderboard(localHighScore);
+                    }
+                } else {
+                    showLoggedOutUI();
+                }
+            } catch (error) {
+                console.log('OAuth not available or error:', error);
+                showLoggedOutUI();
+            }
+        }
+
+        function showLoggedInUI() {
+            loginBtn.style.display = 'none';
+            userBadge.style.display = 'flex';
+            userAvatar.src = currentUser.avatar || '';
+            userAvatar.onerror = function() { this.style.display = 'none'; };
+            userName.textContent = currentUser.username;
+            loginPrompt.style.display = 'none';
+        }
+
+        function showLoggedOutUI() {
+            loginBtn.style.display = 'flex';
+            userBadge.style.display = 'none';
+            loginPrompt.style.display = 'block';
+        }
+
+        async function handleLogin() {
+            try {
+                const loginUrl = await oauthLoginUrl();
+                window.location.href = loginUrl;
+            } catch (error) {
+                console.error('Login failed:', error);
+                alert('Login is only available when running on Hugging Face Spaces');
+            }
+        }
+
+        // ========================================
+        // LEADERBOARD FUNCTIONS
+        // ========================================
+        async function loadLeaderboard() {
+            if (!isSupabaseConfigured) {
+                leaderboardList.innerHTML = `
+                    <div class="leaderboard-empty">
+                        <p style="font-size: 2rem; margin-bottom: 16px;">🔧</p>
+                        <p>Leaderboard not configured yet.</p>
+                        <p style="font-size: 0.8rem; margin-top: 8px; color: #64748b;">
+                            Set up Supabase to enable global leaderboards!
+                        </p>
+                    </div>
+                `;
+                return;
+            }
+
+            leaderboardList.innerHTML = '<div class="leaderboard-loading">Loading leaderboard...</div>';
+
+            try {
+                const { data: scores, error } = await supabase
+                    .from('paper_game_leaderboard')
+                    .select('user_id, username, avatar_url, score')
+                    .order('score', { ascending: false })
+                    .limit(20);
+
+                if (error) throw error;
+
+                if (!scores || scores.length === 0) {
+                    leaderboardList.innerHTML = `
+                        <div class="leaderboard-empty">
+                            <p style="font-size: 2rem; margin-bottom: 16px;">🎮</p>
+                            <p>No scores yet!</p>
+                            <p style="font-size: 0.8rem; margin-top: 8px;">Be the first to set a record!</p>
+                        </div>
+                    `;
+                    return;
+                }
+
+                leaderboardList.innerHTML = scores.map((entry, index) => `
+                    <div class="leaderboard-entry ${currentUser && entry.user_id === currentUser.id ? 'current-user' : ''}">
+                        <span class="leaderboard-rank">${index + 1}</span>
+                        <img class="leaderboard-avatar" src="${entry.avatar_url || ''}" alt="" onerror="this.style.display='none'">
+                        <span class="leaderboard-name">${escapeHtml(entry.username)}</span>
+                        <span class="leaderboard-score">${entry.score} 🔥</span>
+                    </div>
+                `).join('');
+            } catch (error) {
+                console.error('Failed to load leaderboard:', error);
+                leaderboardList.innerHTML = `
+                    <div class="leaderboard-empty">
+                        <p style="font-size: 2rem; margin-bottom: 16px;">😢</p>
+                        <p>Failed to load leaderboard</p>
+                    </div>
+                `;
+            }
+        }
+
+        async function saveScoreToLeaderboard(score) {
+            if (!isSupabaseConfigured || !currentUser || score <= 0) return;
+
+            try {
+                // Check if user already has a score
+                const { data: existing } = await supabase
+                    .from('paper_game_leaderboard')
+                    .select('score')
+                    .eq('user_id', currentUser.id)
+                    .single();
+
+                // Only update if new score is higher
+                if (!existing || score > existing.score) {
+                    await supabase
+                        .from('paper_game_leaderboard')
+                        .upsert({
+                            user_id: currentUser.id,
+                            username: currentUser.username,
+                            avatar_url: currentUser.avatar,
+                            score: score,
+                            updated_at: new Date().toISOString()
+                        }, { onConflict: 'user_id' });
+                }
+            } catch (error) {
+                console.error('Failed to save score:', error);
+            }
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // ========================================
+        // MODAL HANDLERS
+        // ========================================
+        function openLeaderboard() {
+            leaderboardModal.classList.add('visible');
+            loadLeaderboard();
+        }
+
+        function closeLeaderboard() {
+            leaderboardModal.classList.remove('visible');
+        }
+
+        // Event Listeners
+        leaderboardBtn.addEventListener('click', openLeaderboard);
+        modalClose.addEventListener('click', closeLeaderboard);
+        leaderboardModal.addEventListener('click', (e) => {
+            if (e.target === leaderboardModal) closeLeaderboard();
+        });
+        loginBtn.addEventListener('click', handleLogin);
+        modalLoginBtn.addEventListener('click', handleLogin);
+
+        // Escape key to close modal
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeLeaderboard();
+        });
+
+        // Expose saveScoreToLeaderboard for game code
+        window.saveScoreToLeaderboard = saveScoreToLeaderboard;
+        window.currentUser = () => currentUser;
+
+        // Initialize auth
+        initAuth();
+    </script>
+
     <script>
         // Game State
         let papers = [];
@@ -881,6 +1377,11 @@
                     highScore = streak;
                     localStorage.setItem('paperGameHighScore', highScore);
                     highScoreEl.textContent = highScore;
+
+                    // Save to global leaderboard if logged in
+                    if (window.saveScoreToLeaderboard) {
+                        window.saveScoreToLeaderboard(highScore);
+                    }
                 }
             } else {
                 streak = 0;