badges.js

const maxBadgeSlotRows = 7;
const maxBadgeSlotCols = 7;
let badgeSlotRows = 1;
let badgeSlotCols = 3;

let badgeCache;
let badgeSlotCache;
let badgeFilterCache = [];
let badgeCacheUpdateTimer = null;

let localizedBadgeGroups;
let localizedBadges;
let localizedBadgesIgnoreUpdateTimer = null;

let badgeGameIds = [];

const badgeGalleryRowBpLevels = [
  {
    bp: 300,
    count: 1
  },
  {
    bp: 1000,
    count: 2
  },
  {
    bp: 2000,
    count: 3
  },
  {
    bp: 4000,
    count: 4
  },
  {
    bp: 7500,
    count: 5
  },
  {
    bp: 12500,
    count: 6
  },
  {
    bp: 20000,
    count: 7
  },
  {
    bp: 30000,
    count: 8
  },
  {
    bp: 50000,
    count: 9
  },
  {
    bp: 0,
    count: 10
  }
];
const badgeGalleryColBcLevels = [
  {
    bc: 50,
    count: 3
  },
  {
    bc: 150,
    count: 4
  },
  {
    bc: 300,
    count: 5
  },
  {
    bc: 500,
    count: 6
  },
  {
    bc: 0,
    count: 7
  }
];
const badgeSortOrderTypes = {
  'bp': (a, b, desc) => {
    if (a.bp === b.bp)
      return 0;
    return a.bp > b.bp === desc ? -1 : 1;
  },
  'percent': (a, b, desc) => {
    if (a.percent === b.percent)
      return 0;
    return a.percent > b.percent === desc ? -1 : 1;
  }
};
const BadgeOverlayType = {
  GRADIENT: 1,
  MULTIPLY: 2,
  MASK: 4,
  DUAL: 8,
  LOCATION: 16
};

function initBadgeControls() {
  const badgeModalContent = document.querySelector('#badgesModal .modalContent');

  const sortOrder = document.getElementById('badgeSortOrder');

  for (let sot of Object.keys(badgeSortOrderTypes)) {
    const optionAsc = document.createElement('option');
    const optionDesc = document.createElement('option');

    optionAsc.value = sot;
    optionDesc.value = `${sot}_desc`;

    sortOrder.appendChild(optionAsc);
    sortOrder.appendChild(optionDesc);
  }

  const fetchAndUpdateBadgeModalBadges = (slotRow, slotCol) => {
    fetchPlayerBadges(playerBadges => {
      const sortOrderDesc = sortOrder.value.endsWith('_desc');
      const sortOrderType = sortOrderDesc ? sortOrder.value.slice(0, -5) : sortOrder.value;
      let lastGame = null;
      let lastGroup = null;
      let lastParsedSystemName = null;
      const badgeCompareFunc = (a, b) => {
        if (a.game !== b.game) {
          if (a.game === 'ynoproject')
            return -1;
          if (b.game === 'ynoproject')
            return 1;
          if (a.game === gameId)
            return -1;
          if (b.game === gameId)
            return 1;
          return (badgeGameIds || gameIds).indexOf(a.game) < (badgeGameIds || gameIds).indexOf(b.game) ? -1 : 1;
        }
        if (sortOrderType) {
          if (a.group !== b.group) {
            if (a.group < b.group)
              return -1;
            return 1;
          }
          return badgeSortOrderTypes[sortOrderType](a, b, sortOrderDesc);
        }
        return 0;
      };
      badgeFilterCache.splice(0, badgeFilterCache.length);
      const badges = [{ badgeId: 'null', game: null}].concat(playerBadges.sort(badgeCompareFunc));
      for (let badge of badges) {
        if (badge.game !== lastGame) {
          const gameHeader = document.createElement('h2');
          gameHeader.classList.add('itemCategoryHeader');
          gameHeader.dataset.game = badge.game;
          gameHeader.innerHTML = getMassagedLabel(localizedMessages.games[badge.game]);
          badgeModalContent.appendChild(gameHeader);
          lastGame = badge.game;
          lastGroup = null;
          if (badge.game !== 'ynoproject') {
            const defaultSystemName = getDefaultUiTheme(badge.game);
            initUiThemeContainerStyles(defaultSystemName, badge.game, false, () => initUiThemeFontStyles(defaultSystemName, badge.game, 0));
            applyThemeStyles(gameHeader, (lastParsedSystemName = defaultSystemName.replace(/ /g, '_')), badge.game)
          } else
            lastParsedSystemName = null;
        }
        if (badge.group != lastGroup && localizedBadgeGroups.hasOwnProperty(lastGame) && localizedBadgeGroups[lastGame].hasOwnProperty(badge.group)) {
          const groupHeader = document.createElement('h3');
          groupHeader.classList.add('itemCategoryHeader');
          groupHeader.dataset.game = badge.game;
          groupHeader.dataset.group = badge.group;
          groupHeader.innerHTML = getMassagedLabel(localizedBadgeGroups[lastGame][badge.group]);
          badgeModalContent.appendChild(groupHeader);
          lastGroup = badge.group;
          if (lastParsedSystemName)
            applyThemeStyles(groupHeader, lastParsedSystemName, lastGame);
        }
        const item = getBadgeItem(badge, true, true, true, true, true, lastParsedSystemName);
        if (badge.badgeId === (playerData?.badge || 'null'))
          item.children[0].classList.add('selected');
        if (!item.classList.contains('disabled')) {
          item.onclick = slotRow && slotCol
            ? () => updatePlayerBadgeSlot(badge.badgeId, slotRow, slotCol, () => {
              updateBadgeSlots(() => {
                initAccountSettingsModal();
                initBadgeGalleryModal();
                closeModal()
              });
            })
            : () => updatePlayerBadge(badge.badgeId, () => {
              initAccountSettingsModal();
              closeModal();
            });
        }
        badgeModalContent.appendChild(item);
      }
      updateBadgeVisibility();
      removeLoader(document.getElementById('badgesModal'));
    });
  };

  const updateBadgesAndPopulateModal = (slotRow, slotCol) => {
    sortOrder.onchange = () => onChangeBadgeSortOrder(slotRow, slotCol);
    document.getElementById('badgeGalleryButton').classList.toggle('hidden', !!(slotRow && slotCol));
    
    for (let sot of Object.keys(badgeSortOrderTypes)) {
      const optionAsc = sortOrder.querySelector(`option[value="${sot}"]`);
      const optionDesc = sortOrder.querySelector(`option[value="${sot}_desc"]`);

      optionAsc.innerHTML = getMassagedLabel(localizedMessages.badges.sortOrder.template.replace('{TYPE}', localizedMessages.badges.sortOrder.types[sot]).replace('{ORDER}', localizedMessages.badges.sortOrder.asc));
      optionDesc.innerHTML = getMassagedLabel(localizedMessages.badges.sortOrder.template.replace('{TYPE}', localizedMessages.badges.sortOrder.types[sot]).replace('{ORDER}', localizedMessages.badges.sortOrder.desc));
    }
    
    fetchAndUpdateBadgeModalBadges(slotRow, slotCol);
  };

  const onChangeBadgeSortOrder = (slotRow, slotCol) => {
    badgeModalContent.innerHTML = '';
    addLoader(document.getElementById('badgesModal'), true);
    updateBadgesAndPopulateModal(slotRow, slotCol);
  };

  const onClickBadgeButton = (prevModal, slotRow, slotCol) => {
    if (slotRow && slotCol && (slotRow > badgeSlotRows || slotCol > badgeSlotCols))
      return;

    badgeModalContent.innerHTML = '';

    openModal('badgesModal', null, prevModal || null);
    addLoader(document.getElementById('badgesModal'), true);
    if (!badgeCache.filter(b => !localizedBadges.hasOwnProperty(b.game) || !localizedBadges[b.game].hasOwnProperty(b.badgeId)).length || localizedBadgesIgnoreUpdateTimer)
      updateBadgesAndPopulateModal(slotRow, slotCol);
    else
      updateLocalizedBadges(() => updateBadgesAndPopulateModal(slotRow, slotCol));
  };

  document.getElementById('badgeButton').onclick = () => onClickBadgeButton();
  document.getElementById('accountBadgeButton').onclick = () => onClickBadgeButton('accountSettingsModal');

  const updateBadgeVisibility = () => {
    const unlockStatus = document.getElementById('badgeUnlockStatus').value;
    const searchTerm = document.getElementById('badgeSearch').value.toLowerCase();

    const gameVisibilities = {};
    const gameGroupVisibilities = {};

    for (let item of badgeFilterCache) {
      let visible = true;
      if (unlockStatus !== "")
        visible &= item.el.classList.contains('locked') === !parseInt(unlockStatus);
      if (searchTerm.trim().length)
        visible &= item.title && item.title.indexOf(searchTerm) > -1;
      if (!gameVisibilities.hasOwnProperty(item.game)) {
        gameVisibilities[item.game] = false;
        gameGroupVisibilities[item.game] = {};
      }
      if (item.group && !gameGroupVisibilities[item.game].hasOwnProperty(item.group))
        gameGroupVisibilities[item.game][item.group] = false;
      if (visible) {
        if (!gameVisibilities[item.game])
          gameVisibilities[item.game] = true;
        if (item.group && !gameGroupVisibilities[item.game][item.group])
          gameGroupVisibilities[item.game][item.group] = true;
      }
      item.el.classList.toggle('hidden', !visible);
    }

    for (let header of badgeModalContent.querySelectorAll('.itemCategoryHeader'))
      header.classList.toggle('hidden', !(header.dataset.group ? gameGroupVisibilities[header.dataset.game][header.dataset.group] : gameVisibilities[header.dataset.game]));
  };

  document.getElementById('badgeUnlockStatus').onchange = updateBadgeVisibility;

  let searchTimer = null;
  document.getElementById('badgeSearch').oninput = function () {
    const _this = this;
    const value = this.value;
    if (searchTimer) {
      clearTimeout(searchTimer);
      searchTimer = null;
    } else
      addLoader(badgeModalContent, true);
    searchTimer = setTimeout(() => {
      searchTimer = null;
      if (_this.value === value)
        updateBadgeVisibility();
      removeLoader(badgeModalContent);
    }, 500);
  };

  document.getElementById('badgeGalleryButton').onclick = () => {
    updateBadgeSlots(() => {
      initBadgeGalleryModal();
      openModal('badgeGalleryModal');
    });
  };

  const badgeGalleryModalContent = document.querySelector('#badgeGalleryModal .modalContent');

  for (let r = 1; r <= maxBadgeSlotRows; r++) {
    const badgeSlotRow = document.createElement('div');
    badgeSlotRow.classList.add('itemRow');
    for (let c = 1; c <= maxBadgeSlotCols; c++) {
      const badgeSlotButton = document.createElement('div');
      badgeSlotButton.classList.add('badgeSlotButton', 'badgeItem', 'item', 'unselectable');
      badgeSlotButton.dataset.row = r;
      badgeSlotButton.dataset.col = c;
      badgeSlotButton.onclick = () => onClickBadgeButton('badgeGalleryModal', r, c);
      badgeSlotRow.appendChild(badgeSlotButton);
    }
    badgeGalleryModalContent.appendChild(badgeSlotRow);
  }
}

function initBadgeGalleryModal() {
  const unlockedBadges = badgeCache.filter(b => b.unlocked && !b.hidden);
  const totalBp = unlockedBadges.reduce((sum, b) => sum + b.bp, 0);
  const totalBc = unlockedBadges.length;

  let levelRowBp = 0;
  let prevLevelRowBp = 0;
  
  for (let rl = 0; rl < badgeGalleryRowBpLevels.length; rl++) {
    const rowBpLevel = badgeGalleryRowBpLevels[rl];
    levelRowBp = Math.max(rowBpLevel.bp - prevLevelRowBp, 0);
    if (totalBp < rowBpLevel.bp)
      break;
    prevLevelRowBp = rowBpLevel.bp;
  }

  let levelColBc = 0;
  let prevLevelColBc = 0;

  for (let cl = 0; cl < badgeGalleryColBcLevels.length; cl++) {
    const colBcLevel = badgeGalleryColBcLevels[cl];
    levelColBc = Math.max(colBcLevel.bc - prevLevelColBc, 0);
    if (totalBc < colBcLevel.bc)
      break;
    prevLevelColBc = colBcLevel.bc;
  }

  const rootStyle = document.documentElement.style;

  rootStyle.setProperty('--row-level-total-bp', levelRowBp);
  rootStyle.setProperty('--row-level-bp', totalBp - prevLevelRowBp);
  document.getElementById('badgeGalleryTotalBp').innerHTML = getMassagedLabel(localizedMessages.badgeGallery.bp.replace('{BP}', totalBp), true);
  rootStyle.setProperty('--col-level-total-bc', levelColBc);
  rootStyle.setProperty('--col-level-bc', totalBc - prevLevelColBc);
  document.getElementById('badgeGalleryTotalBc').innerHTML = getMassagedLabel(localizedMessages.badgeGallery.count.replace('{COUNT}', totalBc), true);

  for (let r = 1; r <= maxBadgeSlotRows; r++) {
    for (let c = 1; c <= maxBadgeSlotCols; c++) {
      const badgeId = r <= badgeSlotCache.length && c <= badgeSlotCache[r - 1].length ? badgeSlotCache[r - 1][c - 1] : null;
      const badgeSlotButton = document.querySelector(`.badgeSlotButton[data-row='${r}'][data-col='${c}']`);
      if (badgeSlotButton) {
        let badge = badgeId && badgeId !== 'null' ? badgeCache.find(b => b.badgeId === badgeId) : null;
        if (!badge)
          badge = { badgeId: 'null' };
        badgeSlotButton.classList.toggle('hidden', r > badgeSlotRows || c > badgeSlotCols);
        badgeSlotButton.innerHTML = getBadgeItem(badge).innerHTML;
        if (badge?.overlayType & BadgeOverlayType.LOCATION)
          handleBadgeOverlayLocationColorOverride(badgeSlotButton.querySelector('.badgeOverlay'), badgeSlotButton.querySelector('.badgeOverlay2'), cachedLocations);
      }
    }
  }
}

function updateBadgeButton() {
  const badgeId = playerData?.badge || 'null';
  const badge = playerData?.badge ? badgeCache.find(b => b.badgeId === badgeId) : null;
  const badgeButton = document.getElementById('badgeButton');
  badgeButton.innerHTML = getBadgeItem(badge || { badgeId: 'null' }, false, true).innerHTML;
  if (badge?.overlayType & BadgeOverlayType.LOCATION)
    handleBadgeOverlayLocationColorOverride(badgeButton.querySelector('.badgeOverlay'), badgeButton.querySelector('.badgeOverlay2'), cachedLocations);
}

function getBadgeUrl(badge, staticOnly) {
  let badgeId;
  if (typeof badge === 'string') {
    badgeId = badge;
    badge = badgeId ? badgeCache.find(b => b.badgeId === badgeId) : null;
  } else
    badgeId = badge.badgeId;
  return badgeId ? `images/badge/${badgeId}${!staticOnly && badge?.animated ? '.gif' : '.png'}` : '';
}

function getBadgeItem(badge, includeTooltip, emptyIcon, lockedIcon, scaled, filterable, parsedSystemName) {
  const badgeId = badge.badgeId;

  const item = document.createElement('div');
  item.classList.add('badgeItem', 'item', 'unselectable');

  let filterItem;
  if (filterable && badgeId !== 'null') {
    filterItem = {
      el: item,
      title: '',
      game: badge.game,
      group: badge.group
    };
    badgeFilterCache.push(filterItem);
  }

  const badgeContainer = document.createElement('div');
  badgeContainer.classList.add('badgeContainer');
  if (badge.hidden && badge.unlocked)
    badgeContainer.classList.add('special');
  
  const badgeEl = (badge.unlocked || !badge.secret) && badgeId !== 'null' ? document.createElement('div') : null;
  const badgeUrl = badgeEl ? getBadgeUrl(badge, !badge.unlocked) : null;

  if (badgeEl) {
    badgeEl.classList.add('badge');
    if (scaled)
      badgeEl.classList.add('scaledBadge');
    badgeEl.style.backgroundImage = `url('${badgeUrl}')`;

    if (badge.overlayType) {
      badgeEl.classList.add('overlayBadge');

      const badgeOverlay = document.createElement('div');
      badgeOverlay.classList.add('badgeOverlay');
      if (badge.overlayType & BadgeOverlayType.MULTIPLY)
        badgeOverlay.classList.add('badgeOverlayMultiply');
      
      badgeEl.appendChild(badgeOverlay);

      const badgeMaskValue = badge.overlayType & BadgeOverlayType.MASK
        ? `url('${badgeUrl.replace('.', badge.overlayType & BadgeOverlayType.DUAL ? '_mask_fg.' : '_mask.')}')`
        : badgeEl.style.backgroundImage;

      badgeOverlay.setAttribute('style', `-webkit-mask-image: ${badgeMaskValue}; mask-image: ${badgeMaskValue};`);

      if (badge.overlayType & BadgeOverlayType.DUAL) {
        const badgeMask2Value = badge.overlayType & BadgeOverlayType.MASK
          ? `url(${badgeUrl.replace('.', '_mask_bg.')})`
          : badgeEl.style.backgroundImage;

        badgeOverlay.classList.add('badgeOverlayBase');

        const badgeOverlay2 = document.createElement('div');
        badgeOverlay2.classList.add('badgeOverlay', 'badgeOverlay2');
        if (badge.overlayType & BadgeOverlayType.MULTIPLY)
          badgeOverlay2.classList.add('badgeOverlayMultiply');
        badgeOverlay2.classList.add(getStylePropertyValue('--base-color') !== getStylePropertyValue('--alt-color') ? 'badgeOverlayAlt' : 'badgeOverlayBg');

        badgeEl.appendChild(badgeOverlay2);

        badgeOverlay2.setAttribute('style', `-webkit-mask-image: ${badgeMask2Value}; mask-image: ${badgeMask2Value};`);
      }
    }

    badgeContainer.appendChild(badgeEl);
    if (!badge.unlocked) {
      item.classList.add('locked', 'disabled');
      if (lockedIcon)
        badgeContainer.appendChild(getSvgIcon('locked', true));
    }
  } else if (badgeId !== 'null') {
    item.classList.add('locked', 'disabled');
    if (lockedIcon)
      badgeContainer.appendChild(getSvgIcon('locked', true));
    badgeContainer.appendChild(document.createElement('div'));
  } else
    badgeContainer.appendChild(emptyIcon ? getSvgIcon('ban', true) : document.createElement('div'));

  if (parsedSystemName)
    applyThemeStyles(item, parsedSystemName, badge.game);

  if (includeTooltip) {
    let tooltipContent = '';

    if (badgeId === 'null')
      tooltipContent = `<label>${localizedMessages.badges.null}</label>`;
    else {
      if (localizedBadges.hasOwnProperty(badge.game) && localizedBadges[badge.game].hasOwnProperty(badgeId)) {
        let badgeTitle = localizedMessages.badges.locked;
        const localizedTooltip = localizedBadges[badge.game][badgeId];
        if ((badge.unlocked || !badge.secret) && localizedTooltip.name)
          badgeTitle = getMassagedLabel(localizedTooltip.name);
        if (filterItem)
          filterItem.title = badgeTitle.toLowerCase();
        if (badge.bp)
          badgeTitle = getMassagedLabel(localizedMessages.badges.badgeTitle).replace('{TITLE}', badgeTitle).replace('{BP}', badge.bp);
        tooltipContent += `<h3 class="tooltipTitle${badge.hidden ? ' altText' : ''}">${badgeTitle}</h3>`;
        if ((badge.unlocked || !badge.secret) && localizedTooltip.description)
          tooltipContent += `<div class="tooltipContent">${getMassagedLabel(localizedTooltip.description)}</div>`;
        tooltipContent += '<div class="tooltipSpacer"></div>';
        if (badge.mapId)
          tooltipContent += `<span class="tooltipLocation"><label>${getMassagedLabel(localizedMessages.badges.location)}</label><span class="tooltipLocationText">{LOCATION}</span></span>`;
        if ((badge.unlocked || !badge.secret) && localizedTooltip.condition) {
          if (badge.unlocked || !badge.secretCondition) {
            let condition = getMassagedLabel(localizedTooltip.condition);
            if (badge.seconds) {
              const minutes = Math.floor(badge.seconds / 60);
              const seconds = badge.seconds - minutes * 60;
              condition = condition.replace('{TIME}', localizedMessages.badges.time.replace('{MINUTES}', minutes.toString().padStart(2, '0')).replace('{SECONDS}', seconds.toString().padStart(2, '0')));
            }
            tooltipContent += `<div class="tooltipContent">${condition}</div>`;
          } else
            tooltipContent += `<h3 class="tooltipTitle">${localizedMessages.badges.locked}</h3>`;
        }
      } else {
        tooltipContent += `<h3 class="tooltipTitle">${localizedMessages.badges.locked}</h3>`;
        if (filterItem)
          filterItem.title = localizedMessages.badges.locked;
      }
        
      tooltipContent += '<label class="tooltipFooter">';
      if (!badge.secret && !badge.secretCondition && badge.goalsTotal > 1)
        tooltipContent += `${getMassagedLabel(localizedMessages.badges.goalProgress).replace('{CURRENT}', badge.goals).replace('{TOTAL}', badge.goalsTotal)}<br>`;

      const percentMultiplier = badge.percent < 1 ? 100 : 10;
      tooltipContent += `${getMassagedLabel(localizedMessages.badges.percentUnlocked).replace('{PERCENT}', Math.floor(badge.percent * percentMultiplier) / percentMultiplier)}`;

      if ((badge.unlocked || !badge.secret) && badge.art)
        tooltipContent += `<small class="tooltipCornerText">${getMassagedLabel(localizedMessages.badges.artCredit).replace('{ARTIST}', badge.art)}</small>`

      tooltipContent += '</label>';
        
      if (tooltipContent) {
        const baseTooltipContent = tooltipContent;
        const tooltipOptions = {};

        const assignTooltip = instance => {
          const badgeTippy = addOrUpdateTooltip(item, tooltipContent, false, false, !!badge.mapId, tooltipOptions, instance);
          if (parsedSystemName)
            applyThemeStyles(badgeTippy.popper.querySelector('.tippy-box'), parsedSystemName, badge.game);
        };

        if (badge.mapId) {
          const mapId = badge.mapId.toString().padStart(4, '0');
          const setTooltipLocation = instance => {
            if (gameLocalizedMapLocations[badge.game] && gameLocalizedMapLocations[badge.game].hasOwnProperty(mapId))
              tooltipContent = baseTooltipContent.replace('{LOCATION}', getLocalizedMapLocationsHtml(badge.game, mapId, '0000', badge.mapX, badge.mapY, getInfoLabel('&nbsp;|&nbsp;')));
            else if (gameId === '2kki') {
              tooltipContent = baseTooltipContent.replace('{LOCATION}', getInfoLabel(getMassagedLabel(localizedMessages.location.queryingLocation)));
              tooltipOptions.onShow = instance => getOrQuery2kkiLocationsHtml(mapId, locationsHtml => instance.setContent(baseTooltipContent.replace('{LOCATION}', locationsHtml)));
            } else
              tooltipContent = baseTooltipContent.replace('{LOCATION}', getInfoLabel(getMassagedLabel(localizedMessages.location.unknownLocation)));
            assignTooltip(instance);
          };
          if (gameLocalizedMapLocations.hasOwnProperty(badge.game))
            setTooltipLocation();
          else {
            tooltipContent = baseTooltipContent.replace('{LOCATION}', getInfoLabel(getMassagedLabel(localizedMessages.location.queryingLocation)));
            tooltipOptions.onShow = instance => {
              if (gameLocalizedMapLocations.hasOwnProperty(badge.game))
                setTooltipLocation(instance);
              else
                fetchAndInitLocations(globalConfig.lang, badge.game).then(() => setTooltipLocation(instance));
            };
            assignTooltip();
          }
        } else
          assignTooltip();
      }
    }
  }

  item.appendChild(badgeContainer);

  return item;
}

function fetchPlayerBadges(callback) {
  apiFetch('badge?command=list')
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      return response.json();
    })
    .then(badges => {
      const newUnlockedBadges = badges.filter(b => b.newUnlock);

      badges = badges.map(badge => {
        delete badge.newUnlock;
        return badge;
      });

      for (let b = 0; b < newUnlockedBadges.length; b++)
        showBadgeToastMessage('badgeUnlocked', 'info', newUnlockedBadges[b].badgeId);
      
      if (callback)
        callback(badges);
    })
    .catch(err => console.error(err));
}

function updateBadges(callback) {
  apiFetch('badge?command=list&simple=true')
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      return response.json();
    })
    .then(badges => {
      const newUnlockedBadges = badges.filter(b => b.newUnlock);
      
      badgeCache = badges.map(badge => {
        delete badge.newUnlock;
        return badge;
      });
    
      for (let b = 0; b < newUnlockedBadges.length; b++)
        showBadgeToastMessage('badgeUnlocked', 'info', newUnlockedBadges[b].badgeId);

      if (badgeCacheUpdateTimer)
        clearInterval(badgeCacheUpdateTimer);
      badgeCacheUpdateTimer = setInterval(updateBadges, 900000);
      
      if (callback)
        callback();
    })
    .catch(err => console.error(err));
}

function updateBadgeSlots(callback) {
  apiFetch('badge?command=slotList')
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      return response.json();
    })
    .then(badgeSlots => {
      badgeSlotCache = badgeSlots || [];
      if (callback)
        callback();
  })
  .catch(err => console.error(err));
}

function updatePlayerBadge(badgeId, callback) {
  apiFetch(`badge?command=set&id=${badgeId}`)
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      syncPlayerData(playerUuids[-1], playerData?.rank, playerData?.account, badgeId, playerData?.medals, -1);
      if (callback)
        callback();
    })
    .catch(err => console.error(err));
}

function updatePlayerBadgeSlot(badgeId, slotRow, slotCol, callback) {
  apiFetch(`badge?command=slotSet&id=${badgeId}&row=${slotRow}&col=${slotCol}`)
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      if (callback)
        callback();
    })
    .catch(err => console.error(err));
}

function checkNewBadgeUnlocks() {
  apiFetch('badge?command=new')
    .then(response => {
      if (!response.ok)
        throw new Error(response.statusText);
      return response.json();
    })
    .then(unlockedBadgeIds => {
      if (unlockedBadgeIds) {
        for (let b = 0; b < unlockedBadgeIds.length; b++)
          showBadgeToastMessage('badgeUnlocked', 'info', unlockedBadgeIds[b]);
      }
    })
    .catch(err => console.error(err));
}

function updateLocalizedBadgeGroups(callback) {
  fetch(`lang/badge/groups/${globalConfig.lang}.json`)
    .then(response => response.json())
    .then(function (jsonResponse) {
      localizedBadgeGroups = jsonResponse;
      if (callback)
        callback(true);
    })
    .catch(err => console.error(err));
}

function updateLocalizedBadges(callback) {
  if (localizedBadgesIgnoreUpdateTimer)
    clearInterval(localizedBadgesIgnoreUpdateTimer);
    
  fetchNewest(`lang/badge/${globalConfig.lang}.json`)
    .then(response => response.json())
    .then(function (jsonResponse) {
      localizedBadges = jsonResponse;
      localizedBadgesIgnoreUpdateTimer = setTimeout(() => localizedBadgesIgnoreUpdateTimer = null, 300000);
      if (callback)
        callback(true);
    })
    .catch(err => console.error(err));
}

function addOrUpdatePlayerBadgeGalleryTooltip(badgeElement, name, sysName, mapId, prevMapId, prevLocationsStr, x, y) {
  badgeElement.dataset.playerName = name;
  badgeElement.dataset.systemName = sysName;

  if (!badgeElement._badgeGalleryTippy) {
    badgeElement._badgeGalleryTippy = tippy(badgeElement, Object.assign({
      trigger: 'click',
      interactive: true,
      content: `<div class="tooltipContent">${getMassagedLabel(localizedMessages.badgeGallery.loading, true)}</div>`,
      appendTo: document.getElementById('layout'),
      onShow: instance => {
        const playerName = instance.reference.dataset.playerName;
        const systemName = instance.reference.dataset.systemName;

        apiFetch(`badge?command=playerSlotList&player=${playerName}`)
          .then(response => {
            if (!response.ok)
              throw new Error(response.statusText);
            return response.json();
          })
          .then(badgeSlots => {
            if (!badgeSlots || !badgeSlots.flat().filter(b => b !== 'null').length) {
              instance.hide();
              return;
            }

            let minRowIndex = badgeSlots.length - 1;
            let maxRowIndex = 0;
            let minColIndex = badgeSlots[0].length - 1;
            let maxColIndex = 0;

            badgeSlots.forEach((badgeRowSlots, r) => {
              let rowHasBadge = false;
              badgeRowSlots.forEach((badgeId, c) => {
                if (badgeId === 'null')
                  return;
                rowHasBadge = true;
                if (c < minColIndex)
                  minColIndex = c;
                if (c > maxColIndex)
                  maxColIndex = c;
              });
              if (rowHasBadge) {
                if (r < minRowIndex)
                  minRowIndex = r;
                if (r > maxRowIndex)
                  maxRowIndex = r;
              }
            });

            const tooltipContent = document.createElement('div');
            tooltipContent.classList.add('tooltipContent', 'noShadow');
    
            const tooltipTitle = document.createElement('h4');
            tooltipTitle.classList.add('tooltipTitle');
            tooltipTitle.innerHTML = getMassagedLabel(localizedMessages.badgeGallery.label, true).replace('{PLAYER}', playerName);

            const badgeSlotRowsContainer = document.createElement('div');
            badgeSlotRowsContainer.classList.add('badgeSlotRowsContainer');
    
            badgeSlots.forEach((badgeRowSlots, r) => {
              if (r < minRowIndex || r > maxRowIndex)
                return;

              const badgeSlotRow = document.createElement('div');
              badgeSlotRow.classList.add('badgeSlotRow');

              badgeRowSlots.forEach((badgeId, c) => {
                if (c < minColIndex || c > maxColIndex)
                  return;
                  
                const badgeSlot = document.createElement('div');
                badgeSlot.classList.add('badgeSlot', 'badge');
                badgeSlot.dataset.rowIndex = r;
                badgeSlot.dataset.colIndex = c;
      
                if (badgeId !== 'null') {
                  const badgeUrl = getBadgeUrl(badgeId);
        
                  badgeSlot.style.backgroundImage = `url('${badgeUrl}')`;

                  const badge = badgeCache.find(b => b.badgeId === badgeId);

                  if (badge?.overlayType) {
                    const badgeSlotOverlay = document.createElement('div');

                    badgeSlotOverlay.classList.add('badgeSlotOverlay', 'badgeOverlay');
                    if (badge.overlayType & BadgeOverlayType.MULTIPLY)
                      badgeSlotOverlay.classList.add('badgeOverlayMultiply');
                    badgeSlotOverlay.dataset.overlayType = badge.overlayType;

                    badgeSlot.appendChild(badgeSlotOverlay);

                    const badgeMaskUrl = badge.overlayType & BadgeOverlayType.MASK
                      ? badgeUrl.replace('.', badge.overlayType & BadgeOverlayType.DUAL ? '_mask_fg.' : '_mask.')
                      : badgeUrl;

                    badgeSlotOverlay.setAttribute('style', `-webkit-mask-image: url('${badgeMaskUrl}'); mask-image: url('${badgeMaskUrl}');`);

                    if (badge.overlayType & BadgeOverlayType.DUAL) {
                      const badgeSlotOverlay2 = document.createElement('div');

                      badgeSlotOverlay2.classList.add('badgeOverlay', 'badgeOverlay2');
                      if (badge.overlayType & BadgeOverlayType.MULTIPLY)
                        badgeSlotOverlay2.classList.add('badgeOverlayMultiply');
            
                      badgeSlot.appendChild(badgeSlotOverlay2);

                      const badgeMask2Url = badge.overlayType & BadgeOverlayType.MASK
                        ? badgeUrl.replace('.', '_mask_bg.')
                        : badgeUrl;

                      badgeSlotOverlay2.setAttribute('style', `-webkit-mask-image: url('${badgeMask2Url}'); mask-image: url('${badgeMask2Url}');`);
                    }
                  }
                }

                badgeSlotRow.appendChild(badgeSlot);
              });

              badgeSlotRowsContainer.appendChild(badgeSlotRow);
            });

            const tippyBox = instance.popper.children[0];

            const parsedSystemName = systemName ? (gameUiThemes.indexOf(systemName) > -1 ? systemName : getDefaultUiTheme()).replace(/ /g, '_') : null;

            if (parsedSystemName)
              applyThemeStyles(tippyBox, parsedSystemName);
    
            tooltipContent.appendChild(tooltipTitle);
            tooltipContent.appendChild(badgeSlotRowsContainer);
    
            instance.setContent(tooltipContent.outerHTML);

            if (parsedSystemName) {
              const badgeSlotOverlays = tippyBox.querySelectorAll('.badgeSlotOverlay');
              for (let badgeSlotOverlay of badgeSlotOverlays) {
                const overlayType = parseInt(badgeSlotOverlay.dataset.overlayType);
                badgeSlotOverlay.style.background = overlayType & BadgeOverlayType.GRADIENT
                  ? `var(--base-gradient-${parsedSystemName})`
                  : `rgb(var(--base-color-${parsedSystemName}))`;

                const badgeSlotOverlay2 = overlayType & BadgeOverlayType.DUAL ? badgeSlotOverlay.parentElement.querySelector('.badgeOverlay2') : null;
               
                if (badgeSlotOverlay2) {
                  if (getStylePropertyValue(`--base-color-${parsedSystemName}`) !== getStylePropertyValue(`--alt-color-${parsedSystemName}`)) {
                    badgeSlotOverlay2.style.background = overlayType & BadgeOverlayType.GRADIENT
                      ? `var(--alt-gradient-${parsedSystemName})`
                      : `rgb(var(--alt-color-${parsedSystemName}))`;
                  } else
                    badgeSlotOverlay2.style.background = `rgb(var(--base-bg-color-${parsedSystemName}))`
                }

                if (overlayType & BadgeOverlayType.LOCATION)
                  handleBadgeOverlayLocationColorOverride(badgeSlotOverlay, badgeSlotOverlay2, null, playerName, mapId, prevMapId, prevLocationsStr, x, y);
              }
            }

            if (localizedBadges) {
              const badges = instance.popper.querySelectorAll('.badge');
              for (let badge of badges) {
                const badgeId = badgeSlots[badge.dataset.rowIndex][badge.dataset.colIndex];
                if (badgeId === 'null')
                  continue;
                const badgeGame = Object.keys(localizedBadges).find(game => {
                  return Object.keys(localizedBadges[game]).find(b => b === badgeId);
                });
                if (badgeGame) {
                  const badgeTippy = addTooltip(badge, getMassagedLabel(localizedBadges[badgeGame][badgeId].name, true), true, false, true);
                  applyThemeStyles(badgeTippy.popper.querySelector('.tippy-box'), parsedSystemName);
                  if (badgeCache.find(b => b.badgeId === badgeId)?.hidden)
                    badgeTippy.popper.querySelector('.tooltipContent').classList.add('altText');
                }
              }
            }
          })
          .catch(err => {
            console.error(err);
            instance.setContent('');
          });
      }
    }, tippyConfig));
  }

  return badgeElement._badgeGalleryTippy;
}

// EXTERNAL
function onBadgeUpdateRequested() {
  if (loginToken)
    checkNewBadgeUnlocks();
}

function showBadgeToastMessage(key, icon, badgeId) {
  if (!notificationConfig.badges.all || (notificationConfig.badges.hasOwnProperty(key) && !notificationConfig.badges[key]))
    return;
  const message = getMassagedLabel(localizedMessages.toast.badges[key], true);
  const toast = showToastMessage(message, icon, true, null, !!badgeId);

  if (badgeId) {
    const badgeObj = badgeCache.find(b => b.badgeId === badgeId);

    if (badgeObj) {
      const badgeEl = getBadgeItem(badgeObj).querySelector('.badgeContainer');

      toast.querySelector('.icon').remove();
      toast.prepend(badgeEl);

      addTooltip(badgeEl, localizedBadges[badgeObj.game][badgeId].name, true, true);
    }
  }
}