// Elaborado en un Mob Programming en directo en https://premium.danielprimo.io

const buttons = document.querySelectorAll('button');

const scoreBoard = {
  player: 0,
  computer: 0,
  draw: 0
}

const rules = {
  rock: { wins: ["scissors", "lizard"] },
  scissors: { wins: ["paper", "lizard"] },
  paper: { wins: ["rock", "spock"] },
  lizard: { wins: ["paper", "spock"] },
  spock: { wins: ["rock", "scissors"] },
};

const computerBet = () => {
  const options = ['rock', 'paper', 'scissors', 'lizard', 'spock'];
  const index = Math.floor(Math.random() * options.length);
  return options[index];
}

const whoWins = (player, computer) => {
  if(player === computer) {
    return 'draw';
  }

  if(rules[player].wins.includes(computer)) {
    return 'player';
  }

  return 'computer';
}

const printScoreMessage = (player, computer, winner) => {
  const score = document.getElementById("score");
  score.classList.remove('hidden');
  score.innerHTML = `Player: ${player} · Computer: ${computer} ➡️ <strong>${
    winner === "draw" ? "draw" : winner + " wins!"
  }</strong>`;
};

const printScoreBoard = (scoreBoard) => {
  const scoreBoardElem = document.getElementById("js-score-board");
  scoreBoardElem.classList.remove("hidden");
  scoreBoardElem.classList.add("flex");
  
  for(const item in scoreBoard) {
    document.getElementById(item).innerHTML = scoreBoard[item];
  }
}

const animateElvis = () => {
  document
    .getElementById("elvis")
    .animate([{ transform: "scale(1, -1)" }], {
      duration: 500,
      iterations: 2,
    });
}


const play = (e) => {
  const playerBet = e.target.id;
  const computer = computerBet();
  const winner = whoWins(playerBet, computer);

  scoreBoard[winner]++;
  
  if(winner === 'player') {
    animateElvis()
  }

  printScoreMessage(playerBet, computer, winner);
  printScoreBoard(scoreBoard);
  
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', play)
}