mousehunt-improved 0.97.1

package/src/modules/better-item-view/modules/hover-item/index.js

@@ -0,0 +1,211 @@
+import {
+  addStyles,
+  doRequest,
+  makeElement,
+  onEvent,
+  onJournalEntry
+} from '@utils';
+import styles from './styles.css';
+
+let lastFetchedItem = null;
+let lastFetchedTime = 0;
+let lastFetchedData = null;
+
+/**
+ * Fetch the item data.
+ *
+ * @param {string} itemId The item ID.
+ *
+ * @return {Promise<Object>} The item data.
+ */
+const fetchItemData = async (itemId) => {
+  // cache the data if its been less than 30 seconds
+  const now = Date.now();
+  if (lastFetchedItem === itemId && now - lastFetchedTime < 30000 && lastFetchedData) {
+    return lastFetchedData;
+  }
+
+  const itemDataRequest = await doRequest('managers/ajax/users/userInventory.php', {
+    action: 'get_items',
+    'item_types[]': itemId,
+  });
+
+  const itemData = itemDataRequest?.items?.[0];
+  if (! itemData) {
+    return null;
+  }
+
+  lastFetchedItem = itemId;
+  lastFetchedTime = now;
+  lastFetchedData = itemData;
+
+  return itemData;
+};
+
+/**
+ * Create the markup for the item data.
+ *
+ * @param {Object} item The item data.
+ *
+ * @return {HTMLElement|boolean} The item data markup or false.
+ */
+const makeItemMarkup = (item) => {
+  if (! item) {
+    return false;
+  }
+
+  const itemData = makeElement('div', 'item-data');
+
+  const itemImage = makeElement('img', 'item-image');
+  itemImage.src = item?.large || item?.thumbnail || '';
+  itemImage.alt = item.name;
+  itemImage.width = '82';
+  itemImage.height = '82';
+  itemData.append(itemImage);
+
+  const itemText = makeElement('div', 'item-text');
+  makeElement('div', 'item-name', item.name, itemText);
+
+  const quantity = makeElement('div', 'item-quanity');
+  makeElement('span', '', 'You own: ', quantity);
+  makeElement('span', '', item.quantity.toLocaleString(), quantity);
+
+  itemText.append(quantity);
+
+  const description = makeElement('div', 'item-description');
+  // grab the first sentence of the description
+  const firstSentence = item.description.match(/[^!.?]+[!.?]/);
+  makeElement('div', 'item-description-text', firstSentence ? firstSentence[0] : item.description, description);
+
+  itemData.append(itemText);
+
+  return itemData;
+};
+
+/**
+ * Create the loading markup.
+ *
+ * @param {Event} e The event.
+ *
+ * @return {HTMLElement} The loading markup.
+ */
+const makeLoadingMarkup = (e) => {
+  if (itemDataWrapper) {
+    itemDataWrapper.remove();
+  }
+
+  itemDataWrapper = makeElement('div', 'item-data-wrapper');
+  itemDataWrapper.id = 'item-data-wrapper';
+  itemDataWrapper.innerHTML = '<span class="item-data-wrapper-loading">Loading...</span>';
+
+  document.body.append(itemDataWrapper);
+
+  const rect = e.target.getBoundingClientRect();
+  const top = rect.top + window.scrollY;
+  const left = rect.left + window.scrollX;
+
+  let tooltipTop = top - itemDataWrapper.offsetHeight - 10;
+  if (tooltipTop < 0) {
+    tooltipTop = top + rect.height + 10;
+  }
+
+  itemDataWrapper.style.top = `${tooltipTop}px`;
+  itemDataWrapper.style.left = `${left - (itemDataWrapper.offsetWidth / 2) + (rect.width / 2)}px`;
+
+  return itemDataWrapper;
+};
+
+let itemDataWrapper;
+
+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(/item_type=([^&]+)/);
+      }
+
+      if (! match || match.length < 2) {
+        return;
+      }
+
+      const itemType = match[1];
+
+      const itemData = await fetchItemData(itemType);
+      if (itemData && itemDataWrapper && isMouseOver) {
+        const markup = makeItemMarkup(itemData);
+        itemDataWrapper.innerHTML = markup.outerHTML;
+      }
+    }, 500);
+  });
+
+  const leave = link.addEventListener('mouseleave', () => {
+    isMouseOver = false;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    if (itemDataWrapper) {
+      itemDataWrapper.remove();
+    }
+  });
+
+  listeners[link] = { mouseenter: enter, mouseleave: leave };
+};
+
+/**
+ * The main function.
+ *
+ * @param {HTMLElement|null} element The parent element to search for item links.
+ */
+const main = (element = null) => {
+  const parentElement = element || document;
+  const itemLinks = parentElement.querySelectorAll('.journal .content .entry .journaltext a[onclick*="ItemView.show"]');
+  if (! itemLinks) {
+    return;
+  }
+
+  itemLinks.forEach((link) => {
+    const itemType = link.getAttribute('onclick').match(/'([^']+)'/)[1];
+    link.setAttribute('onclick', `hg.views.ItemView.show('${itemType}'); return false;`);
+
+    addHoverListener(link);
+  });
+};
+
+/**
+ * Initialize the module.
+ */
+export default () => {
+  addStyles(styles, 'better-item-view-hover-item');
+
+  onEvent('journal-item-link-modified', main);
+  onJournalEntry(main, {
+    id: 'better-item-view-hover-item',
+    weight: 8000,
+  });
+};

package/src/modules/better-item-view/modules/hover-item/styles.css

@@ -0,0 +1,57 @@
+#item-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;
+}
+
+.item-data-wrapper-loading {
+  color: transparent;
+}
+
+.item-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;
+}
+
+#item-data-wrapper .item-data {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 10px;
+  align-items: center;
+  height: 100px;
+}
+
+#item-data-wrapper .item-image {
+  height: 80px;
+  margin-left: 10px;
+  background-color: #fff;
+  border: 1px solid #25211e;
+  border-radius: 5px;
+}
+
+#item-data-wrapper .item-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 80px;
+  margin-right: 10px;
+}
+
+#item-data-wrapper .item-name {
+  width: 160px;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.mh-dark #item-data-wrapper .item-image {
+  background-color: var(--d-bg);
+}

package/src/modules/better-item-view/settings/index.js

@@ -0,0 +1,19 @@
+/**
+ * Add settings for the module.
+ *
+ * @return {Array} The settings for the module.
+ */
+export default async () => {
+  return [
+    {
+      id: 'better-item-view.show-drop-rates',
+      title: 'Show drop rates',
+      default: true,
+    },
+    {
+      id: 'better-item-view.show-item-hover',
+      title: 'Show item details on hover (in journal)',
+      default: true,
+    },
+  ];
+};

package/src/modules/better-item-view/styles.css

@@ -0,0 +1,406 @@
+.itemView-titleContainer {
+  height: 26px;
+}
+
+.itemView-header-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mh-item-links {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: -10px;
+}
+
+.mh-item-links a {
+  margin-right: 5px;
+}
+
+.itemView-header-name .mh-item-links span {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.mouseview-has-mhct .mouse-ar-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 50px;
+  gap: 10px;
+  place-items: center stretch;
+  width: auto;
+  padding: 5px;
+  font-size: 12px;
+}
+
+.itemViewPopup .mouseview-has-mhct .mouse-ar-wrapper {
+  padding: 5px 7px 5px 5px;
+}
+
+.mouseview-has-mhct .has-stages .mouse-ar-wrapper {
+  grid-template-columns: 1fr 1fr 1fr 50px;
+}
+
+.itemView-has-mhct .mouse-ar-wrapper div {
+  padding: 0 2px;
+}
+
+.itemView-has-mhct .mice-ar-wrapper {
+  margin-right: 10px;
+}
+
+.mouse-ar-wrapper .stage {
+  font-size: 10px;
+}
+
+.mouse-ar-wrapper .cheese {
+  font-size: 11px;
+}
+
+.itemView-has-mhct .ar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 26px;
+  padding-bottom: 2px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  font-weight: 900;
+  border-bottom: 1px solid #ccc;
+}
+
+.itemView-has-mhct .ar-link {
+  font-size: 9px;
+}
+
+.itemView-has-mhct .rate {
+  text-align: right;
+}
+
+.itemView-has-mhct .mouse-ar-wrapper:nth-child(odd) {
+  background-color: #e7e7e7;
+}
+
+.itemView-has-mhct .itemView-description {
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.itemView-action.crafting_item b {
+  display: none;
+}
+
+.itemView-action.crafting_item::before {
+  content: "This can be used to craft other items!";
+}
+
+.itemViewContainer.map_piece .itemView-action-text.map_piece,
+.itemViewContainer.base .itemView-action-text.base,
+.itemViewContainer.weapon .itemView-actio-textn.weapon,
+.itemViewContainer.bait .itemView-action-text.bait,
+.itemViewContainer.trinket .itemView-action-text.trinket,
+.itemViewContainer.potion .itemView-action-text.potion,
+.itemViewContainer.readiness_item .itemView-action-text.readiness_item,
+.itemViewContainer.convertible .itemView-action-text.convertible,
+.itemViewContainer.torn_page .itemView-action-text.torn_page,
+.itemViewContainer.crafting_item .itemView-action-text.crafting_item,
+.itemViewContainer.collectible .itemView-action-text.collectible,
+.itemViewContainer.message_item .itemView-action-text.message_item,
+.itemViewContainer.bonus_loot .itemView-action-text.bonus_loot,
+.itemViewContainer.stat .itemView-action-text.stat,
+.itemViewContainer.quest .itemView-action-text.quest,
+.itemViewContainer.skin .itemView-action-text.skin {
+  display: none !important;
+}
+
+.itemViewContainer .shopCustomization .itemViewStatBlock-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.itemViewContainer .itemViewStatBlock-stat {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.itemViewContainer .itemViewStatBlock-stat-value {
+  flex: 1;
+  text-align: left;
+}
+
+.itemViewContainer .itemViewStatBlock-stat.cheeseEffect {
+  font-size: 9px;
+  text-align: center;
+}
+
+.itemViewContainer .itemViewStatBlock.trinket .itemViewStatBlock-padding {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100px;
+}
+
+.itemViewContainer .itemViewStatBlock.trinket {
+  width: 100px;
+  font-size: 13px;
+}
+
+#overlayPopup.itemViewPopup #jsDialogClose {
+  right: 6px;
+  z-index: 1;
+  border-top-right-radius: 10px;
+}
+
+#overlayPopup.itemViewPopup .itemView-header-classification {
+  right: 25px;
+}
+
+.itemView-actionContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.itemView-action {
+  border-top: none;
+}
+
+.itemViewContainer.potion .inventoryPage-item-recipeOptions li {
+  width: 365px;
+}
+
+/* wider item view */
+.itemView-character-image {
+  width: auto;
+  height: 84px;
+  margin-top: -15px;
+  margin-left: -9px;
+}
+
+.itemView-character-name {
+  left: -11px;
+  width: 75px;
+  font-size: 15px;
+}
+
+.itemView-padding {
+  margin-left: 70px;
+}
+
+.itemView-thumbnail {
+  width: 200px;
+  height: 200px;
+  margin-left: -15px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.itemView-thumbnail.large {
+  background-size: 100%;
+}
+
+input.itemView-action-convert-quantity {
+  width: 50px;
+}
+
+.itemViewPopup .itemViewStatBlock-padding {
+  flex-direction: column;
+}
+
+/* hovering over larry makes him rotate slightly */
+.itemView-character .itemView-character-image {
+  transition: all 0.4s ease-out;
+  transform-origin: bottom;
+}
+
+.itemView-character:hover .itemView-character-image {
+  transform: scale(1.2) rotate(-10deg) translateX(5px);
+}
+
+.itemView-header-classification {
+  visibility: hidden;
+}
+
+.itemView-header-classification span {
+  visibility: visible;
+}
+
+.itemViewStatBlock-stat {
+  display: flex;
+  align-items: center;
+}
+
+.itemView-sidebar-checklistItem:not(.checked) {
+  color: inherit;
+}
+
+.itemView-sidebar-checklistItem:nth-child(1),
+.itemView-sidebar-checklistItem:nth-child(2),
+.itemView-sidebar-checklistItem.checked {
+  display: block;
+}
+
+.itemView-sidebar-checklistItem {
+  background: url(https://www.mousehuntgame.com/images/icons/bad_idea.png) 1px 4px no-repeat;
+  background-size: 14px;
+  opacity: 0.8;
+}
+
+.itemView-partsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  margin-top: 15px;
+  border-top: 1px solid #666;
+}
+
+.convertibleOpenView-item-imageContainer {
+  margin-right: auto;
+}
+
+.convertibleOpenView-itemContainer.num_items_1 .convertibleOpenView-item {
+  gap: 20px;
+  width: 100%;
+}
+
+.itemView-obtainHint {
+  margin-left: 190px;
+}
+
+.itemViewContainer iframe.socialLink-facebookLike {
+  margin-right: 5px;
+}
+
+.convertibleOpenView-itemContainer {
+  padding-top: 10px;
+  margin-top: 0;
+}
+
+.itemViewContainer.skin .itemView-thumbnail {
+  background-size: cover;
+}
+
+.inventoryPage-item.trinket .itemViewStatBlock.trinket .itemViewStatBlock-padding {
+  overflow: hidden;
+  border-radius: 3px;
+}
+
+.inventoryPage-item.trinket .itemViewStatBlock.trinket {
+  border-top: none;
+}
+
+.inventoryPage-item.trinket .itemViewStatBlock-stat {
+  border-top: 1px solid #ccc;
+  border-bottom: none;
+}
+
+.itemView-action-convertForm {
+  position: relative;
+  padding-bottom: 20px;
+}
+
+.mh-improved-item-open-controls {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  left: 0;
+  display: flex;
+  flex: 1 1 100%;
+  flex-flow: row wrap;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 7px;
+}
+
+.mh-improved-airship-part-container {
+  position: relative;
+  background-image: none !important;
+}
+
+.mh-improved-airship-part {
+  position: absolute;
+  inset: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.mh-improved-airship-part.balloon {
+  background-image: url(https://www.mousehuntgame.com/images/ui/hud/floating_islands/airship/balloon/silhouette.png);
+}
+
+.mh-improved-airship-part.sail {
+  background-image: url(https://www.mousehuntgame.com/images/ui/hud/floating_islands/airship/sail/silhouette.png);
+}
+
+.mh-improved-airship-part.hull {
+  background-image: url(https://www.mousehuntgame.com/images/ui/hud/floating_islands/airship/hull/silhouette.png);
+}
+
+.mh-improved-airship-part-container .mh-improved-airship-part.silhouette {
+  transition: opacity 0.3s;
+}
+
+.mh-improved-airship-part-container:hover .mh-improved-airship-part.silhouette {
+  opacity: 0.1;
+}
+
+.mh-improved-scroll-to-map {
+  margin-top: 10px;
+}
+
+.mh-improved-scroll-to-map strong {
+  font-weight: 900;
+}
+
+ul.mh-improved-scroll-to-map-multiple-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  list-style-type: disc;
+  background-color: #eee;
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.mh-improved-scroll-to-map-multiple {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 5px;
+  padding-bottom: 2px;
+  padding-left: 5px;
+  margin-top: 10px;
+  background-color: #eee;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.mh-improved-scroll-to-map-title-text {
+  font-size: 12px;
+  border-bottom: 1px solid #ccc;
+}
+
+.mh-improved-scroll-to-map .PreferencesPage__blackTooltip.mh-improved-tooltip {
+  margin-right: 5px;
+}
+
+.mh-improved-scroll-to-map-multiple-list li {
+  line-height: 1.5;
+}
+
+.inventoryPage-item-content-nameContainer .tooltip .description {
+  overflow: scroll;
+}