Skin Manager (gota.io)

Just a simple script that helps you manage your skins.

// ==UserScript==
// @name         Skin Manager (gota.io)
// @namespace    http://tampermonkey.net/
// @version      0.63
// @description  Just a simple script that helps you manage your skins.
// @author       Amy
// @match        https://skins.gota.io/skins
// @downloadUrl
// @icon         https://skin-data.gota.io/e6e200b3-5e6d-406f-8ab6-0338f4ba09cf.png
// @resource     IMPORTED_CSS https://raw.githubusercontent.com/Aymayy/css-files/main/style.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    const my_css = GM_getResourceText("IMPORTED_CSS");
    GM_addStyle(my_css);
    const local__storage = window.localStorage;
    const default__skin__size = 250;
    const default__cols = 5;
    const container__of__container = document.querySelector('.px-8.py-3.border-t.border-gray-700');
    const submit__button = document.querySelector('.button.is-primary');
    let gallery__skins__data = {};
    let gallery__skins = {};
    let searched__gallery__skins = {};
    let skin__data = {};
    let skin__elements = {};
    let searched__skins = {};
    let gallery__state = false;
    let skin__code = '';
    let bottom__scrolls = 1;
    let skins__each__scroll = 50;
    let is__sorted = false;
    let randomized__skins = {};
    let randomized__gallery__skins = {};


    //Create and Add and Remove DOM elements
    const container__header = document.querySelector('.flex.justify-between')
    const navbar = document.querySelector('nav');


    const remove__element = container__header.querySelector('.flex.items-center');
    remove__element.remove();

    const submit__button__parent = submit__button.parentElement;
    submit__button__parent.classList.add('submit__button__parent');

    const myskins__container = document.querySelector('.grid.grid-cols-4.gap-4');
    myskins__container.classList.add('myskins__container');


    const skinSliderString = `<div class="slider-container" style="display: flex; justify-content: space-between; align-items: center; width: 15rem;"><label>Size</label><input type="range" min="50" max="1000" value="${default__skin__size}" class="slider skinSlider" id="myRange"><span class="skinSpan">${default__skin__size}</span></div>`;
    const columsSliderString = `<div class="slider-container" style="display: flex; justify-content: space-between; align-items: center; width: 15rem;"><label>Cols</label><input type="range" min="1" max="25" value="${default__cols}" class="slider colSlider" id="myRange"><span class="colSpan">${default__cols}</span></div>`;
    const searchInputString = `<div class="form__group field"><input type="input" class="search__input form__field" autocapitalize="off" spellcheck="false" placeholder="Search" name="name" id='name' required /><label for="name" class="form__label">Search</label></div>`;
    const sortButtonString = `<button class="corner-button"><span>Sort</span></button>`;
    const galleryString = `<a class="gallery__icon__container flex items-center"><svg class="gallery__icon" height="30pt" viewBox="1 -47 511.999 511" width="30pt" xmlns="http://www.w3.org/2000/svg"><path d="m469.488281 84.417969h-4.390625c-2.570312-22.023438-20.292968-39.484375-42.441406-41.621094-2.542969-23.742187-22.683594-42.296875-47.085938-42.296875h-302.21875c-40.445312 0-73.351562 32.90625-73.351562 73.347656v211.902344c0 24.574219 18.804688 44.828125 42.773438 47.144531 2.515624 23.488281 22.261718 41.886719 46.3125 42.273438.0625 4.167969.714843 8.191406 1.898437 11.988281 5.386719 17.292969 21.550781 29.882812 40.59375 29.882812h337.910156c23.441407 0 42.511719-19.070312 42.511719-42.507812v-247.601562c0-23.441407-19.070312-42.511719-42.511719-42.511719zm22.511719 42.511719v163.738281l-43.5-32.859375c-11.886719-8.976563-27.960938-9.117188-40-.347656l-55.027344 40.09375-104.9375-108.1875c-12.5-12.890626-32.839844-13.683594-46.304687-1.800782l-93.160157 82.191406v-142.828124c0-12.414063 10.097657-22.511719 22.507813-22.511719h337.910156c12.414063 0 22.511719 10.097656 22.511719 22.511719zm0 247.597656c0 12.414062-10.097656 22.511718-22.507812 22.511718h-337.914063c-10.082031 0-18.640625-6.667968-21.492187-15.824218-.660157-2.113282-1.015626-4.359375-1.015626-6.683594v-78.105469l106.394532-93.863281c5.441406-4.804688 13.660156-4.484375 18.714844.726562l47.359374 48.828126c0 .003906 0 .003906.003907.003906l94.261719 97.183594c1.960937 2.023437 4.566406 3.039062 7.179687 3.039062 2.507813 0 5.019531-.9375 6.960937-2.820312 3.960938-3.847657 4.058594-10.175782.214844-14.140626l-22.625-23.328124 52.742188-38.425782c4.867187-3.546875 11.363281-3.492187 16.167968.136719l55.554688 41.964844zm-429.5-46.707032v-236.109374c0-1.003907.050781-2 .152344-2.976563 1.492187-14.675781 13.925781-26.164063 28.988281-26.164063h122.320313c5.523437 0 10-4.476562 10-10 0-5.523437-4.476563-10-10-10h-122.320313c-27.097656 0-49.140625 22.042969-49.140625 49.140626v220.976562c-12.777344-2.300781-22.5-13.503906-22.5-26.9375v-211.902344c0-29.414062 23.933594-53.347656 53.351562-53.347656h302.21875c13.273438 0 24.371094 9.503906 26.84375 22.070312h-108.453124c-5.523438 0-10 4.476563-10 10 0 5.523438 4.476562 10 10 10h118.96875.011718 5.128906c13.195313 0 24.242188 9.394532 26.800782 21.847657h-313.292969c-23.4375 0-42.507813 19.070312-42.507813 42.511719v164.976562.007812 63.253907c-14.722656-.417969-26.570312-12.523438-26.570312-27.347657zm0 0"></path><path d="m388.515625 145.117188c-23.601563 0-42.796875 19.199218-42.796875 42.792968 0 23.597656 19.199219 42.796875 42.796875 42.796875 23.59375 0 42.792969-19.199219 42.792969-42.796875 0-23.59375-19.199219-42.792968-42.792969-42.792968zm0 65.589843c-12.570313 0-22.796875-10.226562-22.796875-22.792969 0-12.570312 10.226562-22.796874 22.796875-22.796874 12.566406 0 22.792969 10.226562 22.792969 22.796874 0 12.566407-10.226563 22.792969-22.792969 22.792969zm0 0"></path><path d="m244.730469 56.398438c.25.601562.558593 1.179687.917969 1.722656.363281.546875.78125 1.058594 1.242187 1.519531.460937.457031.96875.878906 1.519531 1.25.539063.359375 1.128906.667969 1.730469.917969.597656.25 1.230469.441406 1.871094.570312.636719.128906 1.296875.191406 1.949219.191406.660156 0 1.308593-.0625 1.960937-.191406.636719-.128906 1.257813-.320312 1.867187-.570312.601563-.25 1.179688-.558594 1.722657-.917969.546875-.371094 1.058593-.792969 1.519531-1.25.46875-.460937.878906-.972656 1.25-1.519531.359375-.542969.667969-1.121094.917969-1.722656.25-.609376.441406-1.238282.570312-1.867188.128907-.652344.191407-1.3125.191407-1.960938 0-.652343-.0625-1.3125-.191407-1.949218-.128906-.640625-.320312-1.273438-.570312-1.871094-.25-.609375-.558594-1.191406-.917969-1.730469-.371094-.550781-.78125-1.058593-1.25-1.519531-.460938-.460938-.972656-.878906-1.519531-1.242188-.542969-.359374-1.121094-.667968-1.722657-.917968-.609374-.25-1.230468-.441406-1.867187-.570313-1.292969-.261719-2.621094-.261719-3.910156 0-.640625.128907-1.273438.320313-1.871094.570313-.601563.25-1.191406.558594-1.730469.917968-.550781.363282-1.058594.78125-1.519531 1.242188s-.878906.96875-1.242187 1.519531c-.359376.539063-.667969 1.121094-.917969 1.730469-.25.597656-.441407 1.230469-.570313 1.871094-.128906.636718-.199218 1.296875-.199218 1.949218 0 .648438.070312 1.308594.199218 1.960938.128906.628906.320313 1.257812.570313 1.867188zm0 0"></path></svg><h3 class="gallery__label text-lg leading-6 font-medium text-gray-200">My Skins</h3></a>`;
    const empty__gallery__container__string = `<div class="gallery__container grid grid-cols-4 gap-4"></div>`;
    const empty__myskins__container__string = `<div class="myskins__container grid grid-cols-4 gap-4"></div>`;
    const gallery__navbar__string = `<div class="gallery__navbar__container px-4 py-5 sm:px-6 flex justify-between "></div>`;
    const add__skin__button__string = `<div class="add__skin__button__container"><a class="add__skin__button button is-primary">Add Skin By Code</a></div>`;
    const dice__string = `<svg id="Layer_9" enable-background="new 100 100 412 412" height="40" viewBox="0 0 512 512" width="40"><path class="path_one" d="m491 128.984v254.034c0 12.6-7.252 24.078-18.638 29.498l-202.286 96.303c-4.448 2.124-9.268 3.181-14.076 3.181s-9.617-1.057-14.065-3.181l-202.296-96.303c-11.387-5.42-18.639-16.898-18.639-29.498v-254.034c0-6.546 1.952-12.788 5.441-18.038 3.206-4.858 7.731-8.866 13.204-11.459l202.29-96.31c8.897-4.237 19.234-4.237 28.142 0l202.29 96.31c5.473 2.592 9.987 6.601 13.193 11.459 3.488 5.25 5.44 11.491 5.44 18.038z" fill="#e53935"/><path class="path_two" d="m485.559 110.946c-3.206-4.858-7.72-8.866-13.193-11.459l-202.29-96.31c-8.908-4.237-19.244-4.237-28.142 0l-1.39.662 200.9 95.648c5.473 2.592 9.988 6.601 13.193 11.459 3.489 5.25 5.441 11.491 5.441 18.038v254.034c0 12.6-7.252 24.078-18.638 29.498l-200.896 95.641 1.39.662c4.449 2.124 9.258 3.181 14.066 3.181s9.628-1.057 14.076-3.181l202.286-96.303c11.386-5.42 18.638-16.898 18.638-29.498v-254.034c0-6.547-1.952-12.788-5.441-18.038z" fill="#d32f2f"/><path class="path_three" d="m256 220.239v291.761c-4.808 0-9.617-1.057-14.065-3.181l-202.296-96.303c-11.387-5.42-18.639-16.898-18.639-29.498v-254.034c0-6.546 1.952-12.788 5.441-18.038z" fill="#f44336"/><path class="path_four" d="m491 128.984v254.041c0 12.461-7.109 23.843-18.296 29.333-.109.054-.229.109-.338.163l-202.29 96.299c-4.448 2.123-9.268 3.18-14.076 3.18v-291.761l229.559-109.293c3.489 5.25 5.441 11.491 5.441 18.038z" fill="#d32f2f"/><path class="path_five" d="m485.559 110.946-25.994 12.376c.326 1.851.513 3.741.513 5.662v254.041c0 12.461-7.109 23.843-18.296 29.333-.109.054-.229.109-.338.163l-185.444 88.28v11.199c4.808 0 9.628-1.057 14.076-3.181l202.29-96.299c.109-.054.229-.109.338-.163 11.187-5.49 18.296-16.872 18.296-29.333v-254.04c0-6.547-1.952-12.788-5.441-18.038z" fill="#c62828"/><g fill="#f1f1f1"><ellipse cx="389.64" cy="306.507" rx="26.736" ry="19.708" transform="matrix(.134 -.991 .991 .134 33.735 651.612)"/><ellipse cx="190.492" cy="263.252" rx="19.607" ry="26.736" transform="matrix(.999 -.055 .055 .999 -14.066 10.775)"/><ellipse cx="78.302" cy="360.193" rx="19.607" ry="26.736" transform="matrix(.999 -.055 .055 .999 -19.517 4.803)"/><ellipse cx="161.083" cy="104.225" rx="26.736" ry="19.607" transform="matrix(.999 -.055 .055 .999 -5.442 8.935)"/><ellipse cx="253.668" cy="58.477" rx="26.736" ry="19.607" transform="matrix(.999 -.055 .055 .999 -2.81 13.914)"/><ellipse cx="350.609" cy="107.492" rx="26.736" ry="19.607" transform="matrix(.999 -.055 .055 .999 -5.338 19.27)"/><ellipse cx="260.203" cy="149.972" rx="26.736" ry="19.607" transform="matrix(.999 -.055 .055 .999 -7.788 14.406)"/></g></svg>`;
    const star__string = `<svg class='star' width="35" height="35" viewBox="0 -10 511.98685 511"><path class='star_path' d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0" fill="#ffc107"/></svg>`;
    const spacer_string = `<div class='spacer'></div>`;

    const skinSlider = document.createRange().createContextualFragment(skinSliderString);
    const columnSlider = document.createRange().createContextualFragment(columsSliderString);
    const searchInput = document.createRange().createContextualFragment(searchInputString);
    const sortButton = document.createRange().createContextualFragment(sortButtonString);
    const gallery = document.createRange().createContextualFragment(galleryString);
    const dice = document.createRange().createContextualFragment(dice__string);
    const star = document.createRange().createContextualFragment(star__string);
    const spacer = document.createRange().createContextualFragment(spacer_string);

    const slidersContainer = document.createElement('div');
    slidersContainer.classList.add('sliders-container');
    slidersContainer.style = 'display: flex; justify-content: space-around; align-items: center; width: 40%';
    slidersContainer.appendChild(skinSlider);
    slidersContainer.appendChild(spacer.cloneNode(true));
    slidersContainer.appendChild(columnSlider);
    slidersContainer.appendChild(spacer.cloneNode(true));

    container__header.insertBefore(slidersContainer, container__header.children[0]);
    container__header.insertBefore(searchInput, container__header.children[0]);
    container__header.insertBefore(sortButton, container__header.children[0]);
    container__header.insertBefore(gallery, container__header.children[0]);
    container__header.insertBefore(dice, container__header.children[2]);
    container__header.insertBefore(star, container__header.children[1]);
    container__header.insertBefore(spacer.cloneNode(true), container__header.children[1]);
    container__header.insertBefore(spacer.cloneNode(true), container__header.children[3]);

    //Initialize defaults
    (function() {
        const container = document.querySelector('.myskins__container');
        const skins = container.querySelectorAll('.flex.flex-col');
        const slider1 = document.querySelector('.skinSlider');
        const slider2 = document.querySelector('.colSlider');
        const searchInput = document.querySelector('.search__input');

        get__myskins();
        fetch__skins();
        update__skins();

        slider1.value = default__skin__size;
        slider2.value = default__cols;
        const grid = document.querySelector('.grid.grid-cols-4.gap-4');
        grid.style.gridTemplateColumns = `repeat(${default__cols},minmax(0,1fr))`;
        //Fix/custom some styling
        skins.forEach(skin => {
            const img = skin.querySelector('img');
            img.style.maxWidth = 'none';
            img.style.width = `${default__skin__size}px`;
            skin.style.justifyContent = 'center'
            skin.style.alignItems = 'center';
        });
    })();


    //Event Listeners
    document.querySelector('.gallery__icon__container').addEventListener('click', function (e) {
        gallery__state = !gallery__state;
        searched__skins = {};
        searched__gallery__skins = {};

        if(gallery__state) {
            const container = document.querySelector('.myskins__container');
            const empty__container = document.createRange().createContextualFragment(empty__gallery__container__string);
            const add__skin__button = document.createRange().createContextualFragment(add__skin__button__string);
            const gallery__text = document.querySelector('.gallery__label');
            const search__bar = document.querySelector('.search__input');
            search__bar.value = '';

            gallery__text.innerText = 'Gallery';

            container.remove();

            container__of__container.appendChild(empty__container);
            submit__button__parent.remove();
            container__header.appendChild(add__skin__button);

            randomized__gallery__skins = {};
            randomized__skins = {};
            sort__handler(undefined, false);
            //Add skins here
            update__skins();

            document.querySelector('.add__skin__button').addEventListener('click', handle__click);
        }else {
            const gallery__text = document.querySelector('.gallery__label');
            const container = document.createRange().createContextualFragment(empty__myskins__container__string);
            const search__bar = document.querySelector('.search__input');
            search__bar.value = '';

            gallery__text.innerText = 'My Skins';

            document.querySelector('.add__skin__button').removeEventListener("click", handle__click, false);
            document.querySelector('.add__skin__button__container').remove();
            container__header.appendChild(submit__button__parent);
            document.querySelector('.gallery__container').remove();
            container__of__container.appendChild(container);
            randomized__gallery__skins = {};
            randomized__skins = {};
            sort__handler(undefined, false);

            //Add skins here
            update__skins();
        }
    });

    document.querySelector('.corner-button').addEventListener('click', sort__handler);

    document.querySelector('#Layer_9').addEventListener('click', randomize__skins);

    document.querySelector('.star').addEventListener('click', get__favorite__skins);

    document.querySelector('.search__input').addEventListener('input', input__search, false);

    document.querySelector('.skinSlider').addEventListener('input', update__skin__size, false);

    document.querySelector('.colSlider').addEventListener('input', update__skin__col, false);

    document.querySelector('.skinSlider').addEventListener('change', scroll__event__onchange, false);

    document.querySelector('.colSlider').addEventListener('change', scroll__event__onchange, false);

    window.onscroll = scroll__event;

    //Remove the annoying logo
    const containerSize = document.querySelector('.container.flex.flex-col.items-center.justify-center.mx-auto');
    containerSize.firstElementChild.remove();

    containerSize.firstElementChild.style.width = '100%';



    //                        ⬇------⬇ Functions ⬇------⬇
    //Remove skins from DOM
    function remove__skins() {
        const container = document.querySelector('.myskins__container');
        if(gallery__state) {
            const gal__container = document.querySelector('.gallery__container');
            gal__container.innerHTML = '';
        }else {
            container.innerHTML = '';
        }
    };
    function update__skin__size() {
        const span = document.querySelector('.skinSpan');
        const e = document.querySelector('.skinSlider');
        span.innerText = e.value;
        if(gallery__state) {
            const container = document.querySelector('.gallery__container');
            const gallery__skins = container.querySelectorAll('.flex.flex-col');
            gallery__skins.forEach(skin => {
                const img = skin.querySelector('img');
                img.style.width = `${e.value}px`;
            });
        }else {
            const container = document.querySelector('.myskins__container');
            const skins = container.querySelectorAll('.flex.flex-col');
            skins.forEach(skin => {
                const img = skin.querySelector('img');
                img.style.width = `${e.value}px`;
            });
        }
    }
    function update__skin__col() {
        const span = document.querySelector('.colSpan');
        const e = document.querySelector('.colSlider');
        span.innerText = e.value;
        const grid = document.querySelector('.grid.grid-cols-4.gap-4');
        grid.style.gridTemplateColumns = `repeat(${e.value},minmax(0,1fr))`;
    }

    function sort__object(o) {
        var sorted = {},
            key, a = [];

        for (key in o) {
            if (o.hasOwnProperty(key)) {
                a.push(key);
            }
        }

        var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
        a.sort(collator.compare);

        for (key = 0; key < a.length; key++) {
            sorted[a[key]] = o[a[key]];
        }
        return sorted;
    }
    function is__empty(obj) {
        for(var prop in obj) {
            if(obj.hasOwnProperty(prop)) {
                return false;
            }
        }

        return true;
    }
    async function handle__click(e) {
        skin__code = prompt("Enter skin code:\nHere you find how to get code for a skin:\nhttps://github.com/Aymayy/css-files", "");
        if(skin__code === null || skin__code === '') {
            console.log("Cancelled");
            return 0;
        }else {
            await submit__skin__code(skin__code);
            fetch__skins();
        }
    }
    function httpGetAsync(theUrl, callback) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                callback(xmlHttp.responseText);
            }
        }
        xmlHttp.open("GET", theUrl, true); // true for asynchronous
        xmlHttp.send(null);
    }
     async function submit__skin__code(code) {
         const url = `https://skins-data.com/skins/${code}`;
         let username = document.querySelector('.mx-2.text-base.text-semibold.text-gray-300');
         username.style.fontFamily = 'Arial, Helvetica, sans-serif';
         username = username.innerText.toString();
         console.log(username);
         const headers = {
             'Content-Type': 'application/json'
         }
         const body = {
             username
         }
         var fetch__data;
         await fetch(url, {
             method: 'POST',
             headers,
             body: JSON.stringify(body)
         })
             .then((response) => {
             return response.text();
         })
             .then((data) => {
             fetch__data = JSON.parse(data);
             if(fetch__data.message) {
                 alert(fetch__data.message);
                 update__local__storage();
                 update__skins();
             }else if(fetch__data.error) {
                 alert(fetch__data.error);
             }
         });
     }
    function update__skins() {
        if(gallery__state) {
            if(local__storage.getItem('__skins')) {
                gallery__skins = JSON.parse(local__storage.getItem('__skins'));
            }
            if(is__empty(searched__gallery__skins) && document.querySelector('.search__input').value !== ''){
                gallery__skins = {};
            }else if(!is__empty(searched__gallery__skins)) {
                gallery__skins = searched__gallery__skins;
            }
            if(is__sorted) {
                gallery__skins = sort__object(gallery__skins);
                randomized__gallery__skins = {};
            }
            if(!is__empty(randomized__gallery__skins)) {
                gallery__skins = randomized__gallery__skins;
            }
            const gal__container = document.querySelector('.gallery__container');
            gal__container.innerHTML = '';
            let i = 0;
            remove__skins();
            for(const skin in gallery__skins) {
                if(i === bottom__scrolls * skins__each__scroll) break;
                const skin__template__string = `<div class="gallery__skin flex flex-col" style="justify-content: center; align-items: center;"><a href="/skins/${gallery__skins[skin]}"><img class="rounded-full" src="https://skin-data.gota.io/${gallery__skins[skin]}.png" style="max-width: none; width: 250px;"></a><div class="inline-flex justify-center items-center"><span class="text-lg font-bold">${skin}</span></div></div>`;
                const skin__template = document.createRange().createContextualFragment(skin__template__string);
                skin__template.querySelector('img').setAttribute('loading', 'lazy');
                document.querySelector('.gallery__container').appendChild(skin__template);
                i++;
            }
        }else {
            const container = document.querySelector('.myskins__container');
            skin__elements = skin__data;
            if(is__empty(searched__skins) && document.querySelector('.search__input').value !== ''){
                skin__elements = {};
            }else if(!is__empty(searched__skins)) {
                skin__elements = searched__skins;
            }
            if(is__sorted) {
                skin__elements = sort__object(skin__elements);
                randomized__skins = {};
            }else if(!is__empty(randomized__skins)) {
                skin__elements = randomized__skins;
            }
            remove__skins();
            for(const element in skin__elements) {
                //const add_favorite__button__string = `<svg class='add_favorite' version="1.1" id="Layer_1" x="0px" y="0px" width="40" height="40" viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve"><path class="add_favorite_path" style="fill:#3DB39E;" d="M143.027,0C64.031,0,0,64.04,0,143.027c0,78.996,64.031,143.027,143.027,143.027 c78.987,0,143.027-64.031,143.027-143.027C286.045,64.04,222.014,0,143.027,0z M143.027,259.236 c-64.183,0-116.209-52.026-116.209-116.209s52.026-116.2,116.209-116.2c64.174,0,116.209,52.017,116.209,116.2 S207.201,259.236,143.027,259.236z M196.832,125.149h-35.936V89.392c0-4.934-4.005-8.939-8.939-8.939h-17.878 c-4.943,0-8.939,4.005-8.939,8.939v35.757H89.401c-4.952,0-8.957,4.005-8.957,8.939v17.878c0,4.943,4.005,8.939,8.957,8.939h35.748 v35.676c0,4.934,3.996,8.93,8.939,8.93h17.878c4.934,0,8.939-3.996,8.939-8.93v-35.676h35.936c4.952,0,8.957-3.996,8.957-8.939 v-17.878C205.789,129.162,201.775,125.149,196.832,125.149z"/></svg>`;
                const skin__template__string = `<div class="gallery__skin flex flex-col" style="justify-content: center; align-items: center;"><a href="/skins/${skin__elements[element]}"><img class="rounded-full" src="https://skin-data.gota.io/${skin__elements[element]}.png" style="max-width: none; width: 250px;"></a><div class="inline-flex justify-center items-center"><span class="text-lg font-bold">${element}</span></div></div>`;
                const skin__template = document.createRange().createContextualFragment(skin__template__string);
                //const add__favorite__button = document.createRange().createContextualFragment(add_favorite__button__string);
                //skin__template.querySelector('.gallery__skin').append(add__favorite__button);
                skin__template.querySelector('img').setAttribute('loading', 'lazy');
                container.appendChild(skin__template);

            }
        }
        update__skin__size();
        update__skin__col();
    }
    function update__local__storage() {
         local__storage.setItem('__skins', JSON.stringify(gallery__skins));
    }
    function merge__objects(obj1, obj2) {
        return Object.assign(obj1, obj2);
    }

    async function fetch__skins() {
        const url = `https://skins-data.com/skins`;
        var fetch__data;
        await fetch(url, {
            method: 'GET'
        })
            .then((response) => {
            return response.text();
        })
            .then((data) => {
            fetch__data = data;
        });
        gallery__skins__data = JSON.parse(fetch__data);
        local__storage.setItem('__skins', fetch__data);
        update__skins();
    }
    function scroll__event() {
        if(Object.keys(gallery__skins).length >= bottom__scrolls * skins__each__scroll) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                bottom__scrolls++;
                update__skins();
            }
        }
    }
    function scroll__event__onchange() {
        if(Object.keys(gallery__skins).length >= bottom__scrolls * skins__each__scroll) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                bottom__scrolls += Math.floor(window.innerHeight / 15);
                update__skins();
            }
        }
    }
    function sort__handler(ev, value) {
        const e = document.querySelector('.corner-button');
        if(value !== null && value !== undefined) {
            is__sorted = value;
        } else {
            is__sorted = !is__sorted;
        }
        if(is__sorted) {
            e.innerText = 'Unsort';
        }else {
            e.innerText = 'Sort';
        }
        update__skins();
    }
    function get__myskins() {
        const container = document.querySelector('.myskins__container');
        const skins = container.querySelectorAll('.flex.flex-col');
        const names = container.querySelectorAll('.text-lg.font-bold');
        skins.forEach(skin => {
            const img = skin.querySelector('img');
            const name = skin.querySelector('span').innerText;
            let code__url = img.src;
            code__url = code__url.replace('https://skin-data.gota.io/', '');
            code__url = code__url.replace('.png', '');
            skin__data[name] = code__url;
        });
        return skin__data;
    }
    function input__search(e) {
        if(gallery__state) {
            searched__gallery__skins = {};
            for(const element in gallery__skins__data) {
                if(element.includes(e.srcElement.value)) {
                    searched__gallery__skins[element] = gallery__skins__data[element];
                }
            }
        }else {
            update__skins();
            searched__skins = {};
            for(const element in skin__data) {
                if(element.includes(e.srcElement.value)) {
                    searched__skins[element] = skin__data[element];
                }
            }
        }
        if(e.srcElement.value === null || e.srcElement.value === '' || e.srcElement.value === undefined) {
            searched__skins = {};
            searched__gallery__skins = {};
        }
        randomized__gallery__skins = {};
        randomized__skins = {};
        update__skins();
    }
    function randomize__object(obj) {
        const randomized__object = {};
        var keys = Object.keys(obj);
        keys.sort(function(a,b) {return Math.random() - 0.5;});
        keys.forEach(function(key) {
            randomized__object[key] = obj[key];
        });
        return randomized__object;
    }
    function randomize__skins(e) {
        sort__handler(undefined, false);
        if(gallery__state) {
            if(!is__empty(searched__gallery__skins)) {
                randomized__gallery__skins = randomize__object(searched__gallery__skins);
            } else {
                randomized__gallery__skins = randomize__object(gallery__skins__data);
            }
        } else {
            if(!is__empty(searched__skins)) {
                randomized__skins = randomize__object(searched__skins);
            } else {
                randomized__skins = randomize__object(skin__data);
            }
        }
        update__skins();
    }
    function get__favorite__skins() {
        alert('Coming soon...')
    }
})();