Javascript

let userScore=0;

let compScore=0;

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


const userScorePara = document.querySelector("#user-score");
const compScorePara = document.querySelector("#comp-score");


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

};

const drawGame = () =>{
    msg.innerText = "Game was draw. play again!";
    msg.style.backgroundColor = "#081b31";
};
 
const showWinner = (userWin , userChoice,compChoice) =>{
    if(userWin){
        userScore++;
        userScorePara.innerText = userScore;
        msg.innerText = ` you win! ${userChoice} beats ${compChoice}`;
        msg.style.backgroundColor = "green";
    }
    else{
        compScore++;
        compScorePara.innerText = compScore;
        msg.innerText = ` you lost! ${compChoice} beats ${userChoice}`;
        msg.style.backgroundColor = "red";
    }
}

const playGame=(userChoice) =>{
    console.log("userchoice=",userChoice);
    //generate compter choice
    const compChoice = genComputerChoice();
    console.log("compchoice =",compChoice);
    if(userChoice==compChoice){
        //gme draw.
        drawGame();
    }
    else{
        let userWin = true;
        if(userChoice=="rock"){
            //scissors , paper
            userWin = compChoice=="paper"?false:true;
        }
        else if(userChoice=="paper"){
            //scissors, rock
            userWin = compChoice=="scissors"?false:true;
        }
        else{
            //rock , paper
            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);
    });
});