// ==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
// @downloadURL https://update.greasyfork.cloud/scripts/430853/Skin%20Manager%20%28gotaio%29.user.js
// @updateURL https://update.greasyfork.cloud/scripts/430853/Skin%20Manager%20%28gotaio%29.meta.js
// ==/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 = `${default__skin__size}
`;
const columsSliderString = `${default__cols}
`;
const searchInputString = ``;
const sortButtonString = ``;
const galleryString = `My Skins
`;
const empty__gallery__container__string = ``;
const empty__myskins__container__string = ``;
const gallery__navbar__string = ``;
const add__skin__button__string = ``;
const dice__string = ``;
const star__string = ``;
const spacer_string = ``;
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 = `
${skin}
${element}