mousehunt-improved 0.97.1

package/src/utils/messages.js

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,26 @@
+/**
+ * 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

@@ -0,0 +1,155 @@
+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
+};