// ==UserScript==
// @name Sploop Hat Macro & Menu
// @description  A script that includes hat macro & a menu
// @author DETIX
// @version 2.1
// @icon https://sploop.io/img/ui/favicon.png
// @match *://sploop.io/*
// @license MIT
// @namespace https://greasyfork.org/users/1311498
// @downloadURL none
// ==/UserScript==

let DETIX;

function initialize(DETIX) {
    window.DETIX = DETIX;
}

WebSocket.prototype.lastSend = WebSocket.prototype.send;

window.WebSocket = new Proxy(window.WebSocket, {
    construct(target, args) {
        const DETIX = new target(...args);
        if (!args[0].includes("sploop")) return DETIX;
        initialize(DETIX);
        return DETIX;
    }
});
WebSocket.prototype.lastSend = WebSocket.prototype.send;
WebSocket.prototype.send = function(a) {
    this.lastSend(a);
    if (DETIX !== this) DETIX = this;
};

const HATS = {
    BerserkerGear: {
        id: 2,
        defaultKey: "KeyB"
    },
    CrystalGear: {
        id: 4,
        defaultKey: "KeyG"
    },
    DemolistHat: {
        id: 11,
        defaultKey: "KeyZ"
    },
    SpikeGear: {
        id: 5,
        defaultKey: "KeyT"
    },
    BoostHat: {
        id: 7,
        defaultKey: "KeyH"
    },
    ScubaGear: {
        id: 9,
        defaultKey: "KeyM"
    }
};

let chatWrapper = document.getElementById("chat-wrapper"),
    clanMenu = document.getElementById("clan-menu");

function check(){
    const chatWrapper = document.getElementById("chat-wrapper");
    const clanMenu = document.getElementById("clan-menu");
    if (chatWrapper.style.display === "block" || clanMenu.style.display === "block") return false;
    return true;
}
function EQUIP(id) {
    DETIX.send(new Uint8Array([5, id, 1]));
    DETIX.send(new Uint8Array([5, id, 0]));
}

function handleKeys(event, pressedKey) {
    pressedKey = event.code;
    Object.keys(HATS).forEach(key => {
        if (HATS[key].defaultKey === pressedKey && check()) {
            EQUIP(HATS[key].id);
        }
    });
}
document.addEventListener("keypress", handleKeys);
const menu = document.createElement("div");
menu.id = "hatMacroMenu";
menu.innerHTML = `
    <div class="hatMacroMenu-container">
        <h1>Menu<sub>By DETIX</sub></h1>
        ${Object.entries(HATS).map(([hatName, { defaultKey }]) => `
            <div class="hatMacroMenu-input">
                <label for="${hatName}">${hatName}:</label>
                <input type="text" id="${hatName}" value="${defaultKey}">
            </div>`).join('')}
        <button id="closeButton">Close</button>
    </div>`;
menu.style.cssText = `
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    max-width: 300px;`;

const button = document.createElement("img");
button.src = "https://sploop.io/img/ui/favicon.png";
button.style.cssText = `
    position: fixed;
    top: 80px;
    left: 20px;
    width: 50px;
    cursor: pointer;`;

button.onclick = function() {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
};

document.body.appendChild(button);
document.body.appendChild(menu);

const style = document.createElement("style");
style.innerHTML = `
    .hatMacroMenu-container h1 {
        margin: 0 0 20px 0;
        padding: 0;
        text-align: center;
        font-size: 24px;
    }
    .hatMacroMenu-input {
        margin: 10px 0;
    }
    .hatMacroMenu-input label {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
    }
    .hatMacroMenu-input input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #555;
        box-sizing: border-box;
        background-color: #444;
        color: #fff;
    }
    #closeButton {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #555;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }
    #closeButton:hover {
        background-color: #777;
    }`;
document.head.appendChild(style);

document.getElementById("closeButton").addEventListener("click", function() {
    menu.style.display = "none";
});

Object.keys(HATS).forEach(hatName => {
    const inputId = HATS[hatName].id;
    document.getElementById(hatName).addEventListener("keyup", function(event) {
        const pressedKey = event.code;
        document.getElementById(hatName).value = pressedKey;
        HATS[hatName].defaultKey = pressedKey;
    });
});