Pixelplanet+

Customize the PixelPlanet interface with extended personalization options and revert to default.
目前为 2024-11-13 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         Pixelplanet+
// @namespace    http://tampermonkey.net/
// @version      3.2
// @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();
        });
    }
})();