Rock paper scissors



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Rock Paper Scissors</h1>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="rock.png">
        </div>
        <div class="choice" id="paper">
            <img src="paper.png">
        </div>
        <div class="choice" id="scissors">
            <img src="scissors.png">
        </div>
    </div>

    <div class="score-board">
        <div class="score">
            <p id="user-score">0</p>
            <p>You</p>
        </div>
        <div class="score">
            <p id="comp-score">0</p>
            <p>comp</p>
        </div>
    </div>

    <div class="msg-container">
        <p id="msg">Play your move</p>
    </div>

    <script src="script.js"></script>
</body>
</html>


*{
    margin:0;
    padding:0;
    text-align: center;
}
h1{
    background-color:#081b31;
    color: #ffff;
    height: 4 rem;
    line-height: 4rem;
}
.choice{
    height: 160px;
    width: 160px;
    border-radius: 50%;
    display: flex;
    justify-content:center ;
    align-items: center;

}
.choice:hover{
    cursor: pointer;
    /* opacity: 0.5; */
    background-color:#081b31;

}
img{
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius:50%;
}
.choices{
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 3rem;
    margin:5rem ;
}
.score-board{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:1.5rem ;
    margin-top: 1rem;
    gap: 5rem;

}
#user-score,
#comp-score{
    font-size:4rem;   
}
#msg{
    background-color:#081b31 ;
    color: #ffff;
    display: inline;
    font-size: 2rem;
    padding: 1rem;
    border-radius: 1rem;
}
.msg-container{
    margin-top: 3rem;
}


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 genCompChoice = () => {
  const options = ["rock", "paper", "scissors"];
  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! Your ${userChoice} beats ${compChoice}`;
    msg.style.backgroundColor = "green";
  } else {
    compScore++;
    compScorePara.innerText = compScore;
    msg.innerText = `You lost. ${compChoice} beats your ${userChoice}`;
    msg.style.backgroundColor = "red";
  }
};

const playGame = (userChoice) => {
  //Generate computer choice
  const compChoice = genCompChoice();

  if (userChoice === compChoice) {
    //Draw Game
    drawGame();
  } else {
    let userWin = true;
    if (userChoice === "rock") {
      //scissors, paper
      userWin = compChoice === "paper" ? false : true;
    } else if (userChoice === "paper") {
      //rock, scissors
      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");
    playGame(userChoice);
  });
});