mousehunt-improved 0.97.1

package/src/modules/favorite-setups/index.js

@@ -0,0 +1,1431 @@
+import {
+  addIconToMenu,
+  addStyles,
+  cacheGet,
+  cacheSet,
+  createPopup,
+  debuglog,
+  doRequest,
+  getCurrentLocation,
+  getCurrentPage,
+  getData,
+  getFlag,
+  getHeaders,
+  getSetting,
+  getUserData,
+  makeElement,
+  makeMhButton,
+  onEvent,
+  onNavigation,
+  saveSetting,
+  sessionGet,
+  sessionSet,
+  toggleBlueprint
+} from '@utils';
+
+import styles from './styles.css';
+
+import settings from './settings';
+
+/**
+ * @typedef {Object} FavoriteSetup
+ * @property {string}              id         The setup ID.
+ * @property {string | null}       name       The name of the setup.
+ * @property {string | null}       bait_id    The bait item ID.
+ * @property {string | null}       base_id    The base item ID.
+ * @property {string | null}       weapon_id  The weapon item ID.
+ * @property {string | null}       trinket_id The trinket item ID.
+ * @property {string | null}       power_type The power type of the setup.
+ * @property {string | undefined}  location   The location of the setup.
+ * @property {boolean | undefined} is_mobile  Whether the setup is a mobile setup.
+ */
+
+/**
+ * Get the favorite setups.
+ *
+ * @param {boolean} makeRequest Whether to make a request to get the favorite setups.
+ *
+ * @return {Promise<FavoriteSetup[]>} The favorite setups.
+ */
+const getFavoriteSetups = async (makeRequest = true) => {
+  /** @type {FavoriteSetup[]} */
+  let faves = getSetting('favorite-setups.setups', []);
+
+  if (getSetting('favorite-setups.show-mobile-favorites', false)) {
+    let mobileFavorites = await cacheGet('mobile-trap-favorites');
+    if (! mobileFavorites && makeRequest) {
+      const userData = await getUserData(['trap_favourite']);
+      mobileFavorites = userData?.trap_favourite?.favourite_traps || [];
+
+      await cacheSet('mobile-trap-favorites', mobileFavorites, 24 * 60 * 60 * 1000); // Cache for 1 day.
+    }
+
+    if (mobileFavorites?.length) {
+      /** @type {FavoriteSetup[]} */
+      const newFaves = [];
+      for (const [slot, favorite] of mobileFavorites.entries()) {
+        /** @type {FavoriteSetup} */
+        const newFavorite = {
+          id: `mobile-${slot}`,
+          name: favorite?.name,
+          bait_id: favorite?.bait_id,
+          base_id: favorite?.base_id,
+          weapon_id: favorite?.weapon_id,
+          trinket_id: favorite?.trinket_id,
+          power_type: null, // TODO: add this.
+          is_mobile: true,
+        };
+
+        // Remove any existing mobile setups.
+        faves = faves.filter((s) => ! s?.is_mobile || (s?.is_mobile && ! s.id.startsWith('mobile-')));
+
+        // Check if the setup already exists.
+        const existingSetup = faves.find((s) => {
+          return s?.id === newFavorite.id;
+        });
+
+        if (! existingSetup) {
+          newFaves.push(newFavorite);
+        }
+      }
+
+      faves = [...faves, ...newFaves];
+    }
+  }
+
+  if (! faves || ! Array.isArray(faves) || ! faves.length) {
+    return [];
+  }
+
+  // remove any that are just null.
+  return faves.filter(Boolean);
+};
+
+/**
+ * Generate a name for the setup.
+ *
+ * @param {Object} setup The setup to generate a name for.
+ *
+ * @return {Promise<string>} The generated name.
+ */
+const getGeneratedName = async (setup) => {
+  if (! getSetting('favorite-setups.use-generated-names', true)) {
+    return {
+      name: user.environment_name || 'Unnamed Setup',
+    };
+  }
+
+  const response = await fetch('https://setup-namer.mouse.rip', {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify({
+      location: setup.location || getCurrentLocation(),
+      power_type: getPowerTypeId(setup.power_type || user.trap_power_type_name.toLowerCase()),
+      id: setup.id,
+      bait: setup.bait_id,
+      base: setup.base_id,
+      weapon: setup.weapon_id,
+      trinket: setup.trinket_id,
+    }),
+  });
+
+  return await response.json();
+};
+
+/**
+ * Save a favorite setup.
+ *
+ * @param {FavoriteSetup} setup            The setup to save.
+ * @param {boolean}       useGeneratedName Whether to use a generated name for the setup.
+ *
+ * @return {Promise<FavoriteSetup>} The saved setup.
+ */
+const saveFavoriteSetup = async (setup, useGeneratedName = true) => {
+  let setups = await getFavoriteSetups();
+
+  if (! setups.length) {
+    setups = [];
+  }
+
+  const normalizedSetup = normalizeSetup(setup);
+
+  // Set a temporary name first
+  if (getSetting('favorite-setups.use-generated-names', true) && useGeneratedName) {
+    normalizedSetup.name = useGeneratedName ? 'Generating name...' : user.environment_name;
+  } else {
+    normalizedSetup.name = user.environment_name;
+  }
+
+  if (setup.id) {
+    normalizedSetup.id = setup.id;
+    // replace the setup in the list.
+    const index = setups.findIndex((s) => s?.id && (s.id === setup.id));
+    if (-1 === index) {
+      setups.push(normalizedSetup);
+    } else {
+      setups[index] = normalizedSetup;
+    }
+  } else {
+    try {
+      setups.push(normalizedSetup);
+    } catch {
+      setups = [normalizedSetup];
+    }
+  }
+
+  setups = removeMobileSetups(setups);
+
+  saveSetting('favorite-setups.setups', setups);
+
+  // Generate name asynchronously if requested
+  if (useGeneratedName) {
+    getGeneratedName(normalizedSetup).then((setupNameData) => {
+      if (setupNameData && setupNameData.name) {
+        // Update the setup with the generated name
+        normalizedSetup.name = setupNameData.name;
+
+        // Update the saved setups
+        const updatedSetups = getSetting('favorite-setups.setups', []);
+        const setupIndex = updatedSetups.findIndex((s) => s?.id === normalizedSetup.id);
+        if (setupIndex !== -1) {
+          updatedSetups[setupIndex] = normalizedSetup;
+          saveSetting('favorite-setups.setups', updatedSetups);
+
+          // Update the UI if the container is visible
+          const container = document.querySelector('.mh-improved-favorite-setups-blueprint-container');
+          if (container) {
+            // Find and update the specific setup row
+            const setupRow = container.querySelector(`[data-setup-id="${normalizedSetup.id}"]`);
+            if (setupRow) {
+              const label = setupRow.querySelector('.label');
+              if (label && ! setupRow.classList.contains('editing')) {
+                label.textContent = normalizedSetup.name;
+              }
+            }
+          }
+
+          updateFavoriteSetupName();
+        }
+      }
+    }).catch(() => {
+      // Fallback to location name if generation fails
+      normalizedSetup.name = setup.location || getCurrentLocation() || 'Unnamed Setup';
+
+      const updatedSetups = getSetting('favorite-setups.setups', []);
+      const setupIndex = updatedSetups.findIndex((s) => s?.id === normalizedSetup.id);
+      if (setupIndex !== -1) {
+        updatedSetups[setupIndex] = normalizedSetup;
+        saveSetting('favorite-setups.setups', updatedSetups);
+
+        // Update the UI
+        const container = document.querySelector('.mh-improved-favorite-setups-blueprint-container');
+        if (container) {
+          const setupRow = container.querySelector(`[data-setup-id="${normalizedSetup.id}"]`);
+          if (setupRow) {
+            const label = setupRow.querySelector('.label');
+            if (label && ! setupRow.classList.contains('editing')) {
+              label.textContent = normalizedSetup.name;
+            }
+          }
+        }
+      }
+    });
+  }
+
+  return normalizedSetup;
+};
+
+/**
+ * Filters out mobile setups from the array.
+ * @param {FavoriteSetup[]} setups The setups to filter.
+ * @return {FavoriteSetup[]} The setups without mobile setups.
+ */
+const removeMobileSetups = (setups) => {
+  return setups.filter((s) => ! s ||
+    ! s?.is_mobile ||
+   (s?.is_mobile && ! s.id.startsWith('mobile-')));
+};
+
+/**
+ * Normalize the setup by forcing everything to be a string.
+ *
+ * @param {Object} setup The setup to normalize.
+ *
+ * @return {Object} The normalized setup.
+ */
+const normalizeSetup = (setup) => {
+  return Object.keys(setup).reduce((acc, key) => {
+    acc[key] = setup[key] ? setup[key].toString() : '';
+    return acc;
+  }, {});
+};
+
+/**
+ * Get the current setup.
+ *
+ * @return {FavoriteSetup} The current setup.
+ */
+const getCurrentSetup = () => {
+  return normalizeSetup({
+    id: 'current',
+    name: 'Current Setup',
+    bait_id: user.bait_item_id,
+    base_id: user.base_item_id,
+    weapon_id: user.weapon_item_id,
+    trinket_id: user.trinket_item_id,
+    power_type: user?.trap_power_type_name.toLowerCase(),
+    location: getCurrentLocation(),
+  });
+};
+
+let itemThumbs;
+
+/**
+ * Add an image to the favorite setups list.
+ *
+ * @param {string}  type     The type of item.
+ * @param {string}  id       The item ID.
+ * @param {Element} appendTo The element to append the image to.
+ */
+const addImage = async (type, id, appendTo) => {
+  const wrapper = makeElement('div', 'campPage-trap-itemBrowser-favorite-item');
+  wrapper.setAttribute('data-item-id', id);
+  wrapper.setAttribute('data-item-type', type);
+
+  wrapper.setAttribute('title', `Click to change ${type}`);
+
+  const item = makeElement('div', ['campPage-trap-itemBrowser-favorite-item-image']);
+
+  if (! itemThumbs) {
+    itemThumbs = await getData('item-thumbnails');
+  }
+
+  if (itemThumbs) {
+    item.style.backgroundImage = `url(${itemThumbs.find((thumb) => thumb.id == id)?.thumb || ''})`; // eslint-disable-line eqeqeq
+  }
+
+  makeElement('div', 'campPage-trap-itemBrowser-favorite-item-frame', '', item);
+
+  wrapper.append(item);
+  appendTo.append(wrapper);
+};
+
+/**
+ * Map the cheese effect to a number.
+ *
+ * @param {string} textValue The text value to map.
+ *
+ * @return {number} The mapped value.
+ */
+const getCheeseEffect = (textValue) => {
+  const data = {
+    'Uber Fresh': 13,
+    'Ultimately Fresh': 12,
+    'Insanely Fresh': 11,
+    'Extremely Fresh': 10,
+    'Very Fresh': 9,
+    Fresh: 8,
+    'No Effect': 7,
+    Stale: 6,
+    'Very Stale': 5,
+    'Extremely Stale': 4,
+    'Insanely Stale': 3,
+    'Ultimately Stale': 2,
+    'Uber Stale': 1,
+  };
+
+  return data[textValue];
+};
+
+/**
+ * Get the power type ID.
+ *
+ * @param {string} powerType The power type.
+ *
+ * @return {string} The power type ID.
+ */
+const getPowerTypeId = (powerType) => {
+  const data = {
+    arcane: 'arcn',
+    draconic: 'drcnc',
+    forgotten: 'frgttn',
+    hydro: 'hdr',
+    law: 'law',
+    parental: 'prntl',
+    physical: 'phscl',
+    rift: 'rift',
+    shadow: 'shdw',
+    tactical: 'tctcl',
+  };
+
+  return data[powerType] || powerType;
+};
+
+/**
+ * Make the component picker for editing a setup.
+ *
+ * @param {string}   setupId   The setup ID.
+ * @param {string}   type      The type of item.
+ * @param {string}   currentId The current item ID.
+ * @param {Function} callback  The callback to run when an item is selected.
+ */
+const makeImagePicker = async (setupId, type, currentId, callback) => {
+  let components;
+  const cached = sessionGet('mh-improved-favorite-setups-components');
+  if (cached) {
+    components = cached;
+  } else {
+    const response = await doRequest('managers/ajax/users/gettrapcomponents.php');
+
+    components = response?.components || [];
+
+    // re-sort the items by item name.
+    components.sort((a, b) => {
+      if (a.name < b.name) {
+        return -1;
+      }
+
+      if (a.name > b.name) {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    sessionSet('mh-improved-favorite-setups-components', components);
+  }
+
+  const items = components.filter((item) => item.classification === type);
+
+  let content = '<div class="mh-improved-favorite-setups-component-picker-popup">';
+  content += '<div class="mh-improved-favorite-setups-component-picker-popup-body">';
+  content += '<div class="mh-improved-favorite-setups-component-picker-popup-search">';
+  content += '<input type="text" placeholder="Search" id="mh-improved-favorite-setups-component-picker-popup-search-input" />';
+  content += '<div class="mh-improved-favorites-setups-component-picker-popup-use-current mousehuntActionButton" title="Use current item"><span>Use currently armed item</span></div>';
+  content += '</div>';
+  content += '<div class="mh-improved-favorite-setups-component-picker-popup-body-items">';
+  for (const item of items) {
+    /**
+     * Get the markup for a stat row.
+     *
+     * @param {string} stat      The stat to get the row for.
+     * @param {string} title     The title of the stat.
+     * @param {string} formatted The formatted value of the stat.
+     * @param {number} compare   The value to compare the stat to.
+     *
+     * @return {string} The stat row markup.
+     */
+    const getStatRow = (stat, title, formatted, compare) => {
+      let compareStat = item[stat];
+      if ('cheese_effect' === stat) {
+        compareStat = getCheeseEffect(item);
+        compare = getCheeseEffect(compare);
+      }
+
+      const compareClass = compare === compareStat ? '' : (compare > compareStat ? 'better' : 'worse');
+
+      return `<div class="campPage-trap-itemBrowser-item-stat ${stat} ${compareClass}" title="${title}">
+        <div class="value"><span>${formatted}</span></div>
+      </div>`;
+    };
+
+    content += `<div class="campPage-trap-itemBrowser-item loaded ${type}" data-item-id="${item.item_id}">`;
+    content += ' <div class="campPage-trap-itemBrowser-item-leftBar">';
+    content += `  <a href="#"><div class="campPage-trap-itemBrowser-item-image" style="background-image:url(${item.thumbnail});"></div></a>`;
+    content += `  <a href="#" class="campPage-trap-itemBrowser-item-armButton save-button" data-item-id="${item.item_id}" data-item-classification="${type}" data-item-image="${item.thumbnail}" data-the-power-type="${item.power_type_image_name}">Use</a>`;
+    content += ' </div>';
+    content += ' <div class="campPage-trap-itemBrowser-item-content">';
+    content += ` <div class="campPage-trap-itemBrowser-item-name">${item.name}</div>`;
+    if ('bait' === type || 'trinket' === type) {
+      content += `<div class="campPage-trap-itemBrowser-item-quantity"><span class="quantity">${Number.parseInt(item.quantity).toLocaleString()}</span><span class="label">Quantity</span></div>`;
+    }
+
+    if (item.power_type) {
+      content += `<div class="campPage-trap-itemBrowser-item-powerType ${item.power_type}"></div>`;
+    }
+
+    if (item.has_stats) {
+      content += '<div class="campPage-trap-itemBrowser-item-statContainer">';
+      content += item.has_power ? getStatRow('power', 'Power', item.power_formatted, user.trap_power) : '';
+      content += item.has_power_bonus ? getStatRow('power_bonus', 'Power Bonus', item.power_bonus_formatted, user.trap_power_bonus) : '';
+      content += item.has_attraction_bonus ? getStatRow('attraction_bonus', 'Attraction Bonus', item.attraction_bonus_formatted, user.trap_attraction_bonus) : '';
+      content += item.has_luck ? getStatRow('luck', 'Luck', item.luck_formatted, user.trap_luck) : '';
+      content += getStatRow('cheese_effect', 'Cheese Effect', item.cheese_effect, user.trap_cheese_effect);
+      content += '</div>';
+    }
+
+    content += '<div class="campPage-trap-itemBrowser-item-description shortDescription">';
+    content += item.consume_method ? `<div class="campPage-trap-itemBrowser-item-description-consumeMethod"><b>Consumed on:</b> ${item.consume_method}</div>` : '';
+
+    content += '</div>';
+    content += '</div>';
+    content += '</div>';
+  }
+  content += '</div>';
+  content += '</div>';
+  content += '</div>';
+
+  const popup = createPopup({
+    id: 'mh-improved-favorite-setups-component-picker',
+    title: '',
+    content,
+    className: 'mh-improved-favorite-setups-component-picker',
+  });
+
+  // popup.setIsModal(true);
+  popup.show();
+
+  const saveButtons = document.querySelectorAll('.campPage-trap-itemBrowser-item-armButton.save-button');
+  saveButtons.forEach((saveButton) => {
+    saveButton.addEventListener('click', async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      callback(
+        saveButton.getAttribute('data-item-id'),
+        saveButton.getAttribute('data-item-classification'),
+        saveButton.getAttribute('data-item-image'),
+        saveButton.getAttribute('data-the-power-type')
+      );
+      popup.hide();
+    });
+  });
+
+  const searchInput = document.querySelector('#mh-improved-favorite-setups-component-picker-popup-search-input');
+
+  if (! searchInput) {
+    return;
+  }
+
+  searchInput.focus();
+
+  searchInput.addEventListener('keyup', () => {
+    const filter = searchInput.value.toLowerCase();
+    const searchItems = document.querySelectorAll('.campPage-trap-itemBrowser-item');
+    searchItems.forEach((item) => {
+      const name = item.querySelector('.campPage-trap-itemBrowser-item-name');
+      if (name.textContent.toLowerCase().includes(filter)) {
+        item.classList.remove('hidden');
+      } else {
+        item.classList.add('hidden');
+      }
+    });
+  });
+
+  const useCurrentItemButton = document.querySelector('.mh-improved-favorites-setups-component-picker-popup-use-current');
+  useCurrentItemButton.addEventListener('click', () => {
+    const item = document.querySelector(`.campPage-trap-itemBrowser-item[data-item-id="${user[`${type}_item_id`]}"]`);
+    if (! item) {
+      return;
+    }
+
+    const saveButton = item.querySelector('.campPage-trap-itemBrowser-item-armButton.save-button');
+    if (! saveButton) {
+      return;
+    }
+
+    callback(
+      saveButton.getAttribute('data-item-id'),
+      saveButton.getAttribute('data-item-classification'),
+      saveButton.getAttribute('data-item-image'),
+      saveButton.getAttribute('data-the-power-type')
+    );
+    popup.hide();
+  });
+};
+
+/**
+ * Equip items.
+ *
+ * @param {Array} items The items to arm.
+ *
+ * @return {Promise} Resolves when the items are armed.
+ */
+const armItem = async (items) => {
+  return new Promise((resolve, reject) => {
+    items.forEach(({ id, type }) => {
+      if (! id) {
+        if ('bait' === type) {
+          hg.utils.TrapControl.disarmBait();
+        } else if ('trinket' === type) {
+          hg.utils.TrapControl.disarmTrinket();
+        }
+
+        return;
+      }
+
+      hg.utils.TrapControl.armItem(id, type);
+    });
+
+    hg.utils.TrapControl.go(resolve, reject);
+  });
+};
+
+/**
+ * Make the setups sortable with drag and drop.
+ *
+ * @param {Element} container The container element with the setup rows.
+ */
+const makeSortable = (container) => {
+  let draggedElement = null;
+  let placeholder = null;
+
+  const rows = container.querySelectorAll('.row-wrapper .row:not([data-setup-id="current"])');
+
+  rows.forEach((row) => {
+    // Skip location favorites as they can't be reordered - they're shortcuts
+    if (row.classList.contains('location-favorite') || row.classList.contains('mobile-setup')) {
+      return;
+    }
+
+    row.draggable = true;
+    row.classList.add('draggable');
+
+    row.addEventListener('dragstart', (e) => {
+      draggedElement = row;
+      row.classList.add('dragging');
+
+      // Create placeholder
+      placeholder = makeElement('div', ['row', 'placeholder']);
+      makeElement('div', 'placeholder-text', 'Drop here', placeholder);
+
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/html', row.outerHTML);
+    });
+
+    row.addEventListener('dragend', () => {
+      row.classList.remove('dragging');
+      if (placeholder && placeholder.parentNode) {
+        placeholder.remove();
+      }
+      draggedElement = null;
+      placeholder = null;
+    });
+
+    row.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+
+      if (draggedElement && row !== draggedElement && ! row.classList.contains('location-favorite')) {
+        // Remove placeholder from its current position if it exists
+        if (placeholder && placeholder.parentNode) {
+          placeholder.remove();
+        }
+
+        const rect = row.getBoundingClientRect();
+        const midpoint = rect.top + (rect.height / 2);
+
+        if (e.clientY < midpoint) {
+          row.parentNode.insertBefore(placeholder, row);
+        } else {
+          row.parentNode.insertBefore(placeholder, row.nextSibling);
+        }
+      }
+    });
+
+    row.addEventListener('drop', async (e) => {
+      e.preventDefault();
+
+      if (draggedElement && placeholder && placeholder.parentNode) {
+        // Insert the dragged element where the placeholder is
+        placeholder.parentNode.insertBefore(draggedElement, placeholder);
+        placeholder.remove();
+
+        // Update the order in storage
+        await updateSetupOrder(container);
+      }
+    });
+  });
+
+  // Add dragover to main container
+  container.addEventListener('dragover', (e) => {
+    e.preventDefault();
+
+    if (draggedElement && ! draggedElement.classList.contains('location-favorite') && // If we're dragging over empty space in the main container
+      e.target === container) {
+      if (placeholder && placeholder.parentNode) {
+        placeholder.remove();
+      }
+
+      // Find the last draggable setup row (excluding location favorites)
+      const lastDraggableRow = container.querySelector('.row.draggable:not(.dragging):not(.location-favorite):last-of-type');
+      if (lastDraggableRow) {
+        lastDraggableRow.parentNode.insertBefore(placeholder, lastDraggableRow.nextSibling);
+      } else {
+        // If no suitable row found, append to container
+        container.append(placeholder);
+      }
+    }
+  });
+
+  container.addEventListener('drop', async (e) => {
+    e.preventDefault();
+
+    if (draggedElement && placeholder && placeholder.parentNode && ! draggedElement.classList.contains('location-favorite')) {
+      placeholder.parentNode.insertBefore(draggedElement, placeholder);
+      placeholder.remove();
+      await updateSetupOrder(container);
+    }
+  });
+};
+
+/**
+ * Update the setup order based on the current DOM order.
+ *
+ * @param {Element} container The container with the setup rows.
+ */
+const updateSetupOrder = async (container) => {
+  const setups = await getFavoriteSetups();
+  if (! setups.length) {
+    return;
+  }
+
+  // Get all draggable rows (including mobile setups) in their new order
+  const draggableRows = container.querySelectorAll('.row:not([data-setup-id="current"]):not(.location-favorite)');
+  const newOrder = [];
+
+  draggableRows.forEach((row) => {
+    const setupId = row.getAttribute('data-setup-id');
+    const setup = setups.find((s) => s?.id === setupId);
+    if (setup) {
+      newOrder.push(setup);
+    }
+  });
+
+  saveSetting('favorite-setups.setups', newOrder);
+};
+
+/**
+ * Make a single favorite setup row.
+ *
+ * @param {Object}  setup     The setup to make a row for.
+ * @param {boolean} isCurrent Whether the setup is the current setup.
+ *
+ * @return {Promise<Element|boolean>} The setup row element.
+ */
+const makeBlueprintRow = async (setup, isCurrent = false) => {
+  if (! setup) {
+    return false;
+  }
+
+  const setupContainer = makeElement('div', ['row']);
+  setupContainer.setAttribute('data-setup-id', setup.id);
+
+  // Add drag handle for non-current and non-location-favorite setups
+  if (! (
+    isCurrent ||
+    setup?.isLocationFavorite ||
+    setup?.is_mobile
+  )) {
+    const dragHandle = makeElement('div', ['drag-handle']);
+    dragHandle.innerHTML = '⋮⋮';
+    dragHandle.setAttribute('title', 'Drag to reorder');
+    setupContainer.append(dragHandle);
+  }
+
+  const controls = makeElement('div', ['controls']);
+  makeElement('div', ['label'], setup?.name || '', controls);
+
+  let hasHighlighted = false;
+  const buttonWrapper = makeElement('div', ['button-wrapper']);
+  if (isCurrent) {
+    buttonWrapper.append(makeMhButton({
+      text: 'Save',
+      className: ['action', 'save', 'lightBlue'],
+      /**
+       * Save the current setup as a favorite setup.
+       */
+      callback: async () => {
+        // Save the current setup, using the current location as the name.
+        let currentSetup = getCurrentSetup();
+
+        // if the setup already exists, then just alert the user.
+        const setups = await getFavoriteSetups();
+
+        if (setups.length) {
+          // check if the setup has a matching bait, base, weapon, and trinket.
+          const existingSetup = setups.find((s) => {
+            return s?.bait_id === currentSetup.bait_id &&
+              s?.base_id === currentSetup.base_id &&
+              s?.weapon_id === currentSetup.weapon_id &&
+              s?.trinket_id === currentSetup.trinket_id &&
+              s?.location === currentSetup.location;
+          });
+
+          if (existingSetup && ! hasHighlighted) {
+            // flash both the shortcut and main list rows
+            const rows = document.querySelectorAll(`.mh-improved-favorite-setups-blueprint-container .row[data-setup-id="${existingSetup.id}"]`);
+            rows.forEach((row) => {
+              row.classList.add('flash');
+              setTimeout(() => row.classList.remove('flash'), 1000);
+            });
+
+            hasHighlighted = true;
+            // allow clicking save a second time to bypass the highlight for 2 seconds.
+            setTimeout(() => {
+              hasHighlighted = false;
+            }, 2000);
+
+            return;
+          }
+        }
+
+        // Generate a random name for the setup.
+        currentSetup.id = Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15);
+
+        currentSetup = await saveFavoriteSetup(currentSetup, true);
+
+        // append the new setup to the list.
+        const setupRow = await makeBlueprintRow(currentSetup);
+
+        // If there are mobile rows, then insert the new row before the first.
+        const mobileRow = document.querySelector('.mh-improved-favorite-setups-blueprint-container .content .row.mobile-setup');
+        if (mobileRow) {
+          mobileRow.before(setupRow);
+        } else {
+          const content = document.querySelector('.mh-improved-favorite-setups-blueprint-container .content');
+          content.append(setupRow);
+        }
+
+        updateFavoriteSetupName();
+      }
+    }));
+  } else {
+    const armButton = makeMhButton({
+      text: 'Arm',
+      className: ['action', 'arm'],
+      /**
+       * Arm the setup.
+       */
+      callback: async () => {
+        armButton.classList.add('loading');
+
+        // Arm the setup.
+        const setupId = setupContainer.getAttribute('data-setup-id');
+        debuglog('favorite-setups', `Arming setup ${setupId}`);
+
+        // get the setup.
+        const setups = await getFavoriteSetups();
+        if (! setups.length) {
+          return;
+        }
+
+        if (! setupId) {
+          return;
+        }
+
+        const index = setups.findIndex((s) => s?.id && (s.id === setupId));
+
+        const thisSetup = setups[index];
+        if (! thisSetup) {
+          return;
+        }
+
+        const toArm = [];
+
+        // eslint-disable-next-line eqeqeq
+        if (thisSetup.base_id && thisSetup.base_id != user.base_item_id) {
+          toArm.push({ id: thisSetup.base_id, type: 'base' });
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (thisSetup.weapon_id && thisSetup.weapon_id != user.weapon_item_id) {
+          toArm.push({ id: thisSetup.weapon_id, type: 'weapon' });
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (thisSetup.trinket_id && thisSetup.trinket_id != user.trinket_item_id) {
+          toArm.push({ id: thisSetup.trinket_id, type: 'trinket' });
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (thisSetup.bait_id && thisSetup.bait_id != user.bait_item_id) {
+          toArm.push({ id: thisSetup.bait_id, type: 'bait' });
+        }
+
+        if (toArm.length) {
+          await armItem(toArm);
+        }
+
+        const currentSetupRow = document.querySelector('.mh-improved-favorite-setups-blueprint-container .row[data-setup-id="current"]');
+        if (currentSetupRow) {
+          const newRow = await makeBlueprintRow(getCurrentSetup(), true);
+          if (newRow) {
+            currentSetupRow.replaceWith(newRow);
+          }
+        }
+
+        armButton.classList.remove('loading');
+
+        updateFavoriteSetupName();
+      }
+    });
+
+    buttonWrapper.append(armButton);
+
+    let editClickables = [];
+    buttonWrapper.append(makeMhButton({
+      text: 'Edit',
+      className: ['action', 'edit-setup'],
+      /**
+       * Edit the setup.
+       */
+      callback: () => {
+        const setupId = setupContainer.getAttribute('data-setup-id');
+        debuglog('favorite-setups', `Editing setup ${setupId}`);
+
+        setupContainer.classList.add('editing');
+
+        // Update the setup title to be an input.
+        const title = setupContainer.querySelector('.label');
+
+        const randomTitleButton = makeElement('a', 'random-title');
+        randomTitleButton.setAttribute('title', 'Generate a random name for this setup');
+
+        randomTitleButton.addEventListener('click', async (e) => {
+          e.preventDefault();
+
+          e.target.classList.add('loading');
+
+          const setupNameData = await getGeneratedName(setup);
+
+          if (setupNameData.name) {
+            title.querySelector('input').value = setupNameData.name;
+          }
+
+          e.target.classList.remove('loading');
+        });
+
+        const titleInput = makeElement('input', 'setup-title-input');
+        titleInput.setAttribute('type', 'text');
+        titleInput.setAttribute('name', 'setup-title');
+        titleInput.value = title.textContent;
+        title.textContent = '';
+        title.append(titleInput);
+        title.prepend(randomTitleButton);
+
+        const powerTypeInput = makeElement('input', ['hidden', 'power-type-input']);
+        powerTypeInput.setAttribute('type', 'hidden');
+        powerTypeInput.setAttribute('name', 'power-type');
+        powerTypeInput.setAttribute('data-the-power-type', setup.power_type);
+        title.append(powerTypeInput);
+
+        // Update the setup images to be clickable.
+        const images = setupContainer.querySelectorAll('.campPage-trap-itemBrowser-favorite-item');
+        images.forEach((image) => {
+          image.classList.add('clickable');
+          const eventListenerClickable = image.addEventListener('click', async () => {
+            image.classList.add('loading');
+
+            // Handle image click
+            const itemType = image.getAttribute('data-item-type');
+            const itemId = image.getAttribute('data-item-id');
+            const imageDisplay = image.querySelector('.campPage-trap-itemBrowser-favorite-item-image');
+            await makeImagePicker(setupId, itemType, itemId, (newItemId, newItemType, newItemImageUrl, newItemPowerType) => {
+              if (itemType !== newItemType) {
+                return;
+              }
+
+              if (itemId == newItemId) { // eslint-disable-line eqeqeq
+                return;
+              }
+
+              image.setAttribute('data-new-item-id', newItemId);
+              image.setAttribute('data-new-item-image', newItemImageUrl);
+              image.setAttribute('data-old-image-url', imageDisplay.style.backgroundImage);
+
+              if (newItemPowerType && 'undefined' !== newItemPowerType) {
+                const ptInput = setupContainer.querySelector('.power-type-input');
+                ptInput.setAttribute('data-power-type', newItemPowerType);
+              }
+
+              imageDisplay.style.backgroundImage = `url(${newItemImageUrl})`;
+            });
+
+            image.classList.remove('loading');
+          });
+
+          editClickables.push({ image, event: eventListenerClickable });
+        });
+      }
+    }));
+
+    /**
+     * Stop editing the setup.
+     */
+    const stopEditing = () => {
+      // Remove the event listeners from the images.
+      editClickables.forEach(({ image, event }) => {
+        image.removeEventListener('click', event);
+        image.classList.remove('clickable');
+      });
+
+      editClickables = [];
+    };
+
+    buttonWrapper.append(makeMhButton({
+      text: 'Save',
+      className: ['action', 'save-setup'],
+      /**
+       * Save the edited setup.
+       */
+      callback: async () => {
+        const setupId = setupContainer.getAttribute('data-setup-id');
+        debuglog('favorite-setups', `Saving setup ${setupId}`);
+
+        setupContainer.classList.remove('editing');
+        // When save is clicked, save the changes.
+
+        const newSetup = setup;
+
+        const title = setupContainer.querySelector('.label');
+        const titleInput = title.querySelector('input');
+        setup.name = titleInput.value;
+
+        const powerTypeInput = setupContainer.querySelector('.power-type-input');
+        if (powerTypeInput) {
+          const lastPowerType = setup.power_type;
+          const newPowerType = powerTypeInput.getAttribute('data-the-power-type');
+
+          if (newPowerType && lastPowerType !== newPowerType) {
+            setup.power_type = newPowerType;
+
+            const powerTypeImage = setupContainer.querySelector('.campPage-trap-itemBrowser-item-powerType');
+            if (powerTypeImage) {
+              const lastPowerTypeClass = lastPowerType ? getPowerTypeId(lastPowerType) : 'hidden';
+              const newPowerTypeClass = newPowerType ? getPowerTypeId(newPowerType) : 'hidden';
+
+              powerTypeImage.classList.remove(lastPowerTypeClass);
+              powerTypeImage.classList.add(newPowerTypeClass);
+              powerTypeImage.classList.remove('hidden');
+            }
+          }
+        }
+
+        // if there are any items with a new-item-id, then update the setup.
+        const images = setupContainer.querySelectorAll('.campPage-trap-itemBrowser-favorite-item');
+        images.forEach((image) => {
+          const newItemId = image.getAttribute('data-new-item-id');
+          if (! newItemId) {
+            return;
+          }
+
+          const itemType = image.getAttribute('data-item-type');
+
+          // update the setup.
+          newSetup[`${itemType}_id`] = newItemId;
+
+          // remove the new-item-id attribute.
+          image.removeAttribute('data-new-item-id');
+          image.removeAttribute('data-new-item-image');
+          image.removeAttribute('data-old-image-url');
+        });
+
+        // Update the setup title to be a div.
+        title.textContent = newSetup.name;
+        titleInput.remove();
+
+        let setups = await getFavoriteSetups();
+        if (! setups.length) {
+          setups = [];
+        }
+
+        const index = setups.findIndex((s) => s?.id && (s.id === setupId));
+
+        // replace the setup in the list.
+        setups[index] = newSetup;
+        saveSetting('favorite-setups.setups', removeMobileSetups(setups));
+
+        if (setupId.startsWith('mobile-')) {
+          const mobileIndex = setups.filter((s) => s?.is_mobile ?? false).findIndex((s) => s.id === setupId);
+          await setMobileFavourite(mobileIndex, newSetup);
+        }
+
+        updateFavoriteSetupName();
+
+        stopEditing();
+      }
+    }));
+
+    buttonWrapper.append(makeMhButton({
+      text: 'Cancel',
+      className: ['action', 'cancel-setup'],
+      /**
+       * Cancel editing the setup.
+       */
+      callback: () => {
+        setupContainer.classList.remove('editing');
+        // When cancel is clicked, revert the changes.
+
+        // title.
+        const titleInput = setupContainer.querySelector('.label input');
+        const title = setupContainer.querySelector('.label');
+        title.textContent = setup.name;
+        titleInput.remove();
+
+        // check for any new-item-id attributes.
+        const images = setupContainer.querySelectorAll('.campPage-trap-itemBrowser-favorite-item');
+        images.forEach((image) => {
+          const newItemId = image.getAttribute('data-new-item-id');
+          if (! newItemId) {
+            return;
+          }
+
+          // reset the image background.
+          const imageDisplay = image.querySelector('.campPage-trap-itemBrowser-favorite-item-image');
+          imageDisplay.style.backgroundImage = image.getAttribute('data-old-image-url');
+
+          // remove the new-item-id attribute.
+          image.removeAttribute('data-new-item-id');
+          image.removeAttribute('data-new-item-image');
+          image.removeAttribute('data-old-image-url');
+        });
+
+        stopEditing();
+      }
+    }));
+
+    buttonWrapper.append(makeMhButton({
+      text: 'Delete',
+      className: ['action', 'delete', 'danger'],
+      /**
+       * Delete the setup.
+       */
+      callback: async () => {
+        const setupId = setupContainer.getAttribute('data-setup-id');
+        debuglog('favorite-setups', `Deleting setup ${setupId}`);
+
+        // show a confirmation dialog.
+        const confirmed = confirm('Are you sure you want to delete this setup?'); // eslint-disable-line no-alert
+        if (! confirmed) {
+          return;
+        }
+
+        // remove the setup from the list.
+        let setups = await getFavoriteSetups();
+        if (! setups.length) {
+          setups = [];
+        }
+
+        if (setupId.startsWith('mobile-')) {
+          const mobileIndex = setups.filter((s) => s?.is_mobile ?? false).findIndex((s) => s.id === setupId);
+          await deleteMobileFavourite(mobileIndex);
+
+          const newContainer = await makeBlueprintRow({
+            id: `mobile-${mobileIndex}`,
+            is_mobile: true,
+          });
+          setupContainer.replaceWith(newContainer);
+        } else {
+          const index = setups.findIndex((s) => s?.id && (s.id === setupId));
+          setups.splice(index, 1);
+          saveSetting('favorite-setups.setups', removeMobileSetups(setups));
+
+          // Remove all instances of this setup (both shortcut and main list)
+          const allInstances = document.querySelectorAll(`.row[data-setup-id="${setupId}"]`);
+          allInstances.forEach((instance) => {
+            instance.remove();
+          });
+        }
+      }
+    }));
+  }
+
+  controls.append(buttonWrapper);
+  setupContainer.append(controls);
+
+  const powerTypeId = getPowerTypeId(setup?.power_type);
+  const powertype = makeElement('div', ['campPage-trap-itemBrowser-item-powerType', powerTypeId]);
+  if (! powerTypeId) {
+    powertype.classList.add('hidden');
+  }
+
+  setupContainer.append(powertype);
+
+  await addImage('bait', setup.bait_id, setupContainer);
+  await addImage('base', setup.base_id, setupContainer);
+  await addImage('weapon', setup.weapon_id, setupContainer);
+  await addImage('trinket', setup.trinket_id, setupContainer);
+
+  if (setup?.is_mobile) {
+    setupContainer.classList.add('mobile-setup');
+  }
+
+  return setupContainer;
+};
+
+/**
+ * Create the favorite setups container.
+ *
+ * @return {Promise<HTMLElement>} The favorite setups container.
+ */
+const makeBlueprintContainer = async () => {
+  const existing = document.querySelector('.mh-improved-favorite-setups-blueprint-container');
+  if (existing) {
+    existing.remove();
+  }
+
+  const container = makeElement('div', 'mh-improved-favorite-setups-blueprint-container');
+
+  const header = makeElement('div', ['header']);
+  makeElement('b', ['title'], 'Favorite Setups', header);
+
+  container.append(header);
+
+  const body = makeElement('div', ['content']);
+
+  const currentSetupRow = await makeBlueprintRow(getCurrentSetup(), true);
+  body.append(currentSetupRow);
+
+  const setups = await getFavoriteSetups();
+  if (setups.length) {
+    // Find location favorites and display them as shortcuts at the top
+    let locationFavorites = [];
+
+    if (getSetting('favorite-setups.show-location-favorites', true)) {
+      // Get the current location from the user data
+      locationFavorites = setups.filter((setup) =>
+        setup && setup.id && setup.location && setup.location === getCurrentLocation()
+      );
+
+      if (getFlag('favorite-setups-limit-location-favorites')) {
+        locationFavorites = locationFavorites.slice(0, 3);
+      }
+    }
+
+    if (locationFavorites.length) {
+      const locationWrapper = makeElement('div', ['location-favorites']);
+
+      for (const setup of locationFavorites) {
+        const setupContainer = await makeBlueprintRow({
+          id: `location-favorite-${setup.id}`,
+          ...setup,
+          isLocationFavorite: true,
+        });
+        setupContainer.classList.add('location-favorite');
+        locationWrapper.append(setupContainer);
+      }
+
+      body.append(locationWrapper);
+    }
+
+    const rowWrapper = makeElement('div', ['row-wrapper']);
+
+    // Display ALL setups (including location favorites and mobile) in their saved order
+    for (const setup of setups) {
+      if (! setup || ! setup.id) {
+        continue;
+      }
+
+      const setupContainer = await makeBlueprintRow(setup);
+
+      if (setup.id.startsWith('mobile-')) {
+        setupContainer.classList.add('mobile-setup');
+      }
+
+      rowWrapper.append(setupContainer);
+    }
+
+    body.append(rowWrapper);
+  }
+
+  container.append(body);
+
+  // Initialize drag and drop functionality
+  makeSortable(body);
+
+  return container;
+};
+
+/**
+ * Get the name of the current setup.
+ *
+ * @return {Promise<string>} The name of the current setup.
+ */
+const getNameOfCurrentSetup = async () => {
+  const setups = await getFavoriteSetups(false);
+
+  if (! setups.length) {
+    return '';
+  }
+
+  // if we have a setup with the same IDs, then return the name of that setup.
+  const currentSetup = getCurrentSetup();
+
+  const setup = setups.find((s) => {
+    return s?.bait_id === currentSetup?.bait_id &&
+      s?.base_id === currentSetup?.base_id &&
+      s?.weapon_id === currentSetup?.weapon_id &&
+      s?.trinket_id === currentSetup?.trinket_id;
+  });
+
+  if (setup && setup.name) {
+    return setup.name;
+  }
+
+  return '';
+};
+
+/**
+ * Update the name of the current setup in the trap UI.
+ */
+const updateFavoriteSetupName = async () => {
+  const label = document.querySelector('.mh-improved-favorite-setups-button-label');
+  if (label) {
+    label.innerHTML = await getNameOfCurrentSetup() || '';
+  }
+};
+
+/**
+ * Send a setup to the mobile app.
+ * @param {number}        slot  The slot to send the setup to.
+ * @param {FavoriteSetup} setup The setup to send.
+ * @return {Promise<Object>} The response from the server.
+ */
+const setMobileFavourite = async (slot, setup) => {
+  const response = await postMobileTrapAction('set', {
+    slot,
+    weapon_id: setup.weapon_id ?? '',
+    base_id: setup.base_id ?? '',
+    trinket_id: setup.trinket_id ?? '',
+    skin_id: '',
+    bait_id: setup.bait_id ?? '',
+    name: setup.name.slice(0, 20) ?? '',
+    is_current_favourite: false,
+  });
+
+  return response;
+};
+
+/**
+ * Delete a mobile favourite setup.
+ * @param {*} slot The slot to delete.
+ * @return {Promise<Object>} The response from the server.
+ */
+const deleteMobileFavourite = async (slot) => {
+  const response = await postMobileTrapAction('delete', {
+    slot,
+  });
+
+  return response;
+};
+
+/**
+ * Send a favorite setup action.
+ * @param {string} action The action to send.
+ * @param {Object} data   The data to send.
+ * @return {Promise<Object>} The user data.
+ */
+const postMobileTrapAction = async (action, data) => {
+  const response = await doRequest('api/action/trapfavourite', {
+    ...data,
+    action,
+  });
+
+  return response.user;
+};
+
+/**
+ * Add a button to the camp page to toggle the favorite setups.
+ */
+const addFavoriteSetupsButton = async () => {
+  if ('camp' !== getCurrentPage()) {
+    return;
+  }
+
+  const existingButton = document.querySelector('.mh-improved-favorite-setups-button');
+  if (existingButton) {
+    return;
+  }
+
+  const appendTo = document.querySelector('.trapSelectorView__trapStatSummaryContainer');
+  if (! appendTo) {
+    return;
+  }
+
+  const button = makeElement('a', ['mh-improved-favorite-setups-button']);
+  makeElement('div', ['mh-improved-favorite-setups-button-text'], 'Favorite Setups', button);
+  const label = makeElement('div', ['mh-improved-favorite-setups-button-label']);
+
+  label.innerHTML = await getNameOfCurrentSetup();
+  button.append(label);
+
+  button.addEventListener('click', toggleFavoriteSetups);
+
+  const auraTable = document.querySelector('.mh-improved-aura-view.campPage-trap-auraEffectiveness');
+  if (auraTable) {
+    // Insert after the aura table.
+    auraTable.after(button);
+  } else {
+    const minLuckTable = document.querySelector('.mh-cre-table.campPage-trap-trapEffectiveness');
+    if (minLuckTable) {
+      minLuckTable.before(button);
+      return;
+    }
+
+    // Append as a sibling to the existing button.
+    appendTo.append(button);
+  }
+};
+
+/**
+ * Show or hide the favorite setups.
+ */
+const toggleFavoriteSetups = async () => {
+  const content = await makeBlueprintContainer();
+  toggleBlueprint('favorite-setups', content);
+};
+
+/**
+ * Add an icon to the menu.
+ */
+const addIcon = () => {
+  addIconToMenu({
+    id: 'favorite-setups',
+    classname: 'mousehunt-improved-favorite-setups-icon',
+    title: 'Favorite Setups',
+    action: toggleFavoriteSetups,
+    position: 'prepend',
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+const init = async () => {
+  addStyles(styles, 'favorite-setups');
+
+  onNavigation(addFavoriteSetupsButton, {
+    page: 'camp',
+  });
+
+  let timeoutId;
+  onEvent('camp_page_arm_item', () => {
+    // Clear the previous timeout if it exists
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    // Set a new timeout to call the function after 500ms
+    timeoutId = setTimeout(updateFavoriteSetupName, 500);
+  });
+
+  if (getSetting('experiments.favorite-setups-toggle', false)) {
+    addIcon();
+  }
+
+  onEvent('mh-improved-toggle-favorite-setups', toggleFavoriteSetups);
+};
+
+/**
+ * Initialize the module.
+ */
+export default {
+  id: 'favorite-setups',
+  name: 'Favorite Setups',
+  type: 'feature',
+  default: true,
+  description: 'Save your favorite setups and arm them with a single click.',
+  load: init,
+  settings,
+};