mousehunt-improved 0.97.1

package/src/modules/better-travel/index.js

@@ -0,0 +1,868 @@
+import {
+  addStyles,
+  addSubmenuDivider,
+  addSubmenuItem,
+  getCurrentLocation,
+  getCurrentPage,
+  getCurrentTab,
+  getData,
+  getFlag,
+  getRelicHunterLocation,
+  getSetting,
+  makeElement,
+  makeFavoriteButton,
+  makeMhButton,
+  onEvent,
+  onNavigation,
+  onPageChange,
+  removeSubmenuItem,
+  sessionGet,
+  setTab,
+  travelTo
+} from '@utils';
+
+import { getTravelSetting, saveTravelSetting } from './utils';
+
+import addReminders from './modules/reminders';
+import travelWindow from './modules/travel-window';
+
+import exploreMapStyles from './styles/explore-map.css';
+import settings from './settings';
+import styles from './styles/styles.css';
+import travelMenuHidingStyles from './styles/travel-menu-hiding.css';
+
+/**
+ * Expand the travel regions and zoom the map.
+ */
+const expandTravelRegions = () => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  const hud = document.querySelector('#mousehuntHud');
+  if (hud) {
+    const hudHeight = hud.offsetHeight + 30;
+
+    const map = document.querySelector('.travelPage-mapContainer.full');
+    if (map) {
+      map.style.height = `calc(100vh - ${hudHeight}px)`;
+    }
+  }
+
+  const regionHeaders = document.querySelectorAll('.travelPage-regionMenu-regionLink');
+  if (regionHeaders) {
+    regionHeaders.forEach((regionHeader) => {
+      regionHeader.setAttribute('onclick', 'return false;');
+    });
+  }
+
+  const travelAreas = document.querySelectorAll('.travelPage-regionMenu-item');
+  if (travelAreas && travelAreas.length > 0) {
+    travelAreas.forEach((area) => {
+      area.classList.add('active');
+      area.classList.remove('contracted');
+    });
+  }
+
+  const locations = document.querySelectorAll('.travelPage-map-image-environment.active');
+  if (locations && locations.length > 0) {
+    locations.forEach((location) => {
+      location.addEventListener('mouseover', () => {
+        location.classList.add('highlight');
+      });
+
+      location.addEventListener('mouseout', () => {
+        setTimeout(() => location.classList.remove('highlight'), 1000);
+      });
+    });
+  }
+
+  if (app?.pages?.TravelPage?.zoomOut && app.pages.TravelPage.showEnvironment) {
+    app.pages.TravelPage.showEnvironment(getCurrentLocation(), true);
+    app.pages.TravelPage.zoomOut();
+    app.pages.TravelPage.zoomOut();
+  }
+};
+
+/**
+ * Travel to a location when clicking on a link.
+ *
+ * @param {Event} event The click event.
+ */
+const travelClickHandler = (event) => {
+  if (app?.pages?.TravelPage?.travel) {
+    travelTo(event.target.getAttribute('data-environment'));
+  }
+};
+
+/**
+ * Clone the region menu and add click handlers to the links.
+ *
+ * @return {Element|false} The cloned region menu.
+ */
+const cloneRegionMenu = () => {
+  const regionMenu = document.querySelector('.travelPage-regionMenu');
+  if (! regionMenu) {
+    return false;
+  }
+
+  const regionMenuClone = regionMenu.cloneNode(true);
+  const travelLinks = regionMenuClone.querySelectorAll('.travelPage-regionMenu-environmentLink');
+
+  if (travelLinks && travelLinks.length > 0) {
+    travelLinks.forEach((link) => {
+      link.setAttribute('onclick', 'return false;');
+      link.addEventListener('click', travelClickHandler);
+    });
+  }
+
+  return regionMenuClone;
+};
+
+/**
+ * Add a tab to the travel page.
+ *
+ * @param {string} id    The ID of the tab.
+ * @param {string} label The label for the tab.
+ */
+const addTab = (id, label) => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  const exists = document.querySelector(`#mh-${id}-tab`);
+  if (exists) {
+    return;
+  }
+
+  const tabContainer = document.querySelector('.mousehuntHud-page-tabHeader-container');
+  if (! tabContainer) {
+    return;
+  }
+
+  const tab = makeElement('a', 'mousehuntHud-page-tabHeader');
+  tab.id = `mh-${id}-tab`;
+  tab.setAttribute('data-tab', id);
+  tab.setAttribute('onclick', 'hg.utils.PageUtil.onclickPageTabHandler(this); return false;');
+
+  makeElement('span', '', label, tab);
+
+  tabContainer.append(tab);
+};
+
+/**
+ * Add the page content to the travel page.
+ *
+ * @param {string}  id      The ID of the page.
+ * @param {Element} content The content to add to the page.
+ */
+const addPage = (id, content) => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  const exists = document.querySelector(`#mh-${id}-page`);
+  if (exists) {
+    return;
+  }
+
+  const pageContainer = document.querySelector('.mousehuntHud-page-tabContentContainer');
+  if (! pageContainer) {
+    return;
+  }
+
+  const page = makeElement('div', ['mousehuntHud-page-tabContent', id]);
+  page.id = `mh-${id}-page`;
+  page.setAttribute('data-tab', id);
+
+  if (content) {
+    page.append(content);
+  } else {
+    const blank = makeElement('div');
+    page.append(blank);
+  }
+
+  pageContainer.append(page);
+};
+
+/**
+ * Add an alphabetized list of locations to the simple travel page.
+ *
+ * @param {Element} regionMenu The region menu to clone.
+ *
+ * @return {Element} The alphabetized list.
+ */
+const addAlphabetizedList = (regionMenu) => {
+  const alphaWrapper = makeElement('div', 'travelPage-alpha-wrapper');
+
+  const alphaContent = makeElement('div', 'travelPage-regionMenu');
+  const alphaHeader = makeElement('div', ['travelPage-regionMenu-item', 'active']);
+
+  const alphaList = makeElement('div', 'travelPage-regionMenu-item-contents');
+  const alphaListContent = makeElement('div', 'travelPage-regionMenu-environments');
+
+  const links = regionMenu.querySelectorAll('.travelPage-regionMenu-environmentLink:not(.mystery)');
+  const environmentIds = new Set(environments.map((environment) => environment.id));
+
+  // Clone the links, sort them by name, and add them to the alpha list.
+  const sortedLinks = [...links].sort((a, b) => {
+    const aName = a.innerText;
+    const bName = b.innerText;
+
+    if (aName < bName) {
+      return -1;
+    }
+
+    if (aName > bName) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  // While sorting, add a class to the first occurrence of each letter.
+  let lastLetter = '';
+
+  sortedLinks.forEach((link) => {
+    // make a copy of the link
+    const linkClone = link.cloneNode(true);
+    alphaListContent.append(linkClone);
+    linkClone.addEventListener('click', travelClickHandler);
+
+    // get the first letter of the link
+    const firstLetter = linkClone.innerText.charAt(0).toLowerCase();
+
+    // if the first letter is different than the last letter, add a class
+    if (firstLetter !== lastLetter) {
+      linkClone.classList.add('first-letter');
+    }
+
+    // set the last letter to the current letter
+    lastLetter = firstLetter;
+
+    // Check if the link is in the list of environments, if it's not, then it's an event location.
+    if (! environmentIds.has(link.getAttribute('data-environment'))) {
+      linkClone.classList.add('event-location');
+    }
+  });
+
+  alphaList.append(alphaListContent);
+
+  alphaHeader.append(alphaList);
+  alphaContent.append(alphaHeader);
+
+  alphaWrapper.append(alphaContent);
+
+  const itemCount = sortedLinks.length;
+  const rows = Math.ceil(itemCount / 5);
+  const height = 14 + (rows * 29);
+
+  alphaListContent.style.height = `${height}px`;
+
+  return alphaWrapper;
+};
+
+/**
+ * Add the Simple Travel page.
+ */
+const addSimpleTravelPage = () => {
+  expandTravelRegions();
+  const wrapper = makeElement('div', 'travelPage-wrapper');
+
+  if ('not-set' === getSetting('better-travel.default-to-simple-travel', 'not-set')) {
+    const settingTip = makeElement('div', ['travelPage-map-prefix', 'simple-travel-tip'], 'You can set this as the default travel tab in the <a href="https://www.mousehuntgame.com/preferences.php?tab=mousehunt-improved-settings">MouseHunt Improved settings</a>.');
+    wrapper.append(settingTip);
+  }
+
+  const regionMenu = cloneRegionMenu();
+
+  if (getSetting('better-travel.show-alphabetized-list', false)) {
+    wrapper.append(addAlphabetizedList(regionMenu));
+  }
+
+  wrapper.append(regionMenu);
+
+  addPage('simple-travel', wrapper);
+};
+
+/**
+ * Add the tab & page for Simple Travel.
+ */
+const addSimpleTravel = () => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  addTab('simple-travel', 'Simple Travel');
+  addSimpleTravelPage();
+};
+
+/**
+ * Update the map exploration toggle button state.
+ *
+ * @param {boolean} enabled Whether or not map exploration is enabled.
+ */
+const updateMapExplorationToggle = (enabled = true) => {
+  const toggle = document.querySelector('.mh-improved-map-exploration-toggle');
+  if (! toggle) {
+    return;
+  }
+
+  const text = toggle.querySelector('span');
+
+  if (text) {
+    text.innerText = enabled ? 'Back to Normal Map' : 'Explore Map';
+  }
+
+  toggle.title = enabled ? 'Show location markers and travel details' : 'Hide location markers and travel details';
+  toggle.classList.toggle('active', enabled);
+};
+
+let isStarting;
+let isStartingClear;
+/**
+ * Apply the map exploration body class.
+ */
+const setMapExploration = () => {
+  if (document.body.classList.contains('mh-improved-map-exploration') || document.body.classList.contains('mh-improved-map-exploration-starting')) {
+    document.body.classList.add('mh-improved-map-exploration-starting');
+
+    clearTimeout(isStarting);
+    isStarting = setTimeout(() => {
+      document.body.classList.remove('mh-improved-map-exploration');
+    }, 100);
+
+    clearTimeout(isStartingClear);
+    isStartingClear = setTimeout(() => {
+      document.body.classList.remove('mh-improved-map-exploration-starting');
+    }, 500);
+
+    updateMapExplorationToggle(false);
+  } else {
+    document.body.classList.add('mh-improved-map-exploration-starting');
+
+    clearTimeout(isStarting);
+    isStarting = setTimeout(() => {
+      document.body.classList.add('mh-improved-map-exploration');
+    }, 100);
+
+    clearTimeout(isStartingClear);
+    isStartingClear = setTimeout(() => {
+      document.body.classList.remove('mh-improved-map-exploration-starting');
+    }, 500);
+
+    updateMapExplorationToggle(true);
+  }
+};
+
+/**
+ * Add the map exploration toggle button to the travel map.
+ */
+const addMapExplorationToggle = () => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  const exists = document.querySelector('.mh-improved-map-exploration-toggle');
+  if (exists) {
+    updateMapExplorationToggle(false);
+    return;
+  }
+
+  const mapContainer = document.querySelector('.travelPage-mapContainer.full');
+  if (! mapContainer) {
+    return;
+  }
+
+  const controls = makeElement('div', 'mh-improved-map-exploration-controls');
+  makeMhButton({
+    element: 'button',
+    text: 'Toggle Map Exploration',
+    className: 'mh-improved-map-exploration-toggle lightBlue',
+    callback: setMapExploration,
+    appendTo: controls,
+  });
+
+  mapContainer.after(controls);
+  updateMapExplorationToggle();
+};
+
+/**
+ * Get the previous location.
+ *
+ * @return {Object|boolean} The previous location object or false.
+ */
+const getPreviousLocation = () => {
+  const previousLocation = getSetting('better-travel.previous-location', false);
+  if (previousLocation && previousLocation !== getCurrentLocation()) {
+    return environments.find((environment) => {
+      return environment.id === previousLocation;
+    });
+  }
+
+  return false;
+};
+
+/**
+ * Travel to the previous location.
+ */
+const goToPreviousLocation = () => {
+  const previousLocation = getPreviousLocation();
+  if (previousLocation) {
+    travelTo(previousLocation.id);
+  }
+};
+
+/**
+ * Add the current region locations to the travel dropdown.
+ */
+const addToTravelDropdown = async () => {
+  let combinedEnvironments = environments;
+
+  if (eventEnvironments && eventEnvironments.length > 0) {
+    combinedEnvironments = [...environments, ...eventEnvironments];
+  }
+
+  if (! combinedEnvironments || combinedEnvironments.length === 0) {
+    environments = await getData('environments');
+    eventEnvironments = await getData('environments-events');
+    combinedEnvironments = eventEnvironments?.length > 0
+      ? [...environments, ...eventEnvironments]
+      : environments;
+  }
+
+  if (! combinedEnvironments || combinedEnvironments.length === 0) {
+    return;
+  }
+
+  const currentLocation = getCurrentLocation();
+
+  // get the object that matches the current location
+  const currentRegion = combinedEnvironments.find((environment) => {
+    return environment.id === currentLocation;
+  });
+
+  if (! currentRegion) {
+    return;
+  }
+
+  // get the other locations in the same region
+  const otherRegions = combinedEnvironments.filter((environment) => {
+    if (! environment?.region || ! currentRegion?.region) {
+      return false;
+    }
+
+    if ('acolyte_realm' === environment.id) {
+      return false;
+    }
+
+    return environment.region === currentRegion.region;
+  });
+
+  // remove the current location from the list
+  const currentLocationIndex = otherRegions.findIndex((environment) => {
+    return environment.id === currentLocation;
+  });
+  if (currentLocationIndex !== -1) {
+    otherRegions.splice(currentLocationIndex, 1);
+  }
+
+  // remove any existing custom submenu items that we've added
+  const existingCustomSubmenuItems = document.querySelectorAll('.mh-improved-better-travel-menu-item');
+  if (existingCustomSubmenuItems) {
+    existingCustomSubmenuItems.forEach((item) => {
+      item.remove();
+    });
+  }
+
+  const previousLocation = getPreviousLocation();
+  // add the previous location to the top of the list
+  if (previousLocation) {
+    addSubmenuItem({
+      menu: 'travel',
+      label: `Back to ${previousLocation.name}`,
+      icon: 'https://i.mouse.rip/icons/back.png',
+      callback: goToPreviousLocation,
+      class: 'mh-improved-better-travel-menu-item mh-improved-better-travel-previous-location',
+    });
+  }
+
+  // add the custom submenu items
+  for (const region of otherRegions) {
+    if (region.id === currentLocation) {
+      continue;
+    }
+
+    // only add the region if it's not there already.
+    if (document.querySelector(`#custom-submenu-item-better-travel-${region.id}`)) {
+      return;
+    }
+
+    addSubmenuItem({
+      id: `better-travel-${region.id}`,
+      menu: 'travel',
+      label: region.name,
+      icon: region.image,
+      callback: () => travelTo(region.id),
+      class: 'mh-improved-better-travel-menu-item mh-improved-better-travel-region-location',
+    });
+  }
+
+  const favorites = getLocationFavorites();
+  if (favorites && favorites.length > 0) {
+    addSubmenuDivider('travel', 'mh-improved-better-travel-favorites-divider');
+
+    favorites.forEach((favorite) => {
+      const favoriteRegion = combinedEnvironments.find((environment) => {
+        return environment.id === favorite;
+      });
+
+      if (favoriteRegion) {
+        addSubmenuItem({
+          id: `better-travel-favorite-${favorite}`,
+          menu: 'travel',
+          label: favoriteRegion.name,
+          icon: favoriteRegion.image,
+          callback: () => travelTo(favoriteRegion.id),
+          class: 'mh-improved-better-travel-menu-item mh-improved-better-travel-favorite-location',
+        });
+      }
+    });
+  }
+};
+
+/**
+ * Add a reminder to the travel page.
+ */
+const onTravelComplete = () => {
+  onEvent('travel_complete', () => {
+    saveTravelLocation();
+
+    setTimeout(() => {
+      if (getSetting('better-travel.show-reminders', true)) {
+        addReminders();
+      }
+
+      addToTravelDropdown();
+    }, 250);
+  });
+};
+
+/**
+ * Initialize the Simple Travel tab.
+ */
+const initSimpleTab = () => {
+  if ('simple-travel' === getCurrentTab()) {
+    const isActive = document.querySelector('.mousehuntHud-page-tabContent.simple-travel');
+    if (! isActive || (isActive && isActive.classList.contains('active'))) {
+      return;
+    }
+
+    setTab('simple-travel');
+  }
+};
+
+/**
+ * Change the tab to Simple Travel if the setting is enabled.
+ */
+const maybeSetTab = () => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  initSimpleTab();
+
+  if ('map' !== getCurrentTab()) {
+    return;
+  }
+
+  if (! getSetting('better-travel.default-to-simple-travel', false)) {
+    return;
+  }
+
+  setTab('simple-travel');
+};
+
+/**
+ * Highlight the region where the Relic Hunter is.
+ */
+const addRhToSimpleTravel = async () => {
+  const location = await getRelicHunterLocation();
+  if (! location) {
+    return;
+  }
+
+  const travelLink = document.querySelectorAll(`.travelPage-regionMenu-environmentLink[data-environment="${location.id}"]`);
+  if (! travelLink.length) {
+    return;
+  }
+
+  // Add the RH class to the travel link so we can style it.
+  travelLink.forEach((link) => {
+    link.classList.add('relic-hunter-is-here');
+  });
+};
+
+/**
+ * Add the Relic Hunter to the map.
+ */
+const addRhToMap = async () => {
+  const location = await getRelicHunterLocation();
+  if (! location) {
+    return;
+  }
+
+  const mapLocation = document.querySelector(`.travelPage-map-image-environment[data-environment-type="${location.id}"]`);
+  if (! mapLocation) {
+    return;
+  }
+
+  const rh = makeElement('div', ['map-relic-hunter-is-here', 'travelPage-map-image-environment-pointer']);
+  makeElement('div', ['map-relic-hunter-is-here-image', 'travelPage-map-image-environment-pointer-image'], '', rh);
+  mapLocation.append(rh);
+};
+
+/**
+ * Update the map view of the travel page.
+ */
+const maybeDoMapView = () => {
+  if ('travel' !== getCurrentPage()) {
+    return;
+  }
+
+  if ('map' !== getCurrentTab()) {
+    return;
+  }
+
+  expandTravelRegions();
+  addRhToMap();
+};
+
+let _tabHandler = null;
+
+/**
+ * Listen for tab changes and update the map view.
+ */
+const listenTabChange = () => {
+  if (_tabHandler) {
+    return;
+  }
+
+  if (! hg?.utils?.PageUtil?.onclickPageTabHandler) {
+    return;
+  }
+
+  _tabHandler = hg.utils.PageUtil.onclickPageTabHandler;
+
+  /**
+   * Handle tab changes.
+   *
+   * @param {string} tab The tab to switch to.
+   */
+  hg.utils.PageUtil.onclickPageTabHandler = (tab) => {
+    _tabHandler(tab);
+    maybeDoMapView();
+  };
+};
+
+/**
+ * Save the current location so that we can reference it later as the previous location.
+ */
+const saveTravelLocation = () => {
+  const isLocationDashboardRefreshing = sessionGet('doing-location-refresh', false);
+  if (isLocationDashboardRefreshing) {
+    return;
+  }
+
+  // we want to update the 'previousLocation' setting with what the 'currentLocation' is
+  // and then update the 'currentLocation' setting with what getCurrentLocation() returns
+  const previousLocation = getTravelSetting('current-location', 'not-set');
+  const currentLocation = getCurrentLocation();
+
+  if (currentLocation === previousLocation) {
+    return;
+  }
+
+  saveTravelSetting('previous-location', previousLocation);
+  saveTravelSetting('current-location', currentLocation);
+};
+
+/**
+ * Get the travel favorites.
+ *
+ * @return {Array} The travel favorites.
+ */
+const getLocationFavorites = () => {
+  return getSetting('better-travel.favorites', []);
+};
+
+/**
+ * Check if a location is a favorite.
+ *
+ * @param {string} type The location type.
+ *
+ * @return {boolean} Whether or not the location is a favorite.
+ */
+const isLocationFavorite = (type) => {
+  return getLocationFavorites().includes(type);
+};
+
+/**
+ * Save the travel favorites.
+ *
+ * @param {Array} favorites The travel favorites.
+ */
+const saveLocationFavorites = (favorites) => {
+  saveTravelSetting('favorites', favorites);
+};
+
+/**
+ * Add a location to the favorites.
+ *
+ * @param {string} type The location type.
+ */
+const addToLocationFavorites = (type) => {
+  if (! isLocationFavorite(type)) {
+    const faves = getLocationFavorites();
+    faves.push(type);
+    saveLocationFavorites(faves);
+  }
+};
+
+/**
+ * Remove a location from the favorites.
+ *
+ * @param {string} type The location type.
+ */
+const removeFromLocationFavorites = (type) => {
+  if (getLocationFavorites()) {
+    const faves = getLocationFavorites();
+    faves.splice(faves.indexOf(type), 1);
+    saveLocationFavorites(faves);
+  }
+};
+
+/**
+ * Add favorite buttons to the travel page for each location.
+ */
+const addFavoriteButtonsToTravelPage = async () => {
+  const locations = document.querySelectorAll('.travelPage-map-environment-detailContainer .travelPage-map-environment-detail');
+  if (! locations) {
+    return;
+  }
+
+  const eventEnvironmentIds = new Set(eventEnvironments.map((environment) => environment.id));
+  const locationFavorites = getLocationFavorites();
+
+  locations.forEach((location) => {
+    const type = location.getAttribute('data-environment-type');
+    if (! type) {
+      return;
+    }
+
+    // Don't add a favorite button to event locations.
+    if (eventEnvironmentIds.has(type)) {
+      return;
+    }
+
+    const isFavorite = locationFavorites.includes(type);
+
+    makeFavoriteButton({
+      id: `better-travel-favorite-${type}`,
+      target: location.querySelector('.travelPage-map-environment-detail-title'),
+      size: 'small',
+      state: isFavorite,
+      isSetting: false,
+      defaultState: false,
+      /**
+       * Callback for when the favorite button is clicked.
+       */
+      onActivate: () => {
+        addToLocationFavorites(type);
+        addToTravelDropdown();
+      },
+      /**
+       * Callback for when the favorite button is deactivated.
+       */
+      onDeactivate: () => {
+        removeFromLocationFavorites(type);
+        removeSubmenuItem(type);
+      },
+    });
+  });
+};
+
+/**
+ * Main function.
+ */
+const main = () => {
+  if (getSetting('better-travel.travel-window', true)) {
+    travelWindow();
+  }
+
+  onNavigation(() => {
+    addSimpleTravel();
+    addRhToSimpleTravel();
+    addFavoriteButtonsToTravelPage();
+    addMapExplorationToggle();
+  }, {
+    page: 'travel',
+  });
+
+  onPageChange({
+    travel: { show: maybeSetTab },
+  });
+
+  listenTabChange();
+
+  initSimpleTab();
+
+  maybeDoMapView();
+  addMapExplorationToggle();
+  onTravelComplete();
+
+  saveTravelLocation();
+  addToTravelDropdown();
+
+  onEvent('mh-improved-goto-previous-location', goToPreviousLocation);
+};
+
+let environments = [];
+let eventEnvironments = [];
+
+/**
+ * Initialize the module.
+ */
+const init = () => {
+  const stylesJoined = [styles, exploreMapStyles];
+
+  if (! getFlag('no-travel-menu-hiding')) {
+    stylesJoined.push(travelMenuHidingStyles);
+  }
+
+  addStyles(stylesJoined, 'better-travel');
+
+  Promise.all([
+    getData('environments'),
+    getData('environments-events')
+  ]).then(([envs, eventEnvs]) => {
+    environments = envs;
+    eventEnvironments = eventEnvs;
+    main();
+  }).catch(() => {
+    /* Failed to load environments data for better-travel */
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'better-travel',
+  name: 'Better Travel',
+  type: 'better',
+  default: true,
+  description: 'Add locations in the current region to the Travel dropdown menu, include a "Simple Travel" tab with a grid of locations, offer an optional alphabetized list, and indicate where the Relic Hunter is.',
+  load: init,
+  settings,
+};