Spaces:

ItsJayKee
/

codeflow-typeracer

Running

App Files Files Community

ItsJayKee commited on Jan 12

Commit

0270f27

verified ·

1 Parent(s): aa478aa

connect the code to my php

Browse files

$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'code_typing_game';

Files changed (4) hide show

components/header.js +3 -4
db.php +60 -0
leaderboard.html +85 -0
script.js +44 -0

components/header.js CHANGED Viewed

@@ -30,10 +30,9 @@ class CustomHeader extends HTMLElement {
             CodeFlow
           </a>
           <nav class="hidden md:flex space-x-6">
-            <a href="#" class="nav-link">Home</a>
-            <a href="#" class="nav-link">About</a>
-            <a href="#" class="nav-link">Leaderboard</a>
-          </nav>
           <button class="md:hidden">
             <i data-feather="menu"></i>
           </button>

             CodeFlow
           </a>
           <nav class="hidden md:flex space-x-6">
+            <a href="/" class="nav-link">Home</a>
+            <a href="/leaderboard.html" class="nav-link">Leaderboard</a>
+</nav>
           <button class="md:hidden">
             <i data-feather="menu"></i>
           </button>

db.php ADDED Viewed

	@@ -0,0 +1,60 @@

+```php
+<?php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: POST');
+header('Access-Control-Allow-Headers: Content-Type');
+$host = 'localhost';
+$user = 'root';
+$pass = '';
+$db   = 'code_typing_game';
+// Create connection
+$conn = new mysqli($host, $user, $pass, $db);
+// Check connection
+if ($conn->connect_error) {
+    die(json_encode(['success' => false, 'error' => 'Connection failed: ' . $conn->connect_error]));
+}
+// Handle POST request to save results
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $data = json_decode(file_get_contents('php://input'), true);
+    $language = $conn->real_escape_string($data['language'] ?? '');
+    $wpm = intval($data['wpm'] ?? 0);
+    $accuracy = intval($data['accuracy'] ?? 0);
+    $time = intval($data['time'] ?? 0);
+    $timestamp = date('Y-m-d H:i:s');
+    $sql = "INSERT INTO results (language, wpm, accuracy, time_taken, created_at)
+            VALUES ('$language', $wpm, $accuracy, $time, '$timestamp')";
+    if ($conn->query($sql) === TRUE) {
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => $conn->error]);
+    }
+}
+// Handle GET request to fetch leaderboard
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    $sql = "SELECT * FROM results ORDER BY wpm DESC LIMIT 10";
+    $result = $conn->query($sql);
+    $leaderboard = [];
+    if ($result->num_rows > 0) {
+        while($row = $result->fetch_assoc()) {
+            $leaderboard[] = $row;
+        }
+    }
+    echo json_encode(['success' => true, 'data' => $leaderboard]);
+}
+$conn->close();
+?>
+```
+Now let's update the JavaScript to save results to the database:

leaderboard.html ADDED Viewed

	@@ -0,0 +1,85 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaderboard - CodeFlow Typing Challenge</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>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8 max-w-4xl">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold mb-2 text-indigo-400">Leaderboard</h1>
+            <p class="text-lg text-gray-400">Top typing speeds from our community</p>
+        </div>
+        <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+            <div id="leaderboard-container" class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-700">
+                    <thead>
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Rank</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Language</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">WPM</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Accuracy</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Time</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Date</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leaderboard-body" class="divide-y divide-gray-700">
+                        <!-- Leaderboard data will be inserted here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+        // Fetch and display leaderboard
+        async function loadLeaderboard() {
+            const leaderboard = await fetchLeaderboard();
+            const tbody = document.getElementById('leaderboard-body');
+            tbody.innerHTML = '';
+            leaderboard.forEach((entry, index) => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap">${index + 1}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.language.toUpperCase()}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.wpm}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.accuracy}%</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.time_taken}s</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${new Date(entry.created_at).toLocaleString()}</td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+        // Call fetchLeaderboard from script.js
+        async function fetchLeaderboard() {
+            try {
+                const response = await fetch('db.php');
+                const data = await response.json();
+                if (data.success) {
+                    return data.data;
+                }
+                return [];
+            } catch (error) {
+                console.error('Error fetching leaderboard:', error);
+                return [];
+            }
+        }
+        document.addEventListener('DOMContentLoaded', loadLeaderboard);
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -249,6 +249,50 @@ function endGame(isCompleted = false) {
         finalAccuracy.textContent = `${accuracy}%`;
         finalTime.textContent = `${timeTaken}s`;
         resultsSection.classList.remove('hidden');
     }
 }
 // Event listeners

         finalAccuracy.textContent = `${accuracy}%`;
         finalTime.textContent = `${timeTaken}s`;
         resultsSection.classList.remove('hidden');
+        // Save results to database
+        const language = document.getElementById('language-select').value;
+        saveResults(language, wpm, accuracy, timeTaken);
+    }
+}
+// Save results to database
+async function saveResults(language, wpm, accuracy, timeTaken) {
+    try {
+        const response = await fetch('db.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                language,
+                wpm,
+                accuracy,
+                time: timeTaken
+            })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            console.error('Failed to save results:', data.error);
+        }
+    } catch (error) {
+        console.error('Error saving results:', error);
+    }
+}
+// Fetch leaderboard data
+async function fetchLeaderboard() {
+    try {
+        const response = await fetch('db.php');
+        const data = await response.json();
+        if (data.success) {
+            return data.data;
+        }
+        return [];
+    } catch (error) {
+        console.error('Error fetching leaderboard:', error);
+        return [];
     }
 }
 // Event listeners