// ==UserScript==
// @name         Custom Crosshair🏆🔥💪(Advanced with Hotkey)
// @namespace    voidrevenant
// @version      2.0
// @description  Advanced viewport scope layout framework with live UI rendering controls and a menu hide hotkey. good luck heheh😎
// @author       voidrevenant
// @match        *://kour.io/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Global configuration object tracking custom user properties
    const _cfg = {
        visible: true,
        menuOpen: false,
        uiVisible: true, // Tracks whether the menu button itself is hidden or shown
        size: 440,
        color: '#00ff77',
        opacity: 1.0,
        animSpeed: 20 // seconds per full rotation
    };

    // Inject CSS keyframes directly into the head for the rotating arc animation
    const style_sheet = document.createElement('style');
    style_sheet.innerHTML = `
        @keyframes scope_spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style_sheet);

    // --- DOM Elements Instantiation ---
    const scope_el = document.createElement('div');
    const ui_wrap = document.createElement('div');
    const toggle_btn = document.createElement('button');
    const opt_panel = document.createElement('div');

    // --- Base Layout Assembly ---
    scope_el.id = 'scope_overlay_core';
    Object.assign(scope_el.style, {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: `${_cfg.size}px`,
        height: `${_cfg.size}px`,
        pointerEvents: 'none',
        zIndex: '99998',
        display: 'block',
        opacity: _cfg.opacity,
        transition: 'width 0.1s ease, height 0.1s ease'
    });

    // Helper function to render or update the SVG/HTML inside the crosshair ring
    function renderCrosshairGraphics() {
        scope_el.innerHTML = `
            <!-- Outer Tracking Ring -->
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid ${_cfg.color}66; border-radius: 50%; box-sizing: border-box;"></div>

            <!-- Animated Dashed Tracking Arc (Rotates via CSS) -->
            <div style="
                position: absolute; top: 2%; left: 2%; width: 96%; height: 96%;
                border: 1px dashed ${_cfg.color}55; border-radius: 50%; box-sizing: border-box;
                animation: scope_spin ${_cfg.animSpeed}s linear infinite;
            "></div>

            <!-- Main Heavy Scope Ring with Multi-Color Gradient Core -->
            <div id="scope_main_ring" style="
                position: absolute; top: 6%; left: 6%; width: 88%; height: 88%;
                border: 6px solid ${_cfg.color}; border-radius: 50%; box-sizing: border-box;
                background: radial-gradient(circle, rgba(0,0,0,0) 55%, rgba(130, 20, 120, 0.4) 78%, rgba(40, 10, 60, 0.7) 95%);
                box-shadow: 0 0 20px ${_cfg.color}, inset 0 0 15px ${_cfg.color}88;
            "></div>

            <!-- Center Crosshair Markers -->
            <div style="position: absolute; top: 46%; left: 50%; width: 2px; height: 8%; background-color: ${_cfg.color}; transform: translateX(-50%); box-shadow: 0 0 6px ${_cfg.color};"></div>
            <div style="position: absolute; top: 50%; left: 46%; width: 8%; height: 2px; background-color: ${_cfg.color}; transform: translateY(-50%); box-shadow: 0 0 6px ${_cfg.color};"></div>
        `;
    }
    renderCrosshairGraphics(); // Initial draw

    ui_wrap.id = 'scope_ui_root';
    Object.assign(ui_wrap.style, {
        position: 'fixed',
        top: '25px',
        right: '25px',
        zIndex: '99999',
        fontFamily: 'monospace',
        display: 'block' // Controlled by the hotkey
    });

    toggle_btn.innerText = '[📌Crosshair MENU]';
    Object.assign(toggle_btn.style, {
        padding: '8px 12px',
        backgroundColor: '#0a0a0a',
        color: _cfg.color,
        border: `1px solid ${_cfg.color}`,
        borderRadius: '4px',
        cursor: 'pointer',
        fontSize: '12px',
        fontWeight: 'bold',
        letterSpacing: '1px'
    });

    opt_panel.id = 'scope_control_card';
    Object.assign(opt_panel.style, {
        display: 'none',
        marginTop: '6px',
        width: '210px',
        backgroundColor: 'rgba(10, 10, 10, 0.95)',
        border: `1px solid ${_cfg.color}66`,
        padding: '12px',
        color: '#fff',
        fontSize: '11px',
        borderRadius: '4px'
    });

    // Populate control menu layout panel elements
    opt_panel.innerHTML = `
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <span>RENDER SCOPE</span>
            <input type="checkbox" id="chk_render" checked style="accent-color:${_cfg.color}; cursor:pointer;">
        </div>
        <div style="margin-bottom:12px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
                <span>SCOPE SIZE</span><span id="lbl_size">${_cfg.size}px</span>
            </div>
            <input type="range" id="sld_size" min="150" max="600" value="${_cfg.size}" style="width:100%; accent-color:${_cfg.color};">
        </div>
        <div style="margin-bottom:12px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
                <span>OPACITY</span><span id="lbl_opacity">100%</span>
            </div>
            <input type="range" id="sld_opacity" min="10" max="100" value="100" style="width:100%; accent-color:${_cfg.color};">
        </div>
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <span>RETICLE COLOR</span>
            <input type="color" id="clr_theme" value="${_cfg.color}" style="border:none; background:none; cursor:pointer; width:30px; height:24px;">
        </div>
        <div style="margin-top:10px; text-align:center; color:#888; font-size:9px;">
            Press 'H' to completely hide menu
        </div>
    `;

    // --- Core Logic & Event Bindings ---
    toggle_btn.onclick = () => {
        _cfg.menuOpen = !_cfg.menuOpen;
        opt_panel.style.display = _cfg.menuOpen ? 'block' : 'none';
    };

    toggle_btn.onmouseover = () => { toggle_btn.style.backgroundColor = '#151515'; };
    toggle_btn.onmouseout = () => { toggle_btn.style.backgroundColor = '#0a0a0a'; };

    // --- Initialization Deferred Injection ---
    document.body.appendChild(scope_el);
    ui_wrap.appendChild(toggle_btn);
    ui_wrap.appendChild(opt_panel);
    document.body.appendChild(ui_wrap);

    // --- Live DOM Listeners for Real-time Modifying ---

    // Toggle scope canvas execution
    document.getElementById('chk_render').onchange = (e) => {
        _cfg.visible = e.target.checked;
        scope_el.style.display = _cfg.visible ? 'block' : 'none';
    };

    // Live resizing slider execution
    document.getElementById('sld_size').oninput = (e) => {
        _cfg.size = e.target.value;
        document.getElementById('lbl_size').innerText = `${_cfg.size}px`;
        scope_el.style.width = `${_cfg.size}px`;
        scope_el.style.height = `${_cfg.size}px`;
    };

    // Live opacity transparency level execution
    document.getElementById('sld_opacity').oninput = (e) => {
        _cfg.opacity = e.target.value / 100;
        document.getElementById('lbl_opacity').innerText = `${e.target.value}%`;
        scope_el.style.opacity = _cfg.opacity;
    };

    // Live color picker theme palette updating execution
    document.getElementById('clr_theme').oninput = (e) => {
        _cfg.color = e.target.value;

        // Sync the main menu configuration elements to match the newly selected color
        toggle_btn.style.color = _cfg.color;
        toggle_btn.style.border = `1px solid ${_cfg.color}`;
        opt_panel.style.border = `1px solid ${_cfg.color}66`;
        document.getElementById('chk_render').style.accentColor = _cfg.color;
        document.getElementById('sld_size').style.accentColor = _cfg.color;
        document.getElementById('sld_opacity').style.accentColor = _cfg.color;

        // Force a graphic rerender of the central UI scope elements using the fresh hex colors
        renderCrosshairGraphics();
    };

    // --- Menu Toggle Hotkey Event Listener ---
    window.addEventListener('keydown', (event) => {
        // Checks if the key pressed is 'h' or 'H'
        if (event.key.toLowerCase() === 'h') {
            _cfg.uiVisible = !_cfg.uiVisible;
            ui_wrap.style.display = _cfg.uiVisible ? 'block' : 'none';
        }
    });

})();