mousehunt-improved 0.97.1

package/src/modules/better-mice/modules/hover-mice/index.js

@@ -0,0 +1,236 @@
+import {
+  addStyles,
+  doRequest,
+  makeElement,
+  onEvent,
+  onJournalEntry
+} from '@utils';
+import styles from './styles.css';
+
+let lastFetchedMouse = null;
+let lastFetchedTime = 0;
+let lastFetchedData = null;
+
+/**
+ * Fetch the mouse data.
+ *
+ * @param {string} mouseId The mouse ID.
+ *
+ * @return {Promise<Object>} The mouse data.
+ */
+const fetchMouseData = async (mouseId) => {
+  // Cache the data if it's been less than 30 seconds
+  const now = Date.now();
+  if (lastFetchedMouse === mouseId && now - lastFetchedTime < 30000 && lastFetchedData) {
+    return lastFetchedData;
+  }
+
+  const mouseDataRequest = await doRequest('managers/ajax/mice/getstat.php', {
+    action: 'get_mice',
+    'mouse_types[]': mouseId,
+  });
+
+  const mouseData = mouseDataRequest?.mice?.[0];
+  if (! mouseData) {
+    return null;
+  }
+
+  lastFetchedMouse = mouseId;
+  lastFetchedTime = now;
+  lastFetchedData = mouseData;
+
+  return mouseData;
+};
+
+/**
+ * Create the markup for the mouse data.
+ *
+ * @param {Object} mouse The mouse data.
+ *
+ * @return {HTMLElement|boolean} The mouse data markup or false.
+ */
+const makeMouseMarkup = (mouse) => {
+  if (! mouse) {
+    return false;
+  }
+
+  const mouseData = makeElement('div', 'mouse-data');
+  if (mouse.crown && 'none' !== mouse.crown) {
+    mouseData.classList.add('crown', mouse.crown);
+  }
+
+  const mouseImage = makeElement('img', 'mouse-image');
+  mouseImage.src = mouse?.square || mouse?.large || mouse?.thumb || '';
+  mouseImage.alt = mouse.name;
+  mouseImage.width = '82';
+  mouseImage.height = '82';
+  mouseData.append(mouseImage);
+
+  const mouseText = makeElement('div', 'mouse-text');
+
+  if (mouse.name) {
+    makeElement('div', 'mouse-name', mouse.name, mouseText);
+  }
+
+  const catchStats = makeElement('div', 'mouse-catch-stats');
+
+  const catches = makeElement('div', 'mouse-catches');
+  makeElement('span', '', 'Catches: ', catches);
+  makeElement('span', '', mouse.num_catches_formatted || 0, catches);
+  catchStats.append(catches);
+
+  const avgWeight = makeElement('div', 'mouse-avg-weight');
+  makeElement('span', '', 'Avg: ', avgWeight);
+  makeElement('span', '', mouse.avg_weight || '0z', avgWeight);
+  catchStats.append(avgWeight);
+
+  const misses = makeElement('div', 'mouse-misses');
+  makeElement('span', '', 'Misses: ', misses);
+  makeElement('span', '', mouse.num_misses_formatted || 0, misses);
+  catchStats.append(misses);
+
+  const heaviest = makeElement('div', 'mouse-heaviest');
+  makeElement('span', '', 'Heaviest: ', heaviest);
+  makeElement('span', '', mouse.heaviest_catch || '0z', heaviest);
+  catchStats.append(heaviest);
+
+  mouseText.append(catchStats);
+  mouseData.append(mouseText);
+
+  return mouseData;
+};
+
+/**
+ * Create the loading markup.
+ *
+ * @param {Event} e The event.
+ *
+ * @return {HTMLElement} The loading markup.
+ */
+const makeLoadingMarkup = (e) => {
+  if (mouseDataWrapper) {
+    mouseDataWrapper.remove();
+  }
+
+  mouseDataWrapper = makeElement('div', 'mouse-data-wrapper');
+  mouseDataWrapper.id = 'mouse-data-wrapper';
+  mouseDataWrapper.innerHTML = '<span class="mouse-data-wrapper-loading">Loading...</span>';
+
+  document.body.append(mouseDataWrapper);
+
+  const rect = e.target.getBoundingClientRect();
+  const top = rect.top + window.scrollY;
+  const left = rect.left + window.scrollX;
+
+  let tooltipTop = top - mouseDataWrapper.offsetHeight - 10;
+  if (tooltipTop < 0) {
+    tooltipTop = top + rect.height + 10;
+  }
+
+  mouseDataWrapper.style.top = `${tooltipTop}px`;
+  mouseDataWrapper.style.left = `${left - (mouseDataWrapper.offsetWidth / 2) + (rect.width / 2)}px`;
+
+  return mouseDataWrapper;
+};
+
+let mouseDataWrapper;
+
+const listeners = {};
+
+const addHoverListener = (link) => {
+  let timeoutId = null;
+  let isMouseOver = false;
+
+  if (listeners[link]) {
+    link.removeEventListener('mouseenter', listeners[link].mouseenter);
+    link.removeEventListener('mouseleave', listeners[link].mouseleave);
+  }
+
+  const enter = link.addEventListener('mouseenter', async (e) => {
+    isMouseOver = true;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(async () => {
+      if (! isMouseOver) {
+        return;
+      }
+
+      makeLoadingMarkup(e);
+      let match;
+      if (link.getAttribute('onclick')) {
+        match = link.getAttribute('onclick').match(/'([^']+)'/);
+      } else if (link.getAttribute('href')) {
+        match = link.getAttribute('href').match(/mouse_type=([^&]+)/);
+      }
+
+      if (! match || match.length < 2) {
+        return;
+      }
+
+      const mouseType = match[1];
+
+      const mouseData = await fetchMouseData(mouseType);
+      if (mouseData && mouseDataWrapper && isMouseOver) {
+        const markup = makeMouseMarkup(mouseData);
+        mouseDataWrapper.innerHTML = markup.outerHTML;
+      }
+    }, 500);
+  });
+
+  const leave = link.addEventListener('mouseleave', () => {
+    isMouseOver = false;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    if (mouseDataWrapper) {
+      mouseDataWrapper.remove();
+    }
+  });
+
+  listeners[link] = { mouseenter: enter, mouseleave: leave };
+};
+
+/**
+ * The main function.
+ *
+ * @param {HTMLElement|null} element The parent element to search for mouse links.
+ */
+const main = (element = null) => {
+  let allMiceLinks = [];
+
+  const parentElement = element || document;
+  const miceLinks = parentElement.querySelectorAll('.journal .content .entry .journaltext a[onclick*="MouseView.show"]');
+  if (miceLinks) {
+    allMiceLinks = [...miceLinks];
+  }
+
+  const creMiceLinks = document.querySelectorAll('.mh-improved-cre-name a[onclick*="MouseView.show"]');
+  if (creMiceLinks) {
+    allMiceLinks = [...allMiceLinks, ...creMiceLinks];
+  }
+
+  allMiceLinks.forEach((link) => {
+    const mouseType = link.getAttribute('onclick').match(/'([^']+)'/)[1];
+    link.setAttribute('onclick', `hg.views.MouseView.show('${mouseType}'); return false;`);
+
+    addHoverListener(link);
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default () => {
+  addStyles(styles, 'better-mice-hover-mice');
+
+  onEvent('journal-mouse-link-modified', main);
+  onJournalEntry(main, {
+    id: 'better-mice-hover-mice',
+    weight: 9900,
+  });
+};

package/src/modules/better-mice/modules/hover-mice/styles.css

@@ -0,0 +1,101 @@
+#mouse-data-wrapper {
+  position: absolute;
+  z-index: 999999;
+  box-sizing: border-box;
+  display: block;
+  width: 300px;
+  height: 101px;
+  background: linear-gradient(#decebb 5%, #f0eddf 50%);
+  border: 1px solid #9a8872;
+  border-radius: 10px;
+  box-shadow: 0 1px 5px -1px #5e5e5e;
+}
+
+.mouse-data-wrapper-loading {
+  color: transparent;
+}
+
+.mouse-data-wrapper-loading::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: url(https://www.mousehuntgame.com/images//ui/loaders/drip_spinner.gif) no-repeat center center;
+}
+
+#mouse-data-wrapper .mouse-data {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 10px;
+  align-items: center;
+  height: 100px;
+}
+
+#mouse-data-wrapper .mouse-image {
+  height: 80px;
+  margin-left: 10px;
+  border: 1px solid #25211e;
+  border-radius: 5px;
+}
+
+#mouse-data-wrapper .mouse-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 80px;
+  margin-right: 10px;
+}
+
+#mouse-data-wrapper .mouse-name {
+  width: 160px;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.mouse-catch-stats {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: 0 20px;
+  font-size: 10px;
+}
+
+.mouse-catch-stats div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1.5;
+}
+
+#mouse-data-wrapper .mouse-data.crown::after {
+  position: absolute;
+  top: 7px;
+  right: 5px;
+  width: 30px;
+  height: 30px;
+  content: "";
+  background-size: cover;
+}
+
+#mouse-data-wrapper .mouse-data.crown.bronze::after {
+  background-image: url(https://www.mousehuntgame.com/images/ui/crowns/crown_bronze.png);
+}
+
+#mouse-data-wrapper .mouse-data.crown.silver::after {
+  background-image: url(https://www.mousehuntgame.com/images/ui/crowns/crown_silver.png);
+}
+
+#mouse-data-wrapper .mouse-data.crown.gold::after {
+  background-image: url(https://www.mousehuntgame.com/images/ui/crowns/crown_gold.png);
+}
+
+#mouse-data-wrapper .mouse-data.crown.platinum::after {
+  background-image: url(https://www.mousehuntgame.com/images/ui/crowns/crown_platinum.png);
+}
+
+#mouse-data-wrapper .mouse-data.crown.diamond::after {
+  background-image: url(https://www.mousehuntgame.com/images/ui/crowns/crown_diamond.png);
+}
+
+.mh-dark #mouse-data-wrapper .mouse-image {
+  background-color: var(--d-bg);
+}