// ==UserScript==
// @name         Poxel Crosshair
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Custom Crosshairs for poxel.io
// @author       ceborix, myrrr
// @match        *://*poxel.io/*
// @match         *://*kour.io/* 
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    const STORAGE_KEY = 'crosshair-settings';
    function saveSettings(style) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ style }));
    }
    function loadSettings() {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
    }

    const state = {
        currentStyle: 'ceborix',
        ...loadSettings()
    };

    const crosshair = document.createElement('div');
    crosshair.id = 'custom-crosshair';
    crosshair.style.position = 'fixed';
    crosshair.style.top = '50%';
    crosshair.style.left = '50%';
    crosshair.style.transform = 'translate(-50%, -50%)';
    crosshair.style.zIndex = '9999';
    crosshair.style.pointerEvents = 'none';
    document.body.appendChild(crosshair);

    function clearCrosshair() {
        crosshair.innerHTML = '';
        crosshair.style.background = '';
        crosshair.style.border = '';
        crosshair.style.borderRadius = '';
        crosshair.style.filter = '';
        crosshair.style.width = '';
        crosshair.style.height = '';
        crosshair.style.maskImage = '';
        crosshair.style.webkitMaskImage = '';
        crosshair.style.display = 'none';
    }

    function applyCrosshair(style) {
        clearCrosshair();
        if (!style) return;

        crosshair.style.display = 'flex';
        crosshair.style.alignItems = 'center';
        crosshair.style.justifyContent = 'center';

        switch (style) {
            case 'myrrr':
                crosshair.style.width = '15px';
                crosshair.style.height = '15px';
                crosshair.style.filter = 'drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #ccf) drop-shadow(0 0 15px #ddf)';
                const horiz = document.createElement('div');
                Object.assign(horiz.style, {
                    position: 'absolute',
                    width: '15px',
                    height: '4px',
                    background: 'linear-gradient(to bottom, #ffffff, #e0ccff)',
                    borderRadius: '1px',
                });
                const vert = document.createElement('div');
                Object.assign(vert.style, {
                    position: 'absolute',
                    width: '4px',
                    height: '15px',
                    background: 'linear-gradient(to bottom, #ffffff, #e0ccff)',
                    borderRadius: '1px',
                });
                crosshair.appendChild(horiz);
                crosshair.appendChild(vert);
                break;

            case 'dot':
                crosshair.style.width = '8px';
                crosshair.style.height = '8px';
                crosshair.style.borderRadius = '50%';
                crosshair.style.background = '#fff';
                crosshair.style.filter = 'drop-shadow(0 0 4px #66f)';
                break;

            case 'shotgun':
                crosshair.style.width = '20px';
                crosshair.style.height = '20px';
                crosshair.style.border = '2px solid #0ff';
                crosshair.style.borderRadius = '50%';
                crosshair.style.boxSizing = 'border-box';
                crosshair.style.background = 'rgba(255, 255, 255, 0.1)';
                crosshair.style.filter = 'drop-shadow(0 0 6px #0ff)';
                break;

            case 'ceborix':
                crosshair.style.width = '12px';
                crosshair.style.height = '12px';
                crosshair.style.filter = '';
                const horizCeborix = document.createElement('div');
                Object.assign(horizCeborix.style, {
                    position: 'absolute',
                    width: '12px',
                    height: '4px',
                    background: '#fff',
                    borderRadius: '1px',
                });
                const vertCeborix = document.createElement('div');
                Object.assign(vertCeborix.style, {
                    position: 'absolute',
                    width: '4px',
                    height: '12px',
                    background: '#fff',
                    borderRadius: '1px',
                });
                crosshair.appendChild(horizCeborix);
                crosshair.appendChild(vertCeborix);
                break;
        }
    }

    const style = document.createElement('style');
    style.textContent = `
        #crosshair-settings {
            position: fixed;
            top: 150px;
            right: 10px;
            z-index: 99999;
            font-family: Arial, sans-serif;
            background-color: #222;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #crosshair-settings-button {
            background: transparent;
            border: none;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
            filter: drop-shadow(0 0 3px #000);
            transition: transform 0.3s ease;
        }

        #crosshair-settings-button:hover {
            transform: scale(1.1);
        }

        #crosshair-menu {
            display: none;
            flex-direction: column;
            margin-top: 10px;
            background: rgba(30, 30, 30, 0.95);
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 0 10px #000;
            transition: opacity 0.3s ease-in-out;
        }

        .crosshair-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            color: #fff;
            font-size: 14px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 20px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4caf50;
        }

        input:checked + .slider:before {
            transform: translateX(20px);
        }
    `;
    document.head.appendChild(style);

    const menuContainer = document.createElement('div');
    menuContainer.id = 'crosshair-settings';

    const settingsButton = document.createElement('button');
    settingsButton.id = 'crosshair-settings-button';
    settingsButton.innerHTML = '⚙️';

    const menu = document.createElement('div');
    menu.id = 'crosshair-menu';

const crosshairOptions = [
    { label: "ceborix's crosshair", key: 'ceborix' },
    { label: "myrrr's crosshair", key: 'myrrr' },
    { label: 'Dot', key: 'dot' },
    { label: 'Shotgun', key: 'shotgun' }
];

    function createOption(label, styleKey) {
        const row = document.createElement('div');
        row.className = 'crosshair-option';

        const text = document.createElement('span');
        text.textContent = label;

        const toggleContainer = document.createElement('label');
        toggleContainer.className = 'switch';

        const toggle = document.createElement('input');
        toggle.type = 'checkbox';
        toggle.checked = state.currentStyle === styleKey;

        const slider = document.createElement('span');
        slider.className = 'slider';

        toggle.onchange = () => {
            if (toggle.checked) {
                state.currentStyle = styleKey;
                saveSettings(state.currentStyle);
                applyCrosshair(state.currentStyle);

                document.querySelectorAll('#crosshair-menu input[type=checkbox]').forEach(cb => {
                    if (cb !== toggle) cb.checked = false;
                });
            } else {
                state.currentStyle = null;
                saveSettings(null);
                clearCrosshair();
            }
        };

        toggleContainer.appendChild(toggle);
        toggleContainer.appendChild(slider);
        row.appendChild(text);
        row.appendChild(toggleContainer);
        return row;
    }

    crosshairOptions.forEach(opt => menu.appendChild(createOption(opt.label, opt.key)));

    menuContainer.onclick = (e) => {
    if (e.target.closest('#crosshair-menu')) return;

        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
    };


    menuContainer.appendChild(settingsButton);
    menuContainer.appendChild(menu);
    document.body.appendChild(menuContainer);

    applyCrosshair(state.currentStyle);
})();