☰

Pet Preview

Show a picture of your default pet on all pages

  1. // ==UserScript==
  2. // @name         Pet Preview
  3. // @namespace    https://www.marapets.com/
  4. // @version      0.3
  5. // @description  Show a picture of your default pet on all pages
  6. // @author       Lily Skye
  7. // @match        *://*.marapets.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=marapets.com
  9. // @grant        none
  10. // @license      MIT
  11. // @require https://greasyfork.org/scripts/477758-suchipi-jsxdom/code/@suchipijsxdom.js?version=1267093
  12. // ==/UserScript==
  13. (function () {
  14.   "use strict";
  15.  
  16.   (async function () {
  17.     if (location.href.match(/index\.php/)) {
  18.       console.info("Pet Preview UserScript: Caching pet image and link...");
  19.       // We're on the homepage! Scrape the default pet and save it to localStorage.
  20.       const defaultPetLink = document.querySelector(`a[href^="pets.php?id="]`);
  21.       const defaultPetImg = document.querySelector("img.defaultpet");
  22.       const linkHref = defaultPetLink?.getAttribute("href");
  23.       const imgSrc = defaultPetImg?.getAttribute("src");
  24.       if (linkHref == null) {
  25.         console.error(
  26.           "Pet Preview UserScript: Could not find default pet link",
  27.         );
  28.       }
  29.       if (imgSrc == null) {
  30.         console.error(
  31.           "Pet Preview UserScript: Could not find default pet image",
  32.         );
  33.       }
  34.       // the '1' is the schema version
  35.       localStorage.__userscript_suchipi_pet_preview_1 = JSON.stringify({
  36.         linkHref,
  37.         imgSrc,
  38.       });
  39.     }
  40.     const savedJson = localStorage.__userscript_suchipi_pet_preview_1;
  41.     if (typeof savedJson !== "string") {
  42.       console.warn(
  43.         "Pet Preview UserScript: Pet not cached yet. Click the 'Marapets' logo to cache it!",
  44.       );
  45.     }
  46.     const { linkHref, imgSrc } = JSON.parse(savedJson);
  47.     if (imgSrc == null) return;
  48.     const mobileBottomBar = document.querySelector(".mobile_bottombar");
  49.     let mobileBottomBarIsVisible = false;
  50.     if (mobileBottomBar != null) {
  51.       const rect = mobileBottomBar.getBoundingClientRect();
  52.       mobileBottomBarIsVisible = rect.width > 0 && rect.height > 0;
  53.     }
  54.     // On mobile, put the pet preview in the smalldoll div
  55.     if (mobileBottomBar != null && mobileBottomBarIsVisible) {
  56.       const smallDoll = mobileBottomBar.querySelector(".smalldoll");
  57.       if (smallDoll != null) {
  58.         smallDoll.style.position = "relative";
  59.         smallDoll.style.borderRadius = "8px";
  60.         const img = smallDoll.querySelector("img");
  61.         if (img != null) {
  62.           img.setAttribute("style", "");
  63.           img.src = imgSrc;
  64.           img.style.margin = "0";
  65.           img.style.width = "100%";
  66.           img.style.height = "100%";
  67.         }
  68.       }
  69.       // on desktop, add an element to put the pet preview in
  70.     } else if (linkHref != null) {
  71.       document.body.appendChild(
  72.         jsxdom.jsx(
  73.           "a",
  74.           { href: linkHref },
  75.           jsxdom.jsx("img", {
  76.             className: "defaultpet",
  77.             style: {
  78.               width: "75px",
  79.               height: "75px",
  80.               position: "fixed",
  81.               top: "30px",
  82.               zIndex: "1",
  83.             },
  84.             src: imgSrc,
  85.           }),
  86.         ),
  87.       );
  88.     } else {
  89.       document.body.appendChild(
  90.         jsxdom.jsx("img", {
  91.           className: "defaultpet",
  92.           style: {
  93.             width: "75px",
  94.             height: "75px",
  95.             position: "fixed",
  96.             top: "30px",
  97.             zIndex: "1",
  98.           },
  99.           src: imgSrc,
  100.         }),
  101.       );
  102.     }
  103.   })();
  104. })();