main.js

// Initializing the buttons
const spinButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const resetButton = document.getElementById("reset");



const values = document.getElementById("values");
const topScoreList = document.getElementById("top");
const latestScoreList = document.getElementById("latestScoreList");


// initializes the slots
const slot1 = document.getElementById("box1");
const slot2 = document.getElementById("box2");
const slot3 = document.getElementById("box3");

// initializes the fruits and their values, default values of emojis are put in incase the api breaks for whatever reason.
let fruits = ["🍋", "🍊", "🍒", "🍇", "7"];
let fruitValue = [50, 100, 200, 300, 500];
// Lemon 🍋
// Orange 🍊
// Cherry 🍒
// Grape 🍇
// Seven ️
// Moneybag 💰
let slotPos = [0, 0, 0];
let stopped = ["", "", ""];
let spinCount = 0;
let latestScore = "";

// Checks to see if there are existing values for top and latest leaderboards, if not makes them blank
let leaderTop = JSON.parse(localStorage.getItem("leaderTop")) || [0, 0, 0, 0, 0];
let leaderLatest = JSON.parse(localStorage.getItem("leaderLatest")) || [0, 0, 0, 0, 0];

// calls the berries from the api
getBerry("sitrus-berry", 0);
getBerry("pomeg-berry", 1);
getBerry("cheri-berry", 2);
getBerry("bluk-berry", 3);
getBerry("fire-gem", 4);

// displays the leaderboards and the berry values
valuesList();
displayTop();
displayLatest();
stopButton.disabled = true;



// starts the spinning
spinButton.addEventListener("click", () => {
    // any button enabling/disabling is done to make sure the game doesnt break
    spinButton.disabled = true;
    stopButton.disabled = false;

    // uses setinterval to step up the stop function
    stopped[0] = setInterval(spin, 100, slot1, 0);
    stopped[1] = setInterval(spin, 75, slot2, 1);
    stopped[2] = setInterval(spin, 50, slot3, 2);
    spinCount = 0;


})

stopButton.addEventListener("click", () => {
    // spin count tracks which slot you are on, once you stop all the slots the leaderboards are updated
    stop(spinCount);
    spinCount++;
    if (spinCount >= 3) {
        stopButton.disabled = true;
        updateLatest();
        checkTop();

    }
})

// calls the reset function
resetButton.addEventListener("click", reset);

function spin(slot, id) {

    // increments the slot value by 1
    slotPos[id] += 1;

    // wraps the slot back around to the first value if it goes over
    if (slotPos[id] == fruits.length) {
        slotPos[id] = 0
    }

    //  and displays the slot

    slot.innerHTML = fruits[slotPos[id]];



}

function stop(id) {
    clearInterval(stopped[id]);
    // clear interval stops the spinning

}

function reset() {
    // stops all the slots and resets their value
    for (let index = 0; index < stopped.length; index++) {
        stop(index);
        slotPos[index] = 0;
    }

    // clears out the slot box
    slot1.innerHTML = "";
    slot2.innerHTML = "";
    slot3.innerHTML = "";
    // resets spin count which tracks which slot your are on
    spinCount = 0;
    spinButton.disabled = false;
    stopButton.disabled = true;
}

function score() {
    let points = 0;
    let bonus = 0;
    console.log(`
   slot 1 = ${slotPos[0]}
   slot 2 = ${slotPos[1]}
   slot 3 = ${slotPos[2]}

    `)

    // goes through the slots and adds the fruit value based on the slotposition
    for (let index = 0; index < slotPos.length; index++) {
        points += fruitValue[slotPos[index]];

    }

    // checks to see if slot 2 or 3 match with slot 1
    if (slotPos[0] == slotPos[1] || slotPos[0] == slotPos[2]) {
        bonus += 1;
    }

    // checks to see if slot 2 matches with slot 3
    if (slotPos[1] == slotPos[2]) {
        bonus += 1;
        // console.log(`bonus ${bonus}`)

    }


    // if either of the above if statements is true, that means there is a pair so the bonus value of 1 is applied (1.5x)
    // if both of the above if statements are true, that means all 3 slots are the same so the bonus value of 2 is applied (2x)
    if (bonus == 1) {
        points = 1.5 * points;
    }
    else if (bonus == 2) {
        points = 2 * points;
    }

    console.log(points);

    return points;
}

function updateLatest() {
    // pulls the latest score from the score calculator
    latestScore = score();

    // pushes the latest score to the leaderboard array
    leaderLatest.push(latestScore);

    // checks if the array is longer than 5 and shortens it
    if (leaderLatest.length > 5) {
        leaderLatest.shift();
    }
    // saves leaderboard to local storage
    localStorage.setItem("leaderLatest", JSON.stringify(leaderLatest));

    // updates display
    displayLatest();
}

function checkTop(score) {
    // addes the number to the top score array
    leaderTop.push(Number(latestScore));

    // sorts using a function which checks which number is bigger
    leaderTop.sort(function (a, b) { return a - b });

    // if the array is longer than 5 it cuts the first item which should be the smallest number
    if (leaderTop.length > 5) {
        leaderTop.shift();
    }
    // saves to local storage and displays on the page
    localStorage.setItem("leaderTop", JSON.stringify(leaderTop));
    displayTop();

}

// Updates the Top Score leaderboard
function displayTop() {
    // clears innerhtml
    topScoreList.innerHTML = "";

    // goes from highest to lowest and creates a list item for each score
    for (let index = leaderTop.length - 1; index >= 0; index--) {
        topScoreList.innerHTML += `<li>  ${leaderTop[index]} </li>`;

    }

}

// Updates the latest score leaderboard
function displayLatest() {
    latestScoreList.innerHTML = "";

    // goes from most recent to the oldest and creates a list item for each
    for (let index = leaderLatest.length - 1; index >= 0; index--) {
        latestScoreList.innerHTML += `<li>  ${leaderLatest[index]} </li>`;

    }

}

// In the rules section, displays the fruits next to their score values
function valuesList() {
    values.innerHTML = "";


    for (let index = fruits.length - 1; index >= 0; index--) {
        values.innerHTML += `<li>${fruits[index]} = ${fruitValue[index]} </li>`;


    }
}


// Gets the berry sprite from the pokeapi and adds it to the fruits list
async function getBerry(id, index) {
    let response = await fetch(`https://pokeapi.co/api/v2/item/${id}/`);
    let berry = await response.json();
    // console.log(berry.name);
    fruits[index] = ` <img src="${berry.sprites.default}"> `;

    valuesList();
}


// async function getPokemon(id) {
//     let response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`);
//     pokemon = await response.json()

//     // testers.innerHTML = `<img src="${pokemon.sprites.front_default}" alt="">`;


// }
// getPokemon(500);


// function createPokemonCard(id) {
//     testOutput.innerHTML = "";



//     const card = document.createElement("div");
//     const pickButton = document.createElement("button");

//     pickButton.innerText = "Pick!"

//     pickButton.addEventListener("click", () => {
//         console.log("test");
//     })

//     card.appendChild(pickButton);
//     testOutput.appendChild(card);

// }