script.js

let userScore = 0;
let compScore = 0;

const choices = document.querySelectorAll(".choice");
const msg = document.querySelector(".msg");

const genCompChoice = () => {
    const options = ["rock", "paper", "scissors"];
    const randIdx = Math.floor(Math.random() * 3);
    return options[randIdx];
};

const drawGame = () => {
    console.log("game was drawn"); 
    msg.innerText = "Game was Draw. Play again"; 
};

const showWinner = (userWin, userChoice, compChoice) => {
    if (userWin) {
        userScore++;
        document.getElementById("user-score").innerText = userScore;
        console.log("you win!");
        msg.innerText = "You win!";
    } else {
        compScore++;
        document.getElementById("comp-score").innerText = compScore;
        console.log("you lose!");
        msg.innerText = "You lose!";
    }
};

const playGame = (userChoice) => {
    console.log("user Choice =", userChoice);
    const compChoice = genCompChoice();
    console.log("comp choice =", compChoice);

    if (userChoice === compChoice) {
        drawGame();
    } else {
        let userWin = true;
        if (userChoice === "rock") {
            userWin = compChoice === "paper" ? false : true;
        } else if (userChoice === "paper") {
            userWin = compChoice === "scissors" ? false : true;
        } else {
            userWin = compChoice === "rock" ? false : true;
        }
        showWinner(userWin, userChoice, compChoice);
    }
};

choices.forEach((choice) => {
    choice.addEventListener("click", () => {
        const userChoice = choice.getAttribute("id");
        console.log("choice was clicked", userChoice);
        playGame(userChoice);
    });
});