Extends player appearance editor functionality
// ==UserScript==
// @name CarManiac's Improved Color Picker
// @namespace http://tampermonkey.net/
// @version v1.40
// @description Extends player appearance editor functionality
// @author CarManiac
// @run-at document-idle
// @license MIT
// @match https://heav.io/game.html
// @match https://hitbox.io/game.html
// @match https://heav.io/game2.html
// @match https://hitbox.io/game2.html
// @match https://hitbox.io/game-beta.html
// @icon https://www.google.com/s2/favicons?sz=64&domain=heav.io
// @grant none
// ==/UserScript==
const style = document.createElement("style");
style.textContent = `
button:hover,
.crossButton:hover {
background-color: #5c85b4 !important;
}
`;
document.head.appendChild(style);
const targetImage = 'graphics/ui/hitbox.svg';
const newImageSrc = 'https://i.ibb.co/F5RLpmx/hitbox-1.png';
const images = document.querySelectorAll(`img[src="${targetImage}"]`);
images.forEach(img => {
const overlayImage = document.createElement('img');
overlayImage.src = newImageSrc;
overlayImage.style.position = 'absolute';
overlayImage.style.left = img.offsetLeft + 'px';
overlayImage.style.top = img.offsetTop + 'px';
overlayImage.style.width = img.width + 'px';
overlayImage.style.height = img.height + 'px';
overlayImage.style.pointerEvents = 'none';
img.parentNode.appendChild(overlayImage);
});
const originalSend = window.WebSocket.prototype.send;
let WSS = 0;
window.WebSocket.prototype.send = async function(args) {
if (this.url && this.url.includes("peer")) {
return;
}
if (this.url.includes("/socket.io/?EIO=3&transport=websocket&sid=")) {
if (typeof args === "string") {
if (!WSS) {
WSS = this;
}
}
}
return originalSend.call(this, args);
};
const iroScript = document.createElement("script");
iroScript.src = "https://unpkg.com/@jaames/iro/dist/iro.min.js";
document.head.appendChild(iroScript);
const savedColors = JSON.parse(localStorage.getItem('savedColors')) || [];
let colorPickerContainer;
let deletionMode = false;
function hexToDecimal(hex) {
if (hex.startsWith("#")) hex = hex.slice(1);
return parseInt(hex, 16);
}
function rgbToDecimal(rgb) {
const rgbValues = rgb.match(/\d+/g);
return rgbValues.reduce((acc, val) => (acc << 8) + parseInt(val), 0);
}
function createColorInput() {
if (colorPickerContainer) return;
colorPickerContainer = document.createElement("div");
colorPickerContainer.id = "colorPickerContainer";
colorPickerContainer.style.cssText = "background-color: rgb(37, 38, 42); border-radius: 7px; color: rgb(235, 235, 235); display: flex; flex-direction: column; font-family: 'Bai Jamjuree', sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; width: 300px;";
const crossButton = document.createElement("div");
crossButton.className = "crossButton";
crossButton.style.cssText = `
background-color: rgb(74, 122, 177);
background-image: url(https://hitbox.io/graphics/ui/close.svg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 20px;
color: rgb(235, 235, 235);
cursor: pointer;
display: block;
height: 25.9929px;
position: absolute;
right: -9px;
top: -9px;
width: 25.9929px;
`;
crossButton.addEventListener("click", closeBoth);
const label = document.createElement("label");
label.textContent = "Select Color";
label.style.cssText = "color: rgb(235, 235, 235); font-weight: bold; font-size: 15px; margin-bottom: 10px;";
const colorWheelContainer = document.createElement("div");
colorWheelContainer.style.textAlign = "center";
const colorInput = document.createElement("input");
colorInput.type = "text";
colorInput.style.cssText = `
background-color: rgb(100, 100, 100);
color: white;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 5px;
font-family: 'Bai Jamjuree', sans-serif;
`;
colorInput.placeholder = "Hex (#RRGGBB) or rgb(R, G, B)";
const buttonContainer = document.createElement("div");
buttonContainer.style.display = "flex";
buttonContainer.style.justifyContent = "space-between";
buttonContainer.style.marginTop = "10px";
const applyButton = createButton("APPLY COLOR", "margin: 5px;");
const randomButton = createButton("RANDOM COLOR", "margin: 5px;");
const saveButton = createButton("SAVE COLOR", "margin: 5px;");
const feedbackMessage = document.createElement("div");
feedbackMessage.style.cssText = "margin-top: 10px; color: green; font-size: 15px;";
const savedColorsContainer = document.createElement("div");
savedColorsContainer.style.cssText = "margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc; color: rgb(235, 235, 235);";
const savedColorsTitle = document.createElement("h4");
savedColorsTitle.textContent = "Saved Colors";
savedColorsTitle.style.cssText = "margin-bottom: 10px; font-size: 14px;";
const savedColorsList = document.createElement("div");
savedColorsList.style.display = "flex";
savedColorsList.style.flexWrap = "wrap";
savedColorsList.style.gap = "10px";
const deleteButton = createButton("DELETE COLORS", "margin-top: 10px; width: 100px;");
colorPickerContainer.append(crossButton, label, colorWheelContainer, colorInput, buttonContainer, saveButton, feedbackMessage, savedColorsContainer);
buttonContainer.append(applyButton, randomButton);
savedColorsContainer.append(savedColorsTitle, savedColorsList, deleteButton);
document.body.appendChild(colorPickerContainer);
displaySavedColors();
const colorWheel = new iro.ColorPicker(colorWheelContainer, {
width: 225,
color: "#ff0000"
});
function getLuminance(hex) {
let r = parseInt(hex.slice(1, 3), 16);
let g = parseInt(hex.slice(3, 5), 16);
let b = parseInt(hex.slice(5, 7), 16);
return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}
colorWheel.on('color:change', function(color) {
const hexColor = color.hexString;
colorInput.value = hexColor;
colorInput.style.backgroundColor = hexColor;
const luminance = getLuminance(hexColor);
colorInput.style.color = luminance > 0.5 ? 'black' : 'white';
});
saveButton.addEventListener("click", () => saveColor(colorInput.value.trim(), feedbackMessage, savedColorsList));
applyButton.addEventListener("click", () => applyColor(colorInput.value.trim(), feedbackMessage));
randomButton.addEventListener("click", () => generateRandomColor(colorInput, feedbackMessage));
deleteButton.addEventListener("click", () => toggleDeletionMode());
function createButton(text, additionalStyles = "") {
const button = document.createElement("button");
button.textContent = text;
button.style.cssText = `padding: 5px; border: none; font-family: 'Bai Jamjuree', sans-serif; border-radius: 2px; cursor: pointer; color: rgb(235, 235, 235); background-color: rgb(74, 122, 177); ${additionalStyles}`;
return button;
}
function displaySavedColors() {
savedColorsList.innerHTML = '';
savedColors.forEach(color => {
const colorBox = document.createElement("div");
colorBox.style.cssText = `width: 30px; height: 30px; background-color: ${color}; cursor: pointer; border: 1px solid #ccc; border-radius: 3px;`;
colorBox.addEventListener("click", () => {
if (deletionMode) {
confirmDeletion(color);
} else {
colorInput.value = color;
colorInput.style.backgroundColor = color;
const luminance = getLuminance(color);
colorInput.style.color = luminance > 0.5 ? 'black' : 'white';
feedbackMessage.textContent = `Color selected: ${color}`;
feedbackMessage.style.color = "green";
}
});
savedColorsList.appendChild(colorBox);
});
}
function saveColor(colorValue, feedback, list) {
if (colorValue && !savedColors.includes(colorValue)) {
savedColors.push(colorValue);
localStorage.setItem('savedColors', JSON.stringify(savedColors));
displaySavedColors();
feedback.textContent = `Color ${colorValue} saved!`;
feedback.style.color = "green";
} else {
feedback.textContent = "Color is either empty or already saved!";
feedback.style.color = "red";
}
}
function applyColor(colorValue, feedback) {
let decimalValue;
if (colorValue.startsWith("#")) {
decimalValue = hexToDecimal(colorValue);
} else if (colorValue.startsWith("rgb")) {
decimalValue = rgbToDecimal(colorValue);
} else {
feedback.textContent = "Please enter a valid color!";
feedback.style.color = "red";
return;
}
feedback.textContent = `Color applied successfully: ${colorValue}`;
feedback.style.color = "green";
localStorage.setItem("basic_col_1", decimalValue);
if (WSS) {
WSS.send(`42[1,[40,{"1": ${decimalValue}}]]`);
}
}
function generateRandomColor(input, feedback) {
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
input.value = randomColor;
input.style.backgroundColor = randomColor;
const luminance = getLuminance(randomColor);
input.style.color = luminance > 0.5 ? 'black' : 'white';
feedback.textContent = `Random color generated: ${randomColor}`;
feedback.style.color = "green";
}
function toggleDeletionMode() {
if (deletionMode) {
deletionMode = false;
deleteButton.style.backgroundColor = "rgb(74, 122, 177)";
deleteButton.textContent = "DELETE COLORS";
deleteButton.classList.remove("cancel-delete-hover");
} else {
if (localStorage.getItem("noAskAgain") !== "true") {
createConfirmationPopup(() => {
deletionMode = true;
deleteButton.style.backgroundColor = "rgb(255, 0, 0)";
deleteButton.textContent = "CANCEL DELETE";
deleteButton.classList.add("cancel-delete-hover");
});
} else {
deletionMode = true;
deleteButton.style.backgroundColor = "rgb(255, 0, 0)";
deleteButton.textContent = "CANCEL DELETE";
deleteButton.classList.add("cancel-delete-hover");
}
}
}
const style = document.createElement('style');
style.textContent = `
.cancel-delete-hover:hover {
background-color: #ff171b !important;
}
`;
document.head.appendChild(style);
function confirmDeletion(color) {
const index = savedColors.indexOf(color);
if (index > -1) {
savedColors.splice(index, 1);
localStorage.setItem('savedColors', JSON.stringify(savedColors));
displaySavedColors();
}
}
function createConfirmationPopup(callback) {
const popupContainer = document.createElement("div");
popupContainer.style.cssText = "position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; z-index: 1000;";
const message = document.createElement("p");
message.textContent = "Are you sure you want to enable deletion mode?";
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "noAskAgain";
const checkboxLabel = document.createElement("label");
checkboxLabel.setAttribute("for", "noAskAgain");
checkboxLabel.textContent = "Don't ask again";
const buttonContainer = document.createElement("div");
buttonContainer.style.display = "flex";
buttonContainer.style.justifyContent = "space-between";
const cancelButton = createButton("CANCEL", "margin-right: 5px; background-color: red;");
const confirmButton = createButton("CONFIRM");
buttonContainer.append(cancelButton, confirmButton);
popupContainer.append(message, checkboxLabel, checkbox, buttonContainer);
document.body.appendChild(popupContainer);
cancelButton.addEventListener("click", () => {
popupContainer.remove();
});
confirmButton.addEventListener("click", () => {
if (checkbox.checked) {
localStorage.setItem("noAskAgain", "true");
}
callback();
popupContainer.remove();
});
}
}
const appearancePageObserver = new MutationObserver(() => {
const appearancePage = document.querySelector('.cosmeticWindow');
if (appearancePage) {
createColorInput();
} else {
closeBoth();
}
});
function checkAppearancePage() {
appearancePageObserver.observe(document.body, { childList: true, subtree: true });
}
function closeColorPicker() {
if (colorPickerContainer) {
colorPickerContainer.remove();
colorPickerContainer = null;
}
}
function closeBoth() {
closeColorPicker();
const cosmeticWindow = document.querySelector('.cosmeticWindow');
if (cosmeticWindow) {
cosmeticWindow.remove();
}
const blockerContainer = document.querySelector('.blockerContainer');
if (blockerContainer) {
blockerContainer.remove();
}
}
checkAppearancePage();