Spaces:

ItsJayKee
/

codetyper-racer

Running

App Files Files Community

ItsJayKee commited on Jan 16

Commit

0a23511

verified ·

1 Parent(s): 1af3855

continue

Browse files

Files changed (4) hide show

index.html +4 -2
leaderboard.html +98 -0
script.js +41 -12
typing-test.html +5 -1

index.html CHANGED Viewed

@@ -15,9 +15,11 @@
             <div class="text-center mb-8">
                 <h1 class="text-3xl font-bold text-gray-800">CodeTyper Racer 🚀</h1>
                 <p class="text-gray-600 mt-2">Login to start your coding speed challenge</p>
             </div>
-            <form id="loginForm" class="space-y-6">
                 <div>
                     <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                     <input type="text" id="name" name="name" required

             <div class="text-center mb-8">
                 <h1 class="text-3xl font-bold text-gray-800">CodeTyper Racer 🚀</h1>
                 <p class="text-gray-600 mt-2">Login to start your coding speed challenge</p>
+                <div class="mt-4">
+                    <a href="leaderboard.html" class="text-blue-600 hover:text-blue-800 transition">View Leaderboard</a>
+                </div>
             </div>
+<form id="loginForm" class="space-y-6">
                 <div>
                     <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                     <input type="text" id="name" name="name" required

leaderboard.html ADDED Viewed

	@@ -0,0 +1,98 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeTyper Racer - Leaderboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <header class="bg-gray-800 py-4 shadow-lg">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <h1 class="text-xl font-bold">CodeTyper Racer 🏆</h1>
+            <a href="index.html" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition">
+                <i data-feather="home"></i>
+                <span>Home</span>
+            </a>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="bg-gray-800 rounded-xl shadow-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Top Coders</h2>
+                <div class="flex space-x-2">
+                    <button id="refreshBtn" class="bg-blue-600 px-3 py-1 rounded-lg hover:bg-blue-700 transition">
+                        <i data-feather="refresh-cw"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-gray-700">
+                            <th class="text-left py-3 px-4">Rank</th>
+                            <th class="text-left py-3 px-4">Name</th>
+                            <th class="text-left py-3 px-4">Grade</th>
+                            <th class="text-left py-3 px-4">Section</th>
+                            <th class="text-right py-3 px-4">WPM</th>
+                            <th class="text-right py-3 px-4">Accuracy</th>
+                            <th class="text-right py-3 px-4">Date</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leaderboardTable">
+                        <!-- Leaderboard data will be inserted here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        const leaderboardTable = document.getElementById('leaderboardTable');
+        const refreshBtn = document.getElementById('refreshBtn');
+        function loadLeaderboard() {
+            leaderboardTable.innerHTML = '';
+            // Get leaderboard from local storage
+            let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+            // Sort by WPM descending
+            leaderboard.sort((a, b) => b.wpm - a.wpm);
+            // Display all entries
+            leaderboard.forEach((entry, index) => {
+                const row = document.createElement('tr');
+                row.className = 'border-b border-gray-700 hover:bg-gray-700';
+                const date = new Date(entry.timestamp);
+                const formattedDate = date.toLocaleDateString();
+                row.innerHTML = `
+                    <td class="py-3 px-4">${index + 1}</td>
+                    <td class="py-3 px-4">${entry.name}</td>
+                    <td class="py-3 px-4">${entry.gradeLevel}</td>
+                    <td class="py-3 px-4">${entry.section}</td>
+                    <td class="py-3 px-4 text-right">${entry.wpm}</td>
+                    <td class="py-3 px-4 text-right">${entry.accuracy}%</td>
+                    <td class="py-3 px-4 text-right">${formattedDate}</td>
+                `;
+                leaderboardTable.appendChild(row);
+            });
+        }
+        refreshBtn.addEventListener('click', loadLeaderboard);
+        // Load initial data
+        loadLeaderboard();
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -14,7 +14,6 @@ function calculateTypingStats(startTime, endTime, correctChars, totalChars) {
     const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
     return { wpm, accuracy, timeElapsed, totalChars };
 }
 // Save result to leaderboard
 function saveToLeaderboard(result) {
     const userData = JSON.parse(localStorage.getItem('userData'));
@@ -22,16 +21,46 @@ function saveToLeaderboard(result) {
     let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
-    leaderboard.push({
-        name: userData.name,
-        gradeLevel: userData.gradeLevel,
-        section: userData.section,
-        wpm: result.wpm,
-        accuracy: result.accuracy,
-        time: result.timeElapsed,
-        chars: result.totalChars,
-        timestamp: new Date().toISOString()
-    });
     localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
-}

     const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
     return { wpm, accuracy, timeElapsed, totalChars };
 }
 // Save result to leaderboard
 function saveToLeaderboard(result) {
     const userData = JSON.parse(localStorage.getItem('userData'));
     let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+    // Check if user already has an entry and update if new score is higher
+    const existingEntryIndex = leaderboard.findIndex(
+        entry => entry.name === userData.name &&
+                entry.gradeLevel === userData.gradeLevel &&
+                entry.section === userData.section
+    );
+    if (existingEntryIndex >= 0) {
+        // Update only if new score is better
+        if (result.wpm > leaderboard[existingEntryIndex].wpm) {
+            leaderboard[existingEntryIndex] = {
+                ...leaderboard[existingEntryIndex],
+                wpm: result.wpm,
+                accuracy: result.accuracy,
+                time: result.timeElapsed,
+                chars: result.totalChars,
+                timestamp: new Date().toISOString()
+            };
+        }
+    } else {
+        // Add new entry
+        leaderboard.push({
+            name: userData.name,
+            gradeLevel: userData.gradeLevel,
+            section: userData.section,
+            wpm: result.wpm,
+            accuracy: result.accuracy,
+            time: result.timeElapsed,
+            chars: result.totalChars,
+            timestamp: new Date().toISOString()
+        });
+    }
+    // Sort by WPM descending
+    leaderboard.sort((a, b) => b.wpm - a.wpm);
+    // Keep only top 100 entries
+    if (leaderboard.length > 100) {
+        leaderboard = leaderboard.slice(0, 100);
+    }
     localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
+}

typing-test.html CHANGED Viewed

@@ -14,7 +14,11 @@
         <div class="container mx-auto px-4 flex justify-between items-center">
             <h1 class="text-xl font-bold">CodeTyper Racer 🚀</h1>
             <div class="flex items-center space-x-4">
-                <div id="timerDisplay" class="bg-gray-700 px-4 py-2 rounded-lg font-mono">
                     00:00
                 </div>
                 <button id="leaderboardBtn" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition">

         <div class="container mx-auto px-4 flex justify-between items-center">
             <h1 class="text-xl font-bold">CodeTyper Racer 🚀</h1>
             <div class="flex items-center space-x-4">
+                <a href="leaderboard.html" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition">
+                    <i data-feather="award"></i>
+                    <span>Leaderboard</span>
+                </a>
+<div id="timerDisplay" class="bg-gray-700 px-4 py-2 rounded-lg font-mono">
                     00:00
                 </div>
                 <button id="leaderboardBtn" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition">