2048 update

leaderboard fixed, improved UI
Gaspardcode · Aug 30, 2024 · bde4d1c · bde4d1c
1 parent b5d22e7
commit bde4d1c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 18 deletions.
diff --git a/tools/2048/index.html b/tools/2048/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="eng">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,6 +14,7 @@
             align-items: center;
             /*height: 100vh;*/
             background-color: #faf8ef;
+            margin:0px;
         }
         #score {
             font-size: 24px;
@@ -36,6 +37,23 @@
             align-items: center;
             border-radius: 5px;
         }
+        #leaderboard {
+            justify-content: right;
+        }
+        .dashboard-cards {
+            background-color: #f9f9f9;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .dashboard {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 15px;
+        }
         .tile[data-value="2"]    { background-color: #eee4da; color: #776e65; }
         .tile[data-value="4"]    { background-color: #ede0c8; color: #776e65; }
         .tile[data-value="8"]    { background-color: #f2b179; color: #f9f6f2; }
@@ -65,6 +83,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
+    <!-- Firebase imports -->
+    <script src="https://www.gstatic.com/firebasejs/10.12.5/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.12.5/firebase-auth-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.12.5/firebase-firestore-compat.js"></script>
+
    </head>
 
 <body>
@@ -100,14 +123,16 @@
             </div>
         </div>
     </nav>
+    <span class="dashboard">
+        <div class="dashboard-cards" id="score">Score: 0</div>
+        <div class = "dashboard-cards" id="game-board"></div>
+        <div class="dashboard-cards" id="leaderboard">
+            <h2>Leaderboard</h2>
+        </div>
+    </span>
 
-    <div id="score">Score: 0</div>
-    <div id="game-board"></div>
-
-    <script src="https://www.gstatic.com/firebasejs/10.12.5/firebase-app-compat.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.12.5/firebase-firestore-compat.js"></script>
-
-    <script >
+
+    <script>
          const firebaseConfig = {
             apiKey: "AIzaSyCFu-Dh9zwypzRBa9JBipmrJSDmGBoPfxs",
             authDomain: "website-8c2a3.firebaseapp.com",
@@ -120,16 +145,31 @@
 
         // Initialize Firebase
         const app = firebase.initializeApp(firebaseConfig);
-
         // Initialise Firestore
         const db = firebase.firestore();
+        // Authentification
+        const auth = firebase.auth();
+
+        var uid = null;
+
+        auth.signInAnonymously()
+            .then(() => {
+                // Signed in..
+
+            })
+            .catch((error) => {
+                console.log(`${error.message}`);
+        });
+        auth.onAuthStateChanged((user) => {
+            if (user) {
+                uid = user.uid;
+            }
+        });
+
     </script>
 
     <!-- Once firebase is setup, uncomment-->
     <script src="../assets/js/2048.js"></script>
-    <div id="leaderboard">
-        <h2>Leaderboard</h2>
-    </div>
 
 
     </body>

diff --git a/tools/assets/js/2048.js b/tools/assets/js/2048.js
@@ -9,6 +9,7 @@
             addRandomTile();
             addRandomTile();
             updateBoard();
+            getLeaderboard();
         }
 
         function updateScore() {
@@ -136,9 +137,7 @@
                     break;
             }
             updateBoard();
-            if (checkGameOver()) {
-                initBoard();
-            }
+            checkGameOver();
         });
 
         /*LEADERBOARD*/
@@ -157,18 +156,24 @@
         async function getLeaderboard() {
             const leaderboard = document.getElementById('leaderboard');
             leaderboard.innerHTML = ''; // Clear current leaderboard
+            const title = document.createElement('h2');
+            title.textContent = "Leaderboard";
+            leaderboard.appendChild(title);
 
             try {
                 const querySnapshot = await db.collection("leaderboard")
                     .orderBy("score", "desc")
                     .limit(10) // Limite à 10 les scores affichés
                     .get();
 
+                cnt = 1;
                 querySnapshot.forEach((doc) => {
                     const data = doc.data();
                     const entry = document.createElement('div');
-                    entry.textContent = `${data.username}: ${data.score}`;
+                    entry.textContent = `${cnt}        |       ${data.username} | highest score: ${data.score}`;
+                    cnt += 1;
                     leaderboard.appendChild(entry);
+                    console.log(entry.textContent);
                 });
             } catch (e) {
                 console.error("Error getting documents: ", e);
@@ -179,7 +184,6 @@
             if (playerName) {
                 addScoreToLeaderboard(playerName, score);
             }
-            getLeaderboard();  // Met à jour le leaderboard après avoir ajouté un nouveau score
             initBoard();  // Redémarre le jeu
         }
 

diff --git a/tools/maze/index.html b/tools/maze/index.html
@@ -97,7 +97,8 @@
 <body>
 
     <!-- NAVIGATION -->
-    <nav class="theme-dark"><div class="container-menu">
+    <nav class="theme-dark">
+        <div class="container-menu">
         <a href="#" class="brand">
             <img class ="logo" src="../../assets/img/logo.png" width="400" height="400" alt="Sample website logo">
         </a>