Source: client/scripts/results.js

import tarotConfig from './tarot.js';
/**
 * Create a hashmap for all tarot cards that can be indexed by card name
 * @returns {Map} a hashmap of all the cards and their information parsed
 */
const tarotMap = tarotConfig.tarot.reduce((map, card) => {
  map[card.name] = {
    suite: card.suite,
    image: card.image,
    light: card.meanings.light,
    shadow: card.meanings.shadow,
    fortune: card.fortune_telling,
  };
  return map;
}, {});

// Pull luck points from gameplay
const luck = localStorage.getItem('luck');

// Pull selected cards from gameplay
let chosenCards = [];

// Store randomly select fortune tellings to be pulled from for mobile display
let fortuneTellings = [];

const storedCards = localStorage.getItem('chosenCards');
if (storedCards !== null) {
  chosenCards = Object.values(JSON.parse(storedCards)).map(String);
}

// Keep track of current screen width
export let screenWidth = window.innerWidth;

/**
 *
 * @param newScreenWidth
 */
export function setScreenWidth(newScreenWidth) {
  screenWidth = newScreenWidth;
}

// Update cards for desktop
Array.prototype.sample = function () {
  return this[Math.floor(Math.random() * this.length)];
};

const cardContainers = document.getElementsByClassName('card');
for (let i = 0; i < chosenCards.length; i++) {
  const card = chosenCards[i];
  const cardContainer = cardContainers[i + 1];
  const cardImg = cardContainer.querySelector('img');
  const cardDesc = cardContainer.querySelector('p');

  cardImg.src = tarotMap[card].image;

  const telling = tarotMap[card].fortune.sample();
  cardDesc.textContent = telling;
  fortuneTellings.push(telling);
}

window.addEventListener('DOMContentLoaded', function () {
  //update short term description
  const shortTermDescriptions = [
    'You are very unlucky today!! You should double it and pass it to the next person.',
    'So unlucky!! I would watch your back today.',
    'You are lucky today! Go buy yourself a lottery ticket.',
    "Wow!! You're very lucky today! Great fortune is coming your way!",
  ];
  let shortDesc = document.getElementById('description-0');
  if (luck < 25) {
    shortDesc.textContent = shortTermDescriptions[0];
  } else if (25 <= luck && luck < 50) {
    shortDesc.textContent = shortTermDescriptions[1];
  } else if (50 <= luck && luck < 75) {
    shortDesc.textContent = shortTermDescriptions[2];
  } else {
    shortDesc.textContent = shortTermDescriptions[3];
  }
});

// Update card for mobile
let idx = 0;
const mobileCard = cardContainers[5];
const nextButton = document.getElementById('next-button');
const prevButton = document.getElementById('prev-button');
if (prevButton !== null) {
  prevButton.style.display = 'none';
}

// Check that mobileCard is defined before updateMobileCard()
if (mobileCard !== undefined) {
  updateMobileCard(chosenCards, idx, mobileCard, tarotMap, fortuneTellings);

  // Go back to the previous card
  prevButton.addEventListener('click', () => {
    idx--;
    updateMobileCard(chosenCards, idx, mobileCard, tarotMap, fortuneTellings);
    updateButtonVisibility(chosenCards, idx);
  });

  // Go to the next card
  nextButton.addEventListener('click', () => {
    idx++;
    updateMobileCard(chosenCards, idx, mobileCard, tarotMap, fortuneTellings);
    updateButtonVisibility(chosenCards, idx);
  });
}

/**
 * Display the current card on the mobile side
 * @param chosenCards
 * @param idx
 * @param mobileCard
 * @param tarotMap
 * @param fortuneTellings
 */
export function updateMobileCard(
  chosenCards,
  idx,
  mobileCard,
  tarotMap,
  fortuneTellings,
) {
  const card = chosenCards[idx];
  const cardImg = mobileCard.querySelector('img');
  const cardDesc = mobileCard.querySelector('p');
  cardImg.src = tarotMap[card].image;
  cardDesc.textContent = fortuneTellings[idx];
  //return array for testing
  return [card, cardImg.src, cardDesc.textContent];
}

/**
 * Update button visibility - should not show the previous button when on the
 * first card and should not show the next button on the last card
 * @param chosenCards
 * @param {*} idx index of current card when in mobile mode
 */
export function updateButtonVisibility(chosenCards, idx) {
  const prevButton = document.getElementById('prev-button');
  const nextButton = document.getElementById('next-button');
  const screenWidth = window.innerWidth;

  if (screenWidth > 600) {
    prevButton.style.display = 'none';
    nextButton.style.display = 'none';
  } else {
    prevButton.style.display = idx >= 1 ? 'flex' : 'none';
    nextButton.style.display = idx < chosenCards.length - 1 ? 'flex' : 'none';
  }
}

// Update button visibility when switching screen sizes
window.addEventListener('resize', handleWindowSizeChange);

/**
 * Handles window size change
 */
export function handleWindowSizeChange() {
  screenWidth = window.innerWidth;
  updateButtonVisibility(chosenCards, idx);
}