// ==UserScript==
// @name Gota.io Skin Gallery
// @namespace http://tampermonkey.net/
// @version 0.32
// @description Just a simple script that helps you manage your skins.
// @author Amy
// @match https://skins.gota.io/skins
// @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 none
// ==/UserScript==
(function() {
'use strict';
const my_css = GM_getResourceText("IMPORTED_CSS");
GM_addStyle(my_css);
const local__storage = window.localStorage;
const defaultSkinSize = 250;
const defaultCols = 5;
const container = document.querySelector('.grid.grid-cols-4.gap-4');
const containerOfContainer = document.querySelector('.px-8.py-3.border-t.border-gray-700');
const nrCols = document.querySelector('.grid.grid-cols-4.gap-4');
const names = container.querySelectorAll('.text-lg.font-bold');
const skins = container.querySelectorAll('.flex.flex-col');
const submit__button = document.querySelector('.button.is-primary');
const computedNames = [];
let gallery__skins = {};
let gallery__skins__data = {};
let searched__gallery__skins = {};
let skinElements = {};
let searchedSkins = {};
let galleryState = false;
let skin__code = '';
//Create and Add and Remove DOM elements
const containerHeader = document.querySelector('.flex.justify-between')
const navbar = document.querySelector('nav');
const removeElement = containerHeader.querySelector('.flex.items-center');
removeElement.remove();
const submit__button__parent = submit__button.parentElement;
submit__button__parent.classList.add('submit__button__parent');
const skinSliderString = `${defaultSkinSize}
`;
const columsSliderString = `${defaultCols}
`;
const searchInputString = ``;
const sortButtonString = ``;
const galleryString = `Gallery
`;
const empty__container__string = ``;
const gallery__navbar__string = ``;
const add__skin__button__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 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(columnSlider);
containerHeader.insertBefore(slidersContainer, containerHeader.children[0]);
containerHeader.insertBefore(searchInput, containerHeader.children[0]);
containerHeader.insertBefore(sortButton, containerHeader.children[0]);
containerHeader.insertBefore(gallery, containerHeader.children[0]);
//Initialize defaults
(function() {
const slider1 = document.querySelector('.skinSlider');
const slider2 = document.querySelector('.colSlider');
const searchInput = document.querySelector('.search__input');
updateSkins();
slider1.value = defaultSkinSize;
slider2.value = defaultCols;
const grid = document.querySelector('.grid.grid-cols-4.gap-4');
grid.style.gridTemplateColumns = `repeat(${defaultCols},minmax(0,1fr))`;
//Fix/custom some styling
skins.forEach(skin => {
const img = skin.querySelector('img');
img.style.maxWidth = 'none';
img.style.width = `${defaultSkinSize}px`;
skin.style.justifyContent = 'center'
skin.style.alignItems = 'center';
});
})();
//Event Listeners
document.querySelector('.gallery__icon__container').addEventListener('click', function (e) {
galleryState = !galleryState;
if(galleryState) {
const empty__container = document.createRange().createContextualFragment(empty__container__string);
//const gallery__navbar = document.createRange().createContextualFragment(gallery__navbar__string);
const add__skin__button = document.createRange().createContextualFragment(add__skin__button__string);
const gallery__text = document.querySelector('.gallery__label');
gallery__text.innerText = 'My Skins';
container.remove();
//containerOfContainer.parentElement.insertBefore(gallery__navbar, containerOfContainer.parentElement.children[1]);
containerOfContainer.appendChild(empty__container);
submit__button__parent.remove();
containerHeader.appendChild(add__skin__button);
const grid = document.querySelector('.gallery__container');
grid.style.gridTemplateColumns = `repeat(${defaultCols},minmax(0,1fr))`;
//Add skins here
update__gallery();
document.querySelector('.add__skin__button').addEventListener('click', handle__click);
}else {
const gallery__text = document.querySelector('.gallery__label');
gallery__text.innerText = 'Gallery';
document.querySelector('.add__skin__button').removeEventListener("click", handle__click, false);
document.querySelector('.add__skin__button__container').remove();
containerHeader.appendChild(submit__button__parent);
document.querySelector('.gallery__container').remove();
containerOfContainer.appendChild(container);
}
});
document.querySelector('.search__input').addEventListener('input', function (e) {
if(galleryState === false) {
updateSkins();
searchedSkins = {};
for(const element in skinElements) {
if(element.includes(e.srcElement.value)) {
searchedSkins[element] = skinElements[element];
}
}
removeSkins();
insertSkins(container, searchedSkins);
}else {
const gallery__cont = document.querySelector('.gallery__container');
searched__gallery__skins = {};
for(const element in gallery__skins__data) {
if(element.includes(e.srcElement.value)) {
searched__gallery__skins[element] = gallery__skins__data[element];
}
}
removeSkins(true);
insertSkins(gallery__cont, searched__gallery__skins, true);
}
}, false);
document.querySelector('.corner-button').addEventListener('click', function (e) {
const gallery__cont = document.querySelector('.gallery__container');
if(galleryState && !isEmpty(searched__gallery__skins)){
sortSkins(gallery__cont, searched__gallery__skins, true);
//update__gallery();
}else if(galleryState && isEmpty(searched__gallery__skins)){;
sortSkins(gallery__cont, gallery__skins__data, true);
//update__gallery();
}else if(isEmpty(searchedSkins)) {
sortSkins(container, skinElements);
}else {
sortSkins(container, searchedSkins);
}
});
document.querySelector('.skinSlider').addEventListener('input', function (e) {
const span = document.querySelector('.skinSpan');
span.innerText = e.srcElement.value;
if(galleryState === false) {
skins.forEach(skin => {
const img = skin.querySelector('img');
img.style.width = `${e.srcElement.value}px`;
});
}else {
const gallery__skins = document.querySelectorAll('.gallery__skin');
gallery__skins.forEach(skin => {
const img = skin.querySelector('img');
img.style.width = `${e.srcElement.value}px`;
});
}
}, false);
document.querySelector('.colSlider').addEventListener('input', function (e) {
const span = document.querySelector('.colSpan');
span.innerText = e.srcElement.value;
const grid = document.querySelector('.grid.grid-cols-4.gap-4');
grid.style.gridTemplateColumns = `repeat(${e.srcElement.value},minmax(0,1fr))`;
}, false);
//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 ⬇------⬇
function sortSkins(cont, elem, gal = false) {
updateSkins(gal);
elem = sortSkinElements(elem);
removeSkins(gal);
insertSkins(cont, elem, gal);
};
//Sort object
function sortSkinElements(elems) {
elems = sortObject(elems);
return elems;
}
//Update skins object
function updateSkins(gal = false) {
if(gal) {
return 0;
}else{
skinElements = {};
for(let i = 0; i < names.length; i++) {
skinElements[names[i].outerText] = skins[i];
}
}
};
//Remove skins from DOM
function removeSkins(gal = false) {
if(gal) {
const gal__container = document.querySelector('.gallery__container');
gal__container.innerHTML = '';
}else {
for(let i = 0; i < names.length; i++) {
skins[i].remove();
}
}
};
//Insert skins in DOM
function insertSkins(cont, elements, gal = false) {
if(gal === false) {
for(const element in elements) {
cont.appendChild(elements[element]);
}
}else {
for(const element in elements) {
const skin__template__string = `
${element}
${skin}