☰

CMB - Custom Mpp Buttons by gtnntg

Custom buttons for Multiplayer Piano with panel navigation

// ==UserScript==
// @name         CMB - Custom Mpp Buttons by gtnntg
// @name:ru      КПМ - Настраиваемые кнопки Mpp от gtnntg
// @version      0.1.3
// @devversion   0.6.3
// @description  Custom buttons for Multiplayer Piano with panel navigation
// @description:ru Настраиваемые кнопки для Multiplayer Piano с системой навигации по панелям
// @author       gtnntg
// @remixauthor  /
// @license      MIT
// @namespace    https://vscode.dev/?connectTo=tampermonkey
// @match        *://multiplayerpiano.org/*
// @match        *://multiplayerpiano.net/*
// @match        *://piano.ourworldofpixels.com/*
// @match        *://playground-mpp.hyye.tk/*
// @match        *://rgbmpp.qwerty0301.repl.co/*
// @match        *://mpp.hyye.tk/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==
/* globals MPP */
/*---------[Author info]-------------
 [discord: gtnntg]
 [e-mail: [email protected]]
 [github: https://github.com/zeroxel]
--------------------------------------*/
/*---------[Remix Author info]-------------
 If you would like to modify the script or change it in any way. 
 Please fill in your information
 You can use author as an example
--------------------------------------*/
/*---------[RU:info]------------
настоящая версия скрипта: 0.6.0

Лицензия и авторское право:
Copyright (C) 2024  Georgiy Shvedov ([email protected])

Эта программа является свободным программным обеспечением: вы можете распространять ее и/или модифицировать
ее в соответствии с условиями MIT License.

Эта программа распространяется в надежде, что она будет полезной,
но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии
ТОВАРНОГО ВИДА или ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННЫХ ЦЕЛЕЙ. См.
MIT License для получения более подробных сведений.

Вы должны были получить копию MIT License
вместе с этой программой. Если нет, см.
<https://opensource.org/licenses/MIT>.
-----------------------------*/

/*---------[EN:info]------------
Current script version: 0.6.0

License and Copyright:
Copyright (C) 2024 Georgiy Shvedov ([email protected])

This program is free software: you can redistribute it and/or modify
it under the terms of the MIT License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
MIT License for more details.

You should have received a copy of the MIT License
along with this program. If not, see <https://opensource.org/licenses/MIT>.
-----------------------------*/

//-------script-----------
(function() {
    'use strict';

    // CSS для панелей и кнопок
    const CSS = `
    :root {
        --panel-bg-color: rgba(255, 255, 255, 0.9);
        --panel-header-color: rgba(51, 51, 51, 0.9);
        --panel-header-text-color: #ffffff;
        --button-bg-color: rgba(0, 123, 255, 0.9);
        --button-text-color: #ffffff;
        --category-bg-color: rgba(255, 255, 255, 0.5); /* Прозрачный фон для подзаголовков */
        --border-radius: 5px; /* Закругление краев */
    }

    .custom-panel {
        position: fixed;
        top: 20px;
        left: 0;
        width: 250px;
        background-color: var(--panel-bg-color);
        border: 1px solid #ccc;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: none;
        overflow: hidden;
        border-radius: var(--border-radius);
    }

    .panel-header {
        background-color: var(--panel-header-color);
        color: var(--panel-header-text-color);
        padding: 10px;
        font-weight: bold;
        cursor: move;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .custom-button {
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        border: none;
        padding: 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: var(--border-radius);
        display: block;
        width: calc(100% - 20px);
        box-sizing: border-box;
    }

    .panel-category {
        background-color: var(--category-bg-color); /* Прозрачный фон */
        padding: 10px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        margin-bottom: 5px;
        border-radius: var(--border-radius); /* Закругленные углы */
    }

    .panel-content {
        padding: 10px;
    }

    .slide-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        background: var(--panel-bg-color);
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow: hidden;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        border-radius: var(--border-radius);
    }

    .slide-panel.open {
        transform: translateX(0);
    }

    .close-button {
        background: red;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 50%;
        z-index: 1002;
    }

    .toggle-button {
        position: fixed;
        top: 20px;
        left: 20px;
        background: var(--panel-header-color);
        color: var(--panel-header-text-color);
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: var(--border-radius);
        z-index: 1002;
    }

    .style-customizer {
        margin: 20px;
        padding: 10px;
        background: var(--panel-bg-color);
        border: 1px solid #ccc;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border-radius: var(--border-radius);
    }

    .style-section {
        margin-bottom: 15px;
    }

    .field-container {
        margin-bottom: 10px;
    }

    .field-container label {
        display: block;
        margin-bottom: 5px;
    }

    .field-container input[type="color"],
    .field-container input[type="range"] {
        width: 100%;
    }
    `;

    // Добавление стилей в документ
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = CSS;
    document.head.appendChild(styleSheet);

    // Переменные для настроек стилей
    const DEFAULT_STYLES = {
        panelBackgroundColor: 'rgba(255, 255, 255, 0.9)',
        panelHeaderColor: 'rgba(51, 51, 51, 0.9)',
        panelHeaderTextColor: '#ffffff',
        buttonBackgroundColor: 'rgba(0, 123, 255, 0.9)',
        buttonTextColor: '#ffffff',
        categoryBackgroundColor: 'rgba(255, 255, 255, 0.5)', /* Прозрачный фон для подзаголовков */
        borderRadius: '5px'
    };

    // Проверка активности скрипта
    const SCRIPT_ACTIVE_KEY = 'scriptActive';
    function isScriptActive() {
        return GM_getValue(SCRIPT_ACTIVE_KEY, true);
    }

    // Функция для активации/деактивации скрипта
    function setScriptActive(state) {
        GM_setValue(SCRIPT_ACTIVE_KEY, state);
        if (state) {
            showPanels();
            createSlidePanel();
        } else {
            hidePanels();
        }
    }

    // Получение и сохранение стилей
    function getStyles() {
        return GM_getValue('panelStyles', DEFAULT_STYLES);
    }

    function setStyles(styles) {
        GM_setValue('panelStyles', styles);
        applyStyles();
    }

    // Применение стилей
    function applyStyles() {
        const styles = getStyles();
        document.documentElement.style.setProperty('--panel-bg-color', styles.panelBackgroundColor);
        document.documentElement.style.setProperty('--panel-header-color', styles.panelHeaderColor);
        document.documentElement.style.setProperty('--panel-header-text-color', styles.panelHeaderTextColor);
        document.documentElement.style.setProperty('--button-bg-color', styles.buttonBackgroundColor);
        document.documentElement.style.setProperty('--button-text-color', styles.buttonTextColor);
        document.documentElement.style.setProperty('--category-bg-color', styles.categoryBackgroundColor); /* Прозрачный фон для подзаголовков */
        document.documentElement.style.setProperty('--border-radius', styles.borderRadius);
    }

    // Создание панели
    function createPanel(title, id, categories) {
        const panel = document.createElement('div');
        panel.id = id;
        panel.className = 'custom-panel';

        const header = document.createElement('div');
        header.className = 'panel-header';
        header.textContent = title;
        panel.appendChild(header);

        // Создание контента для панелей
        const panelContent = document.createElement('div');
        panelContent.className = 'panel-content';
        categories.forEach(category => {
            const categoryHeader = document.createElement('div');
            categoryHeader.className = 'panel-category';
            categoryHeader.textContent = category.title;
            panelContent.appendChild(categoryHeader);

            category.buttons.forEach(button => {
                const btn = createButton(button.text, button.action);
                panelContent.appendChild(btn);
            });
        });

        panel.appendChild(panelContent);
        document.body.appendChild(panel);
        makeElementDraggable(panel, header);

        return panel;
    }

    // Функция для создания кнопок
    function createButton(text, onClick) {
        const button = document.createElement('button');
        button.textContent = text;
        button.className = 'custom-button';
        button.onclick = onClick;
        return button;
    }

    // Создание и отображение панелей
    function showPanels() {
        const panelsConfig = [
            {
                title: 'Panel 1',
                id: 'custom-panel-1',
                categories: [
                    {
                        title: 'Category 1',
                        buttons: [
                            { text: 'Button 1', action: () => alert('Button 1 clicked') },
                            { text: 'Button 2', action: () => alert('Button 2 clicked') }
                        ]
                    },
                    {
                        title: 'Category 2',
                        buttons: [
                            { text: 'Button 3', action: () => alert('Button 3 clicked') },
                            { text: 'Button 4', action: () => alert('Button 4 clicked') }
                        ]
                    }
                ]
            },
            {
                title: 'Panel 2',
                id: 'custom-panel-2',
                categories: [
                    {
                        title: 'General',
                        buttons: [
                            { text: 'General 1', action: () => alert('General 1 clicked') },
                            { text: 'General 2', action: () => alert('General 2 clicked') }
                        ]
                    }
                ]
            }
        ];

        panelsConfig.forEach(config => {
            const panel = createPanel(config.title, config.id, config.categories);
            panel.style.display = 'block';
        });

        applyStyles();
    }

    // Скрытие панелей
    function hidePanels() {
        const panels = document.querySelectorAll('.custom-panel');
        panels.forEach(panel => panel.style.display = 'none');
    }

    // Функция для создания выдвижной панели
    function createSlidePanel() {
        const slidePanel = document.createElement('div');
        slidePanel.id = 'slide-panel';
        slidePanel.className = 'slide-panel';
        document.body.appendChild(slidePanel);

        const closeButton = document.createElement('button');
        closeButton.id = 'close-slide-panel';
        closeButton.className = 'close-button';
        closeButton.textContent = '✖';
        closeButton.onclick = () => {
            slidePanel.classList.remove('open');
            document.getElementById('toggle-slide-panel').style.display = 'block';
        };
        slidePanel.appendChild(closeButton);

        const toggleButton = document.createElement('button');
        toggleButton.id = 'toggle-slide-panel';
        toggleButton.className = 'toggle-button';
        toggleButton.textContent = '☰';
        toggleButton.onclick = () => {
            slidePanel.classList.toggle('open');
            toggleButton.style.display = 'none';
            closeButton.style.display = 'block';
        };
        document.body.appendChild(toggleButton);

        const panelButtons = document.createElement('div');
        panelButtons.className = 'panel-buttons';
        slidePanel.appendChild(panelButtons);

        const panel1Button = createButton('Show Panel 1', () => togglePanel('custom-panel-1'));
        const panel2Button = createButton('Show Panel 2', () => togglePanel('custom-panel-2'));
        panelButtons.appendChild(panel1Button);
        panelButtons.appendChild(panel2Button);

        createStyleCustomizer(slidePanel);
    }

    // Функция для переключения видимости панелей
    function togglePanel(panelId) {
        const panel = document.getElementById(panelId);
        if (panel) {
            panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
        }
    }

    // Функция для создания кастомизатора стилей
    function createStyleCustomizer(parentElement) {
        const customizer = document.createElement('div');
        customizer.className = 'style-customizer';
        parentElement.appendChild(customizer);

        const styleSections = [
            { name: 'Panel Background Color', key: 'panelBackgroundColor', type: 'color' },
            { name: 'Panel Header Color', key: 'panelHeaderColor', type: 'color' },
            { name: 'Panel Header Text Color', key: 'panelHeaderTextColor', type: 'color' },
            { name: 'Button Background Color', key: 'buttonBackgroundColor', type: 'color' },
            { name: 'Button Text Color', key: 'buttonTextColor', type: 'color' },
            { name: 'Category Background Color', key: 'categoryBackgroundColor', type: 'color' }, /* Новый параметр */
            { name: 'Border Radius', key: 'borderRadius', type: 'range', min: 0, max: 50, step: 1 }
        ];

        styleSections.forEach(section => {
            const sectionDiv = document.createElement('div');
            sectionDiv.className = 'style-section';

            const label = document.createElement('label');
            label.textContent = section.name;
            sectionDiv.appendChild(label);

            const input = document.createElement('input');
            input.type = section.type;
            input.value = getStyles()[section.key];
            if (section.type === 'range') {
                input.min = section.min;
                input.max = section.max;
                input.step = section.step;
            }
            input.onchange = (e) => {
                const newStyles = getStyles();
                newStyles[section.key] = section.type === 'range' ? `${e.target.value}px` : e.target.value;
                setStyles(newStyles);
            };
            sectionDiv.appendChild(input);

            customizer.appendChild(sectionDiv);
        });
    }

    // Функция для перемещения элементов
    function makeElementDraggable(element, handle) {
        handle.onmousedown = function(e) {
            e.preventDefault();
            let shiftX = e.clientX - element.getBoundingClientRect().left;
            let shiftY = e.clientY - element.getBoundingClientRect().top;

            function moveAt(pageX, pageY) {
                element.style.left = pageX - shiftX + 'px';
                element.style.top = pageY - shiftY + 'px';
            }

            moveAt(e.pageX, e.pageY);

            function onMouseMove(e) {
                moveAt(e.pageX, e.pageY);
            }

            document.addEventListener('mousemove', onMouseMove);

            handle.onmouseup = function() {
                document.removeEventListener('mousemove', onMouseMove);
                handle.onmouseup = null;
            };
        };

        handle.ondragstart = function() {
            return false;
        };
    }

    // Запуск скрипта
    setScriptActive(isScriptActive());
})();