mousehunt-improved 0.97.1

package/src/utils/shared/trap-quantity.js

@@ -0,0 +1,232 @@
+import {
+  dataGet,
+  dataSet,
+  getCurrentPage,
+  getUserItems,
+  makeElement,
+  onEvent,
+  onNavigation,
+  onRequest,
+  onTurn,
+  sleep
+} from '@utils';
+
+/**
+ * Get the selector for the item.
+ *
+ * @param {string} itemId The item ID.
+ * @param {Array}  bases  The base IDs.
+ *
+ * @return {string} The selector.
+ */
+const getIdSelector = (itemId, bases) => {
+  if (Array.isArray(bases)) {
+    bases = bases.join('-');
+  }
+  return `mh-improved-${itemId}-${bases}-counter`;
+};
+
+const getQuantity = async (itemId) => {
+  return await dataGet(`${itemId}-quantity`, 0);
+};
+
+/**
+ * Add the quantity to the display.
+ */
+const addQuantityToDisplay = async () => {
+  if ('camp' !== getCurrentPage()) {
+    return;
+  }
+
+  for (const opts of options) {
+    let bases = opts.baseIds;
+    const itemId = opts.itemId;
+
+    const selector = getIdSelector(itemId, bases);
+
+    const existingCounter = document.querySelector(`.${selector}`);
+    if (existingCounter) {
+      existingCounter.remove();
+    }
+
+    bases = bases.map((base) => Number.parseInt(base, 10));
+    const userBase = Number.parseInt(user.base_item_id, 10);
+
+    if (! bases.includes(userBase)) {
+      continue;
+    }
+
+    const amount = await getQuantity(itemId);
+
+    const counter = document.querySelector(`.${selector}-text`);
+    if (counter) {
+      counter.textContent = amount;
+      continue;
+    }
+
+    const trapContainer = document.querySelector('.trapSelectorView__armedItem[data-item-classification="base"] .trapSelectorView__armedItemImage');
+    if (! trapContainer) {
+      continue;
+    }
+
+    const newCounter = makeElement('div', ['trapSelectorView__armedItemQuantity', selector, 'mh-improved-trap-quantity']);
+    makeElement('span', `${selector}-text`, amount.toLocaleString(), newCounter);
+
+    trapContainer.append(newCounter);
+  }
+};
+
+/**
+ * Add the quantity to the trap browser.
+ *
+ * @param {Element} el     The element to add the quantity to.
+ * @param {string}  itemId The item ID.
+ * @param {string}  base   The base ID.
+ */
+const addQuantityToTrapBrowserItem = async (el, itemId, base) => {
+  if (! el || ! itemId || ! base) {
+    return;
+  }
+
+  const selector = getIdSelector(itemId, base);
+
+  const exists = document.querySelector(`.campPage-trap-itemBrowser-favorite-item-quantity .quantity-${itemId}-wrapper .${selector}-blueprint`);
+  if (exists) {
+    const qty = await getQuantity(itemId);
+
+    exists.textContent = qty.toLocaleString();
+    return;
+  }
+
+  const qty = await getQuantity(itemId);
+
+  const counter = makeElement('div', ['campPage-trap-itemBrowser-favorite-item-quantity', `quantity-${itemId}-wrapper`]);
+  makeElement('span', ['campPage-trap-itemBrowser-favorite-item-image-quantity', 'base-quantity', `${selector}-blueprint`], qty.toLocaleString(), counter);
+
+  el.append(counter);
+};
+
+/**
+ * Add the quantity to the trap browser for slugs.
+ */
+const addToTrapBrowserForSlugs = async () => {
+  options.forEach(async (opts) => {
+    for (const base of opts.baseSlugs) {
+      const el = document.querySelector(`.campPage-trap-itemBrowser-item-image[data-item-type="${base}"]`);
+      if (el) {
+        await addQuantityToTrapBrowserItem(el, opts.itemId, base);
+      }
+    }
+
+    for (const base of opts.baseIds) {
+      const favoriteEl = document.querySelector(`.campPage-trap-itemBrowser-favorite-item-image[data-item-id="${base}"]`);
+      if (favoriteEl) {
+        await addQuantityToTrapBrowserItem(favoriteEl, opts.itemId, base);
+      }
+    }
+  });
+};
+
+/**
+ * Add the quantity to the trap browser.
+ *
+ * @param {string} tab The tab to add the quantity to.
+ */
+const addQtyToTrapBrowser = async (tab) => {
+  if ('item_browser' !== tab) {
+    return;
+  }
+
+  await addToTrapBrowserForSlugs();
+};
+
+/**
+ * Handle change trap events.
+ */
+const onChangeTrap = async () => {
+  const trapSelector = document.querySelector('.trapSelectorView__blueprint.trapSelectorView__blueprint--active .trapSelectorView__browserStateParent--items[data-blueprint-type="base"]');
+  if (trapSelector) {
+    for (const opts of options) {
+      await addQtyToTrapBrowser('item_browser', opts);
+    }
+  }
+};
+
+let allItems = [];
+const maybeClearCache = async (response) => {
+  sleep(250);
+
+  const currentBase = Number.parseInt(user.base_item_id, 10);
+
+  for (const opts of options) {
+    if (opts.baseIds.includes(currentBase)) {
+      allItems.push(opts.itemId);
+    }
+  }
+
+  allItems = [...new Set(allItems)];
+
+  if (! allItems.length) {
+    return;
+  }
+
+  const hasItemsInResponse = allItems.every((itemId) => Object.prototype.hasOwnProperty.call(response?.inventory ?? {}, itemId));
+  const details = hasItemsInResponse
+    ? response.inventory
+    : await getUserItems(allItems, true);
+  for (const itemId in details) {
+    const qty = Number.parseInt(details[itemId]?.quantity) || 0;
+
+    dataSet(`${details[itemId].type}-quantity`, qty);
+  }
+};
+
+const addEvents = () => {
+  setTimeout(async () => {
+    await maybeClearCache();
+    addQuantityToDisplay();
+  }, 250);
+  onNavigation(addQuantityToDisplay, { page: 'camp' });
+
+  onRequest('users/changetrap.php', async () => {
+    await maybeClearCache();
+    await onChangeTrap();
+    addQuantityToDisplay();
+  });
+
+  onEvent('camp_page_toggle_blueprint', async (tab) => {
+    await addQtyToTrapBrowser(tab);
+  });
+
+  onTurn(async (response) => {
+    await maybeClearCache(response);
+    setTimeout(addQuantityToDisplay, 250);
+  }, 250);
+};
+
+const options = [];
+let hasAddedEvents = false;
+
+/**
+ * Add the quantity to the trap.
+ *
+ * @param {Object} opts         The options for the trap.
+ * @param {string} opts.itemId  The item ID.
+ * @param {Array}  opts.baseIds The base IDs.
+ */
+const addTrapQuantity = async (opts) => {
+  if (! opts.itemId || ! opts.baseIds) {
+    return;
+  }
+
+  options.push(opts);
+
+  if (! hasAddedEvents) {
+    hasAddedEvents = true;
+    addEvents();
+  }
+};
+
+export {
+  addTrapQuantity
+};

package/src/utils/styles/errors.css

@@ -0,0 +1,50 @@
+.mousehunt-improved-error {
+  position: fixed;
+  bottom: 50px;
+  left: 5%;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 375px;
+  padding: 10px 20px;
+  background-color: #ffbfbf;
+  border: 1px solid #4e2727;
+  border-radius: 6px;
+  box-shadow: 0 0 10px 1px #bc7b7b;
+}
+
+.mousehunt-improved-error h1 {
+  margin: 0 0 0.75em;
+  font-size: 1.3em;
+  font-weight: 900;
+  color: #9f2223;
+}
+
+.mousehunt-improved-error p {
+  margin: 0.5em 0;
+  font-size: 1em;
+  line-height: 1.5;
+}
+
+textarea.mousehunt-improved-error-message {
+  min-height: 50px;
+  font-size: 11px;
+  background-color: #ffbfbf;
+  border-color: #dc7878;
+}
+
+.mousehunt-improved-error-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  color: #fff;
+  background-color: #9f2223;
+  border: 1px solid #4e2727;
+  border-radius: 1px;
+}
+
+.mousehunt-improved-error-close:hover,
+.mousehunt-improved-error-close:focus {
+  background-color: #e03a3a;
+}

package/src/utils/styles/memory-game.css

@@ -0,0 +1,227 @@
+.mh-improved-memory-game {
+  position: absolute;
+  z-index: 9999;
+  width: auto;
+  background: #f6f3eb;
+  border: 1px solid #534022;
+  box-shadow:
+    1px 1px 1px 0 #9d917f,
+    1px 3px 5px 0 #6a6969;
+}
+
+.mh-improved-memory-game-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  color: #f6f3eb;
+  background-color: #8e6642;
+  border-bottom: 1px solid #ceb7a6;
+}
+
+.mh-improved-memory-game-header:hover {
+  cursor: grab;
+}
+
+.mh-improved-memory-game-header:active {
+  cursor: grabbing;
+}
+
+.mh-improved-memory-game-header h1 {
+  margin: 0;
+  font-size: 16px;
+  color: #f6f3eb;
+}
+
+.mh-improved-memory-close:hover,
+.mh-improved-memory-close:focus {
+  color: #8e6642;
+  cursor: pointer;
+  background-color: #eee;
+  border-radius: 50%;
+  outline: 1px solid #ccc;
+}
+
+.mh-improved-memory-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  padding: 15px;
+  background: #f6f3eb;
+}
+
+.mh-improved-memory-game-hard .mh-improved-memory-grid,
+.mh-improved-memory-game-extreme .mh-improved-memory-grid {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.mh-improved-memory-game-nope .mh-improved-memory-grid {
+  grid-template-columns: repeat(14, 1fr);
+}
+
+.mh-improved-memory-card {
+  position: relative;
+  z-index: 1;
+  width: 80px;
+  height: 80px;
+  cursor: pointer;
+  perspective: 1000px;
+}
+
+.mh-improved-memory-game-nope .mh-improved-memory-card {
+  width: 45px;
+  height: 60px;
+}
+
+.mh-improved-memory-card.hint {
+  animation: mh-improved-shake 0.5s ease-in-out;
+}
+
+.mh-improved-memory-game-nope .mh-improved-card-name {
+  position: absolute;
+  top: 87%;
+  left: 50%;
+  z-index: 15;
+  display: block;
+  padding: 2px 4px;
+  font-size: 8px;
+  white-space: nowrap;
+  background: #f6f3eb;
+  border: 1px solid #534022;
+  border-radius: 2px;
+  transition: visibility 3s ease-in-out;
+  transform: translateX(-50%);
+}
+
+.mh-improved-memory-game-nope .matched .mh-improved-card-name {
+  visibility: hidden;
+}
+
+.mh-improved-card-front,
+.mh-improved-card-back {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  box-shadow: 1px 1px 1px #999;
+  transition: transform 0.6s;
+  backface-visibility: hidden;
+}
+
+.mh-improved-card-front {
+  font-size: 20px;
+  font-weight: 900;
+  color: #534022;
+  user-select: none;
+  background: #e8e3d7;
+  border: 1px solid #ceb7a6;
+}
+
+.mh-improved-card-back {
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  overflow: visible;
+  background: #f6f3eb;
+  border: 1px solid #534022;
+  transform: rotateY(180deg);
+}
+
+.mh-improved-card-name {
+  text-align: center;
+}
+
+.mh-dark .mh-improved-card-name {
+  color: var(--d-text-dark);
+}
+
+.mh-improved-memory-card:hover .mh-improved-card-front {
+  background: #eee;
+  outline: 1px solid #ccc;
+}
+
+.mh-improved-memory-card.flipped {
+  z-index: 10;
+}
+
+.mh-improved-memory-card.flipped .mh-improved-card-front {
+  transform: rotateY(180deg);
+}
+
+.mh-improved-memory-card.flipped .mh-improved-card-back {
+  transform: rotateY(0deg);
+}
+
+.mh-improved-memory-card.matched {
+  z-index: 5;
+  opacity: 0.7;
+  transform: scale(0.95);
+}
+
+.mh-improved-memory-card.matched .mh-improved-card-back {
+  background: #d4edda;
+  border-color: #28a745;
+  animation: mh-improved-scale 0.5s ease-in-out;
+}
+
+.mh-improved-memory-card img {
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+}
+
+.mh-improved-memory-message {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 35px;
+  padding: 10px 15px;
+  font-size: 13px;
+  color: #534022;
+  text-align: center;
+  user-select: none;
+  background: #f6f3eb;
+  border-top: 1px solid #ceb7a6;
+}
+
+.mh-improved-memory-game.victory {
+  user-select: initial;
+  animation: mh-improved-shake-tiny 0.5s ease-in-out;
+}
+
+.mh-improved-memory-game.victory .memory-message {
+  color: #155724;
+  background: #d4edda;
+  border-color: #28a745;
+}
+
+.mh-improved-memory-play-again {
+  display: inline-block;
+  padding: 5px 10px;
+  color: #f6f3eb;
+  text-decoration: none;
+  background: #8e6642;
+  border-radius: 4px;
+}
+
+.mh-improved-memory-play-again:hover,
+.mh-improved-memory-play-again:focus {
+  color: #f6f3eb;
+  text-decoration: none;
+  background: #6f4b2c;
+  outline: 1px solid #ccc;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .mh-improved-memory-card,
+  .mh-improved-card-front,
+  .mh-improved-card-back,
+  .mh-improved-memory-game.victory {
+    transition: none;
+    animation: none;
+  }
+}

package/src/utils/styles/page-error.css

@@ -0,0 +1,145 @@
+body.PageError .pageFrameView,
+body.PageLockError .pageFrameView {
+  grid-template-rows: [page-start] auto [page-end];
+  grid-template-columns: [first] auto [content-start] 400px [content-end] auto [last];
+}
+
+body.PageError .pageFrameView-column.right,
+body.PageLockError .pageFrameView-column.right {
+  background: #bad4ed url(https://www.mousehuntgame.com/images/ui/backgrounds/app_frame_right.gif) repeat-y 0% 0% !important;
+  border: none;
+}
+
+body.PageError .pageFrameView-column.left,
+body.PageLockError .pageFrameView-column.left {
+  background: #bad4ed url(https://www.mousehuntgame.com/images/ui/backgrounds/app_frame_left.gif) repeat-y 100% 0% !important;
+  border: none;
+}
+
+body.PageError,
+body.PageLockError {
+  background: url(https://www.mousehuntgame.com/images/map/login-page/standard/1.jpg) no-repeat top center;
+  background-position: center center;
+  background-size: cover;
+  transition: 5s ease-in-out;
+}
+
+body.PageError .pageFrameView-content,
+body.PageLockError .pageFrameView-content {
+  min-height: calc(80vh - 110px);
+  background: transparent;
+}
+
+body.PageError .pageFrameView-footer,
+body.PageLockError .pageFrameView-footer {
+  display: flex;
+  flex-flow: row wrap;
+  row-gap: 20px;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(255 255 255 / 70%);
+  transition: 0.3s;
+}
+
+body.PageError .pageFrameView-footer-linksContainer,
+body.PageLockError .pageFrameView-footer-linksContainer {
+  flex: 0 0 100%;
+}
+
+body.PageError .pageFrameView-footer a img,
+body.PageLockError .pageFrameView-footer a img {
+  opacity: 0.4;
+  transition: 0.3s;
+  transform: scale(0.8);
+}
+
+body.PageError .pageFrameView-footer-links.terms,
+body.PageLockError .pageFrameView-footer-links.terms {
+  text-align: center;
+}
+
+body.PageError .pageFrameView-footer a:hover img,
+body.PageLockError .pageFrameView-footer a:hover img {
+  opacity: 1;
+  transform: scale(1);
+}
+
+body.PageError .maintenanceMessage:hover::after,
+body.PageLockError .maintenanceMessage:hover::after {
+  transform: rotate(-3deg) scale(1.2);
+}
+
+body.PageError .pageFrameView-contentContainer,
+body.PageLockError .pageFrameView-contentContainer {
+  background: none;
+}
+
+body.PageError .container,
+body.PageLockError .container {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+@media screen and (min-width: 501px) {
+  body.PageError .pageFrameView,
+  body.PageLockError .pageFrameView {
+    grid-template-columns: [first] auto [content-start] 500px [content-end] auto [last];
+  }
+}
+
+@media only screen and (min-width: 801px) {
+  body.PageError .pageFrameView,
+  body.PageLockError .pageFrameView {
+    grid-template-columns: [first] auto [content-start] 800px [content-end] auto [last];
+  }
+}
+
+@media only screen and (max-width: 810px) {
+  body.PageError.noSidebar .pageFrameView,
+  body.PageLockError.noSidebar .pageFrameView {
+    background: none !important;
+  }
+}
+
+div[style*="margin:12px 0px 12px 0px; padding:12px; border:1px solid #ccc;"] {
+  margin: 10px !important;
+  margin-top: 20vh !important;
+  background-color: rgb(255 255 255 / 85%);
+  border: 2px solid #000 !important;
+}
+
+div[style*="float:left"] {
+  width: 230px;
+  height: 230px;
+  background-image: url(https://i.mouse.rip/error-mouse.png);
+  transition: 0.3s ease-in-out;
+}
+
+div[style*="float:left"] img {
+  display: none;
+}
+
+.PageError div[style*="float:left"] {
+  background: none;
+}
+
+.PageError div[style*="float:left"] img {
+  display: block;
+  mix-blend-mode: darken;
+}
+
+div[style*="margin:24px 0px 0px 230px;"] {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  float: none;
+  height: 190px;
+}
+
+.PageLockError div[style*="float:left"]:hover {
+  transform: translateX(10px);
+}
+
+.PageLockError div[style*="float:left"]:active {
+  transform: translateX(20px);
+}