app.js

const game = ()=>{
    let pScore = 0;
    let cScore = 0;

    const startGame = () =>{
        const playButton = document.querySelector(".intro button");
        const introScreen = document.querySelector(".intro");
        const match = document.querySelector(".match");

        playButton.addEventListener("click", () => {
            introScreen.classList.add("fadeOut");
            match.classList.add("fadeIn");
        });
    };

    const playMatch = () => {
        const options = document.querySelectorAll(".options button");
        const playerHand = document.querySelector(".player-hand");
        const computerHand = document.querySelector(".computer-hand");
        const hands = document.querySelectorAll(".hands img")

        hands.forEach(hand => {
            hand.addEventListener("animationend", function(){
                this.style.animation = "";
            })
        })

        const computerOptions = ["rock", "paper", "scissors"];

            options.forEach(options => {
            options.addEventListener("click", function(){
            const computerNumber = Math.floor(Math.random() * 3);
            const computerChoice = computerOptions[computerNumber];

            setTimeout(() =>{
                compareHands(this.textContent, computerChoice)

                playerHand.src = `./assets/${this.textContent}.png`;
                computerHand.src = `./assets/${computerChoice}.png`;

                
            }, 1250)
                playerHand.style.animation = "shakePlayer 1.90s ease";
                computerHand.style.animation = "shakeComputer 1.90s ease";


            });
        });
    };

    const updateScore = () =>{
        const playerScore = document.querySelector(".player-score p");
        const computerScore = document.querySelector(".computer-score p");
        playerScore.textContent = pScore;
        computerScore.textContent = cScore;

    }

    const compareHands = (playerChoice, computerChoice) =>{
        const winner = document.querySelector(".winner"); 

        if(playerChoice === computerChoice){
            winner.textContent = "TIE.";
            return;
        }
        if(playerChoice === "rock" ){
            if(computerChoice === "scissors"){
                winner.textContent = "WIN !";
                pScore++
                updateScore();
                return;
            }else{
                winner.textContent = "LOSE..";
                cScore++
                updateScore();
                return;
            }
        }
        if(playerChoice === "paper" ){
            if(computerChoice === "rock"){
                winner.textContent = "WIN !";
                pScore++
                updateScore();
                return;
            }else{
                winner.textContent = "LOSE..";
                cScore++
                updateScore();
                return;
            }
        }

        if(playerChoice === "scissors" ){
            if(computerChoice === "paper"){
                winner.textContent = "WIN !";
                pScore++
                updateScore();
                return;
            }else{
                winner.textContent = "LOSE..";
                cScore++
                updateScore();
                return;
            }
        }
    }

    startGame();
    playMatch();
};

game();