Replace script.js

public/script.js

@@ -4,6 +4,7 @@ let questions = [];
 let roomCode = null;
 let isRoomCreator = false;
 let playerName = null;
+let timerInterval; 
 
 window.onload = () => {
     const params = new URLSearchParams(window.location.search);
@@ -25,14 +26,20 @@ function generatePlayerId() {
 }
 
 document.getElementById('startGame').addEventListener('click', () => {
-    const inputRoomCode = prompt('Enter room code to join or leave blank to create a new room:');
-    playerName = prompt('Enter your name:'); 
+    document.getElementById('playModal').style.display = 'flex';
+});
+
+document.getElementById('modalPlayButton').addEventListener('click', () => {
+    const inputRoomCode = document.getElementById('modalRoomCode').value.trim();
+    const playerName = document.getElementById('modalPlayerName').value.trim();
 
-    if (!playerName || playerName.trim() === '') {
+    if (!playerName) {
         alert('Name is required to join the game!');
         return;
     }
 
+    document.getElementById('playModal').style.display = 'none';
+
     if (inputRoomCode) {
         roomCode = inputRoomCode;
         socket.emit('joinRoom', { roomCode, playerName });
@@ -42,9 +49,28 @@ document.getElementById('startGame').addEventListener('click', () => {
     }
 });
 
+document.getElementById('modalExitButton').addEventListener('click', () => {
+    document.getElementById('playModal').style.display = 'none';
+
+    document.querySelector('.home').style.display = 'flex'; 
+    document.querySelector('.header').style.display = 'flex';
+    document.getElementById('gameArea').style.display = 'none'; 
+    document.getElementById('endGameArea').style.display = 'none';
+    document.getElementById('modalRoomCode').value = '';
+    document.getElementById('modalPlayerName').value = '';
+});
+
 socket.on('roomCreated', (generatedRoomCode) => {
     roomCode = generatedRoomCode;
-    alert(`Room created! Room code: ${roomCode}`);
+
+    const roomCreatedModal = document.getElementById('roomCreatedModal');
+    roomCreatedModal.style.display = 'flex';
+
+    const roomCodeDisplay = document.getElementById('roomCodeDisplay');
+    roomCodeDisplay.querySelector('strong').textContent = roomCode;
+
+    document.getElementById('roomCreatedContinueButton').addEventListener('click', () => {
+        roomCreatedModal.style.display = 'none'; 
 
         if (isRoomCreator) {
             const numQuestions = document.getElementById('numQuestions').value;
@@ -57,6 +83,7 @@ socket.on('roomCreated', (generatedRoomCode) => {
         updateUrlWithParams({ roomCode, playerName }); 
         transitionToGameScreen();
     });
+});
 
 socket.on('roomJoined', () => {
     alert(`Joined room ${roomCode}`);
@@ -69,7 +96,7 @@ socket.on('error', (message) => {
 });
 
 socket.on('startGameWithSettings', () => {
-    alert("Game is starting!");
+    alert("Click 'OK' to begin the game!");
 });
 
 socket.on('newQuestion', (question) => {
@@ -88,37 +115,49 @@ function displayQuestion(question) {
         optionsContainer.appendChild(btn);
     });
 
-    startTimer(60);
+    startTimer(30);
 }
 
+socket.on('timeUp', ({ correctAnswer }) => {
+    alert(`Time's up! The correct answer was: ${decodeHtml(correctAnswer)}`);
+    socket.emit('nextQuestion', roomCode);
+});
+
 function startTimer(seconds) {
     const timerElement = document.getElementById('timer');
     let timeLeft = seconds;
 
+    if (timerInterval) {
+        clearInterval(timerInterval);
+    }
+
     const updateTimer = () => {
         if (timeLeft > 0) {
-            timerElement.textContent = `Time left: ${timeLeft} seconds`;
+            timerElement.textContent = `Time: ${timeLeft} seconds`;
             timeLeft--;
         } else {
             timerElement.textContent = `Time's up!`;
-            socket.emit('nextQuestion', roomCode); 
             clearInterval(timerInterval);
         }
     };
 
     updateTimer();
-    const timerInterval = setInterval(updateTimer, 1000);
+    timerInterval = setInterval(updateTimer, 1000);
 }
 
 function checkAnswer(selectedAnswer, correctAnswer) {
-    const isCorrect = selectedAnswer === correctAnswer;
-    if (isCorrect) score++;
-
-    document.getElementById('score').textContent = `Score: ${score}`;
-    alert(isCorrect ? "Correct!" : `Wrong! The correct answer was: ${decodeHtml(correctAnswer)}`);
+    socket.emit('submitAnswer', { roomCode, answer: selectedAnswer });
+}
 
+socket.on('answerResult', ({ correct, correctAnswer }) => {
+    alert(correct ? "Correct!" : `Wrong! The correct answer was: ${decodeHtml(correctAnswer)}`);
     socket.emit('nextQuestion', roomCode);
-}
+});
+
+socket.on('scoreUpdate', (newScore) => {
+    score = newScore;
+    document.getElementById('score').textContent = `Score: ${score}`;
+});
 
 socket.on('gameOver', ({ winner, scores }) => {
     const winnerMessage = winner 
@@ -131,13 +170,21 @@ socket.on('gameOver', ({ winner, scores }) => {
     });
 
     alert(`${winnerMessage}\n${scoreDetails}`);
-    resetGameUI();
+    socket.disconnect();
+    window.location.href = '/';
+});
+
+socket.on('connect', () => {
+    console.log('A user connected:', socket.id);
 });
 
 function resetGameUI() {
-    document.querySelector('.home').style.display = 'block';
-    document.querySelector('.header').style.display = 'block';
+    document.querySelector('.home').style.display = 'flex';
+    document.querySelector('.header').style.display = 'flex';
+
     document.getElementById('gameArea').style.display = 'none';
+    document.getElementById('endGameArea').style.display = 'none';
+
     score = 0;
     questions = [];
 }
@@ -161,4 +208,3 @@ function updateUrlWithParams(params) {
     });
     window.history.pushState({}, '', currentUrl); 
 }
-