mousehunt-improved 0.97.1

package/src/modules/custom-hud/styles/suede.css

@@ -0,0 +1,10 @@
+.mousehuntHud-marbleDrawer {
+  background:
+    url(https://www.mousehuntgame.com/images/ui/hud/mousehuntHudPedestal.gif) -51px 0 no-repeat,
+    url(https://www.mousehuntgame.com/images/ui/hud/mousehuntHudPedestal.gif) 736px 0 no-repeat,
+    url(https://www.mousehuntgame.com/images/ui/hud/suede.jpg) repeat bottom left/760px;
+}
+
+#mousehuntContainer.PageCamp {
+  background: url(https://www.mousehuntgame.com/images/ui/hud/suede.jpg) repeat-y;
+}

package/src/modules/custom-shield/cotton-candy.css

@@ -0,0 +1,38 @@
+.huntersHornView__backdrop {
+  filter: hue-rotate(180deg);
+  opacity: 1;
+  transition: none;
+}
+
+.huntersHornView__horn--ready {
+  filter: hue-rotate(275deg);
+  transition: none;
+}
+
+.huntersHornMessageView {
+  filter: hue-rotate(200deg);
+}
+
+.mousehuntHud-menu.default > ul li a {
+  filter: hue-rotate(298deg);
+  backdrop-filter: hue-rotate(245deg);
+}
+
+.mousehuntHud-environmentName {
+  text-shadow:
+    0 0 1px #eab9cd,
+    1px 1px #ffe1f5;
+}
+
+.mousehuntHud-environmentIcon {
+  box-shadow:
+    2px 2px 2px #ffe1f5 inset,
+    -2px -2px 2px #eab9cd inset;
+}
+
+.mousehuntHud-menu ul li.active .mousehuntHud-menu-item.root,
+.mousehuntHud-menu ul li:hover .mousehuntHud-menu-item.root {
+  background: url(https://www.mousehuntgame.com/images/ui/hud/menu/menu_seperator.png) 100% 0 no-repeat;
+  filter: hue-rotate(328deg);
+  backdrop-filter: hue-rotate(292deg);
+}

package/src/modules/custom-shield/index.js

@@ -0,0 +1,267 @@
+import {
+  addSettingPreview,
+  addStyles,
+  getSetting,
+  getUserTitle,
+  makeElement,
+  onNavigation,
+  setMultipleTimeout
+} from '@utils';
+
+import settings from './settings';
+import styles from './styles.css';
+
+import cottonCandyStyles from './cotton-candy.css';
+
+const timerColorClasses = [
+  'color-blue',
+  'color-cyan',
+  'color-faded',
+  'color-green',
+  'color-pink',
+  'color-purple',
+  'color-rainbow',
+  'color-red',
+];
+
+/**
+ * Add or remove a class from an element.
+ *
+ * @param {Element} el          The element to add the class to.
+ * @param {string}  shieldClass The class to add.
+ * @param {string}  verb        The action to take.
+ */
+const doClass = (el, shieldClass, verb) => {
+  // if shieldClass is an array, join it.
+  if (Array.isArray(shieldClass)) {
+    shieldClass = shieldClass.join(' ');
+  }
+
+  if (! shieldClass) {
+    return;
+  }
+
+  let classToAdd = shieldClass.replace('.', ' ');
+  classToAdd = classToAdd.split(' ');
+
+  if (! Array.isArray(classToAdd)) {
+    classToAdd = [classToAdd];
+  }
+
+  classToAdd.forEach((className) => {
+    if (el && el.classList && el.classList[verb]) {
+      if ('remove' === verb && ! el.classList.contains(className)) {
+        return;
+      }
+
+      el.classList[verb](className);
+    }
+  });
+};
+
+/**
+ * Add a class from an element.
+ *
+ * @param {Element} el          The element to add the class to.
+ * @param {string}  shieldClass The class to add.
+ */
+const addClass = (el, shieldClass) => {
+  doClass(el, shieldClass, 'add');
+};
+
+let lastShield = '';
+let inputListener = null;
+let preferenceInput = null;
+
+const removeCottonCandyStyle = () => {
+  const cottonCandyStyle = document.querySelector('.mh-improved-cotton-candy-style');
+  if (cottonCandyStyle) {
+    cottonCandyStyle.remove();
+  }
+};
+
+const removeTimerClasses = (timer) => {
+  timer.classList.remove(...timerColorClasses);
+};
+
+/**
+ * Change the shield based on the user's preference.
+ */
+const changeShield = () => {
+  const shieldEl = document.querySelector('.mousehuntHud-shield');
+  if (! shieldEl) {
+    return;
+  }
+
+  let timer = document.querySelector('.huntersHornView__timer--default');
+  if (! timer) {
+    timer = document.querySelector('.huntersHornView__timer--legacy');
+    if (! timer) {
+      return;
+    }
+  }
+
+  removeTimerClasses(timer);
+  removeCottonCandyStyle();
+
+  // Remove the old shield class.
+  const classesToKeep = new Set(['mousehuntHud-shield', 'golden']);
+  const classes = [...shieldEl.classList];
+  classes.forEach((className) => {
+    if (! classesToKeep.has(className)) {
+      shieldEl.classList.remove(className);
+    }
+  });
+
+  // Get the new shield.
+  let shield = getSetting('custom-shield-0', 'default');
+  if ('default' === shield) {
+    shieldEl.classList.add('default', 'default-fancy');
+    lastShield = ['default', 'default-fancy'];
+    return;
+  }
+
+  // If it's cotton candy, add the style, otherwise remove it.
+  if (shield === 'color-cotton-candy') {
+    makeElement('style', 'mh-improved-cotton-candy-style', cottonCandyStyles, document.head);
+
+    shield = 'color-pink-timer';
+  }
+
+  lastShield = [shield];
+
+  if (shield.startsWith('color-')) {
+    shieldEl.classList.add('default');
+    shieldEl.classList.add('color');
+
+    lastShield.push('color');
+  }
+
+  if (shield.endsWith('-timer')) {
+    shield = shield.replace('-timer', '');
+    timer.classList.add(shield);
+
+    lastShield.push(shield);
+  }
+
+  // if its the alt, also add the non-alt class.
+  if (shield.endsWith('-alt')) {
+    const altClass = shield.replace('-alt', '');
+    shieldEl.classList.add(altClass, 'alt');
+    lastShield.push(altClass, 'alt');
+  }
+
+  if (shield.includes('title')) {
+    shieldEl.classList.add('title');
+    shield = 'title' === shield ? getUserTitle() : shield;
+    lastShield.push('title', shield);
+  }
+
+  shieldEl.classList.add('mhui-custom-shield');
+  addClass(shieldEl, shield);
+};
+
+/**
+ * Listen for preference changes to update the shield.
+ */
+const watchForPreferenceChanges = () => {
+  const input = document.querySelector('#mousehunt-improved-settings-design-custom-shield select');
+  if (! input) {
+    return;
+  }
+
+  if (preferenceInput && preferenceInput !== input && inputListener) {
+    preferenceInput.removeEventListener('change', inputListener);
+  }
+
+  if (preferenceInput === input) {
+    return;
+  }
+
+  preferenceInput = input;
+  inputListener = () => {
+    changeShield();
+  };
+  preferenceInput.addEventListener('change', inputListener);
+};
+
+const shieldPreview = (shield) => {
+  const shieldClass = shield.id
+    .replaceAll('color-', ' default color-')
+    .replaceAll('-alt', ' alt')
+    .replaceAll('.', ' ');
+
+  return `<div class="mh-improved-custom-shield-item-preview ${shield.id}"><a class="mousehuntHud-shield golden ${shieldClass}"></a>
+</div>`;
+};
+
+const getShieldSettingsValues = async () => {
+  const settingsValues = await settings();
+  const shields = settingsValues[0].settings.options.reduce((acc, option) => {
+    if (option.options && Array.isArray(option.options)) {
+      return [...acc, ...option.options];
+    }
+
+    if (option.value && option.name) {
+      return [...acc, option];
+    }
+
+    return acc;
+  }, []).filter((option) => {
+    if (! option?.value || 'title' === option.value || 'default-normal' === option.value || 'color-cotton-candy' === option.value) {
+      return false;
+    }
+
+    return ! option.value.includes('-timer');
+  }).map((option) => {
+    return {
+      id: option.value,
+      name: option.name.replaceAll('(LGS Required)', ''),
+    };
+  });
+
+  return shields;
+};
+
+/**
+ * Initialize the module.
+ */
+const init = () => {
+  addStyles(styles, 'custom-shield');
+
+  lastShield = getSetting('custom-shield-0', 'default');
+  if ('default' !== lastShield) {
+    changeShield();
+  }
+
+  onNavigation(() => {
+    setMultipleTimeout(watchForPreferenceChanges, [100, 1000, 2000, 5000]);
+
+    getShieldSettingsValues().then((shields) => {
+      addSettingPreview({
+        id: 'custom-shield',
+        selector: '.mh-improved-custom-shield-preview',
+        inputSelector: '#mousehunt-improved-settings-design-custom-shield select',
+        preview: false,
+        items: shields,
+        itemPreviewCallback: shieldPreview,
+      });
+    }).catch(() => {
+      /* Failed to load shield settings values */
+    });
+  }, {
+    page: 'preferences',
+    onLoad: true,
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'custom-shield',
+  type: 'design',
+  alwaysLoad: true,
+  load: init,
+  settings,
+};

package/src/modules/custom-shield/settings/index.js

@@ -0,0 +1,156 @@
+/**
+ * Add settings for the module.
+ *
+ * @return {Array} The settings for the module.
+ */
+export default async () => {
+  let options = [
+    { name: 'Default', value: 'default' },
+    { name: 'Default (normal resolution)', value: 'default-normal' },
+    { name: 'Default (no LGS)', value: 'default-no-lgs' },
+    { name: 'Simple Golden', value: 'plain' },
+    { name: 'Starry', value: 'starry' },
+    {
+      name: 'Events',
+      value: 'group',
+      options: [
+        { name: 'Birthday (Generic)', value: 'birthday' },
+        { name: 'Birthday (Year 10)', value: 'birthday.year10' },
+        { name: 'Birthday (Year 11)', value: 'birthday.year11' },
+        { name: 'Birthday (Year 12)', value: 'birthday.year12' },
+        { name: 'Birthday (Year 13)', value: 'birthday.year13' },
+        { name: 'Birthday (Year 14)', value: 'birthday.year14' },
+        { name: 'Birthday (Year 15)', value: 'birthday.year15' },
+        { name: 'Birthday (Year 16)', value: 'birthday.year16' },
+        { name: 'Birthday (Year 17)', value: 'birthday.year17' },
+        { name: 'Great Winter Hunt', value: 'winter_hunt' },
+        { name: 'Halloween', value: 'halloween' },
+        { name: 'Halloween (Pumpkins)', value: 'halloween-text' },
+        { name: 'Larry\'s Football Challenge', value: 'larrys_football_challenge' },
+        { name: 'Pride (LGS Required)', value: 'pride' },
+        { name: 'Remembrance Day', value: 'remembrance_day' },
+        { name: 'Spring Egg Hunt (LGS Required)', value: 'spring-egg-hunt' },
+        { name: 'Spring Egg Hunt Alt (LGS Required)', value: 'spring-egg-hunt-alt' },
+        { name: 'Valentine\'s', value: 'valentines' },
+      ],
+    },
+    {
+      name: 'Color (LGS required)',
+      value: 'group',
+      options: [
+        { name: 'Blue', value: 'color-blue' },
+        { name: 'Cyan', value: 'color-cyan' },
+        { name: 'Green', value: 'color-green' },
+        { name: 'Pink', value: 'color-pink' },
+        { name: 'Purple', value: 'color-purple' },
+        { name: 'Red', value: 'color-red' },
+        { name: 'Faded', value: 'color-faded' },
+        { name: 'Rainbow', value: 'color-rainbow' },
+        { name: 'Cotton Candy', value: 'color-cotton-candy' },
+        { seperator: true },
+        { name: 'Blue with matching timer', value: 'color-blue-timer' },
+        { name: 'Cyan with matching timer', value: 'color-cyan-timer' },
+        { name: 'Green with matching timer', value: 'color-green-timer' },
+        { name: 'Pink with matching timer', value: 'color-pink-timer' },
+        { name: 'Purple with matching timer', value: 'color-purple-timer' },
+        { name: 'Red with matching timer', value: 'color-red-timer' },
+        { name: 'Rainbow with matching timer', value: 'color-rainbow-timer' },
+      ],
+    },
+    {
+      name: 'Title Shields',
+      value: 'group',
+      options: [
+        { name: 'Current Title ', value: 'title' },
+        { seperator: true },
+        { name: 'Novice', value: 'title.novice' },
+        { name: 'Recruit', value: 'title.recruit' },
+        { name: 'Apprentice', value: 'title.apprentice' },
+        { name: 'Initiate', value: 'title.initiate' },
+        { name: 'Journeyman / Journeywoman', value: 'title.journeyman' },
+        { name: 'Master', value: 'title.master' },
+        { name: 'Grandmaster', value: 'title.grandmaster' },
+        { name: 'Legendary', value: 'title.legendary' },
+        { name: 'Hero', value: 'title.hero' },
+        { name: 'Knight', value: 'title.knight' },
+        { name: 'Lord / Lady', value: 'title.lord' },
+        { name: 'Baron / Baroness', value: 'title.baron' },
+        { name: 'Count / Countess', value: 'title.count' },
+        { name: 'Duke / Duchess', value: 'title.duke' },
+        { name: 'Grand Duke / Duchess', value: 'title.grandduke' },
+        { name: 'Archduke / Archduchess', value: 'title.archduke' },
+        { name: 'Viceroy', value: 'title.viceroy' },
+        { name: 'Elder', value: 'title.elder' },
+        { name: 'Sage', value: 'title.sage' },
+        { name: 'Fabled', value: 'title.fabled' },
+      ],
+    },
+    {
+      name: 'Mice',
+      value: 'group',
+      options: [
+        { name: 'Glazy', value: 'glazy' },
+        { name: 'Romeno', value: 'romeno' },
+        { name: 'Leprechaun', value: 'leprechaun' },
+        { name: 'Mythweaver', value: 'mythweaver' },
+        { name: 'Romeo', value: 'romeo' },
+      ],
+    },
+    {
+      name: 'Other',
+      value: 'group',
+      options: [
+        { name: 'Drawing', value: 'drawing' },
+        { name: 'Droid', value: 'droid' },
+        { name: 'Scrambles', value: 'scrambles' },
+        { name: 'Moustachio', value: 'moustachio' },
+        { name: 'Jerry', value: 'jerry' },
+      ],
+    },
+  ];
+
+  if (! user.has_shield) {
+    // If the user doesn't have LGS, they can't do the pride or SEH shields.
+    const toDisable = new Set([
+      'default-no-lgs',
+      'pride',
+      'spring-egg-hunt',
+      'spring-egg-hunt-alt',
+      'Color (LGS required)',
+    ]);
+
+    // Set all the options the user can't select as disabled, including all of the "Color (LGS required)" options.
+    options = options.map((option) => {
+      // Check if the name, value, or the parent group name is in the toDisable array.
+      if ('group' === option.value) {
+        // If the option is a group, check if the name or value is in the toDisable array.
+        const disabledParent = toDisable.has(option.name) || toDisable.has(option.value);
+        if (disabledParent) {
+          option.disabled = 'disabled';
+        }
+
+        option.options = option.options.map((groupOption) => {
+          // If the option is in the toDisable array, disable it.
+          if (toDisable.has(groupOption.value) || disabledParent) {
+            groupOption.disabled = 'disabled';
+          }
+
+          return groupOption;
+        });
+      }
+      return option;
+    });
+  }
+
+  return [{
+    id: 'custom-shield',
+    title: 'Custom Shield <a class="mh-improved-custom-shield-preview">Preview choices</a>',
+    default: [options[0]],
+    description: 'Change the shield to an event shield, color, title shield, or silly shield.',
+    settings: {
+      type: 'multi-select',
+      number: 1,
+      options,
+    },
+  }];
+};