Added functionality for timer

html/game.js

@@ -9,6 +9,9 @@ class Game {
 		this.playersList = document.querySelector(".players-list");
 		this.preGameLobby = this.gamePageDiv.querySelector(".pre-game-lobby");
 		this.selectedCells = [];
+		this.timerDisplay = document.getElementById("timerDisplay");
+        this.timer = null;
+        this.gameDuration = 180; 
 
 		// Event listeners for game actions
 		this.startButton.addEventListener("click", () => this.startGameClicked());
@@ -20,8 +23,43 @@ class Game {
 			gameId: this.gameId,
 		};
 		this.app.websocket.send(JSON.stringify(startGameMessage));
+		this.startTimer(this.gameDuration);
+
 	}
 
+	startTimer(duration) {
+        let timer = duration, minutes, seconds;
+        this.timer = setInterval(() => {
+            minutes = parseInt(timer / 60, 10);
+            seconds = parseInt(timer % 60, 10);
+
+            minutes = minutes < 10 ? "0" + minutes : minutes;
+            seconds = seconds < 10 ? "0" + seconds : seconds;
+
+            this.timerDisplay.textContent = minutes + ":" + seconds;
+
+            if (--timer < 0) {
+                clearInterval(this.timer);
+                this.timerEnded();
+            }
+        }, 1000);
+    }
+
+    timerEnded() {
+        console.log("Timer ended. Game over.");
+        this.endGame();
+        const timeUpMessage = {
+            action: "timeUp",
+            gameId: this.gameId
+        };
+        this.app.websocket.send(JSON.stringify(timeUpMessage));
+    }
+
+    endGame() {
+        console.log("End the game on the client side.");
+        clearInterval(this.timer); // Make sure the timer stops when the game ends
+    }
+
 	updateGamePage(data) {
 		this.gameGrid.classList.remove("hidden");
 		this.preGameLobby.classList.add("hidden");

html/index.html

@@ -59,6 +59,16 @@ <h3>Available Games</h3>
 				</div>
 			</div>
 
+			<div class="game-section" id="gamePage">
+				<!-- Existing content -->
+				<div class="game-timer">
+					<h3>Time Remaining:</h3>
+					<span id="timerDisplay">03:00</span> <!-- Initial timer display -->
+				</div>
+
+			</div>
+
+
 			<div class="chat-container" id="chatBox">
 				<h2>Global Chat</h2>
 				<div class="messagesContainer"></div>

src/main/java/uta/cse3310/Game.java

@@ -100,12 +100,15 @@ public boolean isGameActive() {
     private void endGame() {
         this.gameActive = false;
         this.listener.onGameEnded(this);
+        System.out.println("Game ended: " + name);
+
         timer.shutdown();
     }
 
     public void startGame() {
         this.gameActive = true;
         timer = Executors.newSingleThreadScheduledExecutor();
         timer.schedule(this::endGame, gameDuration, TimeUnit.SECONDS);
+        System.out.println("Game started: " + name + ". It will end in " + gameDuration + " seconds.");
     }
 }