Skin Storage Script

a script to easily store as many skins as you want

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         Skin Storage Script
// @namespace    http://tampermonkey.net/
// @version      0.54
// @description  a script to easily store as many skins as you want
// @author       Oki
// @match        https://*.jstris.jezevec10.com/*
// @grant        none
// ==/UserScript==

/**************************
    Skin Storage Script
**************************/
(function() {

    window.addEventListener('load', function(){

localStorage.customSkins = localStorage.customSkins || "";
localStorage.activeSkins = localStorage.activeSkins || "";
localStorage.randomizeKey = localStorage.randomizeKey || 'F4'

if(typeof trim != "function"){var trim=a=>{a=a.slice(0,-1);a=a.substr(a.indexOf("{")+1);return a}}
if(typeof getParams != "function"){var getParams=a=>{var params=a.slice(a.indexOf("(")+1);params=params.substr(0,params.indexOf(")")).split(",");return params}}


document.getElementsByName("bSkin").forEach((radioButton, i)=>{
	i>2&&(radioButton.type = "checkbox")
})

var randomizeOption = document.createElement("tr");
randomizeOption.innerHTML = '<td>Randomize skin:</td><td><input maxlength="1" id="input421" type="text" size="7" value="'+localStorage.randomizeKey+'"></td><td id="kc421">0</td>'
tab_controls.children[2].appendChild(randomizeOption);


var randomizeListener = `"input421\"==e.target.id?(e.preventDefault(),input421.value=e.key,kc421.innerHTML=e.keyCode,localStorage.randomizeKey=e.key):e.key==localStorage.randomizeKey&&Game['deployRandomSkin']();\n`

if(window.onkeyup == null) {
	window.onkeyup = function(e){}
}

var keyupFunc = window.onkeyup.toString()

if(!keyupFunc.endsWith(randomizeListener)){
	keyupParams = getParams(keyupFunc)
	keyupFunc = trim(keyupFunc) + randomizeListener
	window.onkeyup = new Function(...keyupParams, keyupFunc)
}






var plusButton=document.createElement("div");
plusButton.style = "width:20px;height:20px;background-color:green;text-align:center;font-weight:1000";
plusButton.innerHTML = "+";
plusButton.id = "plusButton";


var modalStyles=document.createElement("style");
modalStyles.innerHTML='#skinModal {display: none;position: fixed;z-index: 100;padding-top: 200px;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4)} #modalContent {color:black;background-color: white;margin: auto;padding: 20px;border: 1px solid #888;width: 60%} .xbutton {width:20px;height:20px;background-size:cover;margin-bottom:4px;margin-left:20px;filter: invert(100%)}';
document.body.appendChild(modalStyles);

var modal=document.createElement("div");
modal.id = "skinModal";
modal.innerHTML = '<div id="modalContent"><p>Please enter the new skin url. For animated skins, use this format: url1;size1 url2;size2 ...</p><input id="modalInput" style="border:2px solid black;z-index: 1000" type="text" value="https://i.imgur.com/u4SJJgE.png"><br><br><button id="modalClose" style="float:left down">Cancel</button><button id="modalConfirm" style="float:left down">OK</button></div></div>'
app.appendChild(modal);


var skinModalText = "";

modalConfirm.onclick = J=>{
	addSkin(1)
}

modalClose.onclick = N=>{
	addSkin(0)
}

function addSkin(flag) {
	skinModal.style.display = "none";
	skinModalText = modalInput.value
	if(skinModalText == ""){flag = 0}
	modalInput.value = "";

	if(!flag){
		return;
	}

    var skinNumber = localStorage.customSkins.split(",").length-1;
    localStorage.customSkins += ","+skinModalText;
    refreshSkins()

}

plusButton.onclick = X=>{
    skinModal.style.display = "block";
}

document.getElementsByName("blockSkin")[0].appendChild(plusButton);


function refreshSkins() {
	stopPreviewAnimation();
	var oldContainer = document.getElementById("allSkinContainer");
	oldContainer.parentNode.removeChild(oldContainer);
	addSkins();
	startPreviewAnimation();
}


function addSkins() {
	var skins = localStorage.customSkins.split(",")
	var allSkinContainer = document.createElement("div")
	allSkinContainer.id = "allSkinContainer"

	skins.map((skin,i)=>{
		if(i>0) {
		var src = skin.split(";")[0];
		allSkinContainer.innerHTML += `<div><input id="bskin`+i+`" type="checkbox" name="bSkin"><label for="bskin`+i+`"><img src="`+src+`" height="20"></label><img src="https://jstris.jezevec10.com/res/svg/dark/rubbish.svg" name="xbutton" class="xbutton" ></div>`
		var xbutton = document.getElementById("xbutton")
		}
	})

	document.getElementsByName("blockSkin")[0].insertBefore(allSkinContainer,plusButton)
	document.getElementsByName("xbutton").forEach((button, i)=>{
		button.addEventListener("click", W=>{var temp=localStorage.customSkins.split(',');temp.splice(i+1, 1);localStorage.customSkins=temp;refreshSkins()});
	})

}



function testCors(url) {
	/*
	var skinImg = new Image();
	skinImg.onload = function(){
	    loadSkin(this.src,this.height)
	};
	*/
    var myRequest = new XMLHttpRequest();
    myRequest.open('GET', url, true);
    myRequest.onreadystatechange = () => {
        if (myRequest.readyState !== 4) {
        	return
            //skinImg.src = url
        }
        if (myRequest.status != 200) {
            var myImage = document.createElement('img');
            //myImage.onerror=x=>{skinImg.src = "https://s.jezevec10.com/res/b1.png";}
            myImage.onload=a=>{loadSkin("https://s.jezevec10.com/res/b1.png",32)/*loadSkin("https://cors-anywhere.herokuapp.com/" + myImage.src, myImage.height);*/}
            myImage.src = url;
        } else {
        	var myImage = document.createElement('img');
        	myImage.onload=a=>{loadSkin(myImage.src, myImage.height);}
        	myImage.src = url
        }
    };
    myRequest.send();
}



function loadSkinNoSize(src) {
	var spliced = src.split(";")
    console.log(src)
	if(spliced.length>1){
		Game['animatedSkin'] = src.split(" ").map(x=>x.split(";"))
	}

	if(spliced[0].endsWith(".mp4") || spliced[0].endsWith(".webm") || spliced[0].endsWith(".gif")){
		loadVideoSkin(spliced[0])
	} else {
		testCors(spliced[0])
	}

}



Game['deployRandomSkin'] = function() {
	if (typeof Game['stopAnim'] == 'function') {
  		Game['stopAnim']();
  		Game['animatedSkin'] = []
	}

	var candidates = localStorage.activeSkins.split(",").slice(1);
	var choice = candidates[Math.floor(Math.random()*candidates.length)];
console.log(choice)
var numberOfDefaultSkins = document.getElementsByName("bSkin").length - localStorage.customSkins.split(",").length
	if(choice > numberOfDefaultSkins-1) {
		frames = localStorage.customSkins.split(",")[choice-numberOfDefaultSkins].split(" ")

		if(frames.length>1){
    		Game['animatedSkin'] = frames.map(x=>x.split(";"))
    		Game['animationRunning']&&Game['startAnim']();
    	}
	}

    loadSkinNoSize(document.getElementsByName("bSkin")[choice].nextSibling.children[0].src)
}


settingsSave.onmouseup = Y=>{

	try{
		stopPreviewAnimation();

		localStorage.activeSkins = ""
    	document.getElementsByName("bSkin").forEach((e,i)=>{
    	    if(i>2 && e.checked){
    	    	localStorage.activeSkins += ","+i;
   	    	}
   		})
   		Game['deployRandomSkin']()
	} catch(e) {
		console.log("_")
	}

}








var randomizeStart = Game['prototype']['readyGo'].toString()
randomizeStart = trim(randomizeStart) + ";setTimeout(x=>{Game['deployRandomSkin']()}, "+0+");"
Game['prototype']['readyGo'] = new Function(randomizeStart);





settings.onmouseup = Z=>{
	startPreviewAnimation();

	setTimeout(U=>{
		for(var checkbox of document.getElementsByName("bSkin")) {
			checkbox.checked = false;
		}
		var skins = localStorage.activeSkins.split(",");
		if(skins.length > 0) {
			for (var i = 1; i < skins.length; i++) {
				document.getElementsByName("bSkin")[skins[i]].checked = true
			}
		} else {
			document.getElementsByName("bSkin")[3].checked = true
		}

	}, 100)
}


var previewIntervals = []
var previewsAnimated = false;

function startPreviewAnimation() {
	var skins = localStorage.customSkins.split(",")

	skins.map((skin,j)=>{
		var frames = skin.split(" ").map(x=>x.split(";"))
		if(frames.length > 1) {

			var animLength = frames.length*localStorage.animSpeed
			frames.map((x,i)=>{
				setTimeout(()=>{previewIntervals.push(setInterval(()=>{
					document.getElementById("bskin"+j).nextSibling.children[0].src = frames[i][0]
				}, animLength))}, i*(animLength/frames.length))
			})
		}
	})
	previewsAnimated = true
}

function stopPreviewAnimation() {
	for (var i=0; i < previewIntervals.length; i++) {
        clearInterval(previewIntervals[i]);
    }
}

addSkins();
Game['deployRandomSkin']();

    });
})();