// ==UserScript==
// @name         ScrollMacro Sploop.io
// @namespace    none
// @version      1
// @description  With this script, you can quickly scroll through the store with caps! When you click on the buttons, the store will automatically open and scroll the ScrollBar to the desired header ! Keys: B-BerserkerGear, C-BoostHat, T-CrystalGear, V-ImmunityGear.
// @author       00100110#6361
// @match        *://sploop.io/*
// @grant        none
// @require      http://code.jquery.com/jquery-3.3.1.min.js
// @require      https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
// @downloadURL none
// ==/UserScript==
document.addEventListener('keydown', e => {
    if (e.keyCode == 27) {
        if ($('#bind-key-menu').css('display') == 'none') $('#bind-key-menu').animate({top: 'show'}, 100)
        else $('#bind-key-menu').animate({top: 'hide'}, 100)
    }
})
const html = `
<div id="bind-key-menu">
<div id="block-bind">
<Text>Crystral: <input type="text" id="crystalBind" onKeyPress=SupressInput(event); oncontextmenu="return false" style="width: 75px;" value="KeyT" class="inputTxt"></Text>
<br>
<Text>Berserker: <input type="text" id="berserkerBind" onKeyPress=SupressInput(event); oncontextmenu="return false" style="width: 75px;" value="KeyB" class="inputTxt"></Text>
<br>
<Text>Boost: <input type="text" id="boostBind" onKeyPress=SupressInput(event); oncontextmenu="return false" style="width: 75px;" value="KeyC" class="inputTxt"></Text>
<br>
<Text>Immunity: <input type="text" id="immunityBind" onKeyPress=SupressInput(event); oncontextmenu="return false" style="width: 75px;" value="KeyV" class="inputTxt"></Text>
</div>
</div>
<style>
Text {
font-size: 22px;
color: #fff;
}
#block-bind {
width: 100%;
height: auto;
padding: 8px;
background: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 5px 0 rgb(20 20 20 / 40%);
border-radius: 15px;
border: 5px solid #141414;
}
#bind-key-menu {
text-align: left;
padding: 20px;
padding-top: 50px;
position: absolute;
display: none;
background: rgba(0, 0, 0, 0.25);
bottom: 35%;
left: 39.9%;
border-radius: 15px;
width: 325px;
height: 250px;
border: 5px solid #141414;
box-shadow: inset 0 4px 0 #4e5645, inset 0 -4px 0 #384825, 0px 2px 0 5px rgb(20 20 20 / 30%), 0px 0px 0 15px rgb(20 20 20 / 10%);
}
.inputTxt {
cursor: text;
vertical-align: middle;
user-select: none;
box-sizing: border-box;
text-align: center;
outline: 0;
display: inline-block;
border: none;
border: 5px solid rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.06);
border-radius: 10px;
transition: all 1s;
}
</style>
<script>
function SupressInput($event) {
   $event.preventDefault();
}
let use = false, codeKey, use2 = false, codeKey2, use3 = false, codeKey3, use4 = false, codeKey4
document.getElementById("boostBind").addEventListener("mousedown", e => {
    if (e.button == 0) {
        $("#boostBind").val("Select")
        use = true
    }
    if (e.button == 2) {
        $("#boostBind").val("...")
        use = false
    }
})
document.getElementById("boostBind").addEventListener('keydown', e => {
    if ($("#boostBind").focus()) {
        if (use) {
            use = false
            codeKey = (e.code).toString()
            $("#boostBind").val(codeKey)
        }
    }
})
document.getElementById("immunityBind").addEventListener("mousedown", e => {
    if (e.button == 0) {
        $("#immunityBind").val("Select")
        use2 = true
    }
    if (e.button == 2) {
        $("#immunityBind").val("...")
        use2 = false
    }
})
document.getElementById("immunityBind").addEventListener('keydown', e => {
    if ($("#immunityBind").focus()) {
        if (use2) {
            use2 = false
            codeKey2 = (e.code).toString()
            $("#immunityBind").val(codeKey2)
        }
    }
})
document.getElementById("berserkerBind").addEventListener("mousedown", e => {
    if (e.button == 0) {
        $("#berserkerBind").val("Select")
        use3 = true
    }
    if (e.button == 2) {
        $("#berserkerBind").val("...")
        use3 = false
    }
})
document.getElementById("berserkerBind").addEventListener('keydown', e => {
    if ($("#berserkerBind").focus()) {
        if (use3) {
            use3 = false
            codeKey3 = (e.code).toString()
            $("#berserkerBind").val(codeKey3)
        }
    }
})
document.getElementById("crystalBind").addEventListener("mousedown", e => {
    if (e.button == 0) {
        $("#crystalBind").val("Select")
        use4 = true
    }
    if (e.button == 2) {
        $("#crystalBind").val("...")
        use4 = false
    }
})
document.getElementById("crystalBind").addEventListener('keydown', e => {
    if ($("#crystalBind").focus()) {
        if (use4) {
            use4 = false
            codeKey4 = (e.code).toString()
            $("#crystalBind").val(codeKey4)
        }
    }
})
</script>
`
$("body").append(html)

document.title = "ScrollMacro"
let getElement = [document.getElementById("hat-menu"), document.getElementById("hat_menu_content")]
document.addEventListener('keydown', (e)=>{
    switch (e.code) {
        case $("#crystalBind").val(): // Crystral Gear
            getElement[0].style.display = "flex"
            getElement[1].scrollTo(0, 75)
            break
        case $("#berserkerBind").val(): // Berserker Gear
            getElement[0].style.display = "flex"
            getElement[1].scrollTo(0, 0)
            break
        case $("#boostBind").val(): // Boost Hat
            getElement[0].style.display = "flex"
            getElement[1].scrollTo(0, 220)
            break
        case $("#immunityBind").val(): // Immunity Gear
            getElement[0].style.display = "flex"
            getElement[1].scrollTo(0, 185)
            break
    }
})
getElement[0].addEventListener('dblclick', function (e) {
    getElement[0].style.display = "none"
})