mousehunt-improved 0.97.1 → 0.98.1

package/src/utils/messages.js

@@ -1,255 +0,0 @@
-import { debug } from './debug';
-import { makeElement } from './elements';
-
-import errorPageStyles from './styles/page-error.css';
-import errorStyles from './styles/errors.css';
-import maintenanceStyles from './styles/page-maintenance.css';
-
-/**
- * Show an error message appended to the given element.
- *
- * @param {Object}      options             Options for the message.
- * @param {string}      options.message     Message to show.
- * @param {HTMLElement} options.append      Element to append the error to.
- * @param {boolean}     [options.before]    Whether to append the message before the element.
- * @param {boolean}     [options.after]     Whether to append the message after the element.
- * @param {string}      [options.classname] Classes to add to the error element.
- * @param {string}      [options.type]      Type of message to show (error or success).
- */
-const showErrorMessage = (options) => {
-  const {
-    message,
-    append,
-    before = false,
-    after = false,
-    classname = [],
-    type = 'error',
-  } = options;
-
-  const typeClass = `mh-ui-${type}-message`;
-  const existing = document.querySelector(`.${typeClass}`);
-  if (existing) {
-    existing.remove();
-  }
-
-  const error = makeElement('div', [`mh-ui-${type}-message`, 'mh-ui-fade', classname], message);
-
-  if (append) {
-    if (before) {
-      append.before(error);
-    } else if (after) {
-      append.after(error);
-    } else {
-      append.append(error);
-    }
-  }
-
-  setTimeout(() => error.classList.add('mh-ui-fade-in'), 10);
-  setTimeout(() => {
-    error.classList.remove('mh-ui-fade-in');
-    error.classList.add('mh-ui-fade-out');
-  }, 2000);
-  setTimeout(() => error.remove(), 2500);
-};
-
-/**
- * Show a success message appended to the given element.
- *
- * @see showErrorMessage
- *
- * @param {Object}      opts           Options for the message.
- * @param {string}      opts.message   Message to show.
- * @param {HTMLElement} opts.append    Element to append the error to.
- * @param {boolean}     [opts.before]  Whether to append the message before the element.
- * @param {boolean}     [opts.after]   Whether to append the message after the element.
- * @param {string}      [opts.classes] Classes to add to the error element.
- */
-const showSuccessMessage = (opts) => {
-  opts.type = 'success';
-  showErrorMessage(opts);
-};
-
-let hadAddedErrorStyles = false;
-/**
- * Show an error message when the script fails to load.
- *
- * @param {Error} e The error that was thrown.
- */
-const showLoadingError = (e) => {
-  debug('Error loading MouseHunt Improved:', e);
-
-  // Add the error to the page.
-  const errorElement = makeElement('div', 'mousehunt-improved-error');
-  makeElement('h1', 'mousehunt-improved-error-title', 'Error loading MouseHunt Improved', errorElement);
-
-  if (e && e.message && e.stack) {
-    const errorText = makeElement('textarea', 'mousehunt-improved-error-message', `${e.message}\n\n${e.stack}`);
-    errorText.setAttribute('readonly', 'readonly');
-    errorText.setAttribute('rows', '10');
-    errorElement.append(errorText);
-  }
-
-  makeElement('p', 'mousehunt-improved-error-message', 'There was an error loading MouseHunt Improved. Try refreshing the page. If the error persists, please add an issue to the <a href="https://github.com/MHCommunity/mousehunt-improved">GitHub repo</a>.', errorElement);
-
-  const closeButton = makeElement('button', 'mousehunt-improved-error-close', 'Close');
-  closeButton.addEventListener('click', () => {
-    errorElement.remove();
-  });
-  errorElement.append(closeButton);
-
-  document.body.append(errorElement);
-
-  if (hadAddedErrorStyles) {
-    return;
-  }
-
-  const errorStylesEl = makeElement('style', 'mh-improved-error-styles', errorStyles);
-  document.head.append(errorStylesEl);
-  hadAddedErrorStyles = true;
-};
-
-/**
- * Check if the page is in maintenance mode or an error page and apply styles.
- */
-const maybeDoMaintenance = () => {
-  const maintenance = document.querySelector('body.PageMaintenance');
-  if (maintenance) {
-    const maintenanceStylesEl = makeElement('style', 'mh-improved-maintenance-styles', maintenanceStyles);
-    document.head.append(maintenanceStylesEl);
-  }
-
-  const errorLockPage = document.querySelector('body.PageLockError');
-  const errorPage = document.querySelector('body.PageError');
-  if (errorLockPage || errorPage) {
-    const errorPageStylesEl = makeElement('style', 'mh-improved-error-page-styles', errorPageStyles);
-    document.head.append(errorPageStylesEl);
-  }
-
-  if (! (maintenance || errorLockPage || errorPage)) {
-    return;
-  }
-
-  const backgrounds = [
-    'https://www.mousehuntgame.com/images/map/login-page/standard/2.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/standard/3.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/standard/4.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/standard/5.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/promo/bountiful_beanstalk.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/promo/school_of_sorcery.jpg',
-    'https://www.mousehuntgame.com/images/map/login-page/promo/draconic_depths.jpg',
-  ];
-
-  // pick a random background
-  const background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
-  document.body.style.backgroundImage = `url(${background})`;
-};
-
-/**
- * Show an error message in a popup.
- *
- * @param {Object} options           Options for the message.
- * @param {string} options.title     Title of the message.
- * @param {string} [options.content] Content of the message.
- */
-const showLoadingPopupError = (options) => {
-  const popup = new jsDialog();
-  popup.setTemplate('error');
-  popup.setAttributes({ className: 'error' });
-  popup.addToken('{*title*}', options.title);
-  popup.addToken('{*content*}', options.content || '');
-  popup.show();
-};
-
-/**
- * Show a loading popup.
- *
- * @param {string} title Title of the loading popup.
- *
- * @return {Object} The popup and its elements.
- */
-const showLoadingPopup = (title) => {
-  const popup = new jsDialog();
-  popup.setTemplate('loading');
-  popup.setAttributes({ className: 'loading mh-improved-loading' });
-  popup.show();
-
-  const element = document.querySelector('#overlayPopup .jsDialog .title');
-  if (! element) {
-    return {
-      popup,
-      title: null,
-      text: null,
-      /**
-       * Set the text of the loading popup.
-       */
-      setText: () => {},
-
-      /**
-       * Set the title of the loading popup.
-       */
-      setTitle: () => {},
-
-      /**
-       * Show the loading popup.
-       */
-      show: () => {},
-
-      /**
-       * Hide the loading popup.
-       */
-      hide: () => {},
-    };
-  }
-
-  element.textContent = title;
-
-  const loadingText = makeElement('div', 'loading-text');
-  element.append(loadingText);
-
-  return {
-    popup,
-    title: element,
-    text: loadingText,
-
-    /**
-     * Set the text of the loading popup.
-     *
-     * @param {string} newText The new text to set.
-     */
-    setText: (newText) => {
-      loadingText.textContent = newText;
-    },
-
-    /**
-     * Set the title of the loading popup.
-     *
-     * @param {string} newTitle The new title to set.
-     */
-    setTitle: (newTitle) => {
-      element.textContent = newTitle;
-    },
-
-    /**
-     * Show the loading popup.
-     */
-    show: () => {
-      popup.show();
-    },
-
-    /**
-     * Hide the loading popup.
-     */
-    hide: () => {
-      popup.hide();
-    },
-  };
-};
-
-export {
-  showErrorMessage,
-  showSuccessMessage,
-  showLoadingError,
-  showLoadingPopupError,
-  showLoadingPopup,
-  maybeDoMaintenance
-};

package/src/utils/onboarding.js

@@ -1,102 +0,0 @@
-import { getSetting, saveSetting } from './settings';
-import { getCurrentPage } from './page-current';
-import { getCurrentTab } from './page';
-import { waitForElement } from './elements';
-
-/**
- * Check if an onboarding step has been seen.
- *
- * @param {string} step The step to check.
- *
- * @return {boolean} Whether the step has been seen.
- */
-const hasSeenOnboardingStep = (step) => {
-  return getSetting(`onboarding.${step}`, false);
-};
-
-/**
- * Mark an onboarding step as completed.
- *
- * @param {string} step The step to save.
- */
-const saveOnboardingStep = (step) => {
-  saveSetting(`onboarding.${step}`, true);
-};
-
-let hasAddedOnboardingStep = false;
-/**
- * Add an onboarding/tutorial message.
- *
- * @param {Object}   options                   The options for the message.
- * @param {string}   options.step              The step for the message.
- * @param {string}   options.page              The page for the message.
- * @param {string}   options.tab               The tab for the message.
- * @param {string}   options.highlightSelector The selector to highlight.
- * @param {string}   options.content           The content for the message.
- * @param {string}   options.direction         The direction for the arrow.
- * @param {number}   options.highlightPadding  The padding for the highlight.
- * @param {string}   options.classname         The classname for the message.
- * @param {string}   options.button            The button text.
- * @param {Function} options.onShowCallback    The callback for the show event.
- * @param {Function} options.onCloseCallback   The callback for the close event.
- * @param {boolean}  options.showOverlay       Whether to show the overlay.
- * @param {number}   options.delay             The delay for the message.
- */
-const addOnboardingMessage = async (options) => {
-  const {
-    step,
-    page,
-    tab,
-    highlightSelector,
-    content,
-    direction,
-    highlightPadding = 3,
-    classname,
-    button,
-    onShowCallback = () => {},
-    onCloseCallback = () => {},
-    showOverlay = true,
-    delay = 100,
-  } = options;
-
-  if (
-    hasAddedOnboardingStep ||
-    hasSeenOnboardingStep(step) ||
-    (page && page !== getCurrentPage()) ||
-    (tab && tab !== getCurrentTab())
-  ) {
-    return;
-  }
-
-  hasAddedOnboardingStep = true;
-
-  await waitForElement(highlightSelector);
-
-  hg.views.MessengerView.addMessage({
-    content: {
-      body: hg.views.OnboardingTutorialView().wrapInfoArrow(content, button || 'OK'),
-    },
-    highlight_dom: highlightSelector,
-    highlight_padding: highlightPadding,
-    css_class: `larryCircle mh-improved-onboarding ${step} ${classname || ''}`,
-    show_overlay: showOverlay,
-    on_show_callback() {
-      hg.views.OnboardingTutorialView().showBouncyArrow(highlightSelector, direction);
-      onShowCallback();
-    },
-    on_close_callback() {
-      hg.views.OnboardingTutorialView().hideBouncyArrow();
-      hasAddedOnboardingStep = false;
-      saveOnboardingStep(step);
-      onCloseCallback();
-    },
-  });
-
-  setTimeout(() => hg.views.MessengerView.go(), delay);
-};
-
-export {
-  hasSeenOnboardingStep,
-  saveOnboardingStep,
-  addOnboardingMessage
-};

package/src/utils/page-current.js

@@ -1,26 +0,0 @@
-/**
- * Get the current page slug.
- *
- * @return {string|null} The page slug or null if not found.
- */
-const getCurrentPage = () => {
-  if (! hg?.utils?.PageUtil?.getCurrentPage) {
-    return null;
-  }
-
-  const page = hg.utils.PageUtil.getCurrentPage();
-  if (! page) {
-    const query = hg?.utils?.PageUtil?.getQueryParams() || {};
-    if (query?.switch_to && 'mobile' === query.switch_to) {
-      return 'camp';
-    }
-
-    return null;
-  }
-
-  return page.toLowerCase();
-};
-
-export {
-  getCurrentPage
-};

package/src/utils/page.js

@@ -1,155 +0,0 @@
-import { doEvent } from './event-registry';
-import { getCurrentPage } from './page-current';
-
-/**
- * Go to the specified page.
- *
- * @param {string} page The page to go to.
- * @param {...any} args The arguments to pass to the page.
- *
- * @return {boolean} True if the page was set successfully, false otherwise.
- */
-const setPage = (page, ...args) => {
-  if ('wiki' === page.toLowerCase()) {
-    doEvent('mh-improved-open-wiki');
-    return true;
-  }
-
-  // Uppercase the first letter of the page.
-  page = page.charAt(0).toUpperCase() + page.slice(1);
-
-  return hg?.utils?.PageUtil?.setPage?.(page, ...args);
-};
-
-/**
- * Set the current page tab.
- *
- * @param {string} tab  The tab to set.
- * @param {...any} args The arguments to pass to the tab.
- *
- * @return {boolean} True if the tab was set successfully, false otherwise.
- */
-const setTab = (tab, ...args) => {
-  return hg?.utils?.PageUtil?.setPageTab?.(tab, ...args);
-};
-
-/**
- * Get the current page tab, defaulting to the current page if no tab is found.
- *
- * @return {string} The page tab.
- */
-const getCurrentTab = () => {
-  if (! hg?.utils?.PageUtil?.getCurrentPageTab) {
-    return getCurrentPage();
-  }
-
-  const tab = hg.utils.PageUtil.getCurrentPageTab() || '';
-
-  if (tab.length <= 0) {
-    return getCurrentPage();
-  }
-
-  return tab ? tab?.toLowerCase() : getCurrentPage();
-};
-
-/**
- * Get the current page sub tab, defaulting to the current tab if no sub tab is found.
- *
- * @return {string} The page tab.
- */
-const getCurrentSubtab = () => {
-  const subtab = hg.utils.PageUtil.getCurrentPageSubTab();
-  if (! subtab || subtab.length <= 0) {
-    return getCurrentTab();
-  }
-
-  return subtab ? subtab?.toLowerCase() : getCurrentTab();
-};
-
-/**
- * Get the current overlay.
- *
- * @return {string} The current overlay.
- */
-const getCurrentDialog = () => {
-  const overlay = document.querySelector('#overlayPopup');
-  if (! overlay || ! overlay.classList || overlay.classList.length <= 0) {
-    return '';
-  }
-
-  const replaceMap = {
-    jsDialogFixed: '',
-    default: '',
-    wide: '',
-    ajax: '',
-    overlay: '',
-    treasureMapPopup: 'map',
-    itemViewPopup: 'item',
-    mouseViewPopup: 'mouse',
-    largerImage: 'image',
-    convertibleOpenViewPopup: 'convertible',
-    adventureBookPopup: 'adventureBook',
-    marketplaceViewPopup: 'marketplace',
-    giftSelectorViewPopup: 'gifts',
-    supportPageContactUsForm: 'support',
-    MHCheckout: 'premiumShop',
-  };
-
-  const overlayType = overlay.classList.value.split(' ').map((cls) => replaceMap[cls] || cls).join(' ').trim();
-
-  return 'Popup' === overlayType ? '' : overlayType;
-};
-
-/**
- * Check if the page matches the target page, optionally checking the tab and subtab.
- *
- * @param {string} [targetPage]         The target page.
- * @param {string} [targetTab]          The target tab.
- * @param {string} [targetSubtab]       The target subtab.
- * @param {string} [forceCurrentPage]   The current page.
- * @param {string} [forceCurrentTab]    The current tab.
- * @param {string} [forceCurrentSubtab] The current subtab.
- *
- * @return {boolean} True if the page matches, false otherwise.
- */
-const isCurrentPage = (
-  targetPage = null,
-  targetTab = null,
-  targetSubtab = null,
-  forceCurrentPage = null,
-  forceCurrentTab = null,
-  forceCurrentSubtab = null
-) => {
-  if (! targetPage) {
-    return false;
-  }
-
-  // Only targetPage is being checked.
-  const currentPage = forceCurrentPage || getCurrentPage();
-  if (! targetTab) {
-    return currentPage === targetPage;
-  }
-
-  // Only targetTab is being checked.
-  const currentTab = forceCurrentTab || getCurrentTab();
-  if (! targetSubtab) {
-    return currentPage === targetPage && currentTab === targetTab;
-  }
-
-  // Only targetSubtab is being checked.
-  const currentSubtab = forceCurrentSubtab || getCurrentSubtab();
-  if (currentSubtab === currentTab) {
-    return currentPage === targetPage && currentTab === targetTab;
-  }
-
-  return currentPage === targetPage && currentTab === targetTab && currentSubtab === targetSubtab;
-};
-
-export {
-  getCurrentTab,
-  getCurrentSubtab,
-  getCurrentDialog,
-  isCurrentPage,
-  setPage,
-  setTab
-};