'use strict';

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

function getComputerChoice() {
    return choices[Math.floor(Math.random() * 3)];
}

function playRoundResult(playerChoice, computerChoice) {
    let playerChoiceCapital = playerChoice.slice(0,1).toUpperCase() + playerChoice.slice(1,playerChoice.length)
    let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length)

    if (playerChoice == computerChoice) {
        points.playerAddPoints();
        points.computerAddPoints();
        return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`;
    } else if ((playerChoice == "rock" && computerChoice == "paper")
            || (playerChoice == "paper" && computerChoice == "scissors")
            || (playerChoice == "scissors" && computerChoice == "rock")) {
        points.computerAddPoints();
        return `You lost! ${computerChoiceCapital} beats ${playerChoiceCapital}.`;
    } else if ((playerChoice == "rock" && computerChoice == "scissors")
            || (playerChoice == "paper" && computerChoice == "rock")
            || (playerChoice == "scissors" && computerChoice == "paper")) {
        points.playerAddPoints();
        return `You won! ${playerChoiceCapital} beats ${computerChoiceCapital}.`;
    }
}

const points = (() => {
    this.player = 0;
    this.computer = 0;
    function playerAddPoints() {
        player++;
    }
    function computerAddPoints() {
        computer++;
    }
    function reset() {
        player = 0;
        computer = 0;
    }
    return {get player() {return player},
            get computer() {return computer},
            playerAddPoints, computerAddPoints, reset};
})()

const buttons = document.querySelectorAll("button.choose");
const resultDiv = document.querySelector("div#result");

function playGameRound(value) {
    let result = playRoundResult(value, getComputerChoice());
    resultDiv.textContent = `Result: ${result}`;
    let point = [];

    if ((points.player >= 5 && (point = ["Player",  points.player, "Computer", points.computer]))
    ||(points.computer >= 5 && (point = ["Computer",points.computer, "Player", points.player]))) {
        resultDiv.innerText += `\r\n${point[0]} won against ${point[2]} ${point[1]}:${point[3]}`;
        points.reset();
    }
}

buttons.forEach(button => {
    button.addEventListener("click", () => playGameRound(button.value));
});