Customize the PixelPlanet interface with extended personalization options and revert to default.
Per
// ==UserScript==
// @name Pixelplanet+
// @namespace http://tampermonkey.net/
// @version 2.4
// @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';
// Default CSS code (content of default.css)
const defaultCSS = `
/* Default CSS codes here */
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
border: none;
user-select: none;
background: #c4c4c4;
}
.menu > div {
background-color: transparent !important;
}
`;
// Apply customizations when the page loads
const applyStoredStyles = () => {
const buttonColor = getStoredValue('buttonColor', '#4CAF50');
const buttonHoverColor = getStoredValue('buttonHoverColor', '#ff91a6');
const tableRowEvenColor = getStoredValue('tableRowEvenColor', '#61dcea');
const tableRowOddColor = getStoredValue('tableRowOddColor', '#ffb1e1');
const fontColor = getStoredValue('fontColor', '#000000');
const fontSize = getStoredValue('fontSize', '16');
const fontFamily = getStoredValue('fontFamily', 'Arial');
const backgroundOpacity = getStoredValue('backgroundOpacity', '1');
const backgroundImage = getStoredValue('backgroundImage', '');
applyCustomStyles(buttonColor, buttonHoverColor, tableRowEvenColor, tableRowOddColor, fontColor, fontSize, fontFamily, backgroundOpacity, backgroundImage);
};
// Reset to default CSS
const resetToDefaultStyles = () => {
localStorage.clear(); // Clear localStorage
GM_addStyle(defaultCSS); // Load default CSS
applyStoredStyles(); // Apply customizations
};
// Get stored user data
const getStoredValue = (key, defaultValue) => {
return localStorage.getItem(key) || defaultValue;
};
// Store user data
const setStoredValue = (key, value) => {
localStorage.setItem(key, value);
};
// Apply custom styles to the page
const applyCustomStyles = (buttonColor, buttonHoverColor, tableRowEvenColor, tableRowOddColor, fontColor, fontSize, fontFamily, backgroundOpacity, backgroundImage) => {
GM_addStyle(`
body {
background-color: rgba(255, 255, 255, ${backgroundOpacity});
background-image: url(${backgroundImage});
}
.actionbuttons, .actionbuttons button {
background-color: ${buttonColor} !important;
color: white !important;
}
.actionbuttons:hover, .actionbuttons button:hover {
background-color: ${buttonHoverColor} !important;
}
table tr:nth-child(even) {
background-color: ${tableRowEvenColor};
}
table tr:nth-child(odd) {
background-color: ${tableRowOddColor};
}
body, .content {
font-size: ${fontSize}px;
font-family: ${fontFamily};
color: ${fontColor};
}
`);
};
// Add customization button
const addCustomizationButton = () => {
const customizationButton = document.createElement('div');
customizationButton.id = 'customizationButton';
customizationButton.className = 'actionbuttons';
customizationButton.setAttribute('role', 'button');
customizationButton.setAttribute('title', 'Customization');
customizationButton.innerHTML = `
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" style="fill: #FFC107;" />
<text x="12" y="16" text-anchor="middle" fill="white" font-size="10">K</text>
</svg>`;
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);
};
// Create the customization panel
const createCustomizationPanel = () => {
const panelHTML = `
<div class="modal TEMPLATES show" style="z-index: 9998; width: 60%; max-width: 600px; padding: 20px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ccc; border-radius: 10px;">
<h2>Customization</h2>
<div class="modal-topbtn close" role="button" title="Close" style="position: absolute; top: 10px; right: 10px; cursor: pointer;">✕</div>
<div class="modal-content">
<div style="padding-top: 10px;">
<div>
<label>Button Color:</label>
<input type="color" id="buttonColorPicker" value="${getStoredValue('buttonColor', '#4CAF50')}" />
</div>
<div>
<label>Button Hover Color:</label>
<input type="color" id="buttonHoverColorPicker" value="${getStoredValue('buttonHoverColor', '#ff91a6')}" />
</div>
<div>
<label>Table Row Colors - Even:</label>
<input type="color" id="tableRowEvenColorPicker" value="${getStoredValue('tableRowEvenColor', '#61dcea')}" />
</div>
<div>
<label>Table Row Colors - Odd:</label>
<input type="color" id="tableRowOddColorPicker" value="${getStoredValue('tableRowOddColor', '#ffb1e1')}" />
</div>
<div>
<label>Font Color:</label>
<input type="color" id="fontColorPicker" value="${getStoredValue('fontColor', '#000000')}" />
</div>
<div>
<label>Font Size:</label>
<input type="number" id="fontSizePicker" min="10" max="30" value="${getStoredValue('fontSize', '16')}" /> px
</div>
<div>
<label>Font Family:</label>
<select id="fontFamilyPicker">
<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>
</select>
</div>
<div>
<label>Background Opacity:</label>
<input type="range" id="backgroundOpacity" min="0.1" max="1" step="0.1" value="${getStoredValue('backgroundOpacity', '1')}" />
</div>
<div>
<label>Chat Background Image URL:</label>
<input type="url" id="backgroundImage" placeholder="https://www.example.com/your-image.jpg" value="${getStoredValue('backgroundImage', '')}" />
</div>
<div>
<button id="saveCustomization">Save Customization</button>
<button id="resetCustomization">Reset to Default</button>
</div>
</div>
</div>
</div>`;
document.body.insertAdjacentHTML('beforeend', panelHTML);
document.getElementById('saveCustomization').addEventListener('click', saveCustomization);
document.getElementById('resetCustomization').addEventListener('click', resetToDefaultStyles);
document.querySelector('.close').addEventListener('click', hideCustomizationPanel);
};
// Save the customization
const saveCustomization = () => {
const buttonColor = document.getElementById('buttonColorPicker').value;
const buttonHoverColor = document.getElementById('buttonHoverColorPicker').value;
const tableRowEvenColor = document.getElementById('tableRowEvenColorPicker').value;
const tableRowOddColor = document.getElementById('tableRowOddColorPicker').value;
const fontColor = document.getElementById('fontColorPicker').value;
const fontSize = document.getElementById('fontSizePicker').value;
const fontFamily = document.getElementById('fontFamilyPicker').value;
const backgroundOpacity = document.getElementById('backgroundOpacity').value;
const backgroundImage = document.getElementById('backgroundImage').value;
// Save to localStorage
setStoredValue('buttonColor', buttonColor);
setStoredValue('buttonHoverColor', buttonHoverColor);
setStoredValue('tableRowEvenColor', tableRowEvenColor);
setStoredValue('tableRowOddColor', tableRowOddColor);
setStoredValue('fontColor', fontColor);
setStoredValue('fontSize', fontSize);
setStoredValue('fontFamily', fontFamily);
setStoredValue('backgroundOpacity', backgroundOpacity);
setStoredValue('backgroundImage', backgroundImage);
applyCustomStyles(buttonColor, buttonHoverColor, tableRowEvenColor, tableRowOddColor, fontColor, fontSize, fontFamily, backgroundOpacity, backgroundImage);
};
// Show the customization panel
const showCustomizationPanel = () => {
createCustomizationPanel();
};
// Hide the customization panel
const hideCustomizationPanel = () => {
const panel = document.querySelector('.modal');
if (panel) {
panel.remove();
}
};
// On page load, apply previous customizations
applyStoredStyles();
addCustomizationButton();
})();