Pixelplanet+

Customize the PixelPlanet interface with extended personalization options and revert to default.
目前为 2024-11-12 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         Pixelplanet+
// @namespace    http://tampermonkey.net/
// @version      2.5
// @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 Pixelify Sans font from Google Fonts (or other font source)
    GM_addStyle(`
        @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
    `);
 
    // 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>
                            <option value="Pixelify Sans" ${getStoredValue('fontFamily', 'Arial') === 'Pixelify Sans' ? 'selected' : ''}>Pixelify Sans</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>Background Image URL:</label>
                        <input type="text" id="backgroundImage" value="${getStoredValue('backgroundImage', '')}" />
                    </div>
                    <div style="margin-top: 10px;">
                        <button id="saveCustomization">Save</button>
                        <button id="resetCustomization">Reset</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();
})();