CMB - Custom Mpp Buttons by gtnntg

Custom buttons for Multiplayer Piano with panel navigation
当前为 2024-02-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         CMB - Custom Mpp Buttons by gtnntg
// @name:ru      КПМ - Настраиваемые кнопки Mpp от gtnntg
// @version      0.0.1
// @description  Custom buttons for Multiplayer Piano with panel navigation
// @description:ru Настраиваемые кнопки для Multiplayer Piano с системой навигации по панелям
// @author       gtnntg
// @license      GPL-3.0-or-later
// @namespace    https://vscode.dev/?connectTo=tampermonkey
// @match        *://multiplayerpiano.org/*
// @match        *://multiplayerpiano.net/*
// @match        *://piano.ourworldofpixels.com/*
// @match        *://mppclone.com/*
// @match        *://playground-mpp.hyye.tk/*
// @match        *://rgbmpp.qwerty0301.repl.co/*
// @match        *://mpp.hyye.tk/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==
 
/*---------[Author info]-------------
 [discord: gtnntg]
 [e-mail: developer.georgiyshvedov@mail.ru] <-- best
 [github: https://github.com/gtnntg2009]
--------------------------------------*/
 
/*---------[RU:info]------------
настоящая версия скрипта: 0.5.1
 
Лицензия и авторское право:
Copyright (C) 2023  Georgiy Shvedov (developer.georgiyshvedov@mail.ru)
 
Эта программа является свободным программным обеспечением: вы можете распространять ее и/или модифицировать
ее в соответствии с условиями GNU General Public License, опубликованной Free Software Foundation,
в версии 3 лицензии или (по вашему выбору) любой последующей версии.
 
Эта программа распространяется в надежде, что она будет полезной,
но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии
ТОВАРНОГО ВИДА или ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННЫХ ЦЕЛЕЙ. См.
GNU General Public License для получения более подробных сведений.
 
Вы должны были получить копию GNU General Public License
вместе с этой программой. Если нет, см.
<https://www.gnu.org/licenses/>.
-----------------------------*/
 
/*---------[EN:info]------------
Current script version: 0.5.1
 
License and Copyright:
Copyright (C) 2024 Georgiy Shvedov (developer.georgiyshvedov@mail.ru)
 
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
 
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
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-----------------------------*/
 
//-------script-----------
(function() {
    'use strict';
 
    const settingsKey = 'customMppButtonsSettings';
    const defaultSettings = {
        panels: [
            {
                title: 'Panel 1',
                left: '10px',
                top: '50px',
                categories: [
                    {
                        title: '1',
                        buttons: [
                            { name: 'Button 1', action: () => sendChat('Button 1.1 pressed') },
                            { name: 'Button 2', action: () => sendChat('Button 1.2 pressed') }
                        ]
                    },
                    /*
                    {
                        title: 'name for Category',
                        buttons: [                               
                            { name: 'name for button', action: () => you.function() },
                            { name: 'name for button', action: () => you.function() }, <-- , for more
                            { name: 'name for button', action: () => you.function() } <-- no ,
                        ]
                    }, 
                    */
                    {
                        title: '2',
                        buttons: [
                            { name: 'Button 1', action: () => sendChat('Button 2.1 pressed') },
                            { name: 'Button 2', action: () => sendChat('Button 2.2 pressed') }
                        ]
                    },
                    {
                        title: '3',
                        buttons: [
                            { name: 'Button 1', action: () => sendChat('Button 3.1 pressed') },
                            { name: 'Button 2', action: () => sendChat('Button 3.2 pressed') }
                        ]
                    }
                ]
            },//the end panel 1
            {
                title: 'Panel 2',
                left: 'calc(10px + 200px + 100px)', // Отступ от первой панели + ширина первой панели + 100 пикселей
                top: '50px',
                categories: [
                    {
                        title: 'Category 1',
                        buttons: [
                            { name: 'Button 1', action: () => sendChat('Button 1.1 pressed') },
                            { name: 'Button 2', action: () => sendChat('Button 1.2 pressed') }
                        ]
                    },//the end for Category 1 
                    {
                        title: 'Category 2',
                        buttons: [
                            { name: 'Button 1', action: () => sendChat('Button 2.1 pressed') },
                            { name: 'Button 2', action: () => sendChat('Button 2.2 pressed') }
                        ]//the end for buttons in Category 2
                    }//the end for Category 2
                ] //the end categories
            }//the end panel 2 none ,
        ]
    };
 
    const storedSettings = loadSettings();
 
    const dragHandleHeight = 20;
    const dragHandleColor = 'black';
 
    // Создаем кнопку для открытия панели 1
    const togglePanel1Button = createToggleButton('Open Panel 1', '10px', '510px', () => togglePanel('Panel 1'));
    document.body.appendChild(togglePanel1Button);
 
    // Создаем кнопку для открытия панели 2
    const togglePanel2Button = createToggleButton('Open Panel 2', '10px', '460px', () => togglePanel('Panel 2'));
    document.body.appendChild(togglePanel2Button);
 
    /* Создаем кнопку для открытия панели 3
    const togglePanel3Button = createToggleButton('Open Panel 3', '10px', '?px', () => togglePanel('Panel 3'));
    document.body.appendChild(togglePanel3Button);
    */
    
    // Создаем кнопку для закрытия панели
    const closePanelButton = createToggleButton('Close Panel', '10px', '600px', closeMenu);
    document.body.appendChild(closePanelButton);
 
    // Создаем всплывающее меню
    const popupMenu = createPopupMenu();
    document.body.appendChild(popupMenu);
 
    // Создаем квадратик для перетаскивания
    const dragHandle = createDragHandle();
    popupMenu.appendChild(dragHandle);
 
    function createToggleButton(title, left, bottom, clickHandler) {
        const button = document.createElement('button');
        button.innerHTML = title;
        button.style.position = 'fixed';
        button.style.bottom = bottom;
        button.style.left = left;
        button.style.zIndex = '10000';
        button.addEventListener('click', clickHandler);
 
        setStyles(button, {
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            padding: '15px',
            cursor: 'pointer',
            fontSize: '16px',
        });
 
        return button;
    }
 
    function createPopupMenu() {
        const popupMenu = document.createElement('div');
        popupMenu.id = 'popup-menu';
        popupMenu.style.display = 'none';
 
        setStyles(popupMenu, {
            position: 'fixed',
            top: '50px',
            left: '250px',
            width: '200px',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            border: '1px solid #ccc',
            borderRadius: '5px',
            padding: '15px',
            boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
            zIndex: '9999',
            color: 'white',
            userSelect: 'none', // Запрещаем выделение текста
        });
 
        return popupMenu;
    }
 
    function createDragHandle() {
        const dragHandle = document.createElement('div');
        dragHandle.id = 'drag-handle';
 
        setStyles(dragHandle, {
            position: 'absolute',
            top: '0',
            left: '0',
            right: '0',
            height: `${dragHandleHeight}px`,
            backgroundColor: dragHandleColor,
            cursor: 'grab',
        });
 
        dragHandle.addEventListener('mousedown', startDrag);
 
        return dragHandle;
    }
 
    function setStyles(element, styles) {
        for (const property in styles) {
            element.style[property] = styles[property];
        }
    }
 
    let isDragging = false;
    let offsetX, offsetY;
 
    function startDrag(e) {
        isDragging = true;
        offsetX = e.clientX - popupMenu.offsetLeft;
        offsetY = e.clientY - popupMenu.offsetTop;
        document.addEventListener('mousemove', handleDrag);
        document.addEventListener('mouseup', stopDrag);
        popupMenu.style.cursor = 'grabbing';
    }
 
    function handleDrag(e) {
        if (isDragging) {
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            popupMenu.style.left = `${x}px`;
            popupMenu.style.top = `${y}px`;
        }
    }
 
    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', handleDrag);
        document.removeEventListener('mouseup', stopDrag);
        popupMenu.style.cursor = 'grab';
    }
 
    function togglePanel(panelTitle) {
        closeMenu();
        clearCategories();
        const panel = storedSettings.panels.find(panel => panel.title === panelTitle);
        openMenu(panel);
    }
 
    function openMenu(panel) {
        popupMenu.style.display = 'block';
        addCategories(panel.categories, panel.title);
    }
 
    function closeMenu() {
        popupMenu.style.display = 'none';
    }
 
    function addCategories(categories, panelTitle) {
        const panelNumber = storedSettings.panels.findIndex(panel => panel.title === panelTitle) + 1;
        categories.forEach(category => {
            const categoryContainer = document.createElement('div');
            categoryContainer.className = 'category';
 
            const categoryTitleElement = document.createElement('div');
            categoryTitleElement.className = 'category-title';
            categoryTitleElement.textContent = `${category.title}`;
            categoryContainer.appendChild(categoryTitleElement);
 
            const categoryButtonsContainer = document.createElement('div');
            categoryButtonsContainer.className = 'category-buttons';
            addButtonsToContainer(categoryButtonsContainer, category.buttons);
 
            categoryContainer.appendChild(categoryButtonsContainer);
            popupMenu.appendChild(categoryContainer);
        });
    }
 
    function addButtonsToContainer(container, buttons) {
        buttons.forEach(buttonInfo => {
            const button = document.createElement('div');
            button.className = 'menu-button';
            button.textContent = buttonInfo.name;
 
            setStyles(button, {
                border: '1px solid #ccc',
                borderRadius: '5px',
                margin: '5px 0',
                padding: '5px',
                cursor: 'pointer',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                color: 'white'
            });
 
            button.addEventListener('click', buttonInfo.action);
            container.appendChild(button);
        });
    }
 
    function clearCategories() {
        const categoryContainers = document.querySelectorAll('.category');
        categoryContainers.forEach(container => {
            container.innerHTML = '';
        });
    }
 
    function sendChat(message) {
        MPP.chat.send(message); //no error
    }
 
    console.log("Script CMB - Custom Mpp Buttons with Panel Navigation was activated.")
    console.log("Script is working now.")
    console.log("RU: Скрипт КПМ - Настраиваемые кнопки для Multiplayer Piano с системой навигации по панелям был активирован.")
    console.log("RU: Скрипт работает сейчас.")
 
    function saveSettings(settings) {
        localStorage.setItem(settingsKey, JSON.stringify(settings));
    }
 
    function loadSettings() {
        const storedSettingsJson = localStorage.getItem(settingsKey);
        return storedSettingsJson ? JSON.parse(storedSettingsJson) : defaultSettings;
    }
 
})();