From 85a39bff86665d9835ca11dcb1ea111db3210438 Mon Sep 17 00:00:00 2001
From: ea654 <ea654@drexel.edu>
Date: Sun, 8 Dec 2024 03:51:50 +0000
Subject: [PATCH] Replace script.js
---
public/script.js | 104 ++++++++++++++++++++++++++++++++++-------------
1 file changed, 75 insertions(+), 29 deletions(-)
diff --git a/public/script.js b/public/script.js
index eab5ec9..2513469 100644
--- a/public/script.js
+++ b/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,20 +49,40 @@ 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}`);
- if (isRoomCreator) {
- const numQuestions = document.getElementById('numQuestions').value;
- const category = document.getElementById('category').value;
- const difficulty = document.getElementById('difficulty').value;
+ const roomCreatedModal = document.getElementById('roomCreatedModal');
+ roomCreatedModal.style.display = 'flex';
- socket.emit('gameSettings', { roomCode, category, difficulty, numQuestions });
- }
+ const roomCodeDisplay = document.getElementById('roomCodeDisplay');
+ roomCodeDisplay.querySelector('strong').textContent = roomCode;
- updateUrlWithParams({ roomCode, playerName });
- transitionToGameScreen();
+ document.getElementById('roomCreatedContinueButton').addEventListener('click', () => {
+ roomCreatedModal.style.display = 'none';
+
+ if (isRoomCreator) {
+ const numQuestions = document.getElementById('numQuestions').value;
+ const category = document.getElementById('category').value;
+ const difficulty = document.getElementById('difficulty').value;
+
+ socket.emit('gameSettings', { roomCode, category, difficulty, numQuestions });
+ }
+
+ updateUrlWithParams({ roomCode, playerName });
+ transitionToGameScreen();
+ });
});
socket.on('roomJoined', () => {
@@ -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);
+ clearInterval(timerInterval);
}
};
- updateTimer();
- const timerInterval = setInterval(updateTimer, 1000);
+ updateTimer();
+ 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);
}
-
--
GitLab