Customize the PixelPlanet interface with extended personalization options and revert to default.
Per
// ==UserScript==
// @name Pixelplanet+
// @namespace http://tampermonkey.net/
// @version 3.3
// @author Pixel, join dsc.gg/turkmenlippf
// @description Customize the PixelPlanet interface with extended personalization options and revert to default.
// @match https://pixelplanet.fun/*
// @grant GM_addStyle
// @icon https://cdn.discordapp.com/attachments/1295091021016862782/1305807684657876992/image.png?ex=67345fac&is=67330e2c&hm=f8dac6f7693c5f04b3e07bcb82e41885ec1bfdae62ae0a39da2739452dcdeff3&
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(`
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
`);
// Import Google Fonts
GM_addStyle(`@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');`);
// Define improved default styles
const defaultCSS = `
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
background: #c4c4c4;
}
.menu > div { background-color: transparent !important; }
`;
// Load styles and settings on page load
applyStoredStyles();
addCustomizationButton();
// Apply stored styles from localStorage
function applyStoredStyles() {
const settings = {
buttonColor: getStoredValue('buttonColor', '#4CAF50'),
buttonHoverColor: getStoredValue('buttonHoverColor', '#ff91a6'),
fontColor: getStoredValue('fontColor', '#000000'),
fontSize: getStoredValue('fontSize', '16'),
fontFamily: getStoredValue('fontFamily', 'Arial'),
menuColor: getStoredValue('menuColor', '#ffffff'),
backgroundOpacity: getStoredValue('backgroundOpacity', '1'),
backgroundImage: getStoredValue('backgroundImage', '')
};
applyCustomStyles(settings);
}
// Reset styles
function resetToDefaultStyles() {
localStorage.clear();
GM_addStyle(defaultCSS);
applyStoredStyles();
}
// Get and set storage functions
function getStoredValue(key, defaultValue) {
return localStorage.getItem(key) || defaultValue;
}
function setStoredValue(key, value) {
localStorage.setItem(key, value);
}
// Apply customization styles to specified elements
function applyCustomStyles({ buttonColor, buttonHoverColor, fontColor, fontSize, fontFamily, menuColor, backgroundOpacity, backgroundImage }) {
GM_addStyle(`
body {
background-color: rgba(255, 255, 255, ${backgroundOpacity});
background-image: url(${backgroundImage});
font-size: ${fontSize}px;
font-family: ${fontFamily};
color: ${fontColor};
}
/* Apply colors to buttons and other elements */
.actionbuttons, .actionbuttons button,
.coorbox, .onlinebox, .cooldownbox, #palettebox {
background-color: ${buttonColor} !important;
color: white !important;
}
.actionbuttons:hover, .actionbuttons button:hover,
.coorbox:hover, .onlinebox:hover, .cooldownbox:hover, #palettebox:hover {
background-color: ${buttonHoverColor} !important;
}
/* Apply colors to modals and menus with the customMenu class */
.customMenu, .modal.USERAREA.show, .modal.HELP.show, .modal.SETTINGS.show {
background-color: ${menuColor} !important;
color: ${fontColor};
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* Apply background image to the "window CHAT show" class */
.window.CHAT.show {
background-image: url(${backgroundImage}) !important;
background-size: cover;
background-position: center;
}
`);
}
// Create customization button
function addCustomizationButton() {
const customizationButton = document.createElement('div');
customizationButton.id = 'customizationButton';
customizationButton.className = 'actionbuttons';
customizationButton.setAttribute('role', 'button');
customizationButton.innerHTML = `
<i class="fa fa-plus-square" aria-hidden="true" style="vertical-align: middle; font-size: 19px; color: #FFFFFF;"></i>
`;
customizationButton.style.position = 'fixed';
customizationButton.style.left = '16px';
customizationButton.style.top = '37%';
customizationButton.style.zIndex = '9999';
customizationButton.style.transform = 'translateY(-50%)';
document.body.appendChild(customizationButton);
customizationButton.addEventListener('click', showCustomizationPanel);
}
// Show customization panel with improved styling and new options
function showCustomizationPanel() {
const panelHTML = `
<div class="modal SETTINGS show customMenu" style="
z-index: 9999;
width: 50%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
font-family: 'Pixelify Sans', sans-serif;
">
<h2 style="text-align: center; font-size: 1.4em; margin-bottom: 1em;">Settings</h2>
<div class="modal-topbtn close" role="button" title="Close" tabindex="-1" style="
position: absolute;
top: 10px;
right: 10px;
font-size: 1.2em;
cursor: pointer;
">✕</div>
<div class="content" style="display: flex; flex-direction: column; gap: 15px;">
<div class="setitem">
<label>Button Color:</label>
<input type="color" id="buttonColorPicker" value="${getStoredValue('buttonColor', '#4CAF50')}" />
</div>
<div class="setitem">
<label>Button Hover Color:</label>
<input type="color" id="buttonHoverColorPicker" value="${getStoredValue('buttonHoverColor', '#ff91a6')}" />
</div>
<div class="setitem">
<label>Font Color:</label>
<input type="color" id="fontColorPicker" value="${getStoredValue('fontColor', '#000000')}" />
</div>
<div class="setitem">
<label>Font Size:</label>
<input type="number" id="fontSizePicker" min="10" max="30" value="${getStoredValue('fontSize', '16')}" style="width: 80px;" /> px
</div>
<div class="setitem">
<label>Font Family:</label>
<select id="fontFamilyPicker" style="padding: 5px; border-radius: 5px;">
<option value="Arial" ${getStoredValue('fontFamily', 'Arial') === 'Arial' ? 'selected' : ''}>Arial</option>
<option value="Verdana" ${getStoredValue('fontFamily', 'Arial') === 'Verdana' ? 'selected' : ''}>Verdana</option>
<option value="Helvetica" ${getStoredValue('fontFamily', 'Arial') === 'Helvetica' ? 'selected' : ''}>Helvetica</option>
<option value="Tahoma" ${getStoredValue('fontFamily', 'Arial') === 'Tahoma' ? 'selected' : ''}>Tahoma</option>
<option value="Pixelify Sans" ${getStoredValue('fontFamily', 'Arial') === 'Pixelify Sans' ? 'selected' : ''}>Pixelify Sans</option>
</select>
</div>
<div class="setitem">
<label>Menu Color:</label>
<input type="color" id="menuColorPicker" value="${getStoredValue('menuColor', '#ffffff')}" />
</div>
<div class="setitem">
<label>Background Opacity:</label>
<input type="range" id="backgroundOpacity" min="0.1" max="1" step="0.1" value="${getStoredValue('backgroundOpacity', '1')}" />
</div>
<div class="setitem">
<label> Chat Background Image URL:</label>
<input type="text" id="backgroundImage" value="${getStoredValue('backgroundImage', '')}" style="width: 100%;" placeholder="Enter URL here" />
</div>
<button id="saveButton" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Save</button>
<button id="resetButton" style="background-color: #f44336; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Reset to Default</button>
</div>
</div>
`;
const modalContainer = document.createElement('div');
modalContainer.innerHTML = panelHTML;
document.body.appendChild(modalContainer);
// Close the modal when clicking the "X"
document.querySelector('.modal-topbtn.close').addEventListener('click', () => {
modalContainer.remove();
});
// Save customization options
document.getElementById('saveButton').addEventListener('click', () => {
setStoredValue('buttonColor', document.getElementById('buttonColorPicker').value);
setStoredValue('buttonHoverColor', document.getElementById('buttonHoverColorPicker').value);
setStoredValue('fontColor', document.getElementById('fontColorPicker').value);
setStoredValue('fontSize', document.getElementById('fontSizePicker').value);
setStoredValue('fontFamily', document.getElementById('fontFamilyPicker').value);
setStoredValue('menuColor', document.getElementById('menuColorPicker').value);
setStoredValue('backgroundOpacity', document.getElementById('backgroundOpacity').value);
setStoredValue('backgroundImage', document.getElementById('backgroundImage').value);
applyStoredStyles();
modalContainer.remove();
});
// Reset to default
document.getElementById('resetButton').addEventListener('click', () => {
resetToDefaultStyles();
modalContainer.remove();
});
}
})();