Skin Storage Script

a script to easily store as many skins as you want

La data de 11-08-2019. Vezi ultima versiune.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Skin Storage Script
// @namespace    http://tampermonkey.net/
// @version      0.4
// @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'
var timeUntilRandomize = 0

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"]();'

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

var keyupFunc = window.onkeyup.toString()
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/XcnWlC6.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;
	}

    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) {
            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://cors-anywhere.herokuapp.com/" + myImage.src, myImage.height);}
            myImage.src = url;
        }
    };
    myRequest.send();
}



function loadSkinNoSize(src) {
	var spliced = src.split(";")
	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])
		/*
		try {
			var skinImg = new Image();
			skinImg.onload = function(){
			    loadSkin(this.src,this.height)
			};
			skinImg.src = spliced[0];
		} catch(e) {

			var skinImg = new Image();
			skinImg.onload = function(){
			    loadSkin(this.src,this.height)
			};
			skinImg.src = "https://cors-anywhere.herokuapp.com/" + 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)];

	if(choice > 7) {
		frames = localStorage.customSkins.split(",")[choice-8].split(" ")

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

    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']()}, "+timeUntilRandomize+");"
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']();

    });
})();