miketrethewey / ALttPR Sprite Favorites

// ==UserScript==
// @namespace	https://openuserjs.org/users/miketrethewey
// @name		ALttPR Sprite Favorites
// @description	Allows saving of "Favorite" sprites to be used in the generator
// @copyright	2021, miketrethewey (https://openuserjs.org/users/miketrethewey)
// @license		MIT
// @version		1.0.0
// @run-at      document-idle
// @require		https://gist.github.com/raw/2625891/waitForKeyElements.js
// @include		https://alttpr.com/*/h/*
// @include		https://alttpr.com/*/sprite_preview
// @grant		none
// ==/UserScript==

// ==OpenUserJS==
// @author	miketrethewey
// ==/OpenUserJS==

waitForKeyElements(".icon-custom-LoadCustomSprite", doBothThings);

var localStorageKey = "alttpr-sprite-favorites";

function getFaves() {
    var tmp = window.localStorage.getItem(localStorageKey);
    if(tmp) {
        tmp = JSON.parse(tmp);
    } else {
        tmp = [];
    }
    return tmp;
}
function setFaves(faves) {
    window.localStorage.setItem(localStorageKey, JSON.stringify(faves));
}
function delAFavorite(slug) {
    var faves = getFaves();
    faves = faves.filter(
        function(v,i,arr) {
            return v != null && v != slug;
        }
    );
    setFaves(faves);
//    console.log("DEL", slug, faves);
}
function saveAFavorite(slug) {
    var faves = getFaves();
    if(faves.indexOf(slug) == -1) {
        faves.push(slug);
    }
    setFaves(faves);
//    console.log("SAVE", slug, faves);
}
function processAFavorite(id,save) {
    var slug = id.replace("sprite-select-","");
    var faves = getFaves();
    var sprite = document.getElementsByClassName(id.replace("sprite-select-","icon-custom-"))[0].parentNode;

    if(save) {
        sprite.style.backgroundImage = "url(https://alttpr.com/favicon.ico)";
        sprite.style.backgroundPosition = "bottom right";
        sprite.style.backgroundRepeat = "no-repeat";
        saveAFavorite(slug);
    } else {
        sprite.style.backgroundImage = "url()";
        delAFavorite(slug);
    }
}

function doThePlayAsListingThing() {
    var sprite_selector = document.getElementById("sprite-gfx");
    if(sprite_selector) {
        console.log("We're on a permalink page.");
        var faves = getFaves();
        var sprites = sprite_selector.getElementsByTagName("li");
        for(var sprite in sprites) {
            if(sprites.hasOwnProperty(sprite)) {
                sprite = sprites[sprite];
                var sprite_slug = sprite.querySelectorAll("div[class*=icon-custom-]");
                if(sprite_slug.length > 0) {
                    sprite_slug = sprite_slug[0];
                    var obj = sprite_slug.parentNode;
                    if(faves.indexOf(sprite_slug.classList[1].replace("icon-custom-","")) > -1) {
                        obj.style.backgroundImage = "url(https://alttpr.com/favicon.ico)";
                        obj.style.backgroundPosition = "bottom right";
                        obj.style.backgroundRepeat = "no-repeat";
                        console.log("Y",sprite_slug);
                    } else {
                        obj.style.backgroundImage = "url()";
                    }
                }
            }
        }
    } else {
        return;
    }
}
function doTheFavoritesSelectionThing() {
    var sprites = document.getElementsByClassName("sprite");
    if(sprites.length > 0) {
        console.log("We're on the main sprite listing preview page.");

        var slugs = [];
        var faves = getFaves();
        console.log(faves);
        for(var sprite in sprites) {
            if(sprites.hasOwnProperty(sprite)) {
                sprite = sprites[sprite];
                var sprite_class = sprite.getElementsByClassName("sprite-preview")[0].className;
                var sprite_name = sprite.getElementsByClassName("sprite-name")[0];
                var slug = sprite_class.match(/icon-custom-(.*)/)[1];

                var checkbox = document.createElement("input");
                checkbox.setAttribute("type","checkbox");
                checkbox.id = "sprite-select-" + slug;
                checkbox.checked = faves.indexOf(slug) > -1;
                checkbox.style.verticalAlign = "bottom";
                checkbox.classList.add("float-left");
                checkbox.addEventListener("change",function(){processAFavorite(this.id,this.checked)});
                if(checkbox.checked) {
                    sprite.style.backgroundImage = "url(https://alttpr.com/favicon.ico)";
                    sprite.style.backgroundPosition = "bottom right";
                    sprite.style.backgroundRepeat = "no-repeat";
                } else {
                    sprite.style.backgroundImage = "url()";
                }
                sprite_name.appendChild(checkbox);
            }
        }
    }
}
function doBothThings() {
    doThePlayAsListingThing();
    doTheFavoritesSelectionThing();
}