Mainly implemented game start logic

public/script.js

 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); 
+}