mousehunt-improved 0.97.1

package/src/modules/better-maps/modules/tab-hunters.js

@@ -0,0 +1,323 @@
+import { makeElement, mapper } from '@utils';
+
+/**
+ * Make the loading markup for the hunters.
+ *
+ * @param {string}      id       The ID of the hunters.
+ * @param {string}      title    The title of the hunters.
+ * @param {HTMLElement} appendTo The element to append to.
+ */
+const makeUserTableLoading = (id, title, appendTo) => {
+  const wrapper = makeElement('div', 'treasureMapView-block-title', title);
+  wrapper.id = `hunters-loading-${id}-title`;
+  appendTo.append(wrapper);
+
+  const loading = makeElement('div', 'treasureMapView-block');
+  loading.id = `hunters-loading-${id}-block`;
+
+  const loadingWrapper = makeElement('div', 'treasureMapView-allyTable', '');
+  const row = makeElement('div', 'treasureMapView-allyRow', '');
+  makeElement('div', ['mousehuntPage-loading', 'active'], '', row);
+  loadingWrapper.append(row);
+
+  loading.append(loadingWrapper);
+  appendTo.append(loading);
+};
+
+/**
+ * Make the user table.
+ *
+ * @param {Array}       hunters  The hunters.
+ * @param {string}      id       The ID of the hunters.
+ * @param {string}      title    The title of the hunters.
+ * @param {HTMLElement} appendTo The element to append to.
+ * @param {Object}      mapData  The map data.
+ */
+const makeUserTable = async (hunters, id, title, appendTo, mapData = {}) => {
+  const loadingTitle = document.querySelector(`#hunters-loading-${id}-title`);
+  const loadingBlock = document.querySelector(`#hunters-loading-${id}-block`);
+  if (loadingTitle) {
+    loadingTitle.remove();
+  }
+
+  if (loadingBlock) {
+    loadingBlock.remove();
+  }
+
+  const existing = document.querySelector(`#hunters-${id}`);
+  if (existing) {
+    return;
+  }
+
+  const wrapper = makeElement('div', ['mh-ui-custom-map-block', 'treasureMapView-block-title'], title.replace('#count#', hunters.length));
+  wrapper.id = `hunters-${id}`;
+  appendTo.append(wrapper);
+
+  const block = makeElement('div', 'treasureMapView-block');
+  block.id = `hunters-${id}-block`;
+  const blockContent = makeElement('div', 'treasureMapView-block-content');
+  const table = makeElement('div', 'treasureMapView-allyTable');
+
+  hunters.forEach((hunter) => {
+    let actions = `<a href="supplytransfer.php?fid=${hunter.sn_user_id}"class="mousehuntActionButton tiny lightBlue"><span>Send<br>Supplies</span></a>`;
+    if ('requests' === id && mapData.is_owner) {
+      const declineAction = `<a class="treasureMapDialogView-deleteInviteRequest reject-invite-request mh-mapper-invite-request-action" data-snuid="${hunter.sn_user_id}" data-snuid="100000830940163">X</a>`;
+      const acceptAction = `<a href="#" class="treasureMapDialogView-continueButton mousehuntActionButton accept-invite-request mh-mapper-invite-request-action" data-snuid="${hunter.sn_user_id}"><span>Accept</span></a>`;
+      actions = `${declineAction}${acceptAction}`;
+    }
+
+    const markup = `<div class="treasureMapView-allyCell favourite"></div>
+      <div class="treasureMapView-allyCell image" data-snuid="${hunter.sn_user_id}">
+        <div class="treasureMapView-hunter" data-snuid="${hunter.sn_user_id}">
+          <div class="treasureMapView-hunter-image-wrapper">
+            <img src="${hunter.profile_pic}" class="treasureMapView-hunter-image" alt="${hunter.name}" title="${hunter.name}" />
+          </div>
+        </div>
+      </div>
+      <div class="treasureMapView-allyCell name">
+        <div class="treasureMapView-ally-name">
+        <a href="https://www.mousehuntgame.com/profile.php?snuid=${hunter.sn_user_id}">${hunter.name}</a>
+        </div>
+        <a href="#" class="treasureMapView-ally-environment treasureMapView-travelButton" data-environment-id="${hunter.environment_id}">
+        ${hunter.environment_name}
+        </a>
+      </div>
+      <div class="treasureMapView-allyCell lastActive">
+        <div class="treasureMapView-ally-lastActive ${hunter.is_online ? 'online' : ''}">
+          ${hunter.last_active_formatted}
+        </div>
+      </div>
+      <div class="treasureMapView-allyCell trap">
+        <div class="treasureMapView-componentContainer">
+          <div class="treasureMapView-componentThumb" style="background-image: url(${hunter.base_thumb});" title="${hunter.base_name}"></div>
+          <div class="treasureMapView-componentThumb" style="background-image: url(${hunter.weapon_thumb});" title="${hunter.weapon_name}"></div>
+          <div class="treasureMapView-componentThumb" style="background-image: url(${hunter.bait_thumb});" title="${hunter.bait_name}"></div>
+          <div class="treasureMapView-componentThumb" style="background-image: url(${hunter.trinket_thumb});" title="${hunter.trinket_name}"></div>
+        </div>
+      </div>
+      <div class="treasureMapView-allyCell actions">${actions}</div>`;
+
+    makeElement('div', 'treasureMapView-allyRow', markup, table);
+  });
+
+  block.append(table);
+  blockContent.append(block);
+  appendTo.append(block);
+
+  if ('requests' === id) {
+    const actionButtons = document.querySelectorAll('.mh-mapper-invite-request-action');
+    actionButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const snuid = Number.parseInt(button.dataset.snuid, 10);
+
+        if (button.classList.contains('accept-invite-request')) {
+          hg.utils.TreasureMapUtil.acceptInviteRequests(mapper('mapData').map_id, [snuid], () => {}, () => {});
+        } else {
+          hg.utils.TreasureMapUtil.declineInviteRequests(mapper('mapData').map_id, [snuid], () => {}, () => {});
+        }
+      });
+    });
+  }
+};
+
+/**
+ * Get the invited hunter data.
+ *
+ * @param {Array} invited The invited hunters.
+ *
+ * @return {Promise} The invited hunter data.
+ */
+const getInvitedHunterData = async (invited) => {
+  if (invited.length === 0) {
+    return [];
+  }
+
+  // if its less than or equal to 12, then we can do them all at once
+  if (invited.length <= 12) {
+    const hunters = await getUserData(invited);
+    return hunters;
+  }
+
+  // otherwise we need to do them in batches of 12
+  const batches = [];
+  for (let i = 0; i < invited.length; i += 12) {
+    batches.push(invited.slice(i, i + 12));
+  }
+
+  const hunters = [];
+  for (const batch_ of batches) {
+    const batch = await getUserData(batch_);
+    hunters.push(...batch);
+  }
+
+  return hunters;
+};
+
+/**
+ * Get the user data for the hunter.
+ *
+ * @param {number} userId The user ID.
+ *
+ * @return {Array} The user data.
+ */
+const getUserData = async (userId) => {
+  return new Promise((resolve) => {
+    hg.utils.User.getUserData(
+      userId,
+      [
+        'bait_name',
+        'bait_thumb',
+        'base_name',
+        'base_thumb',
+        'environment_id',
+        'environment_name',
+        'is_online',
+        'last_active_formatted',
+        'trinket_name',
+        'trinket_thumb',
+        'weapon_name',
+        'weapon_thumb',
+      ],
+      (resp) => {
+        resolve(resp);
+      }
+    );
+  });
+};
+
+/**
+ * Remove empty hunter slots from the list.
+ *
+ * @param {Object} mapData The map data.
+ */
+const updateJoinedHuntersList = async (mapData) => {
+  const hunterSlots = document.querySelectorAll('.mh-ui-hunters--block .treasureMapView-allyCell.name');
+  if (! hunterSlots || hunterSlots.length === 0) {
+    return;
+  }
+
+  let shouldRemove = false;
+  for (const slot of hunterSlots) {
+    if ((slot.textContent === 'The map owner can invite more hunters.') || (slot.textContent === 'Click to invite a friend.')) {
+      if (shouldRemove) {
+        shouldRemove.parentNode.remove();
+      }
+
+      slot.parentNode.classList.add('hunters-last-slot');
+      shouldRemove = slot;
+    }
+  }
+
+  for (const slot of hunterSlots) {
+    const nameEl = slot.querySelector('.treasureMapView-ally-name');
+    const name = nameEl ? nameEl.textContent.trim() : null;
+    if (! name) {
+      continue;
+    }
+
+    const hunter = mapData.hunters.find((h) => h.name.trim() === name);
+    if (hunter) {
+      nameEl.innerHTML = `<a href="https://www.mousehuntgame.com/profile.php?snuid=${hunter.sn_user_id}">${hunter.name}</a>`;
+    }
+  }
+};
+
+/**
+ * Get the hunters that have left the map.
+ *
+ * @param {Object} mapData The map data.
+ *
+ * @return {Array} The hunters that have left the map.
+ */
+const getLeftHunters = (mapData) => {
+  const huntersLeft = [];
+  mapData.hunters.forEach((hunter) => {
+    if (! hunter.is_active) {
+      huntersLeft.push(hunter);
+    }
+  });
+
+  return huntersLeft;
+};
+
+/**
+ * Modify the buttons.
+ */
+const modifyButtons = () => {
+  const buttons = [
+    {
+      selector: '.mh-ui-find-hunters-block .treasureMapAlliesView-showInviteButton',
+      text: 'Invite Friends',
+    },
+    {
+      selector: '.mh-ui-find-hunters-block .treasureMapAlliesView-showInviteTeamButton',
+      text: 'Invite Team',
+    },
+    {
+      selector: '.mh-ui-map-settings-block .treasureMapView-inviteModeButton',
+      text: 'Change Settings',
+    },
+    {
+      selector: '.mh-ui-share-block .treasureMapView-copyShareLinkButton',
+      text: 'Copy',
+    },
+  ];
+
+  buttons.forEach((button) => {
+    const el = document.querySelector(button.selector);
+    if (el) {
+      el.classList.add('tiny');
+      const text = el.querySelector('span');
+      if (text) {
+        text.textContent = button.text;
+      }
+    }
+  });
+};
+
+/**
+ * Fix the typo for plural invites.
+ */
+const fixPluralInvites = () => {
+  const invitesEl = document.querySelector('.treasureMapView-numInvitesSent');
+  if (invitesEl && invitesEl.textContent === '1 invites sent.') {
+    invitesEl.innerHTML = invitesEl.innerHTML.replace('invites', 'invite');
+  }
+};
+
+/**
+ * Actions the fire when the hunters tab is shown.
+ *
+ * @param {Object} mapData The map data.
+ */
+const showHuntersTab = async (mapData) => {
+  modifyButtons();
+  updateJoinedHuntersList(mapData);
+  fixPluralInvites();
+
+  const leftBlock = document.querySelector('.treasureMapView-leftBlock');
+  if (! leftBlock) {
+    return;
+  }
+
+  const huntersLeft = getLeftHunters(mapData);
+  if (huntersLeft.length) {
+    makeUserTable(huntersLeft, 'left', `Hunters that have left map (${huntersLeft.length || 0})`, leftBlock);
+  }
+
+  if (mapData.invited_hunters.length) {
+    makeUserTableLoading('invited', `Invited hunters (${mapData.invited_hunters.length || 0})`, leftBlock);
+    const invitedData = await getInvitedHunterData(mapData.invited_hunters);
+    makeUserTable(invitedData, 'invited', 'Invited hunters (#count#)', leftBlock);
+  }
+
+  if (mapData.invite_requests?.length > 0) {
+    makeUserTableLoading('requests', `Invite Requests (${mapData.invite_requests.length || 0})`, leftBlock, mapData);
+    const requestData = await getInvitedHunterData(mapData.invite_requests);
+    makeUserTable(requestData, 'requests', `Invite Requests (${mapData.invite_requests.length || 0})`, leftBlock, mapData);
+  }
+};
+
+export {
+  showHuntersTab
+};

package/src/modules/better-maps/modules/tab-invites.js

@@ -0,0 +1,66 @@
+import { makeElement, waitForElement } from '@utils';
+
+const addSubTabListeners = () => {
+  const inviteTabs = document.querySelectorAll('.treasureMapRootView-tabRow .treasureMapRootView-tab');
+  if (inviteTabs.length === 0) {
+    return;
+  }
+
+  inviteTabs.forEach((tab) => {
+    tab.removeEventListener('click', maybeShowInvitesTab);
+    tab.addEventListener('click', maybeShowInvitesTab);
+  });
+};
+
+let isRunning = false;
+const maybeShowInvitesTab = async () => {
+  if (isRunning) {
+    return;
+  }
+
+  isRunning = true;
+
+  await waitForElement('.treasureMapInvitesView .treasureMapView-title');
+  addSubTabListeners();
+  isRunning = false;
+
+  onInvitesTab();
+};
+
+const onInvitesTab = () => {
+  const title = document.querySelector('.treasureMapInvitesView .treasureMapView-title');
+  if (! title) {
+    return;
+  }
+
+  const existingRefreshButton = title.querySelector('.mh-ui-invite-refresh-button');
+  if (existingRefreshButton) {
+    return;
+  }
+
+  const refreshButton = makeElement('a', 'mh-ui-invite-refresh-button');
+  refreshButton.title = 'Refresh';
+  refreshButton.href = '#';
+  refreshButton.addEventListener('click', (e) => {
+    refreshButton.classList.add('loading');
+
+    e.preventDefault();
+    hg.utils.TreasureMapUtil.getInvites(() => {
+      const inviteTab = document.querySelector('.treasureMapRootView-tabRow .treasureMapRootView-tab[data-type="show_invites"]');
+      if (inviteTab) {
+        inviteTab.click();
+      }
+
+      refreshButton.classList.remove('loading');
+      maybeShowInvitesTab();
+    }, () => {
+      refreshButton.classList.remove('loading');
+      maybeShowInvitesTab();
+    });
+  });
+  title.append(refreshButton);
+};
+
+export {
+  maybeShowInvitesTab
+};