diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000000000000000000000000000000000000..70bf3e4f58629f2c6e41663335768cc580591fad --- /dev/null +++ b/public/script.js @@ -0,0 +1,67 @@ +const socket = io(); +let score = 0; +let currentQuestion = 0; +let questions = []; +let roomCode = null; + +document.getElementById('startGame').addEventListener('click', () => { + const inputRoomCode = prompt('Enter room code to join or leave blank to create a new room:'); + if (inputRoomCode) { + roomCode = inputRoomCode; + socket.emit('joinRoom', roomCode); + } else { + socket.emit('createRoom'); + } +}); + +socket.on('roomCreated', (generatedRoomCode) => { + roomCode = generatedRoomCode; + alert(`Room created! Room code: ${roomCode}`); + transitionToGameScreen(); +}); + +socket.on('roomJoined', () => { + alert(`Joined room ${roomCode}`); + transitionToGameScreen(); +}); + +socket.on('error', (message) => { + alert(message); +}); + +function transitionToGameScreen() { + document.querySelector('.home').style.display = 'none'; + document.querySelector('.header').style.display = 'none'; + document.getElementById('gameArea').style.display = 'block'; +} + +// Event to display a new question +socket.on('newQuestion', (question) => { + displayQuestion(question); +}); + +function displayQuestion(question) { + document.getElementById('question').textContent = question.question; + document.getElementById('options').innerHTML = ''; + question.options.forEach((answer) => { + const btn = document.createElement('button'); + btn.textContent = answer; + btn.addEventListener('click', () => checkAnswer(answer === question.correctAnswer)); + document.getElementById('options').appendChild(btn); + }); + document.getElementById('nextQuestion').style.display = 'none'; +} + +function checkAnswer(isCorrect) { + if (isCorrect) score++; + document.getElementById('score').textContent = `Score: ${score}`; + socket.emit('nextQuestion', roomCode); +} + +socket.on('gameOver', () => { + alert(`Game over! Your score is ${score}`); + document.getElementById('gameArea').style.display = 'none'; + document.querySelector('.home').style.display = 'block'; + score = 0; + currentQuestion = 0; +});