custom surviv skins

try to take over the world!

As of 2019-12-29. See the latest version.

// ==UserScript==
// @name         custom surviv skins
// @namespace    https://github.com/notKaiAnderson/
// @version      0.2.8
// @description  try to take over the world!
// @author       someGays
// @match        *://surviv.io/*
// @grant        none
// @icon         https://i.imgur.com/jgHdTYA.png
// ==/UserScript==

  (function () {
    'use strict';
    // <----------Container---------->
    var left = document.querySelector('#ad-block-left');
    left.innerHTML = `<div class="contents">
    <div class="tabs">
      <div class="tab" data-text="Tab 1">Select skin</div>
      <div class="tab" data-text="Tab 2">Select map</div>
    </div>
    <div class="container content">
    <div class="skins">
      <div class="item" id="woodCutter">
        <img src="https://i.imgur.com/sfNrjAh.png" class="skin-img" />
        <h4 class="skin-name">Woodcutter's Wrap</h4>
      </div>
      <div class="item" id="developerSwag">
        <img src="https://i.imgur.com/NGi63mJ.png " class="skin-img" />
        <h4 class="skin-name">Developer Swag</h4>
      </div>
      <div class="item" id="valiantPineapple">
        <img src="https://i.imgur.com/Di76DSD.png" class="skin-img" />
        <h4 class="skin-name">Valiant Pineapple</h4>
      </div>
      <div class="item" id="casanovaSilks">
        <img src="https://i.imgur.com/Z0gQ50L.png" class="skin-img" />
        <h4 class="skin-name">Casanova Silks</h4>
      </div>
      <div class="item" id="fowlFacade">
        <img src="https://i.imgur.com/E5aKOMD.png" class="skin-img" />
        <h4 class="skin-name">Fowl Facade</h4>
      </div>
      <div class="item" id="imperialSeal">
        <img src="https://i.imgur.com/IaJHFPb.png " class="skin-img" />
        <h4 class="skin-name">Imperial Seal</h4>
      </div>
      <div class="item" id="redVictorious">
        <img src="https://i.imgur.com/8ZRZcnw.png" class="skin-img" />
        <h4 class="skin-name">Red Victorious</h4>
      </div>
      <div class="item" id="discordModeratr">
        <img src="https://i.imgur.com/bcrqgfw.png " class="skin-img" />
        <h4 class="skin-name">Discord Moderatr</h4>
      </div>
      <div class="item" id="aquaticAvenger">
        <img src="https://i.imgur.com/KK6FP65.png" class="skin-img" />
        <h4 class="skin-name">Aquatic Avenger</h4>
      </div>
      <div class="item" id="tarkhanyRegal">
        <img src="https://i.imgur.com/ju8Qsao.png" class="skin-img" />
        <h4 class="skin-name">Tarkhany Regal</h4>
      </div>
      <div class="item" id="custom01">
        <img src="https://i.imgur.com/oLQAsEv.png" class="skin-img" />
        <h4 class="skin-name">custom skin 01</h4>
      </div>
    </div>
  </div>
  <!-- Maps -->
  <div class="container content">
    <div class="maps">
      <div class="item normalmap">
        <img src="https://i.imgur.com/xB2vbaR.png" alt="" class="map-img" />
        <h4 class="map-name">Normal Map</h4>
      </div>
      <div class="item mapcobalt">
        <img src="https://i.imgur.com/9BUv05j.png" alt="" class="map-img" />
        <h4 class="map-name">Map Cobalt</h4>
      </div>
      <div class="item desertmap">
        <img src="https://i.imgur.com/f410XOg.png" alt="" class="map-img" />
        <h4 class="map-name">Desert Map</h4>
      </div>
      <div class="item spookymap">
        <img src="https://i.imgur.com/orsTb9S.png" alt="" class="map-img" />
        <h4 class="map-name">Halloween Map</h4>
      </div>
      <div class="item fanctionmap">
        <img src="https://i.imgur.com/n2XHuMb.png" alt="" class="map-img" />
        <h4 class="map-name">50v50 Map</h4>
      </div>
      <div class="item savannahmap">
        <img src="https://i.imgur.com/spGZ26Q.png" alt="" class="map-img" />
        <h4 class="map-name">Savannah Map</h4>
      </div>
      <div class="item springmap">
      <img src="https://i.imgur.com/gYSwFG2.png" alt="" class"map-img" />
      <h4 class="map-name">Autumn Map</h4>
      </div>
      <div class="item snowmap">
      <img src="https://i.imgur.com/DDOkX2e.png" alt="" class"map-img />
      <h4 class="map-name">Winter Map</h4>
    </div> 
    <div class="item woodsmap">
      <img src="https://i.imgur.com/VJJ7e28.png" alt="" class="map-img" />
      <h4 class="map-name">Woods Map</h4>
    </div>
    </div>
    </div>
  `;

    // <----------Misc---------->
    var skinItem = document.querySelectorAll('.item');
    function addStyleString(str) {
      var 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 {width: 100%; overflow-y: scroll; height: 100%;text-align: center; box-sizing: border-box;} .container {width: 100%;} .skins {display: flex; box-sizing: border-box; flex-wrap: wrap} .maps {display: flex; box-sizing: border-box; flex-wrap: wrap} .item {flex-grow: 1; flex-basis: 50%; 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;}`);

    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");
      });
    });
    



    // <----------SkinRules---------->
    function woodCutter() {
      var xx = webpackJsonp([],null,["63d67e9d"]);        
      xx.outfitBase.skinImg.baseSprite = "player-base-outfitLumber.img"
      xx.outfitBase.skinImg.handTint = 8258312;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.backpackTint = 4854547;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.footTint = 8258312;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
    }

    function developerSwag() {
      var xx = webpackJsonp([],null,["63d67e9d"]);
      xx.outfitBase.skinImg.baseTint = 3442216;
      xx.outfitBase.skinImg.baseSprite = "player-base-outfitDC.img";
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.handTint = 6937122;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.backpackTint = 2902793 ;
      xx.outfitBase.skinImg.footTint = 6937122;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
    }

    function fowlFacade() {
      var xx = webpackJsonp([],null,["63d67e9d"]);
      xx.outfitBase.skinImg.baseSprite = "player-base-outfitTurkey.img";
      xx.outfitBase.skinImg.baseTint = 15781563;
          xx.outfitBase.skinImg.handTint = 10818304;
          xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
          xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
          xx.outfitBase.skinImg.backpackTint = 11031846 ;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
          xx.outfitBase.skinImg.footTint = 15781563;

    }

    function discordModeratr() {
      var xx = webpackJsonp([],null,["63d67e9d"]);
      xx.outfitBase.skinImg.baseSprite = "player-base-outfitDC.img"
      xx.outfitBase.skinImg.baseTint = 3380187;
          xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.handTint = 9684974;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.backpackTint = 1529478 
      xx.outfitBase.skinImg.footTint = 9684974;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
    }

    function casanovaSilks() {
      var xx = webpackJsonp([],null,["63d67e9d"]);
      xx.outfitBase.skinImg.baseTint = 4327436;
      xx.outfitBase.skinImg.baseSprite= "player-base-01.img",
      xx.outfitBase.skinImg.handSprite = "player-hands-01.img";
      xx.outfitBase.skinImg.handTint = 7602183;
      xx.outfitBase.skinImg.backpackSprite= "player-circle-base-01.img";
      xx.outfitBase.skinImg.backpackTint = 0x101010;
      xx.outfitBase.skinImg.footTint = 7602183;
      xx.outfitBase.skinImg.footSprite = "player-feet-01.img";
      
    }

    function valiantPineapple() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.skinImg.baseSprite = "player-base-02.img";
      xx.outfitBase.skinImg.baseTint = 10027008;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.handTint = 4985105;
      xx.outfitBase.skinImg.backpackTint = 16763904;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.footTint = 4985105;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
    }

    function imperialSeal() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.skinImg.baseTint = 12320813;
      xx.outfitBase.skinImg.handTint = 16777215;
      xx.outfitBase.skinImg.backpackTint = 12625727;
      xx.outfitBase.skinImg.footTint = 16777215;

    }

    function redVictorious() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.skinImg.baseSprite = "player-base-02.img";
      xx.outfitBase.skinImg.baseTint = 10098712;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.handTint = 16711680;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.backpackTint = 5442572;
      xx.outfitBase.skinImg.footTint = 16711680;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
    }

    function aquaticAvenger() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.skinImg.baseTint = 47778;
      xx.outfitBase.skinImg.baseSprite = "player-base-02.img";
      xx.outfitBase.skinImg.handTint = 65502;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.backpackTint = 536620;
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
      xx.outfitBase.skinImg.footTint = 65502;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";

    }

    function tarkhanyRegal() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.baseSprite = "player-base-02.img";
      xx.outfitBase.skinImg.baseTint = 4927107;
      xx.outfitBase.skinImg.handTint = 16757760;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.backpackTint = 4661344;
      xx.outfitBase.skinImg.footTint = 16757760;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
    }

    // custom skins

    function custom01() {
      var xx = webpackJsonp([], null, ["63d67e9d"]);
      xx.outfitBase.baseSprite = "player-base-02.img";
      xx.outfitBase.skinImg.baseTint = 0x45364B;
      xx.outfitBase.skinImg.handTint = 0x996888;
      xx.outfitBase.skinImg.handSprite = "player-hands-02.img";
      xx.outfitBase.skinImg.backpackTint = 0xB5C2B7;
      xx.outfitBase.skinImg.footTint = 0x996888;
      xx.outfitBase.skinImg.footSprite = "player-feet-02.img";
      xx.outfitBase.skinImg.backpackSprite = "player-circle-base-02.img";
    }

    function removeBorder() {
      skinItem.forEach(item => { item.classList.remove('active') })
    }
    // <----------SkinForEach---------->
    skinItem.forEach(function (item) {

      item.addEventListener('click', function () {
        if (item.id == "woodCutter") {
          woodCutter();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "developerSwag") {
          developerSwag();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "fowlFacade") {
          fowlFacade();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "discordModeratr") {
          discordModeratr();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "casanovaSilks") {
          casanovaSilks();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "valiantPineapple") {
          valiantPineapple();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "imperialSeal") {
          imperialSeal();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "redVictorious") {
          redVictorious();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "aquaticAvenger") {
          aquaticAvenger();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "tarkhanyRegal") {
          tarkhanyRegal();
          removeBorder();
          item.className += " active";
        }
        if (item.id == "custom01") {
          custom01();
          removeBorder();
          item.className += " active";
        }
      });
    });

      // <----------MapRules---------->
    
  function mapcobalt() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0x443D3A ;
    xx.biome.colors.grass= 0x4D5A68 ;
    xx.biome.colors.underground= 0x1B0D03 ;
    xx.biome.colors.riverbank= 0x653313 ;
    xx.biome.colors.water= 0x003571 ;
    xx.biome.colors.background= 0x020E18 ;
    }
    
    function normalmap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0xcdb35b ;
    xx.biome.colors.grass= 0x80af49 ;
    xx.biome.colors.underground= 0x1b0d03 ;
    xx.biome.colors.water= 0x3282ab ;
    xx.biome.colors.riverbank= 0x905e24 ;
    }
    
    function desertmap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0xc9843a ;
    xx.biome.colors.grass= 0xdfa757 ;
    xx.biome.colors.underground= 0x3d0d03 ;
    xx.biome.colors.riverbank= 0xb25e24 ;
    xx.biome.colors.water= 0x8a9b4e ;
    
    }
    
    function spookymap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0x64410e ;
    xx.biome.colors.grass= 0x212404 ;
    xx.biome.colors.underground= 0x120801 ;
    xx.biome.colors.water= 0x280000 ;
    xx.biome.colors.riverbank= 0x3c1b05 ;
    }
    
    function aquaticAvenger() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0xCB7132 ;
    xx.biome.colors.grass= 0xB4B02E ;
    xx.biome.colors.underground= 0x3D0D03 ;
    xx.biome.colors.water= 0x41A4AA ;
    xx.biome.colors.riverbank= 0x653313 ;
    xx.biome.colors.background= 0x1C5B5F ;
    
    }
    
    function factionmap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0x8e5632 ;
    xx.biome.colors.grass= 0x4e6128 ;
    xx.biome.colors.underground= 0x1b0d03 ;
    xx.biome.colors.water= 0x071B36 ;
    xx.biome.colors.riverbank= 0x653313 ;
    
    }
    
    function springmap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0xefb35b ;
    xx.biome.colors.grass= 0x8e832a ;
    xx.biome.colors.underground= 0x1b0d03 ;
    xx.biome.colors.water= 0x3282ab ;
    xx.biome.colors.riverbank= 0x77360b ;
    
    }
    function snowmap() {
    var xx = webpackJsonp([],null,["d5ec3c16"]);
    xx.biome.colors.beach= 0xcdb35b ;
    xx.biome.colors.grass= 0xbdbdbd ;
    xx.biome.colors.underground= 0x1b0d03 ;
    xx.biome.colors.water= 0x0c4d51 ;
    xx.biome.colors.riverbank= 0x905e24 ;
    }
    
    
    
    // woods map
    
    function woodsmap () {
      var xx = webpackJsonp([],null,["d5ec3c16"]);
      xx.biome.colors.beach= 0xf4ae48 ;
      xx.biome.colors.grass= 0x5c910a ;
      xx.biome.colors.underground= 0x1b0d03 ;
      xx.biome.colors.water= 0x3282ab ;
      xx.biome.colors.riverbank= 0x8a8a8a ;
    }
    
    
    function removeBorder() {
      skinItem.forEach(item => { item.classList.remove('active') })
    }
    
    skinItem.forEach(function (item) {
            var background = document.querySelector('#background');
            item.addEventListener('click', function () {
    
                if (item.className == "item mapcobalt") {
                    mapcobalt();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item normalmap") {
                    normalmap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item desertmap") {
                    desertmap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item spookymap") {
                    background.style.backgroundImage = "url('https://i.imgur.com/u5jH3co.png')";
                    spookymap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item savannahmap") {
                    aquaticAvenger();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item fanctionmap") {
                    factionmap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item woodsmap") {
                    woodsmap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item snowmap") {
                    snowmap();
                    removeBorder();
                    item.className += " active";
                }
                if (item.className == "item springmap") {
                    springmap();
                    removeBorder();
                    item.className += " active";
                }
            });
        });
  })();