☰

Custom Crosshair

A versatile crosshair customization tool for Deadshot.io, allowing users to personalize crosshair color, size, thickness, gap, and dot visibility for enhanced gameplay precision.

// ==UserScript==
// @namespace    custom-crosshair
// @license      MIT
// @author       ovftank
// @name         Custom Crosshair
// @description  A versatile crosshair customization tool for Deadshot.io, allowing users to personalize crosshair color, size, thickness, gap, and dot visibility for enhanced gameplay precision.
// @version      1.0
// @icon         https://deadshot.io/favicon.png
// @match        https://deadshot.io/
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';
    const crosshairSettings = {
        color: '#ffffff',
        barLength: '4px',
        thickness: '2px',
        gap: '0px',
        showDot: false,
        dotSize: '2px',
    };

    let topBar,
        bottomBar,
        leftBar,
        rightBar,
        dot,
        previewTopBar,
        previewBottomBar,
        previewLeftBar,
        previewRightBar,
        previewDot;

    function applyCrosshairStyles() {
        const gapValue = parseInt(crosshairSettings.gap);
        topBar.style.cssText = `
            width: ${crosshairSettings.thickness};
            height: ${crosshairSettings.barLength};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: calc(50% - ${gapValue}px - ${crosshairSettings.barLength});
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 200;
        `;

        bottomBar.style.cssText = `
            width: ${crosshairSettings.thickness};
            height: ${crosshairSettings.barLength};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: calc(50% + ${gapValue}px);
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 200;
        `;

        leftBar.style.cssText = `
            width: ${crosshairSettings.barLength};
            height: ${crosshairSettings.thickness};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: 50%;
            left: calc(50% - ${gapValue}px - ${crosshairSettings.barLength});
            transform: translate(0, -50%);
            z-index: 200;
        `;

        rightBar.style.cssText = `
            width: ${crosshairSettings.barLength};
            height: ${crosshairSettings.thickness};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: 50%;
            left: calc(50% + ${gapValue}px);
            transform: translate(0, -50%);
            z-index: 200;
        `;
        if (crosshairSettings.showDot) {
            dot.style.cssText = `
                width: ${crosshairSettings.dotSize};
                height: ${crosshairSettings.dotSize};
                background-color: ${crosshairSettings.color};
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                z-index: 200;
            `;
            document.body.appendChild(dot);
        } else {
            if (dot.parentElement) {
                dot.parentElement.removeChild(dot);
            }
        }
    }

    function applyPreviewStyles() {
        const gapValue = parseInt(crosshairSettings.gap);

        previewTopBar.style.cssText = `
            width: ${crosshairSettings.thickness};
            height: ${crosshairSettings.barLength};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: calc(50% - ${gapValue}px - ${crosshairSettings.barLength});
            left: 50%;
            transform: translate(-50%, 0);
        `;

        previewBottomBar.style.cssText = `
            width: ${crosshairSettings.thickness};
            height: ${crosshairSettings.barLength};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: calc(50% + ${gapValue}px);
            left: 50%;
            transform: translate(-50%, 0);
        `;

        previewLeftBar.style.cssText = `
            width: ${crosshairSettings.barLength};
            height: ${crosshairSettings.thickness};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: 50%;
            left: calc(50% - ${gapValue}px - ${crosshairSettings.barLength});
            transform: translate(0, -50%);
        `;

        previewRightBar.style.cssText = `
            width: ${crosshairSettings.barLength};
            height: ${crosshairSettings.thickness};
            background-color: ${crosshairSettings.color};
            position: absolute;
            top: 50%;
            left: calc(50% + ${gapValue}px);
            transform: translate(0, -50%);
        `;

        if (crosshairSettings.showDot) {
            previewDot.style.cssText = `
                width: ${crosshairSettings.dotSize};
                height: ${crosshairSettings.dotSize};
                background-color: ${crosshairSettings.color};
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
            `;
            previewContainer.appendChild(previewDot);
        } else if (previewDot.parentElement) {
            previewDot.parentElement.removeChild(previewDot);
        }
    }

    function createCrosshair() {
        topBar = document.createElement('div');
        bottomBar = document.createElement('div');
        leftBar = document.createElement('div');
        rightBar = document.createElement('div');
        dot = document.createElement('div');
        applyCrosshairStyles();

        document.body.appendChild(topBar);
        document.body.appendChild(bottomBar);
        document.body.appendChild(leftBar);
        document.body.appendChild(rightBar);
    }

    function createSettingsButton() {
        const settingsButton = document.createElement('button');
        settingsButton.innerText = '⚙️';
        settingsButton.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 24px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            z-index: 300;
        `;
        settingsButton.onclick = openSettingsModal;

        document.body.appendChild(settingsButton);
    }

    function createSettingsModal() {
        const modal = document.createElement('div');
        modal.id = 'crosshairSettingsModal';
        modal.style.cssText = `
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #1e1e2e;
        color: #f5f5f7;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        width: 320px;
        font-family: Arial, sans-serif;
        z-index: 300;
    `;

        modal.innerHTML = `
        <h2 style="margin-top: 0; font-size: 1.5em; text-align: center;">Customize Crosshair</h2>
        <div id="previewContainer" style="position: relative; width: 60px; height: 60px; margin: 15px auto; border: 2px solid #888; border-radius: 6px;">
            <div id="previewTopBar" style="position: absolute;"></div>
            <div id="previewBottomBar" style="position: absolute;"></div>
            <div id="previewLeftBar" style="position: absolute;"></div>
            <div id="previewRightBar" style="position: absolute;"></div>
            <div id="previewDot" style="position: absolute;"></div>
        </div>
        <label>Color: <input type="color" id="crosshairColor" value="${
            crosshairSettings.color
        }" style="border: none; outline: none;"></label><br><br>
        <label>Bar Length: <input type="number" id="barLength" value="${parseInt(
            crosshairSettings.barLength,
        )}" style="width: 50px;"> px</label><br><br>
        <label>Line Thickness: <input type="number" id="lineThickness" value="${parseInt(
            crosshairSettings.thickness,
        )}" style="width: 50px;"> px</label><br><br>
        <label>Gap: <input type="number" id="lineGap" value="${parseInt(
            crosshairSettings.gap,
        )}" style="width: 50px;"> px</label><br><br>
        <label>Dot: <input type="checkbox" id="showDot" ${
            crosshairSettings.showDot ? 'checked' : ''
        }></label><br><br>
        <label>Dot Size: <input type="number" id="dotSize" value="${parseInt(
            crosshairSettings.dotSize,
        )}" style="width: 50px;"> px</label><br><br>
        <button id="closeModal" style="background-color: #6a5acd; color: white; border: none; border-radius: 5px; padding: 8px 16px; cursor: pointer; font-size: 1em; width: 100%;">Close</button>
    `;

        document.body.appendChild(modal);
        previewTopBar = modal.querySelector('#previewTopBar');
        previewBottomBar = modal.querySelector('#previewBottomBar');
        previewLeftBar = modal.querySelector('#previewLeftBar');
        previewRightBar = modal.querySelector('#previewRightBar');
        previewDot = modal.querySelector('#previewDot');
        document.getElementById('crosshairColor').oninput = (e) => {
            crosshairSettings.color = e.target.value;
            applyCrosshairStyles();
            applyPreviewStyles();
        };

        document.getElementById('barLength').oninput = (e) => {
            let inputValue = parseInt(e.target.value);
            if (inputValue > 20) {
                inputValue = 20;
                e.target.value = 20;
            }
            crosshairSettings.barLength = inputValue + 'px';
            applyCrosshairStyles();
            applyPreviewStyles();
        };

        document.getElementById('lineThickness').oninput = (e) => {
            crosshairSettings.thickness = e.target.value + 'px';
            applyCrosshairStyles();
            applyPreviewStyles();
        };

        document.getElementById('lineGap').oninput = (e) => {
            crosshairSettings.gap = e.target.value + 'px';
            applyCrosshairStyles();
            applyPreviewStyles();
        };

        document.getElementById('showDot').onchange = (e) => {
            crosshairSettings.showDot = e.target.checked;
            applyCrosshairStyles();
            applyPreviewStyles();
        };

        document.getElementById('dotSize').oninput = (e) => {
            crosshairSettings.dotSize = e.target.value + 'px';
            applyCrosshairStyles();
            applyPreviewStyles();
        };
        document.getElementById('closeModal').onclick = closeSettingsModal;
        applyPreviewStyles();
    }

    function openSettingsModal() {
        document.getElementById('crosshairSettingsModal').style.display =
            'block';
    }

    function closeSettingsModal() {
        document.getElementById('crosshairSettingsModal').style.display =
            'none';
    }

    window.addEventListener('load', function () {
        try {
            createCrosshair();
            createSettingsButton();
            createSettingsModal();
        } catch (e) {
            console.error('Error initializing crosshair script:', e);
        }
    });
})();