rockpaperscissor.js

const choices = ["Rock", "Paper", "Scissor"];
let userScore = 0;
let computerScore = 0;
let roundsPlayed = 0;

document.getElementById("startGame").addEventListener("click", startGame);
document.getElementById("exitGame").addEventListener("click", () => {
    window.close(); // This will only work in certain browsers
});
document.getElementById("restartGame").addEventListener("click", restartGame);

function startGame() {
    document.getElementById("startScreen").classList.add("hidden");
    document.getElementById("gameArea").classList.remove("hidden");
}

document.querySelectorAll(".choice").forEach(button => {
    button.addEventListener("click", () => {
        const userChoice = button.getAttribute("data-choice");
        const computerChoice = getComputerChoice();
        const result = determineWinner(userChoice, computerChoice);
        displayResult(userChoice, computerChoice, result);
    });
});

function getComputerChoice() {
    return choices[Math.floor(Math.random() * choices.length)];
}

function determineWinner(user, computer) {
    if (user === computer) {
        return "Match Draw";
    }
    if (
        (user === "Rock" && computer === "Scissor") ||
        (user === "Paper" && computer === "Rock") ||
        (user === "Scissor" && computer === "Paper")
    ) {
        userScore++;
        return "You Win!";
    }
    computerScore++;
    return "Computer Wins!";
}

function displayResult(userChoice, computerChoice, result) {
    roundsPlayed++;
    
    // Hide choices and show result images
    document.querySelector(".choices").classList.add("hidden");
    
    // Show the result with images
    let resultHTML = `
        <p>Your Choice: <strong>${userChoice}</strong></p>
        <p>Computer Choice: <strong>${computerChoice}</strong></p>
        <p style="font-weight: bold;">${result}</p>
    `;

    if ((userChoice === "Rock" && computerChoice === "Paper") || 
        (userChoice === "Paper" && computerChoice === "Rock")) {
        resultHTML = `
            <p>Your Choice: <strong>${userChoice}</strong></p>
            <img src="images/rock-paper.jpg" alt="Rock vs Paper">
            <p>Computer Choice: <strong>${computerChoice}</strong></p>
            <p style="font-weight: bold;">${result}</p>
        `;
    } else if ((userChoice === "Rock" && computerChoice === "Scissor") || 
               (userChoice === "Scissor" && computerChoice === "Rock")) {
        resultHTML = `
            <p>Your Choice: <strong>${userChoice}</strong></p>
            <img src="images/rock-scissors.jpg" alt="Rock vs Scissor">
            <p>Computer Choice: <strong>${computerChoice}</strong></p>
            <p style="font-weight: bold;">${result}</p>
        `;
    } else if ((userChoice === "Paper" && computerChoice === "Scissor") || 
               (userChoice === "Scissor" && computerChoice === "Paper")) {
        resultHTML = `
            <p>Your Choice: <strong>${userChoice}</strong></p>
            <img src="images/paper-scissors.jpg" alt="Scissor vs Paper">
            <p>Computer Choice: <strong>${computerChoice}</strong></p>
            <p style="font-weight: bold;">${result}</p>
        `;
    }

    document.getElementById("result").innerHTML = resultHTML;
    document.getElementById("result").classList.remove("hidden");
    
    updateScoreboard();

    if (roundsPlayed >= 5) {
        endGame();
    } else {
        // Show "Play Next Round" button
        showPlayNextRoundButton();
    }
}

function showPlayNextRoundButton() {
    const playNextButtonHTML = `
        <button id="playNextRound">Play Next Round</button>
        <button id="exitGame">Exit Game</button>
    `;
    document.getElementById("result").innerHTML += playNextButtonHTML;

    document.getElementById("playNextRound").addEventListener("click", () => {
        document.getElementById("result").classList.add("hidden");
        document.querySelector(".choices").classList.remove("hidden");
    });

    document.getElementById("exitGame").addEventListener("click", () => {
      window.close(); // This will only work in certain browsers
  });
}

function updateScoreboard() {
    document.getElementById("userScore").textContent = userScore;
    document.getElementById("computerScore").textContent = computerScore;
    document.getElementById("roundsPlayed").textContent = roundsPlayed;
}

function endGame() {
    // Hide the game area and show the final result section
    document.getElementById("gameArea").classList.add("hidden");
    document.getElementById("finalResult").classList.remove("hidden");

    // Update the final scores
    document.getElementById("finalUserScore").textContent = document.getElementById("userScore").textContent;
    document.getElementById("finalComputerScore").textContent = document.getElementById("computerScore").textContent;

    // Update the total rounds played
    document.getElementById("finalRoundsPlayed").textContent = document.getElementById("roundsPlayed").textContent;

    // Set the final message based on the scores
    let finalMessage;
    const userScore = parseInt(document.getElementById("userScore").textContent);
    const computerScore = parseInt(document.getElementById("computerScore").textContent);

    if (userScore > computerScore) {
        finalMessage = "Congratulations! You are the champion!";
    } else if (userScore < computerScore) {
        finalMessage = "Sorry! The computer wins this time.";
    } else {
        finalMessage = "It's a tie!";
    }

    // Display the final message
    document.getElementById("finalMessage").textContent = finalMessage;
}


function restartGame() {
    userScore = 0;
    computerScore = 0;
    roundsPlayed = 0;
    document.getElementById("finalResult").classList.add("hidden");
    document.getElementById("startScreen").classList.remove("hidden");
    document.getElementById("result").innerHTML = "";
    updateScoreboard();
}