Custom crosshair with GUI and press H to hide/show menu in Shell Shockers
// ==UserScript==
// @name Shell Shockers Crosshair Mod + Toggle Menu (H key)
// @namespace https://greatest.deepsurf.us/
// @version 1.1
// @description Custom crosshair with GUI and press H to hide/show menu in Shell Shockers
// @author Ade
// @match https://shellshock.io/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// === CONFIG ===
const config = {
color: '#00ffff',
thickness: 3,
size: 20,
gap: 10,
dot: true,
dotSize: 6,
outline: true,
outlineColor: '#000000'
};
// === CREATE CROSSHAIR CANVAS ===
const crosshair = document.createElement('canvas');
crosshair.style.position = 'fixed';
crosshair.style.top = '50%';
crosshair.style.left = '50%';
crosshair.style.transform = 'translate(-50%, -50%)';
crosshair.style.pointerEvents = 'none';
crosshair.style.zIndex = '9999999';
crosshair.width = 100;
crosshair.height = 100;
document.body.appendChild(crosshair);
const ctx = crosshair.getContext('2d');
// === DRAW CROSSHAIR FUNCTION ===
function drawCrosshair() {
ctx.clearRect(0, 0, crosshair.width, crosshair.height);
ctx.lineWidth = config.thickness;
ctx.strokeStyle = config.color;
ctx.fillStyle = config.color;
if(config.outline) {
ctx.shadowColor = config.outlineColor;
ctx.shadowBlur = 2;
} else {
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
}
const cx = crosshair.width / 2;
const cy = crosshair.height / 2;
// Lines
ctx.beginPath();
ctx.moveTo(cx, cy - config.gap - config.size);
ctx.lineTo(cx, cy - config.gap);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(cx, cy + config.gap);
ctx.lineTo(cx, cy + config.gap + config.size);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(cx - config.gap - config.size, cy);
ctx.lineTo(cx - config.gap, cy);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(cx + config.gap, cy);
ctx.lineTo(cx + config.gap + config.size, cy);
ctx.stroke();
// Dot
if (config.dot) {
ctx.beginPath();
ctx.arc(cx, cy, config.dotSize, 0, Math.PI * 2);
if(config.outline) {
ctx.shadowColor = config.outlineColor;
ctx.shadowBlur = 4;
}
ctx.fill();
}
}
drawCrosshair();
// === CREATE GUI ===
const gui = document.createElement('div');
gui.id = 'crosshair-gui';
gui.style = `
position: fixed;
top: 20px;
right: 20px;
z-index: 999999;
background: #111;
padding: 10px;
border: 2px solid #0ff;
border-radius: 10px;
color: #fff;
font-family: sans-serif;
max-width: 220px;
`;
gui.innerHTML = `
<div><b>[H] to hide/show menu</b></div>
<div><label>Color: <input type="color" id="x-color" value="${config.color}"></label></div>
<div><label>Thickness: <input type="range" id="x-thickness" min="1" max="10" value="${config.thickness}"></label></div>
<div><label>Size: <input type="range" id="x-size" min="2" max="50" value="${config.size}"></label></div>
<div><label>Gap: <input type="range" id="x-gap" min="1" max="30" value="${config.gap}"></label></div>
<div><label>Dot: <input type="checkbox" id="x-dot" ${config.dot ? 'checked' : ''}></label></div>
<div><label>Dot Size: <input type="range" id="x-dotsize" min="1" max="10" value="${config.dotSize}"></label></div>
<div><label>Outline: <input type="checkbox" id="x-outline" ${config.outline ? 'checked' : ''}></label></div>
<div><label>Outline Color: <input type="color" id="x-outlinecolor" value="${config.outlineColor}"></label></div>
`;
document.body.appendChild(gui);
// === UPDATE CONFIG AND REDRAW ON GUI INPUTS CHANGE ===
function updateConfig() {
config.color = document.getElementById('x-color').value;
config.thickness = parseInt(document.getElementById('x-thickness').value);
config.size = parseInt(document.getElementById('x-size').value);
config.gap = parseInt(document.getElementById('x-gap').value);
config.dot = document.getElementById('x-dot').checked;
config.dotSize = parseInt(document.getElementById('x-dotsize').value);
config.outline = document.getElementById('x-outline').checked;
config.outlineColor = document.getElementById('x-outlinecolor').value;
drawCrosshair();
}
gui.querySelectorAll('input').forEach(input => {
input.addEventListener('input', updateConfig);
});
// === TOGGLE GUI WITH H KEY ===
document.addEventListener('keydown', e => {
if (e.key.toLowerCase() === 'h') {
gui.style.display = (gui.style.display === 'none') ? 'block' : 'none';
}
});
})();