mousehunt-improved 0.97.1

package/src/modules/copy-id/index.js

@@ -0,0 +1,91 @@
+import { addStyles, getSetting, makeElement, makeMhButton } from '@utils';
+
+import settings from './settings';
+
+import styles from './styles.css';
+
+/**
+ * Main function.
+ */
+const main = () => {
+  const profilePic = document.querySelector('.mousehuntHud-userStatBar .mousehuntHud-profilePic');
+  if (! profilePic) {
+    return;
+  }
+
+  const hidebutton = getSetting('copy-id-button.hide-button');
+
+  const copyIdButton = makeMhButton({
+    text: 'Copy ID',
+    className: ['mh-copy-id-button', hidebutton ? 'hidden' : ''],
+  });
+
+  profilePic.parentNode.insertBefore(copyIdButton, profilePic.nextSibling);
+
+  const successMessage = makeElement('div', 'mh-copy-id-success-message', 'Copied!');
+  successMessage.style.opacity = 0;
+  copyIdButton.parentNode.insertBefore(successMessage, copyIdButton.nextSibling);
+
+  /**
+   * Copy the user ID to the clipboard.
+   *
+   * @param {Event} e The event object.
+   */
+  const clickAction = (e) => {
+    e.preventDefault();
+
+    const Id = user.user_id;
+    navigator.clipboard.writeText(Id);
+
+    successMessage.style.opacity = 1;
+    setTimeout(() => {
+      successMessage.style.opacity = 0;
+    }, 1000);
+  };
+
+  copyIdButton.addEventListener('click', clickAction);
+
+  if (hidebutton) {
+    profilePic.setAttribute('onclick', '');
+    profilePic.addEventListener('click', clickAction);
+  } else {
+    // When hovering over the profile pic, show the copy button and hide it if they're not hovering the profile pic or the button.
+    profilePic.addEventListener('mouseenter', () => {
+      copyIdButton.style.display = 'block';
+    });
+
+    profilePic.addEventListener('mouseleave', () => {
+      copyIdButton.style.display = 'none';
+    });
+
+    copyIdButton.addEventListener('mouseenter', () => {
+      copyIdButton.style.display = 'block';
+    });
+
+    copyIdButton.addEventListener('mouseleave', () => {
+      copyIdButton.style.display = 'none';
+    });
+  }
+};
+
+/**
+ * Initialize the module.
+ */
+const init = () => {
+  addStyles(styles, 'copy-id');
+
+  main();
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'copy-id',
+  name: 'Copy ID Button',
+  type: 'feature',
+  default: true,
+  description: 'Hover over your profile picture in the HUD for a quick "Copy ID to clipboard" button.',
+  load: init,
+  settings,
+};

package/src/modules/copy-id/settings/index.js

@@ -0,0 +1,13 @@
+/**
+ * Add settings for the module.
+ *
+ * @return {Array} The settings for the module.
+ */
+export default async () => {
+  return [{
+    id: 'copy-id-button.hide-button',
+    title: 'Hide button',
+    description: 'Click your profile picture to copy ID.',
+    default: false,
+  }];
+};

package/src/modules/copy-id/styles.css

@@ -0,0 +1,26 @@
+.mousehuntHud-userStatBar .profileImage {
+  position: relative;
+}
+
+.mh-copy-id-button {
+  position: absolute;
+  top: 30px;
+  left: 3px;
+  z-index: 50;
+  display: none;
+  padding: 2px 4px;
+  font-size: 9px;
+  cursor: pointer;
+}
+
+.mh-copy-id-success-message {
+  position: absolute;
+  top: 32px;
+  left: 60px;
+  z-index: 50;
+  font-weight: 900;
+  color: #fff;
+  text-shadow: 1px 1px 1px #000;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}

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

@@ -0,0 +1,179 @@
+import {
+  addSettingPreview,
+  addStyles,
+  getSetting,
+  onNavigation,
+  setMultipleTimeout
+} from '@utils';
+
+import gradients from '@data/backgrounds.json';
+
+import settings from './settings';
+import styles from './styles.css';
+
+let possibleClasses = [];
+let preferenceInput = null;
+
+const handlePreferenceChange = () => {
+  addBodyClass();
+};
+
+/**
+ * Add a class to the body.
+ *
+ * @param {boolean} preview Whether or not this is a preview.
+ */
+const addBodyClass = (preview = false) => {
+  const body = document.querySelector('body');
+  if (! body) {
+    return;
+  }
+
+  let setting = getSetting('custom-background-0', 'default');
+  if (preview) {
+    setting = preview;
+  }
+
+  // remove the old injected style
+  const style = document.querySelector('#mh-improved-custom-background-style');
+  if (style) {
+    style.remove();
+  }
+
+  body.classList.remove('mh-improved-custom-background');
+  possibleClasses.forEach((className) => {
+    body.classList.remove(className, `mh-improved-bg-${className}`);
+  });
+
+  if ('default' === setting) {
+    return;
+  }
+
+  const background = `mh-improved-bg-${setting}`;
+
+  body.classList.add(background);
+  if (! setting.startsWith('background-color-')) {
+    body.classList.add(setting);
+  }
+
+  if (! gradients) {
+    return;
+  }
+
+  const gradient = gradients.find((g) => g.id === setting);
+  if (! gradient) {
+    return;
+  }
+
+  body.classList.add('mh-improved-custom-background');
+
+  const gradientStyle = document.createElement('style');
+  gradientStyle.id = 'mh-improved-custom-background-style';
+  gradientStyle.textContent = `.mh-improved-custom-background-gradient-preview,
+  body.${background} .pageFrameView-column.right.right,
+  body.${background} .pageFrameView-column.left.left {
+    background-color: transparent !important;
+    background-image: none !important;
+  }
+
+  @media only screen and (max-width: 1000px) {
+    body.${background}.hasSidebar .pageFrameView,
+    body.${background} .pageFrameView-column.right.right,
+    body.${background} .pageFrameView-column.left.left {
+      background-color: transparent !important;
+      background-image: none !important;
+    }
+  }
+
+  body.${background} {
+    background: ${gradient.css};
+    background-attachment: fixed;
+  }`;
+
+  document.head.append(gradientStyle);
+};
+
+/**
+ * Listen for changes to the preference.
+ */
+const listenForPreferenceChanges = () => {
+  const input = document.querySelector('#mousehunt-improved-settings-design-custom-background select');
+  if (! input) {
+    return;
+  }
+
+  if (preferenceInput && preferenceInput !== input) {
+    preferenceInput.removeEventListener('change', handlePreferenceChange);
+  }
+
+  if (preferenceInput === input) {
+    return;
+  }
+
+  preferenceInput = input;
+  preferenceInput.addEventListener('change', handlePreferenceChange);
+};
+
+const addPreview = () => {
+  addSettingPreview({
+    id: 'custom-background',
+    selector: '.mh-improved-custom-bg-preview',
+    inputSelector: '#mousehunt-improved-settings-design-custom-background select',
+    items: gradients,
+    previewCallback: (selected) => addBodyClass(selected),
+  });
+};
+
+/**
+ * Persist the background class.
+ */
+const persistBackground = () => {
+  addBodyClass();
+  onNavigation(() => {
+    addBodyClass();
+    setTimeout(addBodyClass, 250);
+    setTimeout(addBodyClass, 500);
+  });
+
+  addPreview();
+  onNavigation(() => {
+    setMultipleTimeout(listenForPreferenceChanges, [250, 500, 1000, 2000, 5000]);
+    addPreview();
+  }, { page: 'preferences' });
+};
+
+/**
+ * Initialize the module.
+ */
+const init = () => {
+  addStyles(styles, 'custom-background');
+
+  settings().then((theSettings) => {
+    possibleClasses = theSettings[0].settings.options.reduce((acc, option) => {
+      if ('group' === option.value) {
+        return [...acc, ...option.options.map((subOption) => subOption.value)];
+      }
+
+      if ('default' === option.value) {
+        return acc;
+      }
+
+      return [...acc, option.value];
+    }, []);
+    persistBackground();
+  }).catch(() => {
+    persistBackground();
+    /* Failed to load settings for custom-background */
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'custom-background',
+  type: 'design',
+  alwaysLoad: true,
+  load: init,
+  settings,
+};

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

@@ -0,0 +1,60 @@
+import gradients from '@data/backgrounds.json';
+
+/**
+ * Add settings for the module.
+ *
+ * @return {Array} The settings for the module.
+ */
+export default async () => {
+  const gradientOptions = gradients.map((gradient) => ({
+    name: gradient.name,
+    value: gradient.id,
+  }));
+
+  const options = [
+    { name: 'Default', value: 'default' },
+    {
+      name: 'Events',
+      value: 'group',
+      options: [
+        { name: 'Birthday', value: 'birthday' },
+        { name: 'Great Winter Hunt', value: 'great_winter_hunt' },
+        { name: 'Halloween', value: 'halloween' },
+        { name: 'King\'s Giveaway', value: 'kings_giveaway' },
+        { name: 'Lunar New Year', value: 'lunar_new_year' },
+        { name: 'Spring Egg Hunt', value: 'spring_hunt' },
+        { name: 'Valentine\'s', value: 'valentines' },
+      ],
+    },
+    {
+      name: 'Color',
+      value: 'group',
+      options: [
+        { name: 'Blue', value: 'background-color-blue' },
+        { name: 'Cyan', value: 'background-color-cyan' },
+        { name: 'Green', value: 'background-color-green' },
+        { name: 'Pink', value: 'background-color-pink' },
+        { name: 'Purple', value: 'background-color-purple' },
+        { name: 'Red', value: 'background-color-red' },
+        { name: 'Faded', value: 'background-color-faded' },
+      ],
+    },
+    {
+      name: 'Other',
+      value: 'group',
+      options: gradientOptions,
+    },
+  ];
+
+  return [{
+    id: 'custom-background',
+    title: 'Custom Background <a class="mh-improved-custom-bg-preview hidden">Preview choices</a>',
+    default: [options[0]],
+    description: 'Change the background to an event background, color, or gradient.',
+    settings: {
+      type: 'multi-select',
+      number: 1,
+      options,
+    },
+  }];
+};

package/src/modules/custom-background/styles.css

@@ -0,0 +1,135 @@
+/* color backgrounds */
+body.mh-improved-bg-background-color-blue .pageFrameView-contentContainer {
+  background-color: #bad4ed;
+}
+
+body.mh-improved-bg-background-color-blue .pageFrameView-column.right,
+body.mh-improved-bg-background-color-blue .pageFrameView-column.left {
+  background: #bad4ed;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-cyan .pageFrameView-contentContainer {
+  background-color: #abdbd3;
+}
+
+body.mh-improved-bg-background-color-cyan .pageFrameView-column.right,
+body.mh-improved-bg-background-color-cyan .pageFrameView-column.left {
+  background: #e8c6eb;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-green .pageFrameView-contentContainer {
+  background-color: #b4dbb8;
+}
+
+body.mh-improved-bg-background-color-green .pageFrameView-column.right,
+body.mh-improved-bg-background-color-green .pageFrameView-column.left {
+  background: #b4dbb8;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-pink .pageFrameView-contentContainer {
+  background-color: #e8c6eb;
+}
+
+body.mh-improved-bg-background-color-pink .pageFrameView-column.right,
+body.mh-improved-bg-background-color-pink .pageFrameView-column.left {
+  background: #e8c6eb;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-purple .pageFrameView-contentContainer {
+  background-color: #d8caf3;
+}
+
+body.mh-improved-bg-background-color-purple .pageFrameView-column.right,
+body.mh-improved-bg-background-color-purple .pageFrameView-column.left {
+  background: #d8caf3;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-red .pageFrameView-contentContainer {
+  background-color: #f2c7c5;
+}
+
+body.mh-improved-bg-background-color-red .pageFrameView-column.right,
+body.mh-improved-bg-background-color-red .pageFrameView-column.left {
+  background: #f2c7c5;
+  border: none;
+}
+
+body.mh-improved-bg-background-color-faded .pageFrameView-contentContainer {
+  background-color: #fff4c5;
+}
+
+body.mh-improved-bg-background-color-faded .pageFrameView-column.right,
+body.mh-improved-bg-background-color-faded .pageFrameView-column.left {
+  background: #fff4c5;
+  border: none;
+}
+
+/* Settings & Preview */
+#mousehunt-improved-settings-feature-custom-hud .PagePreferences__settingLabel,
+#mousehunt-improved-settings-feature-custom-background .PagePreferences__settingLabel {
+  position: relative;
+}
+
+.mh-improved-custom-hud-preview,
+.mh-improved-custom-camp-bg-preview,
+.mh-improved-custom-bg-preview {
+  position: absolute;
+  top: 0;
+  right: 225px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.mh-improved-custom-background-gradient-preview {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  height: 80vh;
+  padding-right: 10px;
+  margin-top: 20px;
+  margin-right: -10px;
+  overflow: auto;
+}
+
+.mh-improved-custom-background-gradient-preview .gradient {
+  display: flex;
+  flex-direction: column;
+  place-content: center space-between;
+  align-items: center;
+  width: 100%;
+  height: 200px;
+  padding: 10px 0;
+  border: 1px solid #626262;
+  border-radius: 5px;
+}
+
+.mh-improved-custom-background-gradient-preview .name {
+  font-size: 22px;
+  font-weight: 900;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px #000;
+}
+
+.mh-improved-custom-preview-popup-custom-hud .mh-improved-custom-background-gradient-preview .gradient {
+  height: 55px;
+}
+
+.mh-improved-custom-preview-popup-custom-hud .mh-improved-custom-background-gradient-preview .name {
+  font-size: 18px;
+}
+
+.mh-improved-custom-background-gradient-preview .mh-improved-custom-bg-action-button {
+  margin: 0 3px;
+}
+
+.mh-improved-custom-background-gradient-preview .gradient.custom-preview {
+  background-color: #a9a9a9;
+}

package/src/modules/custom-camp-background/index.js

@@ -0,0 +1,83 @@
+import { addSettingPreview, addStyles, getSetting, onNavigation } from '@utils';
+
+import gradients from '@data/backgrounds.json';
+
+import settings from './settings';
+import styles from './styles.css';
+
+const campBackgroundClasses = [
+  'background-black',
+  'background-blue',
+  'background-blueprint',
+  'background-cyan',
+  'background-faded',
+  'background-green',
+  'background-marble',
+  'background-pink',
+  'background-purple',
+  'background-red',
+  'background-white',
+  'background-wood',
+];
+
+const addCampBackground = () => {
+  const camp = document.querySelector('#mousehuntContainer.PageCamp');
+  if (! camp) {
+    return;
+  }
+
+  camp.classList.remove(...campBackgroundClasses);
+  camp.style.removeProperty('background');
+
+  const background = getSetting('custom-camp-background-0', 'background-wood');
+  if ('default' === background) {
+    return;
+  }
+
+  if (background.startsWith('background-')) {
+    camp.classList.add(background);
+    return;
+  }
+
+  if (! gradients) {
+    return;
+  }
+
+  const gradient = gradients.find((g) => g.id === background);
+  if (gradient) {
+    camp.style.background = gradient.css;
+  }
+};
+
+/**
+ * Initialize the module.
+ */
+const init = () => {
+  addStyles(styles, 'custom-camp-background');
+
+  onNavigation(addCampBackground, { page: 'camp' });
+
+  onNavigation(() => {
+    addSettingPreview({
+      id: 'custom-camp-background',
+      selector: '.mh-improved-custom-camp-bg-preview',
+      inputSelector: '#mousehunt-improved-settings-design-custom-camp-background select',
+      preview: false,
+      items: gradients,
+    });
+  }, {
+    page: 'preferences',
+    onLoad: true,
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'custom-camp-background',
+  type: 'design',
+  alwaysLoad: true,
+  load: init,
+  settings,
+};

package/src/modules/custom-camp-background/settings/index.js

@@ -0,0 +1,52 @@
+import gradients from '@data/backgrounds.json';
+
+/**
+ * Add settings for the module.
+ *
+ * @return {Array} The settings for the module.
+ */
+export default async () => {
+  const gradientOptions = gradients.map((gradient) => ({
+    name: gradient.name,
+    value: gradient.id,
+  }));
+
+  const options = [
+    { name: 'Default', value: 'default' },
+    { name: 'Blueprint', value: 'background-blueprint' },
+    { name: 'Marble', value: 'background-marble' },
+    { name: 'Wood', value: 'background-wood' },
+    {
+      name: 'Color',
+      value: 'group',
+      options: [
+        { name: 'Black', value: 'background-black' },
+        { name: 'Blue', value: 'background-blue' },
+        { name: 'Cyan', value: 'background-cyan' },
+        { name: 'Green', value: 'background-green' },
+        { name: 'Pink', value: 'background-pink' },
+        { name: 'Purple', value: 'background-purple' },
+        { name: 'Red', value: 'background-red' },
+        { name: 'White', value: 'background-white' },
+        { name: 'Faded', value: 'background-faded' },
+      ],
+    },
+    {
+      name: 'Other',
+      value: 'group',
+      options: gradientOptions,
+    },
+  ];
+
+  return [{
+    id: 'custom-camp-background',
+    title: 'Custom Camp Background <a class="mh-improved-custom-camp-bg-preview hidden">Preview choices</a>',
+    default: [options[1]],
+    description: 'Set a custom background for the Camp page.',
+    settings: {
+      type: 'multi-select',
+      number: 1,
+      options,
+    },
+  }];
+};

package/src/modules/custom-camp-background/styles.css

@@ -0,0 +1,57 @@
+#mousehuntContainer.PageCamp.background-wood {
+  background: url(https://i.mouse.rip/bg-wood.png);
+  box-shadow: inset 0 0 8px 0 #755e40;
+}
+
+#mousehuntContainer.PageCamp.background-marble {
+  background: url(https://www.mousehuntgame.com/images/ui/backgrounds/hud_bg_blue_repeating.png);
+  box-shadow: inset 0 0 8px 0 #262b33;
+}
+
+#mousehuntContainer.PageCamp.background-blueprint {
+  background: url(https://i.mouse.rip/mh-improved/custom-hud/hud-blueprint.png);
+  box-shadow: inset 0 0 8px 0 #262b33;
+}
+
+#mousehuntContainer.PageCamp.background-black {
+  background: #262b33;
+}
+
+#mousehuntContainer.PageCamp.background-blue {
+  background: #bad4ed;
+  box-shadow: inset 0 0 8px 0 #408ace;
+}
+
+#mousehuntContainer.PageCamp.background-cyan {
+  background: #abdbd3;
+  box-shadow: inset 0 0 8px 0 #62bcad;
+}
+
+#mousehuntContainer.PageCamp.background-green {
+  background: #b4dbb8;
+  box-shadow: inset 0 0 8px 0 #6eb976;
+}
+
+#mousehuntContainer.PageCamp.background-pink {
+  background: #e8c6eb;
+  box-shadow: inset 0 0 8px 0 #c97bd1;
+}
+
+#mousehuntContainer.PageCamp.background-purple {
+  background: #d8caf3;
+  box-shadow: inset 0 0 8px 0 #9f7ee2;
+}
+
+#mousehuntContainer.PageCamp.background-red {
+  background: #f2c7c5;
+  box-shadow: inset 0 0 8px 0 #df7772;
+}
+
+#mousehuntContainer.PageCamp.background-white {
+  background: #fff;
+}
+
+#mousehuntContainer.PageCamp.background-faded {
+  background: #fff4c5;
+  box-shadow: inset 0 0 8px 0 #947900;
+}