game.js

const carousel = document.querySelectorAll(".carousel")
const button = document.querySelector("#button")

// set spin variables
i = 0
let increment = 0
const min = 20
const max = 80

// prepare variables for final slot images
var finalImages = []
var imageTitles = []

// set bonus variables
const bonusImages = ["sign.png", "sign.png", "sign.png", "jellybean.png",]
const bonusElemArray = document.querySelectorAll(".bonus-images")
var clicks = 3

// set scoring
var score = 0
const ROB_LAURA = 30
const SALLY_BUDDY = 15
const LOGO = 100
const TWO_LOGOS = 50
const ONE_LOGO = 5


/******************* START GAME LOGIC *************************/
button.addEventListener("click", function() {
  button.style.display="none";
  
  var buttonText = this.textContent;
  if (buttonText == "SPIN") {
    carousel.forEach(function(item){
      spin(item);
    })
  } else {
    resumeMainGame();
  }
})

function resumeMainGame(){
  // hide bonus images
  bonusElemArray.forEach(function(item){
    item.style.display = "none";
    item.classList.remove("revealed-images");
  });
  document.getElementById("bonus-text").style.display="none";
    document.getElementById("bonus-container").style.display="none";
  document.getElementById("spin-text").style.display="block";
  document.getElementsByClassName("container")[0].style.display="block";
  document.getElementById("button").style.display="inline-block"
  document.getElementById("button").innerText="SPIN";
}

/******************* SPIN LOGIC *************************/
function spin(item) {
  var intervalId = setInterval(function(){

    if(i > spinAmount()){
      clearInterval(intervalId);
      // console.log(i)
      i = 0;
    } else {
        i++;
        increment++;
        $(item).css({
          "-webkit-transform": "rotateX(" + (increment * -60) + "deg)"
        })
        // keep only front image in focus
        $(item).attr("data-state", (increment % 6) + 1);
      } 
  }, 50);

  // wait for image positions to finalize
  setTimeout(function(){
    finalImages.push(item);
    if (finalImages.length === 3){
      getImageTitles(finalImages);
    }
  }, 3500);
}

// choose random number for each wheel spin
function spinAmount(){
  // randomNumber = Math.round(Math.random() * 10 + 5)
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


/******************* SCORING LOGIC *************************/
function getImageTitles(resultingImages){
  for (i = 0; i < 3; i++){
    var imageObject = Object.values(resultingImages)[i];
    var dataState = imageObject.getAttribute('data-state') - 1;
    var image = imageObject.children[dataState];
    var imageTitle = image.innerHTML.split('-')[1].split('.')[0];
    imageTitles.push(imageTitle);
  }

  getScore();
}

function getScore(){
  var robTotal = countResults(imageTitles, "rob");
  var lauraTotal = countResults(imageTitles, "laura");
  var sallyTotal = countResults(imageTitles, "sally");
  var buddyTotal = countResults(imageTitles, "buddy");
  var logoTotal = countResults(imageTitles, "logo");

  if (robTotal == 3 || lauraTotal == 3){
    score += ROB_LAURA;
  } else if (sallyTotal == 3 || buddyTotal == 3){
    score += SALLY_BUDDY;
  } else if (logoTotal == 3){
    score += LOGO;
    setTimeout(function(){ 
      bonusGame();
    }, 1500);
  } else if (logoTotal == 2){
    score += TWO_LOGOS;
  } else if (logoTotal == 1){
    score += ONE_LOGO;
  } else {
    ;
  }

  document.getElementById("score").innerText = "Score: " + score;
  finalImages = [];
  imageTitles = [];
  button.style.display="inline-block";
}

function countResults(array, value) {
    var count = 0;
    array.forEach((v) => (v === value && count++));
    return count;
}



/******************* BONUS GAME *************************/
function bonusGame(){
  document.getElementsByClassName("container")[0].style.display="none"
  document.getElementById("spin-text").style.display="none";
  document.getElementById("bonus-text").style.display="block";
  document.getElementById("bonus-container").style.display="block";
  bonusElemArray.forEach(function(item){
    item.src = "images/jellybean-cover.png";
    item.style.display = "inline-block";
    item.addEventListener("click", clickHandler);
  });
}

function clickHandler(){
  if (clicks > 1) {
    revealBonusImage(this);
    displayRemainingChances(); 
  } else {
    revealBonusImage(this);
    clicks = 3;
    document.getElementById("button").innerText="RETURN";
    document.getElementById("button").style.display="inline-block";
  }
}   

function revealBonusImage(elem) {
    var randomBonusImage = bonusImages[Math.floor(Math.random() * bonusImages.length)];
    elem.src = "images/" + randomBonusImage;
    elem.classList.add("revealed-images");

    if (elem.src.indexOf("jellybean") != -1) {
      score += 500;
      document.getElementById("score").innerText = "Score: " + score;
    }
    clicks--;
    elem.removeEventListener("click", clickHandler);
    return
}

function displayRemainingChances(){
  document.getElementById("bonus-text").innerText = clicks + " chances left!";
  return
}