Pixelplanet+

Customize the PixelPlanet interface with extended personalization options and revert to default.
目前为 2024-11-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Pixelplanet+
// @namespace    http://tampermonkey.net/
// @version      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';
 
    // 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);
            }
        `);
    }
 
    // Create customization button
    function addCustomizationButton() {
        const customizationButton = document.createElement('div');
        customizationButton.id = 'customizationButton';
        customizationButton.className = 'actionbuttons';
        customizationButton.setAttribute('role', 'button');
        customizationButton.innerHTML = `
            <svg stroke="currentColor" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
                <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);
    }
 
    // 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>Background Image URL:</label>
                    <input type="text" id="backgroundImage" value="${getStoredValue('backgroundImage', '')}" style="width: 100%; padding: 5px;" />
                </div>
                <div style="display: flex; justify-content: space-between; margin-top: 1em;">
                    <button id="saveCustomization" style="flex: 1; margin-right: 5px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;">Save</button>
                    <button id="resetCustomization" style="flex: 1; margin-left: 5px; padding: 10px; background-color: #f44336; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;">Reset</button>
                </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 settings
    function saveCustomization() {
        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();
    }
 
    // Hide panel
    function hideCustomizationPanel() {
        const panel = document.querySelector('.modal');
        if (panel) { panel.remove(); }
    }
})();