Customizable keybind overlay for Kirka.io
// ==UserScript==
// @name Kirka Keybind Overlay
// @namespace http://tampermonkey.net/
// @version 1.0
// @license Life.css - https://github.com/LifeCss
// @description Customizable keybind overlay for Kirka.io
// @author You
// @match https://kirka.io/*
// @match https://snipers.io/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=kirka.io
// @grant none
// ==/UserScript==
(function() {
'use strict';
window.addEventListener('load', () => {
console.log('Script loaded successfully.'); // Debugging
// Default settings
const defaultSettings = {
keybindColors: {
W: 'rgba(0, 0, 0, 0.3)',
A: 'rgba(0, 0, 0, 0.3)',
S: 'rgba(0, 0, 0, 0.3)',
D: 'rgba(0, 0, 0, 0.3)',
Shift: 'rgba(0, 0, 0, 0.3)',
LeftMouse: 'rgba(0, 0, 0, 0.3)',
RightMouse: 'rgba(0, 0, 0, 0.3)',
},
keybindButtonSize: '40',
keybindButtonOpacity: '1',
keybindPressedColor: 'rgba(0, 255, 0, 0.7)',
keybindFontSize: '14',
keybindBorderThickness: '2',
keybindDarkMode: 'false',
keybindButtonShape: 'circle',
keybindTheme: 'light',
keybindMenuBackground: 'transparent',
keybindMenuBlur: 'false',
keybindMenuOpaque: 'false',
keybindButtonsVisible: 'true',
keybindButtonOutline: 'true',
keybindButtonPositionX: '20', // Horizontal position
keybindButtonPositionY: '50', // Vertical position
customCSS: '', // Added custom CSS to default settings
sliderColor: '#007BFF', // Default slider color
};
// Load saved settings or use defaults
const savedColors = JSON.parse(localStorage.getItem('keybindColors')) || defaultSettings.keybindColors;
const savedButtonSize = localStorage.getItem('keybindButtonSize') || defaultSettings.keybindButtonSize;
const savedButtonOpacity = localStorage.getItem('keybindButtonOpacity') || defaultSettings.keybindButtonOpacity;
const savedPressedColor = localStorage.getItem('keybindPressedColor') || defaultSettings.keybindPressedColor;
const savedFontSize = localStorage.getItem('keybindFontSize') || defaultSettings.keybindFontSize;
const savedBorderThickness = localStorage.getItem('keybindBorderThickness') || defaultSettings.keybindBorderThickness;
const savedDarkMode = localStorage.getItem('keybindDarkMode') || defaultSettings.keybindDarkMode;
const savedButtonShape = localStorage.getItem('keybindButtonShape') || defaultSettings.keybindButtonShape;
const savedTheme = localStorage.getItem('keybindTheme') || defaultSettings.keybindTheme;
const savedMenuBackground = localStorage.getItem('keybindMenuBackground') || defaultSettings.keybindMenuBackground;
const savedMenuBlur = localStorage.getItem('keybindMenuBlur') || defaultSettings.keybindMenuBlur;
const savedMenuOpaque = localStorage.getItem('keybindMenuOpaque') || defaultSettings.keybindMenuOpaque;
const savedButtonsVisible = localStorage.getItem('keybindButtonsVisible') || defaultSettings.keybindButtonsVisible;
const savedButtonOutline = localStorage.getItem('keybindButtonOutline') || defaultSettings.keybindButtonOutline;
const savedButtonPositionX = localStorage.getItem('keybindButtonPositionX') || defaultSettings.keybindButtonPositionX;
const savedButtonPositionY = localStorage.getItem('keybindButtonPositionY') || defaultSettings.keybindButtonPositionY;
const savedCustomCSS = localStorage.getItem('customCSS') || defaultSettings.customCSS; // Load saved CSS
const savedSliderColor = localStorage.getItem('sliderColor') || defaultSettings.sliderColor; // Load saved slider color
const keys = [
{ id: 'W', label: 'W', keyCode: 'KeyW' },
{ id: 'A', label: 'A', keyCode: 'KeyA' },
{ id: 'S', label: 'S', keyCode: 'KeyS' },
{ id: 'D', label: 'D', keyCode: 'KeyD' },
{ id: 'Shift', label: 'Shift', keyCode: 'ShiftLeft' },
{ id: 'LeftMouse', label: 'LMB', keyCode: 'Mouse0' },
{ id: 'RightMouse', label: 'RMB', keyCode: 'Mouse2' },
];
let pressedColor = savedPressedColor;
let fontSize = parseInt(savedFontSize, 10);
let borderThickness = parseInt(savedBorderThickness, 10);
let buttonSize = parseInt(savedButtonSize, 10);
let buttonOpacity = parseFloat(savedButtonOpacity);
let buttonShape = savedButtonShape;
let isDarkMode = savedDarkMode === 'true';
let currentTheme = savedTheme;
let menuBackground = savedMenuBackground;
let menuBlur = savedMenuBlur === 'true';
let menuOpaque = savedMenuOpaque === 'true';
let buttonsVisible = savedButtonsVisible === 'true';
let buttonOutline = savedButtonOutline === 'true';
let buttonPositionX = parseInt(savedButtonPositionX, 10); // Horizontal position
let buttonPositionY = parseInt(savedButtonPositionY, 10); // Vertical position
let customCSS = savedCustomCSS; // Load saved CSS
let sliderColor = savedSliderColor; // Load saved slider color
let buttonColors = { ...savedColors };
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.left = `${buttonPositionX}px`; // Set initial horizontal position
container.style.top = `${buttonPositionY}%`; // Set initial vertical position
container.style.transform = 'translateY(-50%)';
container.style.display = buttonsVisible ? 'flex' : 'none';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.zIndex = '9999';
container.style.opacity = buttonOpacity;
const buttonElements = {};
function createButton(key) {
const button = document.createElement('div');
button.id = key.id;
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
button.style.borderRadius = buttonShape === 'circle' ? '50%' : '0';
button.style.margin = '5px';
button.style.backgroundColor = buttonColors[key.id];
button.style.border = buttonOutline ? `${borderThickness}px solid ${isDarkMode ? 'black' : 'white'}` : 'none';
button.style.display = 'flex';
button.style.justifyContent = 'center';
button.style.alignItems = 'center';
button.style.color = 'white';
button.style.fontSize = `${fontSize}px`;
button.style.fontWeight = 'bold';
button.innerText = key.label;
button.style.transition = 'background-color 0.2s ease';
buttonElements[key.id] = button;
return button;
}
keys.forEach(key => {
const button = createButton(key);
container.appendChild(button);
});
document.body.appendChild(container);
// Event listeners for key and mouse presses
document.addEventListener('keydown', (event) => {
const key = keys.find(k => k.keyCode === event.code);
if (key) {
const button = buttonElements[key.id];
button.style.backgroundColor = pressedColor;
}
});
document.addEventListener('keyup', (event) => {
const key = keys.find(k => k.keyCode === event.code);
if (key) {
const button = buttonElements[key.id];
button.style.backgroundColor = buttonColors[key.id];
}
});
document.addEventListener('mousedown', (event) => {
if (event.button === 0) { // Left mouse button
const button = buttonElements['LeftMouse'];
button.style.backgroundColor = pressedColor;
} else if (event.button === 2) { // Right mouse button
const button = buttonElements['RightMouse'];
button.style.backgroundColor = pressedColor;
}
});
document.addEventListener('mouseup', (event) => {
if (event.button === 0) { // Left mouse button
const button = buttonElements['LeftMouse'];
button.style.backgroundColor = buttonColors['LeftMouse'];
} else if (event.button === 2) { // Right mouse button
const button = buttonElements['RightMouse'];
button.style.backgroundColor = buttonColors['RightMouse'];
}
});
// Settings menu creation
let colorMenuVisible = false;
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.display = 'grid';
menu.style.gridTemplateColumns = 'repeat(3, 1fr)';
menu.style.gap = '10px';
menu.style.backgroundColor = menuOpaque ? (isDarkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)') : menuBackground;
menu.style.color = isDarkMode ? 'white' : 'black';
menu.style.padding = '20px';
menu.style.width = '600px';
menu.style.borderRadius = '10px';
menu.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.2)';
menu.style.zIndex = '10000';
menu.style.display = 'none';
menu.style.opacity = '0';
menu.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
menu.style.backdropFilter = menuBlur ? 'blur(10px)' : 'none';
// Color inputs
keys.forEach(key => {
const colorInputContainer = document.createElement('div');
colorInputContainer.style.display = 'flex';
colorInputContainer.style.flexDirection = 'column';
colorInputContainer.style.alignItems = 'center';
const label = document.createElement('label');
label.innerText = `${key.label} Color: `;
label.style.marginBottom = '5px';
const colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.value = buttonColors[key.id];
colorInput.style.marginBottom = '10px';
colorInput.addEventListener('input', function() {
buttonColors[key.id] = colorInput.value;
const button = document.getElementById(key.id);
button.style.backgroundColor = colorInput.value;
localStorage.setItem('keybindColors', JSON.stringify(buttonColors));
});
colorInputContainer.appendChild(label);
colorInputContainer.appendChild(colorInput);
menu.appendChild(colorInputContainer);
});
// Pressed color picker
const pressedColorContainer = document.createElement('div');
pressedColorContainer.style.display = 'flex';
pressedColorContainer.style.flexDirection = 'column';
pressedColorContainer.style.alignItems = 'center';
const pressedColorLabel = document.createElement('label');
pressedColorLabel.innerText = 'Pressed Color: ';
pressedColorLabel.style.marginBottom = '5px';
const pressedColorInput = document.createElement('input');
pressedColorInput.type = 'color';
pressedColorInput.value = pressedColor;
pressedColorInput.style.marginBottom = '10px';
pressedColorInput.addEventListener('input', function() {
pressedColor = pressedColorInput.value;
localStorage.setItem('keybindPressedColor', pressedColor);
});
pressedColorContainer.appendChild(pressedColorLabel);
pressedColorContainer.appendChild(pressedColorInput);
menu.appendChild(pressedColorContainer);
// Button size slider
const sizeContainer = document.createElement('div');
sizeContainer.style.display = 'flex';
sizeContainer.style.flexDirection = 'column';
sizeContainer.style.alignItems = 'center';
const sizeLabel = document.createElement('label');
sizeLabel.innerText = 'Button Size: ';
sizeLabel.style.marginBottom = '5px';
const sizeSlider = document.createElement('input');
sizeSlider.type = 'range';
sizeSlider.min = '20';
sizeSlider.max = '100';
sizeSlider.value = buttonSize;
sizeSlider.addEventListener('input', function() {
buttonSize = parseInt(sizeSlider.value, 10);
updateButtonSize(buttonSize);
});
sizeContainer.appendChild(sizeLabel);
sizeContainer.appendChild(sizeSlider);
menu.appendChild(sizeContainer);
// Button opacity slider
const opacityContainer = document.createElement('div');
opacityContainer.style.display = 'flex';
opacityContainer.style.flexDirection = 'column';
opacityContainer.style.alignItems = 'center';
const opacityLabel = document.createElement('label');
opacityLabel.innerText = 'Button Opacity: ';
opacityLabel.style.marginBottom = '5px';
const opacitySlider = document.createElement('input');
opacitySlider.type = 'range';
opacitySlider.min = '0.1';
opacitySlider.max = '1';
opacitySlider.step = '0.1';
opacitySlider.value = buttonOpacity;
opacitySlider.addEventListener('input', function() {
buttonOpacity = parseFloat(opacitySlider.value);
updateButtonOpacity(buttonOpacity);
});
opacityContainer.appendChild(opacityLabel);
opacityContainer.appendChild(opacitySlider);
menu.appendChild(opacityContainer);
// Button shape toggle
const shapeContainer = document.createElement('div');
shapeContainer.style.display = 'flex';
shapeContainer.style.flexDirection = 'column';
shapeContainer.style.alignItems = 'center';
const shapeLabel = document.createElement('label');
shapeLabel.innerText = 'Button Shape: ';
shapeLabel.style.marginBottom = '5px';
const shapeToggle = document.createElement('button');
shapeToggle.innerText = buttonShape === 'circle' ? 'Switch to Square' : 'Switch to Circle';
shapeToggle.addEventListener('click', () => {
buttonShape = buttonShape === 'circle' ? 'square' : 'circle';
shapeToggle.innerText = buttonShape === 'circle' ? 'Switch to Square' : 'Switch to Circle';
updateButtonShape(buttonShape);
});
shapeContainer.appendChild(shapeLabel);
shapeContainer.appendChild(shapeToggle);
menu.appendChild(shapeContainer);
// Theme dropdown
const themeContainer = document.createElement('div');
themeContainer.style.display = 'flex';
themeContainer.style.flexDirection = 'column';
themeContainer.style.alignItems = 'center';
const themeLabel = document.createElement('label');
themeLabel.innerText = 'Theme: ';
themeLabel.style.marginBottom = '5px';
const themeDropdown = document.createElement('select');
themeDropdown.innerHTML = `
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="custom">Custom</option>
`;
themeDropdown.value = currentTheme;
themeDropdown.addEventListener('change', () => {
currentTheme = themeDropdown.value;
applyTheme(currentTheme);
});
themeContainer.appendChild(themeLabel);
themeContainer.appendChild(themeDropdown);
menu.appendChild(themeContainer);
// Menu background style dropdown
const menuBackgroundContainer = document.createElement('div');
menuBackgroundContainer.style.display = 'flex';
menuBackgroundContainer.style.flexDirection = 'column';
menuBackgroundContainer.style.alignItems = 'center';
const menuBackgroundLabel = document.createElement('label');
menuBackgroundLabel.innerText = 'Menu Background: ';
menuBackgroundLabel.style.marginBottom = '5px';
const menuBackgroundDropdown = document.createElement('select');
menuBackgroundDropdown.innerHTML = `
<option value="transparent">Transparent</option>
<option value="opaque">Opaque</option>
`;
menuBackgroundDropdown.value = menuBackground;
menuBackgroundDropdown.addEventListener('change', () => {
menuBackground = menuBackgroundDropdown.value;
updateMenuBackground(menuBackground);
});
menuBackgroundContainer.appendChild(menuBackgroundLabel);
menuBackgroundContainer.appendChild(menuBackgroundDropdown);
menu.appendChild(menuBackgroundContainer);
// Menu blur toggle
const menuBlurContainer = document.createElement('div');
menuBlurContainer.style.display = 'flex';
menuBlurContainer.style.flexDirection = 'column';
menuBlurContainer.style.alignItems = 'center';
const menuBlurLabel = document.createElement('label');
menuBlurLabel.innerText = 'Menu Blur: ';
menuBlurLabel.style.marginBottom = '5px';
const menuBlurToggle = document.createElement('button');
menuBlurToggle.innerText = menuBlur ? 'Disable Blur' : 'Enable Blur';
menuBlurToggle.addEventListener('click', () => {
menuBlur = !menuBlur;
menuBlurToggle.innerText = menuBlur ? 'Disable Blur' : 'Enable Blur';
updateMenuBlur(menuBlur);
});
menuBlurContainer.appendChild(menuBlurLabel);
menuBlurContainer.appendChild(menuBlurToggle);
menu.appendChild(menuBlurContainer);
// Menu opaque toggle
const menuOpaqueContainer = document.createElement('div');
menuOpaqueContainer.style.display = 'flex';
menuOpaqueContainer.style.flexDirection = 'column';
menuOpaqueContainer.style.alignItems = 'center';
const menuOpaqueLabel = document.createElement('label');
menuOpaqueLabel.innerText = 'Menu Opaque: ';
menuOpaqueLabel.style.marginBottom = '5px';
const menuOpaqueToggle = document.createElement('button');
menuOpaqueToggle.innerText = menuOpaque ? 'Disable Opaque' : 'Enable Opaque';
menuOpaqueToggle.addEventListener('click', () => {
menuOpaque = !menuOpaque;
menuOpaqueToggle.innerText = menuOpaque ? 'Disable Opaque' : 'Enable Opaque';
updateMenuOpaque(menuOpaque);
});
menuOpaqueContainer.appendChild(menuOpaqueLabel);
menuOpaqueContainer.appendChild(menuOpaqueToggle);
menu.appendChild(menuOpaqueContainer);
// Button visibility toggle
const buttonsVisibleContainer = document.createElement('div');
buttonsVisibleContainer.style.display = 'flex';
buttonsVisibleContainer.style.flexDirection = 'column';
buttonsVisibleContainer.style.alignItems = 'center';
const buttonsVisibleLabel = document.createElement('label');
buttonsVisibleLabel.innerText = 'Show Buttons: ';
buttonsVisibleLabel.style.marginBottom = '5px';
const buttonsVisibleToggle = document.createElement('button');
buttonsVisibleToggle.innerText = buttonsVisible ? 'Hide Buttons' : 'Show Buttons';
buttonsVisibleToggle.addEventListener('click', () => {
buttonsVisible = !buttonsVisible;
buttonsVisibleToggle.innerText = buttonsVisible ? 'Hide Buttons' : 'Show Buttons';
updateButtonsVisibility(buttonsVisible);
});
buttonsVisibleContainer.appendChild(buttonsVisibleLabel);
buttonsVisibleContainer.appendChild(buttonsVisibleToggle);
menu.appendChild(buttonsVisibleContainer);
// Button outline toggle
const buttonOutlineContainer = document.createElement('div');
buttonOutlineContainer.style.display = 'flex';
buttonOutlineContainer.style.flexDirection = 'column';
buttonOutlineContainer.style.alignItems = 'center';
const buttonOutlineLabel = document.createElement('label');
buttonOutlineLabel.innerText = 'Button Outline: ';
buttonOutlineLabel.style.marginBottom = '5px';
const buttonOutlineToggle = document.createElement('button');
buttonOutlineToggle.innerText = buttonOutline ? 'Disable Outline' : 'Enable Outline';
buttonOutlineToggle.addEventListener('click', () => {
buttonOutline = !buttonOutline;
buttonOutlineToggle.innerText = buttonOutline ? 'Disable Outline' : 'Enable Outline';
updateButtonOutline(buttonOutline);
});
buttonOutlineContainer.appendChild(buttonOutlineLabel);
buttonOutlineContainer.appendChild(buttonOutlineToggle);
menu.appendChild(buttonOutlineContainer);
// Button position sliders
const positionXContainer = document.createElement('div');
positionXContainer.style.display = 'flex';
positionXContainer.style.flexDirection = 'column';
positionXContainer.style.alignItems = 'center';
const positionXLabel = document.createElement('label');
positionXLabel.innerText = 'Horizontal Position: ';
positionXLabel.style.marginBottom = '5px';
const positionXSlider = document.createElement('input');
positionXSlider.type = 'range';
positionXSlider.min = '-50'; // Extended range for horizontal position
positionXSlider.max = '150'; // Extended range for horizontal position
positionXSlider.value = buttonPositionX;
positionXSlider.addEventListener('input', function() {
buttonPositionX = parseInt(positionXSlider.value, 10);
updateButtonPosition();
});
positionXContainer.appendChild(positionXLabel);
positionXContainer.appendChild(positionXSlider);
menu.appendChild(positionXContainer);
const positionYContainer = document.createElement('div');
positionYContainer.style.display = 'flex';
positionYContainer.style.flexDirection = 'column';
positionYContainer.style.alignItems = 'center';
const positionYLabel = document.createElement('label');
positionYLabel.innerText = 'Vertical Position: ';
positionYLabel.style.marginBottom = '5px';
const positionYSlider = document.createElement('input');
positionYSlider.type = 'range';
positionYSlider.min = '0';
positionYSlider.max = '100';
positionYSlider.value = buttonPositionY;
positionYSlider.addEventListener('input', function() {
buttonPositionY = parseInt(positionYSlider.value, 10);
updateButtonPosition();
});
positionYContainer.appendChild(positionYLabel);
positionYContainer.appendChild(positionYSlider);
menu.appendChild(positionYContainer);
// Reset to defaults button
const resetContainer = document.createElement('div');
resetContainer.style.display = 'flex';
resetContainer.style.flexDirection = 'column';
resetContainer.style.alignItems = 'center';
const resetButton = document.createElement('button');
resetButton.innerText = 'Reset to Defaults';
resetButton.addEventListener('click', () => {
resetToDefaults();
});
resetContainer.appendChild(resetButton);
menu.appendChild(resetContainer);
// Add Live CSS Injector to the menu
const cssInjectorContainer = document.createElement('div');
cssInjectorContainer.style.display = 'flex';
cssInjectorContainer.style.flexDirection = 'column';
cssInjectorContainer.style.alignItems = 'center';
const cssInjectorLabel = document.createElement('label');
cssInjectorLabel.innerText = 'Live CSS Injector:';
cssInjectorLabel.style.marginBottom = '5px';
const cssTextarea = document.createElement('textarea');
cssTextarea.style.width = '100%';
cssTextarea.style.height = '100px';
cssTextarea.style.marginBottom = '10px';
cssTextarea.style.backgroundColor = isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)';
cssTextarea.style.color = isDarkMode ? 'white' : 'black';
cssTextarea.style.border = 'none';
cssTextarea.style.borderRadius = '5px';
cssTextarea.style.padding = '10px';
cssTextarea.value = customCSS; // Load saved CSS
const applyCssButton = document.createElement('button');
applyCssButton.innerText = 'Apply CSS';
applyCssButton.style.backgroundColor = isDarkMode ? '#444' : '#ddd';
applyCssButton.style.color = isDarkMode ? 'white' : 'black';
applyCssButton.style.border = 'none';
applyCssButton.style.borderRadius = '5px';
applyCssButton.style.padding = '10px';
applyCssButton.style.cursor = 'pointer';
applyCssButton.addEventListener('click', () => {
customCSS = cssTextarea.value;
localStorage.setItem('customCSS', customCSS); // Save CSS to localStorage
applyCustomCSS(customCSS); // Apply the CSS
});
cssInjectorContainer.appendChild(cssInjectorLabel);
cssInjectorContainer.appendChild(cssTextarea);
cssInjectorContainer.appendChild(applyCssButton);
menu.appendChild(cssInjectorContainer);
// Add Slider Color Picker to the menu
const sliderColorContainer = document.createElement('div');
sliderColorContainer.style.display = 'flex';
sliderColorContainer.style.flexDirection = 'column';
sliderColorContainer.style.alignItems = 'center';
const sliderColorLabel = document.createElement('label');
sliderColorLabel.innerText = 'Slider Color: ';
sliderColorLabel.style.marginBottom = '5px';
const sliderColorInput = document.createElement('input');
sliderColorInput.type = 'color';
sliderColorInput.value = sliderColor;
sliderColorInput.style.marginBottom = '10px';
sliderColorInput.addEventListener('input', function() {
sliderColor = sliderColorInput.value;
localStorage.setItem('sliderColor', sliderColor); // Save slider color to localStorage
updateSliderColor(sliderColor); // Apply the new slider color
});
sliderColorContainer.appendChild(sliderColorLabel);
sliderColorContainer.appendChild(sliderColorInput);
menu.appendChild(sliderColorContainer);
document.body.appendChild(menu);
// Apply saved CSS on page load
if (customCSS) {
applyCustomCSS(customCSS);
}
// Apply saved slider color on page load
updateSliderColor(sliderColor);
// Helper functions
function applyCustomCSS(css) {
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.innerHTML = css;
document.head.appendChild(styleElement);
}
function updateSliderColor(color) {
const sliders = document.querySelectorAll('input[type="range"]');
sliders.forEach(slider => {
slider.style.accentColor = color; // Modern browsers support accent-color
});
}
function updateButtonSize(newSize) {
Object.values(buttonElements).forEach(button => {
button.style.width = `${newSize}px`;
button.style.height = `${newSize}px`;
});
localStorage.setItem('keybindButtonSize', newSize.toString());
}
function updateButtonOpacity(newOpacity) {
container.style.opacity = newOpacity;
localStorage.setItem('keybindButtonOpacity', newOpacity.toString());
}
function updateButtonShape(newShape) {
Object.values(buttonElements).forEach(button => {
button.style.borderRadius = newShape === 'circle' ? '50%' : '0';
});
localStorage.setItem('keybindButtonShape', newShape);
}
function applyTheme(theme) {
isDarkMode = theme === 'dark';
menu.style.backgroundColor = menuOpaque ? (isDarkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)') : menuBackground;
menu.style.color = isDarkMode ? 'white' : 'black';
Object.values(buttonElements).forEach(button => {
button.style.border = buttonOutline ? `${borderThickness}px solid ${isDarkMode ? 'black' : 'white'}` : 'none';
});
localStorage.setItem('keybindTheme', theme);
}
function updateMenuBackground(background) {
menuBackground = background;
menu.style.backgroundColor = menuOpaque ? (isDarkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)') : background;
localStorage.setItem('keybindMenuBackground', background);
}
function updateMenuBlur(blur) {
menuBlur = blur;
menu.style.backdropFilter = blur ? 'blur(10px)' : 'none';
localStorage.setItem('keybindMenuBlur', blur.toString());
}
function updateMenuOpaque(opaque) {
menuOpaque = opaque;
menu.style.backgroundColor = opaque ? (isDarkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)') : menuBackground;
localStorage.setItem('keybindMenuOpaque', opaque.toString());
}
function updateButtonsVisibility(visible) {
container.style.display = visible ? 'flex' : 'none';
localStorage.setItem('keybindButtonsVisible', visible.toString());
}
function updateButtonOutline(outline) {
buttonOutline = outline;
Object.values(buttonElements).forEach(button => {
button.style.border = outline ? `${borderThickness}px solid ${isDarkMode ? 'black' : 'white'}` : 'none';
});
localStorage.setItem('keybindButtonOutline', outline.toString());
}
function updateButtonPosition() {
container.style.left = `${buttonPositionX}px`;
container.style.top = `${buttonPositionY}%`;
localStorage.setItem('keybindButtonPositionX', buttonPositionX.toString());
localStorage.setItem('keybindButtonPositionY', buttonPositionY.toString());
}
function resetToDefaults() {
buttonColors = { ...defaultSettings.keybindColors };
buttonSize = parseInt(defaultSettings.keybindButtonSize, 10);
buttonOpacity = parseFloat(defaultSettings.keybindButtonOpacity);
pressedColor = defaultSettings.keybindPressedColor;
fontSize = parseInt(defaultSettings.keybindFontSize, 10);
borderThickness = parseInt(defaultSettings.keybindBorderThickness, 10);
buttonShape = defaultSettings.keybindButtonShape;
currentTheme = defaultSettings.keybindTheme;
menuBackground = defaultSettings.keybindMenuBackground;
menuBlur = defaultSettings.keybindMenuBlur === 'true';
menuOpaque = defaultSettings.keybindMenuOpaque === 'true';
buttonsVisible = defaultSettings.keybindButtonsVisible === 'true';
buttonOutline = defaultSettings.keybindButtonOutline === 'true';
buttonPositionX = parseInt(defaultSettings.keybindButtonPositionX, 10);
buttonPositionY = parseInt(defaultSettings.keybindButtonPositionY, 10);
customCSS = defaultSettings.customCSS; // Reset CSS to default
sliderColor = defaultSettings.sliderColor; // Reset slider color to default
// Update UI
keys.forEach(key => {
const button = document.getElementById(key.id);
button.style.backgroundColor = buttonColors[key.id];
});
updateButtonSize(buttonSize);
updateButtonOpacity(buttonOpacity);
updateButtonShape(buttonShape);
applyTheme(currentTheme);
updateMenuBackground(menuBackground);
updateMenuBlur(menuBlur);
updateMenuOpaque(menuOpaque);
updateButtonsVisibility(buttonsVisible);
updateButtonOutline(buttonOutline);
updateButtonPosition();
updateSliderColor(sliderColor); // Reset slider color
// Update settings menu
pressedColorInput.value = pressedColor;
sizeSlider.value = buttonSize;
opacitySlider.value = buttonOpacity;
shapeToggle.innerText = buttonShape === 'circle' ? 'Switch to Square' : 'Switch to Circle';
themeDropdown.value = currentTheme;
menuBackgroundDropdown.value = menuBackground;
menuBlurToggle.innerText = menuBlur ? 'Disable Blur' : 'Enable Blur';
menuOpaqueToggle.innerText = menuOpaque ? 'Disable Opaque' : 'Enable Opaque';
buttonsVisibleToggle.innerText = buttonsVisible ? 'Hide Buttons' : 'Show Buttons';
buttonOutlineToggle.innerText = buttonOutline ? 'Disable Outline' : 'Enable Outline';
positionXSlider.value = buttonPositionX;
positionYSlider.value = buttonPositionY;
cssTextarea.value = customCSS; // Reset CSS textarea
sliderColorInput.value = sliderColor; // Reset slider color input
// Save defaults to localStorage
localStorage.setItem('keybindColors', JSON.stringify(buttonColors));
localStorage.setItem('keybindButtonSize', buttonSize.toString());
localStorage.setItem('keybindButtonOpacity', buttonOpacity.toString());
localStorage.setItem('keybindPressedColor', pressedColor);
localStorage.setItem('keybindFontSize', fontSize.toString());
localStorage.setItem('keybindBorderThickness', borderThickness.toString());
localStorage.setItem('keybindButtonShape', buttonShape);
localStorage.setItem('keybindTheme', currentTheme);
localStorage.setItem('keybindMenuBackground', menuBackground);
localStorage.setItem('keybindMenuBlur', menuBlur.toString());
localStorage.setItem('keybindMenuOpaque', menuOpaque.toString());
localStorage.setItem('keybindButtonsVisible', buttonsVisible.toString());
localStorage.setItem('keybindButtonOutline', buttonOutline.toString());
localStorage.setItem('keybindButtonPositionX', buttonPositionX.toString());
localStorage.setItem('keybindButtonPositionY', buttonPositionY.toString());
localStorage.setItem('customCSS', customCSS); // Save default CSS
localStorage.setItem('sliderColor', sliderColor); // Save default slider color
}
// Add Export Settings Button
const exportContainer = document.createElement('div');
exportContainer.style.display = 'flex';
exportContainer.style.flexDirection = 'column';
exportContainer.style.alignItems = 'center';
const exportButton = document.createElement('button');
exportButton.innerText = 'Export Settings';
exportButton.addEventListener('click', exportSettings);
exportContainer.appendChild(exportButton);
menu.appendChild(exportContainer);
// Add Import Settings Button
const importContainer = document.createElement('div');
importContainer.style.display = 'flex';
importContainer.style.flexDirection = 'column';
importContainer.style.alignItems = 'center';
const importButton = document.createElement('button');
importButton.innerText = 'Import Settings';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.style.display = 'none';
fileInput.addEventListener('change', importSettings);
importButton.addEventListener('click', () => fileInput.click());
importContainer.appendChild(importButton);
importContainer.appendChild(fileInput);
menu.appendChild(importContainer);
// Export Settings Function
function exportSettings() {
const settings = {
keybindColors: JSON.parse(localStorage.getItem('keybindColors')) || defaultSettings.keybindColors,
keybindButtonSize: localStorage.getItem('keybindButtonSize') || defaultSettings.keybindButtonSize,
keybindButtonOpacity: localStorage.getItem('keybindButtonOpacity') || defaultSettings.keybindButtonOpacity,
keybindPressedColor: localStorage.getItem('keybindPressedColor') || defaultSettings.keybindPressedColor,
keybindFontSize: localStorage.getItem('keybindFontSize') || defaultSettings.keybindFontSize,
keybindBorderThickness: localStorage.getItem('keybindBorderThickness') || defaultSettings.keybindBorderThickness,
keybindDarkMode: localStorage.getItem('keybindDarkMode') || defaultSettings.keybindDarkMode,
keybindButtonShape: localStorage.getItem('keybindButtonShape') || defaultSettings.keybindButtonShape,
keybindTheme: localStorage.getItem('keybindTheme') || defaultSettings.keybindTheme,
keybindMenuBackground: localStorage.getItem('keybindMenuBackground') || defaultSettings.keybindMenuBackground,
keybindMenuBlur: localStorage.getItem('keybindMenuBlur') || defaultSettings.keybindMenuBlur,
keybindMenuOpaque: localStorage.getItem('keybindMenuOpaque') || defaultSettings.keybindMenuOpaque,
keybindButtonsVisible: localStorage.getItem('keybindButtonsVisible') || defaultSettings.keybindButtonsVisible,
keybindButtonOutline: localStorage.getItem('keybindButtonOutline') || defaultSettings.keybindButtonOutline,
keybindButtonPositionX: localStorage.getItem('keybindButtonPositionX') || defaultSettings.keybindButtonPositionX,
keybindButtonPositionY: localStorage.getItem('keybindButtonPositionY') || defaultSettings.keybindButtonPositionY,
customCSS: localStorage.getItem('customCSS') || defaultSettings.customCSS, // Include custom CSS in export
sliderColor: localStorage.getItem('sliderColor') || defaultSettings.sliderColor, // Include slider color in export
};
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(settings));
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", "keybind_settings.json");
document.body.appendChild(downloadAnchorNode); // Required for Firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
// Import Settings Function
function importSettings(event) {
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const text = e.target.result;
const settings = JSON.parse(text);
// Update localStorage with imported settings
localStorage.setItem('keybindColors', JSON.stringify(settings.keybindColors));
localStorage.setItem('keybindButtonSize', settings.keybindButtonSize);
localStorage.setItem('keybindButtonOpacity', settings.keybindButtonOpacity);
localStorage.setItem('keybindPressedColor', settings.keybindPressedColor);
localStorage.setItem('keybindFontSize', settings.keybindFontSize);
localStorage.setItem('keybindBorderThickness', settings.keybindBorderThickness);
localStorage.setItem('keybindDarkMode', settings.keybindDarkMode);
localStorage.setItem('keybindButtonShape', settings.keybindButtonShape);
localStorage.setItem('keybindTheme', settings.keybindTheme);
localStorage.setItem('keybindMenuBackground', settings.keybindMenuBackground);
localStorage.setItem('keybindMenuBlur', settings.keybindMenuBlur);
localStorage.setItem('keybindMenuOpaque', settings.keybindMenuOpaque);
localStorage.setItem('keybindButtonsVisible', settings.keybindButtonsVisible);
localStorage.setItem('keybindButtonOutline', settings.keybindButtonOutline);
localStorage.setItem('keybindButtonPositionX', settings.keybindButtonPositionX);
localStorage.setItem('keybindButtonPositionY', settings.keybindButtonPositionY);
localStorage.setItem('customCSS', settings.customCSS); // Import custom CSS
localStorage.setItem('sliderColor', settings.sliderColor); // Import slider color
// Reload the page to apply new settings
window.location.reload();
};
reader.readAsText(file);
}
// Event listener for Ctrl + O
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'o') {
event.preventDefault();
colorMenuVisible = !colorMenuVisible;
if (colorMenuVisible) {
menu.style.display = 'grid';
setTimeout(() => {
menu.style.opacity = '1';
menu.style.transform = 'translate(-50%, -50%) scale(1)';
}, 10);
} else {
menu.style.opacity = '0';
menu.style.transform = 'translate(-50%, -50%) scale(0.9)';
setTimeout(() => {
menu.style.display = 'none';
}, 300);
}
}
});
});
})();