script.js

document.addEventListener('DOMContentLoaded', function() {

// Variable Declarations
const winningScore = 5;
let playerScore = 0;
let computerScore = 0;

// DOM elements
let playerDisplayScore = document.querySelector('#playerScore');
let computerDisplayScore = document.querySelector('#computerScore');

const result = document.querySelector('#displayWinner');
const announceWinner = document.querySelector('#modalWinner');
const playAgainText = document.querySelector('#playAgain');
const showModal = document.querySelector('#myModal');
const playerImage = document.getElementById('playerImage');
const computerImage = document.getElementById('computerImage');

// Images
const rockImage = './images/1FAA8_color.png';
const paperImage = './images/1F9FB_color.png';
const scissorsImage = './images/2702_color.png';

//Functions
function getComputerChoice()    {
        const pick = ['rock', 'paper', 'scissors'];
        return pick[Math.floor(Math.random() * pick.length)];
}

function capitalizeFirstLetter(string)  {
        return string.charAt(0).toUpperCase() + string.slice(1);
}

function displayVS()    {
        const vsText = 'VS';
        const vsElement = document.getElementById('displayTextVs');
        vsElement.innerText = vsText;
        return vsText;
}  

function displayImage(playerSelection, computerSelection)       {
        const altTextComputer = 'Display computers choice';
        const altTextPlayer = 'Display players choice';

        switch (playerSelection.toLowerCase())  {
                case    'rock':
                        playerImage.src = rockImage;
                        playerImage.alt = altTextPlayer;
                        break;

                case    'paper':
                        playerImage.src = paperImage;
                        playerImage.alt = altTextPlayer;
                        break;

                case    'scissors':
                        playerImage.src = scissorsImage;
                        playerImage.alt = altTextPlayer;
                        break;
        }
        switch (computerSelection)      {
                case    'rock':
                        computerImage.src = rockImage;
                        computerImage.alt = altTextComputer;
                        break;
                
                case    'paper':
                        computerImage.src = paperImage;
                        computerImage.alt = altTextComputer;
                        break;

                case    'scissors':
                        computerImage.src = scissorsImage;
                        computerImage.alt = altTextComputer;
                        break;
        }
}

function displayGameResult(playerScore, computerScore, announceWinner)      {
        showModal.classList.add('showModal');
        playAgainText.innerText = 'Want to play again? Click on the game controller.';

       if (playerScore > computerScore) {
                return announceWinner.innerText = `Congratulations! You won the game with a score of ${playerScore} to ${computerScore}!`;

        } else if (playerScore < computerScore) {
                return announceWinner.innerText = `You lost the game with a score of ${playerScore} to ${computerScore}!`;

        } else {
                return announceWinner.innerText = "It's a tie! Try harder next time.";
            }
}

function playRound(playerSelection)     {
        const computerSelection = getComputerChoice();

        if (playerSelection.toLowerCase() === computerSelection)        {
                displayVS();
                displayImage(playerSelection, computerSelection);
                return result.innerText = `It's a tie! You both picked ${playerSelection.toLowerCase()}.`;
        }
        else if (
                (playerSelection.toLowerCase() === 'rock' && computerSelection === 'scissors')  ||
                (playerSelection.toLowerCase() === 'paper' && computerSelection === 'rock')     ||
                (playerSelection.toLowerCase() === 'scissors' && computerSelection === 'paper') 
        )       {
                playerScore++;
                playerDisplayScore.innerText = `${playerScore}`;
                displayVS();
                displayImage(playerSelection, computerSelection);
                return result.innerText = `You win! ${playerSelection} beats ${computerSelection}.`;
        }
        else {
                computerScore++;
                computerDisplayScore.innerText = `${computerScore}`;
                displayVS();
                displayImage(playerSelection, computerSelection);
                let valueToUpperCase = capitalizeFirstLetter(computerSelection);
                return result.innerText = `You loose! ${valueToUpperCase} beats ${playerSelection.toLowerCase()}.`;
        }
}

function playGame()     {
        if (playerScore < winningScore && computerScore < winningScore) {

        } else {

            if (playerScore > computerScore) {
                return displayGameResult(playerScore, computerScore, announceWinner);
            } else if (playerScore < computerScore) {
                return displayGameResult(playerScore, computerScore, announceWinner);
            } else {
                return displayGameResult(playerScore, computerScore, announceWinner);
            }
        }
}

//Event listeners
const btnRock = document.querySelector('#btnRock');
btnRock.addEventListener('click', () => {
        const playerSelection= "Rock";   
        playRound(playerSelection);
        playGame();   
});

const btnPaper = document.querySelector('#btnPaper');
btnPaper.addEventListener('click', () => {
        const playerSelection = 'Paper';
        playRound(playerSelection);
        playGame();
});

const btnScissor = document.querySelector('#btnScissor');
btnScissor.addEventListener('click', () => {

        const playerSelection = 'Scissors';
        playRound(playerSelection);
        playGame();
});

const btnReset =document.querySelector('#restartGame');
btnReset.addEventListener ('click', () => {

        playerScore = 0;
        computerScore = 0;
        playerDisplayScore.innerText = 0;
        computerDisplayScore.innerText = 0;
        playerImage.src = '';
        playerImage.alt = '';
        computerImage.src = '';
        computerImage.alt = '';
        result.innerText = '';
        displayTextVs.innerText = '';
        showModal.classList.remove('showModal');
})
});