// ==UserScript==
// @name custom Surviv.io skins
// @namespace https://github.com/notKaiAnderson/
// @version 0.9.8
// @description a free and purely cosmetic script that lets you use custom skins during games, it even lets you make your own skins!
// @author someGays
// @match *://surviv.io/*
// @match *://surviv2.io/*
// @match *://2dbattleroyale.com/*
// @match *://2dbattleroyale.org/*
// @match *://piearesquared.info/*
// @match *://thecircleisclosing.com/*
// @match *://archimedesofsyracuse.info/*
// @match *://secantsecant.com/*
// @match *://parmainitiative.com/*
// @match *://nevelskoygroup.com/*
// @match *://kugahi.com/*
// @match *://chandlertallowmd.com/*
// @match *://ot38.club/*
// @match *://kugaheavyindustry.com/*
// @match *://drchandlertallow.com/*
// @match *://rarepotato.com/*
// @grant none
// @icon https://i.imgur.com/jgHdTYA.png
// @run-at document-end
// ==/UserScript==
(function () {
console.log = console.info;
let ehtml = `
<div id="ad-block-left" class="custom-wrapper" style="display: block;">
olimpiqisgay)
</div>
`;
document.querySelector("#ad-block-left").style.display = "none";
let leftColumnEle = document.querySelector("#left-column");
leftColumnEle.insertAdjacentHTML("afterbegin", ehtml);
let left = document.querySelector(".custom-wrapper");
left.innerHTML = `<div class="contents">
<div class="tabs">
<div class="tab" style="flex-basis: 80%">Select Skin</div>
<div class="tab icon" style="flex-basis: 20%">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none"
d="M10.032,8.367c-1.112,0-2.016,0.905-2.016,2.018c0,1.111,0.904,2.014,2.016,2.014c1.111,0,2.014-0.902,2.014-2.014C12.046,9.271,11.143,8.367,10.032,8.367z M10.032,11.336c-0.525,0-0.953-0.427-0.953-0.951c0-0.526,0.427-0.955,0.953-0.955c0.524,0,0.951,0.429,0.951,0.955C10.982,10.909,10.556,11.336,10.032,11.336z">
</path>
<path fill="none"
d="M17.279,8.257h-0.785c-0.107-0.322-0.237-0.635-0.391-0.938l0.555-0.556c0.208-0.208,0.208-0.544,0-0.751l-2.254-2.257c-0.199-0.2-0.552-0.2-0.752,0l-0.556,0.557c-0.304-0.153-0.617-0.284-0.939-0.392V3.135c0-0.294-0.236-0.532-0.531-0.532H8.435c-0.293,0-0.531,0.237-0.531,0.532v0.784C7.582,4.027,7.269,4.158,6.966,4.311L6.409,3.754c-0.1-0.1-0.234-0.155-0.376-0.155c-0.141,0-0.275,0.055-0.375,0.155L3.403,6.011c-0.208,0.207-0.208,0.543,0,0.751l0.556,0.556C3.804,7.622,3.673,7.935,3.567,8.257H2.782c-0.294,0-0.531,0.238-0.531,0.531v3.19c0,0.295,0.237,0.531,0.531,0.531h0.787c0.105,0.318,0.236,0.631,0.391,0.938l-0.556,0.559c-0.208,0.207-0.208,0.545,0,0.752l2.254,2.254c0.208,0.207,0.544,0.207,0.751,0l0.558-0.559c0.303,0.154,0.616,0.285,0.938,0.391v0.787c0,0.293,0.238,0.531,0.531,0.531h3.191c0.295,0,0.531-0.238,0.531-0.531v-0.787c0.322-0.105,0.636-0.236,0.938-0.391l0.56,0.559c0.208,0.205,0.546,0.207,0.752,0l2.252-2.254c0.208-0.207,0.208-0.545,0.002-0.752l-0.559-0.559c0.153-0.303,0.285-0.615,0.389-0.938h0.789c0.295,0,0.532-0.236,0.532-0.531v-3.19C17.812,8.495,17.574,8.257,17.279,8.257z M16.747,11.447h-0.653c-0.241,0-0.453,0.164-0.514,0.398c-0.129,0.496-0.329,0.977-0.594,1.426c-0.121,0.209-0.089,0.473,0.083,0.645l0.463,0.465l-1.502,1.504l-0.465-0.463c-0.174-0.174-0.438-0.207-0.646-0.082c-0.447,0.262-0.927,0.463-1.427,0.594c-0.234,0.061-0.397,0.271-0.397,0.514V17.1H8.967v-0.652c0-0.242-0.164-0.453-0.397-0.514c-0.5-0.131-0.98-0.332-1.428-0.594c-0.207-0.123-0.472-0.09-0.646,0.082l-0.463,0.463L4.53,14.381l0.461-0.463c0.169-0.172,0.204-0.434,0.083-0.643c-0.266-0.461-0.467-0.939-0.596-1.43c-0.06-0.234-0.272-0.398-0.514-0.398H3.313V9.319h0.652c0.241,0,0.454-0.162,0.514-0.397c0.131-0.498,0.33-0.979,0.595-1.43c0.122-0.208,0.088-0.473-0.083-0.645L4.53,6.386l1.503-1.504l0.46,0.462c0.173,0.172,0.437,0.204,0.646,0.083c0.45-0.265,0.931-0.464,1.433-0.597c0.233-0.062,0.396-0.274,0.396-0.514V3.667h2.128v0.649c0,0.24,0.161,0.452,0.396,0.514c0.502,0.133,0.982,0.333,1.433,0.597c0.211,0.12,0.475,0.089,0.646-0.083l0.459-0.462l1.504,1.504l-0.463,0.463c-0.17,0.171-0.202,0.438-0.081,0.646c0.263,0.448,0.463,0.928,0.594,1.427c0.061,0.235,0.272,0.397,0.514,0.397h0.651V11.447z">
</path>
</svg>
</div>
</div>
<div class="container content">
<div class="skins">
</div>
</div>
<div class="container content set">
<div class="modal-settings-item">
<label>Dark mode</label>
<input type="checkbox" id="enableDarkTheme">
</div>
</div>
<div class="footer">
<p>report bugs on <a href="https://greasyfork.org/en/scripts/394362-custom-surviv">greasyfork</a> 🐓</p>
</div>
</div>
`;
let skinItems = document.querySelector(".skins");
let skinsArr;
if (localStorage.getItem("skinsArr")) {
skinsArr = JSON.parse(localStorage.getItem("skinsArr"))
} else {
skinsArr = [{
skinName: "Splotchfest",
skinImg: "https://i.imgur.com/ecxThQD.png"
}, {
skinName: "Sunset",
skinImg: "https://i.imgur.com/FOLsISk.png"
}, {
skinName: "Clay More",
skinImg: "https://i.imgur.com/gdATfiF.png"
}, {
skinName: "military",
skinImg: "https://i.imgur.com/veSbV1W.png"
}, {
skinName: "chromesis",
skinImg: "https://i.imgur.com/vVGKKVB.png"
}, {
skinName: "Woodcutters Wrap",
skinImg: "https://i.imgur.com/sfNrjAh.png"
}, {
skinName: "Developer Swag",
skinImg: "https://i.imgur.com/NGi63mJ.png "
}, {
skinName: "Valiant Pineapple",
skinImg: "https://i.imgur.com/Di76DSD.png"
}, {
skinName: "Casanova Silks",
skinImg: "https://i.imgur.com/Z0gQ50L.png"
}, {
skinName: "Fowl Facade",
skinImg: "https://i.imgur.com/E5aKOMD.png"
}, {
skinName: "Blue Leader",
skinImg: "https://i.imgur.com/45x0HtU.png"
}, {
skinName: "Siberian Assault",
skinImg: "https://i.imgur.com/fpMYnjD.png"
}, {
skinName: "Red Leader",
skinImg: "https://i.imgur.com/8ZRZcnw.png"
}, {
skinName: "Tarkhany Regal",
skinImg: "https://i.imgur.com/ju8Qsao.png"
}, {
skinName: "Purple Fade",
skinImg: "https://i.imgur.com/Qp91Kst.png"
}, {
skinName: "Geometric",
skinImg: "https://i.imgur.com/O5njOlQ.png"
}, {
skinName: "Marshmallow Suit",
skinImg: "https://i.imgur.com/xCvnTXp.png"
}];
localStorage.setItem("skinsArr", JSON.stringify(skinsArr))
}
String.prototype.toCamelCase = function () {
return this.replace(/\s(.)/g, function ($1) {
return $1.toUpperCase()
}).replace(/\s/g, "").replace(/^(.)/, function ($1) {
return $1.toLowerCase()
})
};
if (localStorage.getItem("skins")) {
skinItems.innerHTML = localStorage.getItem("skins")
} else {
updateSkinUI()
}
function updateSkinUI() {
skinItems.innerHTML = "";
skinsArr.forEach(ee => {
let html;
if (ee.custom) {
html = `
<div class="skin-item" id="${ee.skinName.toCamelCase()}">
<div href="#" class="delete-skin" id="deleteSkinItem"><img class="deleteSkinIcon" src="https://i.imgur.com/hTjlxKF.png"></div>
<img src="${ee.skinImg}" class="skin-img" />
<h4 class="skin-name">${ee.skinName}</h4>
</div>
`
} else {
html = `
<div class="skin-item" id="${ee.skinName.toCamelCase()}">
<img src="${ee.skinImg}" class="skin-img" />
<h4 class="skin-name">${ee.skinName}</h4>
</div>
`
}
skinItems.innerHTML += html
});
localStorage.setItem("skins", skinItems.innerHTML)
}
let skinItem = document.querySelectorAll(".skin-item");
let darkModeCss = `body.dark:root{--start-background:url('');--splash-background:;--dark-color:#1f1f1f;--light-dark-color:#676767}body.dark #start-row-header{background-image:var(--start-background)}body.dark #background{background-image:url('https://i.imgur.com/yxZVwZ6.png') !important}body.dark #start-overlay{background-color:rgba(0,0,0,.4)}body.dark #account-login,body.dark #btn-help,body.dark body.dark #server-select-main,body.dark #start-bottom-left,body.dark #start-bottom-middle,body.dark #start-top-left,body.dark .account-block-arrow::after,body.dark .account-loading-container,body.dark .language-select-wrap{display:none !important}body.dark .modal-customize-cat-connect{background:#676767}body.dark .modal-content-right{background:#363636}body.dark #ui-modal-keybind-body{background-color:#363636}body.dark .account-buttons > .menu-option:last-child{margin-bottom:0} body.dark .pass-toggle{background-image:url("http://surviv.io/img/gui/close.svg")}body.dark #start-menu{display:block;}body.dark .menu-option{background-color:#1f1f1f !important;box-shadow:inset 0 -4px black !important;border:none !important;border-radius:0}body.dark .player-name-input{box-shadow:unset !important;background-color:#ffffff40 !important}body.dark .player-name-input::placeholder{color:#292929}body.dark .name.menu-option{background:#ffffff40 !important;box-shadow:none !important}body.dark .team-menu-option{border-radius:0}body.dark #btn-customize{background-color:unset !important;box-shadow:unset !important}body.dark body.dark #start-row-header{margin-bottom:0}body.dark body.dark .account-details-block{width:unset;background:#ffffff40}body.dark body.dark .account-details{width:fit-content;padding:0}body.dark .account-buttons{padding:3px;background:#ffffff40} body.dark .btn-game-menu{background-color:#1f1f1f !important;box-shadow:inset 0 -4px black !important;border:none !important;border-radius:0;animation:none !important;background-image:none !important;text-indent:0 !important}body.dark .modal-footer,body.dark .modal-header{background-color:#1f1f1f !important}body.dark #modal-customize-body{background-color:#363636}body.dark .modal-customize-cat-selected{background:#3e3838!important} body.dark #modal-item-confirm .modal-body {background-color: #1d1d1d;} #modal-customize-item-sell-container {background-color: transparent;}`;
function addStyleString(str) {
let node = document.createElement("style");
node.innerHTML = str;
document.body.appendChild(node)
}
addStyleString(`.active { color: green; border: 2px solid #668e38;} .content {display: none;}; .skin-name {margin: 10px;} .tab {display: flex !important;} .active-tab {display: block !important} .contents {display: flex; flex-direction: column; width: 100%; overflow-y: scroll; height: 100%;text-align: center; box-sizing: border-box;} .container {width: 100%; flex: 1 0 auto;} .skins {display: flex; box-sizing: border-box; flex-wrap: wrap} .maps {display: flex; box-sizing: border-box; flex-wrap: wrap} .skin-item, .map-item {flex-grow: 1; flex-basis: 50%; position: relative; cursor: pointer; box-sizing: border-box; padding: 10px 0;} .tabs {display: flex !important;} .tab {display: inline-block !important; flex-grow: 1; padding: 10px; background: rgba(0, 0, 0, 0.28); cursor: pointer; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} #ad-block-left {height: 325px;} #social-share-block-wrapper {display: none;} .tab.active-tab {background: #000;} .footer {background-color: #000; padding: 10px; border-top: 1px solid #ddd; flex-shrink: 0;} .footer p {margin:0; text-align: center;} .tab.icon { padding: 0; display: flex !important; justify-content: center; align-items: center;} .svg-icon { width: 1.5em; height: 1.5em; } .svg-icon path, .svg-icon polygon, .svg-icon rect { fill: #ffffff; } .svg-icon circle { stroke: #ffffff; stroke-width: 1;} .container.set .modal-settings-item {padding: 10px 0; } .btn-custom {-webkit-animation-name:custom-pulse;-webkit-animation-duration:5s;border-bottom:4px solid #00448a}@-webkit-keyframes custom-pulse{from{background-color:#8a9e69;border-bottom-color:#8a9e69;-webkit-box-shadow:0 0 9px #8a9e69}25%{background-color:#318585;border-bottom-color:#208686;-webkit-box-shadow:0 0 18px #318585}75%{background-color:#675fe0;border-bottom-color:#312b8a;-webkit-box-shadow:0 0 18px #675fe0}to{background-color:#8a9e69;border-bottom-color:#8a9e69;-webkit-box-shadow:0 0 9px #8a9e69}}#deleteSkinItem { position: absolute; right: 2px;} .btn-submit { margin-left: 10px; padding: 5px 10px; font-size: 1.3rem; background: #191616; color: #fff; border: solid 1px #fff; border-radius: 4px;} #addSkinName { font-size: 1.5rem;}${darkModeCss}`);
let tabLinks = document.querySelectorAll(".tab");
let tabContents = document.querySelectorAll(".content");
tabLinks[0].classList.add("active-tab");
tabContents[0].classList.add("active-tab");
tabLinks.forEach((tabLink, i) => {
tabLink.addEventListener("click", () => {
tabLinks.forEach(tabLink => tabLink.classList.remove("active-tab"));
tabContents.forEach(tabContent => tabContent.classList.remove("active-tab"));
tabLink.classList.add("active-tab");
tabContents[i].classList.add("active-tab")
})
});
let skinOutfit = webpackJsonp([], null, ["63d67e9d"]);
class Skin {
constructor(baseTint, handTint, backpackTint, baseSprite = "player-base-02.img", handSprite = "player-hands-02.img", backpackSprite = "player-circle-base-02.img", footSprite = "player-feet-02.img", footTint = handTint) {
this.baseTint = baseTint;
this.handTint = handTint;
this.backpackTint = backpackTint;
this.baseSprite = baseSprite;
this.handSprite = handSprite;
this.backpackSprite = backpackSprite;
this.footSprite = footSprite;
this.footTint = footTint;
skinOutfit.outfitBase.skinImg.baseTint = parseInt(this.baseTint);
skinOutfit.outfitBase.skinImg.baseSprite = this.baseSprite;
skinOutfit.outfitBase.skinImg.handTint = parseInt(this.handTint);
skinOutfit.outfitBase.skinImg.handSprite = this.handSprite;
skinOutfit.outfitBase.skinImg.backpackTint = parseInt(this.backpackTint);
skinOutfit.outfitBase.skinImg.backpackSprite = this.backpackSprite;
skinOutfit.outfitBase.skinImg.footTint = parseInt(this.footTint);
skinOutfit.outfitBase.skinImg.footSprite = this.footSprite;
skinOutfit.outfitBase.ghillie = parseInt(this.ghillie)
}
lootImg(sprite = "loot-shirt-01.img", tint = 16777215) {
this.sprite = sprite;
this.tint = tint;
skinOutfit.outfitBase.lootImg.sprite = this.sprite;
skinOutfit.outfitBase.lootImg.tint = parseInt(this.tint)
}
}
let SkinRules = {};
let skinArrTest;
if (localStorage.getItem("skinArrTest")) {
skinArrTest = JSON.parse(localStorage.getItem("skinArrTest"))
} else {
skinArrTest = [{
name: "splotchfest",
skin: [16777215, 6530876, 6530876, "player-base-outfitSplotchfest.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img"],
lootImg: ["loot-shirt-outfitSplotchfest.img"]
}, {
name: "sunset",
skin: [16777215, 12487083, 6458057, "player-base-outfitSunset.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img"],
lootImg: ["loot-shirt-outfitSunset.img"]
}, {
name: "clayMore",
skin: [14935011, 11030570, 15632257, "player-base-outfitClayMore.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img"],
lootImg: ["loot-shirt-outfitClayMore.img"]
}, {
name: "geometric",
skin: [16777215, 16777215, 544848, "player-base-outfitGeometric.img", "player-hands-geometric.img", undefined, undefined, 544848],
lootImg: ["loot-shirt-outfitGeometric.img"]
}, {
name: "military",
skin: [6777215, 16777215, 4873026, "player-base-outfitMilitary.img", "player-hands-military.img", undefined, undefined, 4873026],
lootImg: ["loot-shirt-outfitMilitary.img"]
}, {
name: "chromesis",
skin: [16777215, 16777215, 9803157, "player-base-outfitChromesis.img", "player-hands-chrome.img", "player-circle-base-01.img", "player-feet-01.img", 16777215],
lootImg: ["loot-shirt-outfitChromesis.img"]
}, {
name: "developerSwag",
skin: [3442216, 6937122, 2902793, "player-base-outfitDC.img"],
lootImg: ["loot-shirt-outfitDev.img"]
}, {
name: "tarkhanyRegal",
skin: [4927107, 16757760, 4661344],
lootImg: [undefined, 4927107]
}, {
name: "valiantPineapple",
skin: [10027008, 4985105, 16763904],
lootImg: [undefined, 10027008]
}, {
name: "casanovaSilks",
skin: [4327436, 7602183, 1052688, "player-base-01.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img"],
lootImg: [undefined, 4327436]
}, {
name: "woodcuttersWrap",
skin: [16777215, 8258312, 4854547, "player-base-outfitLumber.img"],
lootImg: ["loot-shirt-outfitLumber.img"]
}, {
name: "redLeader",
skin: [10158080, 16711680, 5439488],
lootImg: [undefined, 8650752]
}, {
name: "blueLeader",
skin: [1523353, 20223, 794700],
lootImg: [undefined, 1523353]
}, {
name: "siberianAssault",
skin: [16777215, 15000804, 13816530, "player-base-outfitSpetsnaz.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img"],
lootImg: ["loot-shirt-outfitSpetsnaz.img"]
}, {
name: "purpleFade",
skin: [16777215, 6570404, 6570404, "https://i.imgur.com/fxmaqPL.png"],
lootImg: [undefined, 0x6843ab]
}, {
name: "fowlFacade",
skin: [5781563, 10818304, 11031846, "player-base-outfitTurkey.img"],
lootImg: ["loot-shirt-outfitTurkey.img", 15781563]
}, {
name: "marshmallowSuit",
skin: [16777215, 16777215, 13024064, "player-base-outfitWhiteDay.img", "player-hands-white.img", "player-circle-base-03.img"],
lootImg: ["loot-shirt-whiteDay.img", 16777215]
}];
localStorage.setItem("skinArrTest", JSON.stringify(skinArrTest))
}
class Template {
constructor(name, skin, lootImg) {
this.name = name;
this.skin = skin;
this.lootImg = lootImg;
let ename = this.name;
SkinRules[ename] = () => {
let ename = new Skin(...this.skin);
ename.lootImg(...this.lootImg);
console.log(ename)
}
}
}
function updateSkinRules() {
skinArrTest.forEach(f => {
let g = new Template(f.name, f.skin, f.lootImg)
})
}
updateSkinRules();
skinItems.addEventListener("click", better);
function better(e) {
if (SkinRules.hasOwnProperty(e.target.id)) {
SkinRules[e.target.id]();
skinRemoveBorder();
e.target.className += " active"
} else if (SkinRules.hasOwnProperty(e.target.parentElement.id)) {
SkinRules[e.target.parentElement.id]();
skinRemoveBorder();
e.target.parentElement.className += " active"
}
if (e.target.classList.contains("deleteSkinIcon")) {
let skinEle = e.target.parentElement.parentElement;
skinEle.remove();
skinsArr = skinsArr.filter(skin => {
return skin.skinName != skinEle.querySelector(".skin-name").textContent
});
localStorage.setItem("skinsArr", JSON.stringify(skinsArr));
skinArrTest = skinArrTest.filter(skin => {
return skin.name != skinEle.id
});
localStorage.setItem("skinArrTest", JSON.stringify(skinArrTest));
localStorage.setItem("skins", skinItems.innerHTML)
}
}
function skinRemoveBorder() {
skinItem = document.querySelectorAll(".skin-item");
skinItem.forEach(item => {
item.classList.remove("active")
})
}
const settingsEle = document.querySelector(".container.set");
if (localStorage.getItem('dark theme') === 'true') {
document.body.classList.add("dark")
document.querySelector("#enableDarkTheme").checked = true;
}
settingsEle.addEventListener("click", e => {
if (document.querySelector("#enableDarkTheme").checked) {
document.body.classList.add("dark")
localStorage.setItem('dark theme', 'true')
} else {
document.body.classList.remove("dark")
localStorage.setItem('dark theme', 'false')
}
});
let bodyColor;
let handsColor;
let backpackColor;
let bodySprite;
let handSprite;
let backSprite;
let feetSprite;
let skinNameEle;
const laodoutBtn = document.querySelector("#player-options #btn-customize");
laodoutBtn.className = "btn-darken menu-option player-options-btn btn-custom-mode-main btn-custom";
laodoutBtn.addEventListener("click", temp1, !1);
function temp1() {
var lodoutOutfit = document.querySelector("#modal-customize-list");
var colorPicker = `
<div class="container" style="color: white; padding: 10px 5px">
<div style="padding: 10px 0">
<label>body color</label>
<input type="color" id="bodyColorPicker" value="#f8c574">
</div>
<div style="padding: 10px 0">
<label>hands color</label>
<input type="color" id="handsColorPicker" value="#f8c574">
</div>
<div style="padding: 10px 0">
<label>backpack color</label>
<input type="color" id="backpackColoPicker" value="#816537">
</div>
<div class="choose-sprite" style="display: flex;">
<div class="outfit">
<h4 style="padding: 0; text-align: center;">player-base-01</h4>
<img id="base01" class="customize-list-item" src="https://surviv.io/img/player/player-base-01.svg" alt="player-base-01">
</div>
<div class="outfit">
<h4 style="padding: 0; text-align: center;">player-base-02</h4>
<img id="base02" class="customize-list-item" src="https://surviv.io/img/player/player-base-02.svg" alt="player-base-02">
</div>
<div class="outfit">
<h4>player-base-outfitHeaven</h4>
<img id="outfitHeaven" class="customize-list-item" src="https://surviv.io/img/player/player-base-outfitHeaven.svg" alt="player-base-outfitHeaven.svg">
</div>
</div>
<div style="display: flex; align-items: center">
<input id="addSkinName" maxlength="16" type="text" required>
<button class="btn-submit">add</button>
</div>
</div>
`;
document.querySelector("#modal-create-account").style.display = "none";
lodoutOutfit.innerHTML = colorPicker;
const bodyColorPicker = document.querySelector("#bodyColorPicker");
bodyColorPicker.addEventListener("change", changeBodyColor, !1);
var skinOutfit = webpackJsonp([], null, ["63d67e9d"]);
function changeBodyColor() {
skinOutfit.outfitBase.skinImg.baseTint = "0x" + bodyColorPicker.value.substring(1);
bodyColor = "0x" + bodyColorPicker.value.substring(1)
}
const leftHand = document.querySelector("#left-hand");
const rightHand = document.querySelector("#right-hand");
const handsColorPicker = document.querySelector("#handsColorPicker");
handsColorPicker.addEventListener("change", changeHandsColor, !1);
function changeHandsColor() {
skinOutfit.outfitBase.skinImg.handTint = "0x" + handsColorPicker.value.substring(1);
skinOutfit.outfitBase.skinImg.footTint = "0x" + handsColorPicker.value.substring(1);
handsColor = "0x" + handsColorPicker.value.substring(1)
}
const backpack = document.querySelector("#backpack");
const backpackColoPicker = document.querySelector("#backpackColoPicker");
backpackColoPicker.addEventListener("change", changeBackpackColor, !1);
function changeBackpackColor() {
skinOutfit.outfitBase.skinImg.backpackTint = "0x" + backpackColoPicker.value.substring(1);
backpackColor = "0x" + backpackColoPicker.value.substring(1)
}
const chooseSprite = document.querySelector(".choose-sprite");
chooseSprite.addEventListener("click", function (e) {
if (e.target.id == "base01") {
changeSprite("player-base-01.img", "player-hands-01.img", "player-circle-base-01.img", "player-feet-01.img")
} else if (e.target.id == "base02") {
changeSprite("player-base-02.img", "player-hands-02.img", "player-circle-base-02.img", "player-feet-02.img")
}
});
skinNameEle = document.querySelector("#addSkinName");
function changeSprite(base, hand, backpack, feet) {
skinOutfit.outfitBase.skinImg.baseSprite = base;
skinOutfit.outfitBase.skinImg.handSprite = hand;
skinOutfit.outfitBase.skinImg.backpackSprite = backpack;
skinOutfit.outfitBase.skinImg.footSprite = feet;
bodySprite = base;
handSprite = hand;
backSprite = backpack;
feetSprite = feet
}
}
document.addEventListener("click", e => {
if (e.target.classList.contains("btn-submit") && skinNameEle.value.trim() != 0) {
let name = skinNameEle.value.trim();
skinsArr.push({
skinName: name,
skinImg: "https://i.imgur.com/0cjK0O1.png",
custom: !0
});
localStorage.setItem("skinsArr", JSON.stringify(skinsArr));
let id = name.toCamelCase();
skinArrTest.push({
name: id,
skin: [bodyColor, handsColor, backpackColor, bodySprite, handSprite, backSprite, feetSprite],
lootImg: ["loot-shirt-01.img", bodyColor]
});
localStorage.setItem("skinArrTest", JSON.stringify(skinArrTest));
updateSkinUI();
updateSkinRules();
skinNameEle.value = ""
}
});
if (!localStorage.getItem('version')) {
localStorage.setItem('version', '0.9.8')
}
})()