a script to easily store as many skins as you want
As of
// ==UserScript==
// @name Skin Storage Script
// @namespace http://tampermonkey.net/
// @version 0.1
// @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
**************************/
localStorage.customSkins = localStorage.customSkins || "";
localStorage.activeSkins = localStorage.activeSkins || "";
localStorage.randomizeKey = localStorage.randomizeKey || 'F4'
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 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;
}
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 loadSkinNoSize(src) {
var spliced = src.split(";")
if(spliced.length>1){
animatedSkin = src.split(" ").map(x=>x.split(";"))
}
var skinImg = new Image();
skinImg.onload = function(){
loadSkin(this.src,this.height)
};
skinImg.src = spliced[0];
}
function deployRandomSkin() {
if (typeof stopAnim == 'function') {
stopAnim();
animatedSkin = []
}
var candidates = localStorage.activeSkins.split(",").slice(1);
var choice = candidates[Math.floor(Math.random()*candidates.length)];
if(choice > 6) {
frames = localStorage.customSkins.split(",")[choice-7].split(" ")
if(frames.length>1){
animatedSkin = frames.map(x=>x.split(";"))
animationRunning&&startAnim();
}
}
loadSkinNoSize(document.getElementsByName("bSkin")[choice].nextSibling.children[0].src)
}
settingsSave.onmouseup = Y=>{
stopPreviewAnimation();
localStorage.activeSkins = ""
document.getElementsByName("bSkin").forEach((e,i)=>{
if(i>2 && e.checked){
localStorage.activeSkins += ","+i;
deployRandomSkin()
}
})
}
window.onkeydown = function(e) {
if(e.key.toLowerCase() == "f4") {
deployRandomSkin();
}
}
settings.onmouseup = Z=>{
startPreviewAnimation();
setTimeout(U=>{
for(var checkbox of document.getElementsByName("bSkin")) {
checkbox.checked = false;
}
var skins = localStorage.activeSkins.split(",");
for (var i = 1; i < skins.length; i++) {
document.getElementsByName("bSkin")[skins[i]].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();
deployRandomSkin();