Merge pull request #28 from utastudents/main

Update
utastudents · Apr 25, 2024 · 4b3b527 · 4b3b527
2 parents 5ac94f6 + fc7ab61
commit 4b3b527
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/html/index.html b/html/index.html
@@ -52,6 +52,23 @@ <h1>The Word Search Game</h1>
         <h2>Timer: <span id="timer">30</span> seconds</h2>
     </div>
 
+    <!-- Leaderboard section -->
+    <div id="leaderboardContainer">
+        <h2>Leaderboard</h2>
+        <table id="leaderboardTable">
+            <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Nickname</th>
+                    <th>Score</th>
+                </tr>
+            </thead>
+            <tbody id="leaderboardBody">
+                <!-- Leaderboard rows will be dynamically added here -->
+            </tbody>
+        </table>
+    </div>
+
     <!--Grid table-->
 
     <div>
@@ -287,7 +304,7 @@ <h2>Timer: <span id="timer">30</span> seconds</h2>
     var timerInterval;
 
     function startTimer() {
-        var timeLeft = 30; // 30 seconds
+        var timeLeft = 300; // 300 seconds
         updateTimerDisplay(timeLeft);
 
         timerInterval = setInterval(function() {
@@ -303,6 +320,13 @@ <h2>Timer: <span id="timer">30</span> seconds</h2>
 
     function updateTimerDisplay(time) {
             timerElement.textContent = time;
+            if (time <= 30) {
+                timerElement.style.color = 'red'; // Change color to red when 30 seconds or less
+                timerSectionElement.style.border = '4px solid red'; // Add red border when 30 seconds or less
+            } else {
+                timerElement.style.color = 'black'; // Reset color to black for other times
+                timerSectionElement.style.border = '4px solid black'; // Reset border to black for other times
+            }
     }
     function resetTimer() {
         clearInterval(timerInterval);
@@ -323,7 +347,17 @@ <h2>Timer: <span id="timer">30</span> seconds</h2>
         firstLetterCell.style.backgroundColor = "yellow";
     }
 
-
+    // Update leaderboard function
+    function updateLeaderboard(players) {
+        const leaderboardList = document.getElementById('leaderboardList');
+        leaderboardList.innerHTML = ''; // Clear existing leaderboard
+
+        players.forEach(function(player, index) {
+            const listItem = document.createElement('li');
+            listItem.textContent = `${index + 1}. ${player.nick} - Score: ${player.score}`;
+            leaderboardList.appendChild(listItem);
+        });
+}
 
 
 </script>

diff --git a/html/style_lobby.css b/html/style_lobby.css
@@ -111,9 +111,11 @@ select {
 #timerSection {
     margin-top: 20px; /* Adjust the margin as needed */
     padding: 10px; /* Add padding for space around the timer */
-    border: 2px solid #ccc; /* Add a border around the timer section */
+    border: 4px solid #0e0101; /* Add a border around the timer section */
     border-radius: 5px; /* Add rounded corners to the border */
     text-align: center; /* Center the timer text */
+    height: 100px; /* Set a fixed height for the timer section */
+    overflow: hidden; /* Hide any content that exceeds the specified height */
 }
 
 /* Add styles for the timer text */
@@ -123,3 +125,27 @@ select {
     font-weight: bold; /* Make the timer text bold */
 }
 
+/* Add styles for the leaderboard section */
+#leaderboardContainer {
+    flex-basis: 30%; 
+    padding: 20px;
+    background: white; 
+    border: 1px solid black;
+    overflow-y: auto; 
+}
+#leaderboardTable {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid black;
+}
+#leaderboardTable th,
+#leaderboardTable td {
+    border: 1px solid black;
+    border-bottom: 1px solid black; /* Add this line */
+    padding: 8px;
+    text-align: left;
+}
+#leaderboardTable th {
+    background-color: #f2f2f2;
+}
+