Create script.js

static/script.js

@@ -0,0 +1,149 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const leaderboardBody = document.getElementById('leaderboard-body');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const lastUpdatedElement = document.getElementById('last-updated');
+    const modal = document.getElementById('code-modal');
+    const modalUsername = document.getElementById('modal-username');
+    const modalCode = document.getElementById('modal-code');
+    const closeModalButton = document.querySelector('.close-button');
+
+    // Fetch from the FastAPI backend endpoint
+    const API_URL = '/api/leaderboard';
+    const REFRESH_INTERVAL_MS = 60 * 1000; // 60 seconds
+
+    async function fetchData() {
+        try {
+            // Fetch directly from our backend API
+            const response = await fetch(API_URL);
+            if (!response.ok) {
+                // Try to get error message from backend if available
+                let errorMsg = `HTTP error! status: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    errorMsg = errorData.detail || errorMsg;
+                } catch (e) { /* Ignore if response is not JSON */ }
+                throw new Error(errorMsg);
+            }
+            const data = await response.json();
+            // The data is expected to be the already sorted list of objects
+            return data;
+        } catch (error) {
+            console.error("Failed to fetch leaderboard data:", error);
+            lastUpdatedElement.textContent = `Error: ${error.message}`; // Display error
+            return null; // Return null to indicate failure
+        }
+    }
+
+    // No sorting needed here - backend does it
+    // function sortData(data) { ... } // REMOVED
+
+    function formatTimestamp(isoString) {
+        // Keep this helper function
+        try {
+            const date = new Date(isoString);
+            return date.toISOString().slice(0, 19).replace('T', ' ');
+        } catch (e) {
+            return 'Invalid Date';
+        }
+    }
+
+    function renderLeaderboard(leaderboardData) {
+        // Clear previous content
+        leaderboardBody.innerHTML = '';
+
+        if (!leaderboardData || leaderboardData.length === 0) {
+             // Check if the loading indicator is still displayed, means fetch failed on load
+            if (loadingIndicator.style.display !== 'none') {
+                leaderboardBody.innerHTML = '<div class="leaderboard-row" style="justify-content: center; color: #aaa;">No data available or failed to load. Check logs.</div>';
+            } else {
+                 // If fetch failed during refresh, keep old data and show error in footer? Or clear?
+                 // Let's clear for now and rely on error message in footer.
+                 leaderboardBody.innerHTML = '<div class="leaderboard-row" style="justify-content: center; color: #aaa;">Failed to refresh data.</div>';
+            }
+            return;
+        }
+
+        leaderboardData.forEach((entry, index) => {
+            const rank = index + 1;
+            const row = document.createElement('div');
+            row.className = 'leaderboard-row';
+            row.setAttribute('data-rank', rank);
+
+            row.innerHTML = `
+                <div class="rank">#${rank}</div>
+                <div class="username" title="${entry.username}">${entry.username}</div>
+                <div class="score">${entry.score} pts</div>
+                <div class="timestamp">${formatTimestamp(entry.timestamp)}</div>
+                <div class="code-action">
+                    <button class="view-code-btn" data-username="${entry.username}">View</button>
+                </div>
+            `;
+
+            const button = row.querySelector('.view-code-btn');
+            button._codeData = entry.code; // Store code directly
+            button.addEventListener('click', handleViewCodeClick);
+
+            leaderboardBody.appendChild(row);
+        });
+    }
+
+    function handleViewCodeClick(event) {
+        const button = event.currentTarget;
+        const username = button.getAttribute('data-username');
+        const code = button._codeData;
+        showCodeModal(username, code);
+    }
+
+     function showCodeModal(username, code) {
+        modalUsername.textContent = `Code from ${username}`;
+        modalCode.textContent = code || '// No code submitted or available';
+
+        if (typeof hljs !== 'undefined') {
+            modalCode.className = 'language-python';
+            hljs.highlightElement(modalCode);
+        }
+        modal.style.display = 'block';
+    }
+
+    function hideCodeModal() {
+        modal.style.display = 'none';
+        modalCode.textContent = '';
+        modalUsername.textContent = '';
+    }
+
+    async function updateLeaderboard() {
+         if (!leaderboardBody.hasChildNodes()) {
+             loadingIndicator.style.display = 'flex';
+         } else {
+             lastUpdatedElement.textContent = 'Updating...';
+         }
+
+        const leaderboardData = await fetchData(); // Fetches already sorted data
+
+        loadingIndicator.style.display = 'none'; // Hide loading indicator regardless of success/fail
+
+        if (leaderboardData) {
+            renderLeaderboard(leaderboardData);
+             // Only update timestamp on success
+             lastUpdatedElement.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+        } else {
+            // Error occurred, message already set in fetchData
+            // Optionally render empty state if needed
+             if (!leaderboardBody.hasChildNodes()) {
+                  renderLeaderboard(null); // Show 'No data' message if initial load failed
+             }
+        }
+    }
+
+    // --- Event Listeners ---
+    closeModalButton.addEventListener('click', hideCodeModal);
+    window.addEventListener('click', (event) => {
+        if (event.target === modal) {
+            hideCodeModal();
+        }
+    });
+
+    // --- Initial Load and Auto-Refresh ---
+    updateLeaderboard(); // Initial load
+    setInterval(updateLeaderboard, REFRESH_INTERVAL_MS); // Refresh every 60 seconds
+});