diff --git a/public/script.js b/public/script.js index 70bf3e4f58629f2c6e41663335768cc580591fad..efc99185c6290cadd41c33f13171ab8a1c3cd175 100644 --- a/public/script.js +++ b/public/script.js @@ -1,27 +1,66 @@ const socket = io(); let score = 0; -let currentQuestion = 0; let questions = []; let roomCode = null; +let isRoomCreator = false; +let playerName = null; + +window.onload = () => { + const params = new URLSearchParams(window.location.search); + roomCode = params.get('roomCode'); + playerName = params.get('playerName'); + let playerId = localStorage.getItem('playerId'); + + if (roomCode && playerName) { + if (!playerId) { + playerId = generatePlayerId(); + localStorage.setItem('playerId', playerId); + } + socket.emit('joinRoom', { roomCode, playerName, playerId }); + } +}; + +function generatePlayerId() { + return Math.random().toString(36).substring(2, 15); +} 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:'); + + if (!playerName || playerName.trim() === '') { + alert('Name is required to join the game!'); + return; + } + if (inputRoomCode) { roomCode = inputRoomCode; - socket.emit('joinRoom', roomCode); + socket.emit('joinRoom', { roomCode, playerName }); } else { - socket.emit('createRoom'); + socket.emit('createRoom', playerName); + isRoomCreator = true; } }); 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; + + socket.emit('gameSettings', { roomCode, category, difficulty, numQuestions }); + } + + updateUrlWithParams({ roomCode, playerName }); transitionToGameScreen(); }); socket.on('roomJoined', () => { alert(`Joined room ${roomCode}`); + updateUrlWithParams({ roomCode, playerName }); transitionToGameScreen(); }); @@ -29,39 +68,75 @@ 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'; -} +socket.on('startGameWithSettings', () => { + alert("Game is starting!"); +}); -// 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 = ''; + document.getElementById('question').textContent = decodeHtml(question.question); + const optionsContainer = document.getElementById('options'); + optionsContainer.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); + btn.textContent = decodeHtml(answer); + btn.addEventListener('click', () => checkAnswer(answer, question.correctAnswer)); + optionsContainer.appendChild(btn); }); - document.getElementById('nextQuestion').style.display = 'none'; } -function checkAnswer(isCorrect) { +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('nextQuestion', roomCode); } -socket.on('gameOver', () => { - alert(`Game over! Your score is ${score}`); - document.getElementById('gameArea').style.display = 'none'; +socket.on('gameOver', ({ winner, scores }) => { + const winnerMessage = winner + ? `The winner is ${winner.name} with ${winner.score} points!` + : "It's a tie!"; + + let scoreDetails = "Final Scores:\n"; + scores.forEach(player => { + scoreDetails += `${player.name}: ${player.score}\n`; + }); + + alert(`${winnerMessage}\n${scoreDetails}`); + resetGameUI(); +}); + +function resetGameUI() { document.querySelector('.home').style.display = 'block'; + document.querySelector('.header').style.display = 'block'; + document.getElementById('gameArea').style.display = 'none'; score = 0; - currentQuestion = 0; -}); + questions = []; +} + +function transitionToGameScreen() { + document.querySelector('.home').style.display = 'none'; + document.querySelector('.header').style.display = 'none'; + document.getElementById('gameArea').style.display = 'block'; +} + +function decodeHtml(html) { + const txt = document.createElement('textarea'); + txt.innerHTML = html; + return txt.value; +} + +function updateUrlWithParams(params) { + const currentUrl = new URL(window.location); + Object.entries(params).forEach(([key, value]) => { + currentUrl.searchParams.set(key, value); + }); + window.history.pushState({}, '', currentUrl); +}