☰

Homepage Petpets

Adds petpets next to your pets on the homepage.

// ==UserScript==
// @name         Homepage Petpets
// @namespace    https://lel.wtf
// @license      GNU GPLv3
// @version      1.24
// @description  Adds petpets next to your pets on the homepage.
// @author       Lamp
// @match        https://www.neopets.com/home/
// @match        https://www.neopets.com/home/index.phtml
// @icon         https://www.google.com/s2/favicons?sz=64&domain=neopets.com
// @grant        none
// ==/UserScript==

(function() {

    function getpetpets() {
        //Loop over pets
        var pets = document.getElementsByClassName('hp-carousel-pet');

        for (let i = 0; i < pets.length; i++) {
            //Grab pet name
            petname = pets[i].dataset.name;
            localStorage.setItem(petname+"img", pets[i].style.backgroundImage);
            if (pets[i].dataset.petpetimg) {
                //Grab petpet image URL
                petpetimg = pets[i].dataset.petpetimg
                //Store pet name and petpet image URL in localStorage
                if (petpetimg.startsWith("http")) {
                    localStorage.setItem(petname+"petpet", petpetimg);
                } else {
                    localStorage.setItem(petname+"petpet", "http:" + petpetimg);
                }
            } else {
                //Store blank pixel if no petpet image URL
                localStorage.setItem(petname+"petpet", "pix.gif");
            }
        }
    }



        function getpetpetpets() {
        //Loop over pets
        var pets = document.getElementsByClassName('hp-carousel-pet');

        for (let i = 0; i < pets.length; i++) {
            //Grab pet name
            petname = pets[i].dataset.name;

            if (pets[i].dataset.p3img) {
                //Grab petpetpet image URL
                petpetpetimg = pets[i].dataset.p3img
                //Store pet name and petpetpet image URL in localStorage
                //if (petpetimg.startsWith("http")) {
                    localStorage.setItem(petname+"petpetpet", petpetpetimg);
               // } else {
                    //localStorage.setItem(petname+"petpetpet", "http:" + petpetpetimg);
               // }
            } else {
                //Store blank pixel if no petpetpet image URL
                localStorage.setItem(petname+"petpetpet", "pix.gif");

            }
        }
    }




    function displaypetpets() {
        //Loop over pets
        var pets = document.getElementsByClassName('hp-carousel-pet');
        for (let j = 0; j < pets.length; j++) {
            //Grab pet name
            petname = pets[j].dataset.name;

            //Create new image element
            var img = document.createElement('img');
            img.width = "60";
            img.height = "60";
            img.id = petname + 'petpet';

            //Retrieve petpet image for pet from localStorage
            petpetimg = localStorage.getItem(img.id);

            //Run petpet image through processing script on my server and set as src for new image element
             
            img.src = "https://lel.wtf/petpet/" + petpetimg.replace('https://images.neopets.com/', '').replace('http://images.neopets.com/', '').replace('//images.neopets.com/', '');
          

            //Position petpet image and soften edges with CSS drop shadow filter
            var glowstr = 3;
            img.setAttribute("style", "position:absolute;left:0px;bottom:-10px;-webkit-filter: drop-shadow(1px 1px " + glowstr + "px white) drop-shadow(-1px -1px " + glowstr + "px white) drop-shadow(1px -1px " + glowstr + "px white) drop-shadow(-1px 1px " + glowstr + "px white);filter: drop-shadow(1px 1px " + glowstr + "px white) drop-shadow(-1px -1px " + glowstr + "px white) drop-shadow(1px -1px " + glowstr + "px white) drop-shadow(-1px 1px " + glowstr + "px white);")

            //Write to DOM
            pets[j].appendChild(img);
        }
    }


    function displaypetpetpets() {
        //Loop over pets
        var pets = document.getElementsByClassName('hp-carousel-pet');
        for (let j = 0; j < pets.length; j++) {
            //Grab pet name
            petname = pets[j].dataset.name;

            //Create new image element
            var img = document.createElement('img');
            img.width = "30";
            img.height = "30";
            img.id = petname + 'petpetpet';

            //Retrieve petpetpet image for pet from localStorage
            petpetpetimg = localStorage.getItem(img.id);

            //Run petpetpet image through processing script on my server and set as src for new image element
            
            img.src = "https://lel.wtf/petpet/" + petpetpetimg.replace('https://images.neopets.com/', '').replace('http://images.neopets.com/', '').replace('//images.neopets.com/', '');
        

            //Position petpetpet image and soften edges with CSS drop shadow filter
            var glowstr = 2;
            img.setAttribute("style", "position:absolute;left:55px;bottom:-10px;-webkit-filter: drop-shadow(1px 1px " + glowstr + "px white) drop-shadow(-1px -1px " + glowstr + "px white) drop-shadow(1px -1px " + glowstr + "px white) drop-shadow(-1px 1px " + glowstr + "px white);filter: drop-shadow(1px 1px " + glowstr + "px white) drop-shadow(-1px -1px " + glowstr + "px white) drop-shadow(1px -1px " + glowstr + "px white) drop-shadow(-1px 1px " + glowstr + "px white);")

            //Write to DOM
            pets[j].appendChild(img);
        }
    }



    //If your are on the homepage run the functions.
    //Later I can use different functions to add petpets/petpetpets to other pages without needing to run getpetpets()/getpetpetpets() as the image URLs will persist in localStorage
    if (document.location == "https://www.neopets.com/home/index.phtml" || document.location == "https://www.neopets.com/home/") {
        getpetpets();
        displaypetpets();
        getpetpetpets();
        displaypetpetpets();
    }
})();