`;
document.body.appendChild(panel);
return panel;
};
const panel = setupSettingsPanel();
// === VIP FEATURES STATE ===
let isVip = false;
let hitmarkerEnabled = true;
let screenFlashEnabled = true;
let laserBeamEnabled = true;
let shockwaveEnabled = true;
let glowEffectEnabled = true;
let trailEffectEnabled = true;
let soundEffectEnabled = true;
let crosshairColorEnabled = true;
let dynamicZoomEnabled = true;
let hitmarkerSize = 40;
let screenFlashIntensity = 0.3;
let laserBeamWidth = 2;
let shockwaveSize = 200;
let glowIntensity = 10;
let trailLength = 5;
let soundVolume = 0.5;
let colorChangeSpeed = 5;
let zoomSensitivity = 1;
let crosshairHue = 0;
// === SHOOT SOUND ===
const setupShootSound = () => {
const shootSound = new Audio('https://cdn.pixabay.com/audio/2022/03/10/audio_d5b3969f3a.mp3');
shootSound.volume = soundVolume;
return shootSound;
};
const shootSound = setupShootSound();
// === TRAIL EFFECT ===
const setupTrailEffect = () => {
const trailCanvas = createElement('canvas', 'kour-particles');
document.body.appendChild(trailCanvas);
trailCanvas.width = window.innerWidth;
trailCanvas.height = window.innerHeight;
const trailCtx = trailCanvas.getContext('2d');
let trailPositions = [];
const updateTrail = () => {
trailCtx.clearRect(0, 0, trailCanvas.width, trailCanvas.height);
if (trailEffectEnabled && trailPositions.length > 0) {
trailPositions.forEach((pos, i) => {
trailCtx.beginPath();
trailCtx.arc(pos.x, pos.y, 3, 0, Math.PI * 2);
trailCtx.fillStyle = `hsla(${crosshairHue}, 100%, 50%, ${pos.opacity})`;
trailCtx.fill();
pos.opacity -= 0.05;
if (pos.opacity <= 0) trailPositions.splice(i, 1);
});
}
requestAnimationFrame(updateTrail);
};
updateTrail();
window.addEventListener('resize', () => {
trailCanvas.width = window.innerWidth;
trailCanvas.height = window.innerHeight;
});
return { trailCanvas, trailPositions };
};
const { trailCanvas, trailPositions } = setupTrailEffect();
// === EVENT LISTENERS ===
const setupEventListeners = () => {
let crossAnimEnabled = false;
// Close Panel
panel.querySelector('#closePanel').addEventListener('click', () => {
panel.classList.add('hidden');
gearIcon.style.display = 'block';
keyboard.style.display = 'none';
});
// Gear Icon to Open Panel
gearIcon.addEventListener('click', () => {
panel.classList.remove('hidden');
gearIcon.style.display = 'none';
});
// Reset Everything
panel.querySelector('#resetAll').addEventListener('click', () => {
// Reset Crosshairs
Object.values(crosshairs).forEach(ch => {
ch.style.display = 'none';
ch.classList.remove('crosshair-animated');
ch.classList.remove('comic-effect');
ch.style.boxShadow = '';
ch.style.filter = '';
});
chCustom.style.display = 'none';
chCustom.classList.remove('crosshair-animated');
chCustom.classList.remove('comic-effect');
chCustom.style.boxShadow = '';
chCustom.style.filter = '';
particleCanvas.classList.remove('comic-effect');
trailCanvas.classList.remove('comic-effect');
crossAnimEnabled = false;
panel.querySelector('#crossAnim').textContent = 'Toggle Animation';
panel.querySelector('#crosshairSize').value = 80;
Object.values(crosshairs).forEach(ch => {
ch.style.width = '80px';
ch.style.height = '80px';
});
chCustom.style.width = '80px';
chCustom.style.height = '80px';
panel.querySelector('#customOpacity').value = 1;
chCustom.style.opacity = 1;
panel.querySelector('#animSpeed').value = 3;
document.querySelectorAll('.crosshair-animated').forEach(el => {
el.style.animationDuration = '3s';
});
// Reset Color Tint
autoColor = false;
currentHue = 0;
overlay.style.backgroundColor = 'transparent';
panel.querySelector('#colorSlider').value = 0;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
// Reset Effects
particlesEnabled = false;
panel.querySelector('#particlesToggle').textContent = 'Toggle Particles';
particleStyle = 'fire';
panel.querySelector('#particleSize').value = 5;
particleSize = 5;
initParticles();
comicEffectEnabled = false;
panel.querySelector('#comicToggle').textContent = 'Toggle Comic Effect';
panel.querySelector('#comicIntensity').value = 0.5;
comicIntensity = 0.5;
glitchEnabled = false;
glitch.style.opacity = 0;
panel.querySelector('#glitchToggle').textContent = 'Toggle Glitch';
panel.querySelector('#glitchIntensity').value = 0.3;
glitchIntensity = 0.3;
vignetteEnabled = false;
vignette.style.opacity = 0;
panel.querySelector('#vignetteToggle').textContent = 'Toggle Vignette';
panel.querySelector('#vignetteOpacity').value = 0.7;
vignetteOpacity = 0.7;
// Reset VIP Features
isVip = false;
panel.querySelector('#vipMessage').style.display = 'none';
for (let i = 4; i <= 16; i++) {
panel.querySelector(`#cross${i}`).style.display = 'none';
}
panel.querySelector('#confettiToggle').style.display = 'none';
panel.querySelector('#confettiAmount').style.display = 'none';
panel.querySelector('#hitmarkerToggle').style.display = 'none';
panel.querySelector('#hitmarkerSize').style.display = 'none';
panel.querySelector('#screenFlashToggle').style.display = 'none';
panel.querySelector('#screenFlashIntensity').style.display = 'none';
panel.querySelector('#laserBeamToggle').style.display = 'none';
panel.querySelector('#laserBeamWidth').style.display = 'none';
panel.querySelector('#shockwaveToggle').style.display = 'none';
panel.querySelector('#shockwaveSize').style.display = 'none';
panel.querySelector('#glowEffectToggle').style.display = 'none';
panel.querySelector('#glowIntensity').style.display = 'none';
panel.querySelector('#trailEffectToggle').style.display = 'none';
panel.querySelector('#trailLength').style.display = 'none';
panel.querySelector('#soundEffectToggle').style.display = 'none';
panel.querySelector('#soundVolume').style.display = 'none';
panel.querySelector('#crosshairColorToggle').style.display = 'none';
panel.querySelector('#colorChangeSpeed').style.display = 'none';
panel.querySelector('#dynamicZoomToggle').style.display = 'none';
panel.querySelector('#zoomSensitivity').style.display = 'none';
confettiEnabled = true;
panel.querySelector('#confettiToggle').textContent = 'Toggle Confetti on Shoot';
panel.querySelector('#confettiAmount').value = 100;
confettiAmount = 100;
hitmarkerEnabled = true;
panel.querySelector('#hitmarkerToggle').textContent = 'Toggle Hitmarker';
panel.querySelector('#hitmarkerSize').value = 40;
hitmarkerSize = 40;
hitmarker.style.width = `${hitmarkerSize}px`;
hitmarker.style.height = `${hitmarkerSize}px`;
screenFlashEnabled = true;
panel.querySelector('#screenFlashToggle').textContent = 'Toggle Screen Flash';
panel.querySelector('#screenFlashIntensity').value = 0.3;
screenFlashIntensity = 0.3;
laserBeamEnabled = true;
panel.querySelector('#laserBeamToggle').textContent = 'Toggle Laser Beam';
panel.querySelector('#laserBeamWidth').value = 2;
laserBeamWidth = 2;
laserBeam.style.width = `${laserBeamWidth}px`;
shockwaveEnabled = true;
panel.querySelector('#shockwaveToggle').textContent = 'Toggle Shockwave';
panel.querySelector('#shockwaveSize').value = 200;
shockwaveSize = 200;
glowEffectEnabled = true;
panel.querySelector('#glowEffectToggle').textContent = 'Toggle Crosshair Glow';
panel.querySelector('#glowIntensity').value = 10;
glowIntensity = 10;
trailEffectEnabled = true;
panel.querySelector('#trailEffectToggle').textContent = 'Toggle Crosshair Trail';
panel.querySelector('#trailLength').value = 5;
trailLength = 5;
soundEffectEnabled = true;
panel.querySelector('#soundEffectToggle').textContent = 'Toggle Shoot Sound';
panel.querySelector('#soundVolume').value = 0.5;
soundVolume = 0.5;
shootSound.volume = soundVolume;
crosshairColorEnabled = true;
panel.querySelector('#crosshairColorToggle').textContent = 'Toggle Crosshair Color Change';
panel.querySelector('#colorChangeSpeed').value = 5;
colorChangeSpeed = 5;
dynamicZoomEnabled = true;
panel.querySelector('#dynamicZoomToggle').textContent = 'Toggle Dynamic Zoom';
panel.querySelector('#zoomSensitivity').value = 1;
zoomSensitivity = 1;
crosshairHue = 0;
panel.querySelector('#vipCodeInput').value = '';
});
// Crosshair Selection
for (let i = 1; i <= 16; i++) {
const button = panel.querySelector(`#cross${i}`);
if (button) {
button.addEventListener('click', () => {
if (i > 3 && !isVip) {
alert('Enter the VIP code to unlock this crosshair!');
return;
}
Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
chCustom.style.display = 'none';
crosshairs[`ch${i}`].style.display = 'block';
if (crossAnimEnabled) crosshairs[`ch${i}`].classList.add('crosshair-animated');
else crosshairs[`ch${i}`].classList.remove('crosshair-animated');
if (comicEffectEnabled) crosshairs[`ch${i}`].classList.add('comic-effect');
else crosshairs[`ch${i}`].classList.remove('comic-effect');
if (glowEffectEnabled && isVip) {
crosshairs[`ch${i}`].style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
}
});
}
}
// Custom Crosshair
panel.querySelector('#crossCustom').addEventListener('click', () => {
Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
chCustom.style.display = 'block';
if (crossAnimEnabled) chCustom.classList.add('crosshair-animated');
else chCustom.classList.remove('crosshair-animated');
if (comicEffectEnabled) chCustom.classList.add('comic-effect');
else chCustom.classList.remove('comic-effect');
if (glowEffectEnabled && isVip) {
chCustom.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
}
});
// Turn Off Crosshair
panel.querySelector('#crossOff').addEventListener('click', () => {
Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
chCustom.style.display = 'none';
});
// Crosshair Size
panel.querySelector('#crosshairSize').addEventListener('input', (e) => {
const size = e.target.value;
Object.values(crosshairs).forEach(ch => {
ch.style.width = `${size}px`;
ch.style.height = `${size}px`;
});
chCustom.style.width = `${size}px`;
chCustom.style.height = `${size}px`;
});
// Custom Crosshair Upload
panel.querySelector('#customCrosshair').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
chCustom.style.backgroundImage = `url(${event.target.result})`;
chCustom.style.display = 'block';
Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
if (crossAnimEnabled) chCustom.classList.add('crosshair-animated');
if (comicEffectEnabled) chCustom.classList.add('comic-effect');
if (glowEffectEnabled && isVip) {
chCustom.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
}
};
reader.readAsDataURL(file);
}
});
// Custom Crosshair Opacity
panel.querySelector('#customOpacity').addEventListener('input', (e) => {
chCustom.style.opacity = e.target.value;
});
// Toggle Crosshair Animation
panel.querySelector('#crossAnim').addEventListener('click', () => {
crossAnimEnabled = !crossAnimEnabled;
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
if (crossAnimEnabled) activeCrosshair.classList.add('crosshair-animated');
else activeCrosshair.classList.remove('crosshair-animated');
}
panel.querySelector('#crossAnim').textContent = crossAnimEnabled ? 'Disable Animation' : 'Toggle Animation';
});
// Animation Speed
panel.querySelector('#animSpeed').addEventListener('input', (e) => {
document.querySelectorAll('.crosshair-animated').forEach(el => {
el.style.animationDuration = `${e.target.value}s`;
});
});
// Color Tint Controls
panel.querySelector('#colorSlider').addEventListener('input', (e) => {
autoColor = false;
currentHue = parseInt(e.target.value);
overlay.style.backgroundColor = `hsl(${currentHue}, 100%, 50%)`;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
});
panel.querySelector('#autoColor').addEventListener('click', () => {
autoColor = !autoColor;
panel.querySelector('#autoColor').textContent = autoColor ? 'Disable Auto Cycle' : 'Auto Cycle';
});
panel.querySelector('#colorOff').addEventListener('click', () => {
autoColor = false;
overlay.style.backgroundColor = 'transparent';
panel.querySelector('#colorSlider').value = 0;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
});
panel.querySelector('#presetNeon').addEventListener('click', () => {
autoColor = false;
currentHue = 180;
overlay.style.backgroundColor = `hsl(180, 100%, 50%)`;
panel.querySelector('#colorSlider').value = currentHue;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
});
panel.querySelector('#presetPastel').addEventListener('click', () => {
autoColor = false;
currentHue = 300;
overlay.style.backgroundColor = `hsl(300, 50%, 80%)`;
panel.querySelector('#colorSlider').value = currentHue;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
});
panel.querySelector('#presetMono').addEventListener('click', () => {
autoColor = false;
currentHue = 0;
overlay.style.backgroundColor = `hsl(0, 0%, 50%)`;
panel.querySelector('#colorSlider').value = currentHue;
panel.querySelector('#autoColor').textContent = 'Auto Cycle';
});
// Particle Effects Controls
panel.querySelector('#particlesToggle').addEventListener('click', () => {
particlesEnabled = !particlesEnabled;
if (particlesEnabled && comicEffectEnabled) {
particleCanvas.classList.add('comic-effect');
} else {
particleCanvas.classList.remove('comic-effect');
}
panel.querySelector('#particlesToggle').textContent = particlesEnabled ? 'Disable Particles' : 'Toggle Particles';
});
panel.querySelector('#particleFire').addEventListener('click', () => {
particleStyle = 'fire';
});
panel.querySelector('#particleNeon').addEventListener('click', () => {
particleStyle = 'neon';
});
panel.querySelector('#particleMagic').addEventListener('click', () => {
particleStyle = 'magic';
});
panel.querySelector('#particleSize').addEventListener('input', (e) => {
particleSize = parseFloat(e.target.value);
initParticles();
});
// Comic Effect
panel.querySelector('#comicToggle').addEventListener('click', () => {
comicEffectEnabled = !comicEffectEnabled;
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (comicEffectEnabled) {
if (activeCrosshair) activeCrosshair.classList.add('comic-effect');
if (particlesEnabled) particleCanvas.classList.add('comic-effect');
if (trailEffectEnabled && isVip) trailCanvas.classList.add('comic-effect');
} else {
if (activeCrosshair) activeCrosshair.classList.remove('comic-effect');
particleCanvas.classList.remove('comic-effect');
trailCanvas.classList.remove('comic-effect');
}
panel.querySelector('#comicToggle').textContent = comicEffectEnabled ? 'Disable Comic Effect' : 'Toggle Comic Effect';
});
panel.querySelector('#comicIntensity').addEventListener('input', (e) => {
comicIntensity = parseFloat(e.target.value);
document.querySelectorAll('.comic-effect::after').forEach(el => {
if (el) el.style.opacity = comicIntensity;
});
});
// Glitch Effect
panel.querySelector('#glitchToggle').addEventListener('click', () => {
glitchEnabled = !glitchEnabled;
glitch.style.opacity = glitchEnabled ? glitchIntensity : '0';
panel.querySelector('#glitchToggle').textContent = glitchEnabled ? 'Disable Glitch' : 'Toggle Glitch';
});
panel.querySelector('#glitchIntensity').addEventListener('input', (e) => {
glitchIntensity = parseFloat(e.target.value);
if (glitchEnabled) glitch.style.opacity = glitchIntensity;
});
// Vignette Effect
panel.querySelector('#vignetteToggle').addEventListener('click', () => {
vignetteEnabled = !vignetteEnabled;
vignette.style.opacity = vignetteEnabled ? vignetteOpacity : '0';
panel.querySelector('#vignetteToggle').textContent = vignetteEnabled ? 'Disable Vignette' : 'Toggle Vignette';
});
panel.querySelector('#vignetteOpacity').addEventListener('input', (e) => {
vignetteOpacity = parseFloat(e.target.value);
if (vignetteEnabled) vignette.style.opacity = vignetteOpacity;
});
// Virtual Keyboard Functionality
const vipCodeInput = panel.querySelector('#vipCodeInput');
vipCodeInput.addEventListener('click', () => {
keyboard.style.display = 'flex';
});
keyboard.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
const value = btn.textContent;
if (value === 'Space') {
vipCodeInput.value += ' ';
} else if (value === '⌫') {
vipCodeInput.value = vipCodeInput.value.slice(0, -1);
} else if (value === 'Close') {
keyboard.style.display = 'none';
} else {
vipCodeInput.value += value;
}
});
});
// VIP Features Unlock
panel.querySelector('#checkCode').addEventListener('click', () => {
const code = vipCodeInput.value.trim().toUpperCase();
if (code === 'JUSTKOUR') {
isVip = true;
panel.querySelector('#vipMessage').style.display = 'block';
for (let i = 4; i <= 16; i++) {
const btn = panel.querySelector(`#cross${i}`);
if (btn) btn.style.display = 'block';
}
panel.querySelector('#confettiToggle').style.display = 'block';
panel.querySelector('#confettiAmount').style.display = 'block';
panel.querySelector('#hitmarkerToggle').style.display = 'block';
panel.querySelector('#hitmarkerSize').style.display = 'block';
panel.querySelector('#screenFlashToggle').style.display = 'block';
panel.querySelector('#screenFlashIntensity').style.display = 'block';
panel.querySelector('#laserBeamToggle').style.display = 'block';
panel.querySelector('#laserBeamWidth').style.display = 'block';
panel.querySelector('#shockwaveToggle').style.display = 'block';
panel.querySelector('#shockwaveSize').style.display = 'block';
panel.querySelector('#glowEffectToggle').style.display = 'block';
panel.querySelector('#glowIntensity').style.display = 'block';
panel.querySelector('#trailEffectToggle').style.display = 'block';
panel.querySelector('#trailLength').style.display = 'block';
panel.querySelector('#soundEffectToggle').style.display = 'block';
panel.querySelector('#soundVolume').style.display = 'block';
panel.querySelector('#crosshairColorToggle').style.display = 'block';
panel.querySelector('#colorChangeSpeed').style.display = 'block';
panel.querySelector('#dynamicZoomToggle').style.display = 'block';
panel.querySelector('#zoomSensitivity').style.display = 'block';
alert('VIP Unlocked! Enjoy the exclusive features.');
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
const crosshairRect = activeCrosshair.getBoundingClientRect();
initConfetti(crosshairRect.left + crosshairRect.width / 2, crosshairRect.top + crosshairRect.height / 2);
} else {
initConfetti();
}
animateConfetti();
keyboard.style.display = 'none';
} else {
alert('Invalid code! Please enter JUSTKOUR to unlock VIP features.');
}
});
// VIP Shoot Effects
panel.querySelector('#confettiToggle').addEventListener('click', () => {
confettiEnabled = !confettiEnabled;
panel.querySelector('#confettiToggle').textContent = confettiEnabled ? 'Disable Confetti on Shoot' : 'Toggle Confetti on Shoot';
});
panel.querySelector('#confettiAmount').addEventListener('input', (e) => {
confettiAmount = parseInt(e.target.value);
});
panel.querySelector('#hitmarkerToggle').addEventListener('click', () => {
hitmarkerEnabled = !hitmarkerEnabled;
panel.querySelector('#hitmarkerToggle').textContent = hitmarkerEnabled ? 'Disable Hitmarker' : 'Toggle Hitmarker';
});
panel.querySelector('#hitmarkerSize').addEventListener('input', (e) => {
hitmarkerSize = parseInt(e.target.value);
hitmarker.style.width = `${hitmarkerSize}px`;
hitmarker.style.height = `${hitmarkerSize}px`;
});
panel.querySelector('#screenFlashToggle').addEventListener('click', () => {
screenFlashEnabled = !screenFlashEnabled;
panel.querySelector('#screenFlashToggle').textContent = screenFlashEnabled ? 'Disable Screen Flash' : 'Toggle Screen Flash';
});
panel.querySelector('#screenFlashIntensity').addEventListener('input', (e) => {
screenFlashIntensity = parseFloat(e.target.value);
});
panel.querySelector('#laserBeamToggle').addEventListener('click', () => {
laserBeamEnabled = !laserBeamEnabled;
panel.querySelector('#laserBeamToggle').textContent = laserBeamEnabled ? 'Disable Laser Beam' : 'Toggle Laser Beam';
});
panel.querySelector('#laserBeamWidth').addEventListener('input', (e) => {
laserBeamWidth = parseInt(e.target.value);
laserBeam.style.width = `${laserBeamWidth}px`;
});
panel.querySelector('#shockwaveToggle').addEventListener('click', () => {
shockwaveEnabled = !shockwaveEnabled;
panel.querySelector('#shockwaveToggle').textContent = shockwaveEnabled ? 'Disable Shockwave' : 'Toggle Shockwave';
});
panel.querySelector('#shockwaveSize').addEventListener('input', (e) => {
shockwaveSize = parseInt(e.target.value);
});
// VIP Visual Enhancements
panel.querySelector('#glowEffectToggle').addEventListener('click', () => {
glowEffectEnabled = !glowEffectEnabled;
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
if (glowEffectEnabled) {
activeCrosshair.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
} else {
activeCrosshair.style.boxShadow = '';
}
}
panel.querySelector('#glowEffectToggle').textContent = glowEffectEnabled ? 'Disable Crosshair Glow' : 'Toggle Crosshair Glow';
});
panel.querySelector('#glowIntensity').addEventListener('input', (e) => {
glowIntensity = parseInt(e.target.value);
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair && glowEffectEnabled) {
activeCrosshair.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
}
});
panel.querySelector('#trailEffectToggle').addEventListener('click', () => {
trailEffectEnabled = !trailEffectEnabled;
panel.querySelector('#trailEffectToggle').textContent = trailEffectEnabled ? 'Disable Crosshair Trail' : 'Toggle Crosshair Trail';
});
panel.querySelector('#trailLength').addEventListener('input', (e) => {
trailLength = parseInt(e.target.value);
});
panel.querySelector('#soundEffectToggle').addEventListener('click', () => {
soundEffectEnabled = !soundEffectEnabled;
panel.querySelector('#soundEffectToggle').textContent = soundEffectEnabled ? 'Disable Shoot Sound' : 'Toggle Shoot Sound';
});
panel.querySelector('#soundVolume').addEventListener('input', (e) => {
soundVolume = parseFloat(e.target.value);
shootSound.volume = soundVolume;
});
panel.querySelector('#crosshairColorToggle').addEventListener('click', () => {
crosshairColorEnabled = !crosshairColorEnabled;
panel.querySelector('#crosshairColorToggle').textContent = crosshairColorEnabled ? 'Disable Crosshair Color Change' : 'Toggle Crosshair Color Change';
});
panel.querySelector('#colorChangeSpeed').addEventListener('input', (e) => {
colorChangeSpeed = parseInt(e.target.value);
});
panel.querySelector('#dynamicZoomToggle').addEventListener('click', () => {
dynamicZoomEnabled = !dynamicZoomEnabled;
panel.querySelector('#dynamicZoomToggle').textContent = dynamicZoomEnabled ? 'Disable Dynamic Zoom' : 'Toggle Dynamic Zoom';
});
panel.querySelector('#zoomSensitivity').addEventListener('input', (e) => {
zoomSensitivity = parseFloat(e.target.value);
});
// Crosshair Color Change Animation
const updateCrosshairColor = () => {
if (crosshairColorEnabled && isVip) {
crosshairHue = (crosshairHue + colorChangeSpeed) % 360;
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
activeCrosshair.style.filter = `hue-rotate(${crosshairHue}deg)`;
}
}
requestAnimationFrame(updateCrosshairColor);
};
updateCrosshairColor();
// Dynamic Zoom on Mouse Move
let baseCrosshairSize = 80;
const updateDynamicZoom = (e) => {
if (dynamicZoomEnabled && isVip) {
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const distance = Math.sqrt(Math.pow(e.clientX - centerX, 2) + Math.pow(e.clientY - centerY, 2));
const zoomFactor = 1 - (distance / (window.innerWidth / 2)) * zoomSensitivity * 0.3;
const newSize = baseCrosshairSize * Math.max(0.5, zoomFactor);
activeCrosshair.style.width = `${newSize}px`;
activeCrosshair.style.height = `${newSize}px`;
}
}
};
// Trail Effect on Mouse Move
const updateTrailOnMove = (e) => {
if (trailEffectEnabled && isVip) {
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (activeCrosshair) {
const crosshairRect = activeCrosshair.getBoundingClientRect();
trailPositions.push({
x: crosshairRect.left + crosshairRect.width / 2,
y: crosshairRect.top + crosshairRect.height / 2,
opacity: 1
});
if (trailPositions.length > trailLength) {
trailPositions.shift();
}
}
}
};
// Mouse Move Events
document.addEventListener('mousemove', (e) => {
updateDynamicZoom(e);
updateTrailOnMove(e);
});
// Shoot Effects on Mouse Down
document.addEventListener('mousedown', (e) => {
if (isVip) {
const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
if (confettiEnabled) {
if (activeCrosshair) {
const crosshairRect = activeCrosshair.getBoundingClientRect();
initConfetti(
crosshairRect.left + crosshairRect.width / 2,
crosshairRect.top + crosshairRect.height / 2
);
} else {
initConfetti();
}
animateConfetti();
}
if (hitmarkerEnabled) {
hitmarker.style.opacity = '1';
setTimeout(() => {
hitmarker.style.opacity = '0';
}, 200);
}
if (screenFlashEnabled) {
screenFlash.style.opacity = screenFlashIntensity;
setTimeout(() => {
screenFlash.style.opacity = '0';
}, 100);
}
if (laserBeamEnabled) {
laserBeam.style.opacity = '1';
setTimeout(() => {
laserBeam.style.opacity = '0';
}, 50);
}
if (shockwaveEnabled) {
shockwave.style.width = '0';
shockwave.style.height = '0';
shockwave.style.opacity = '1';
shockwave.style.animation = 'none';
setTimeout(() => {
shockwave.style.width = `${shockwaveSize}px`;
shockwave.style.height = `${shockwaveSize}px`;
shockwave.style.opacity = '0';
shockwave.style.animation = 'shockwaveExpand 0.5s ease forwards';
}, 10);
}
if (soundEffectEnabled) {
shootSound.currentTime = 0;
shootSound.play();
}
}
});
// Crosshair Size Update (to sync with dynamic zoom base size)
panel.querySelector('#crosshairSize').addEventListener('input', (e) => {
baseCrosshairSize = parseInt(e.target.value);
Object.values(crosshairs).forEach(ch => {
ch.style.width = `${baseCrosshairSize}px`;
ch.style.height = `${baseCrosshairSize}px`;
});
chCustom.style.width = `${baseCrosshairSize}px`;
chCustom.style.height = `${baseCrosshairSize}px`;
});
};
setupEventListeners();
// === INITIALIZATION ===
const initialize = () => {
gearIcon.style.display = 'block';
panel.classList.remove('hidden');
window.addEventListener('resize', () => {
confettiCanvas.width = window.innerWidth;
confettiCanvas.height = window.innerHeight;
particleCanvas.width = window.innerWidth;
particleCanvas.height = window.innerHeight;
trailCanvas.width = window.innerWidth;
trailCanvas.height = window.innerHeight;
});
};
initialize();
})();