Drawaria More Color Palettes!

Adds 6 extra color buttons to Drawaria.online.
换行
// ==UserScript==
// @name         Drawaria More Color Palettes!
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds 6 extra color buttons to Drawaria.online.
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant        none
// @run-at       document-idle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const NEW_COLORS = [
        { name: "Teal", hex: "#008080" },
        { name: "Lime", hex: "#AAFF00" },
        { name: "Cyan", hex: "#00FFFF" },
        { name: "Magenta", hex: "#FF00FF" },
        { name: "Olive", hex: "#808000" },
        { name: "Maroon", hex: "#800000" }
    ];

    const style = document.createElement('style');
    style.textContent = `
        #drawcontrols {
            flex-wrap: wrap; /* Permite que los botones se envuelvan si son demasiados */
            /* position: relative; /* Puede ser necesario si el triángulo es nuevo y absoluto */
        }
        .drawcontrols-button.custom-color-button {
            box-shadow: 0 0 2px rgba(0,0,0,0.3);
        }
        .drawcontrols-button.custom-color-button.custom-active-color {
            box-shadow: 0 0 5px 2px #007bff; /* Resaltado para color personalizado activo */
            border: 1px solid #007bff;
        }
        #colorpicker-cursor { /* Selector para el triángulo del juego */
            transition: left 0.1s ease-out; /* Transición suave para el movimiento del triángulo */
        }
    `;
    document.head.appendChild(style);

    let gameTriangleElement = null;

    function findGameTriangle() {
        if (gameTriangleElement && document.body.contains(gameTriangleElement)) {
            return gameTriangleElement;
        }
        // El ID del triángulo en Drawaria parece ser 'colorpicker-cursor'
        // y es hijo de '#drawcontrols-colors'
        gameTriangleElement = document.getElementById('colorpicker-cursor');
        if (gameTriangleElement) {
            // Asegurar que el juego ya lo posiciona absolutamente o relativamente de forma adecuada
            // gameTriangleElement.style.position = 'absolute'; // El juego ya debería hacer esto
            // gameTriangleElement.style.top = '-8px'; // Ajustar si es necesario, el juego ya debería tener un 'top'
        }
        return gameTriangleElement;
    }

    function updateTrianglePosition(targetButton) {
        const triangle = findGameTriangle();
        if (!triangle || !targetButton) {
            // console.log("Triángulo o botón objetivo no encontrado para actualizar posición.");
            return;
        }

        // El contenedor de referencia para 'left' del triángulo es '#drawcontrols-colors'
        const buttonContainer = document.getElementById('drawcontrols-colors') || document.getElementById('drawcontrols');
        if (!buttonContainer) {
            // console.log("Contenedor de botones no encontrado.");
            return;
        }

        const buttonRect = targetButton.getBoundingClientRect();
        const containerRect = buttonContainer.getBoundingClientRect();

        // Calcular el centro del botón relativo al contenedor de botones
        const buttonCenterRelativeToContainer = (buttonRect.left - containerRect.left) + (buttonRect.width / 2);

        // Calcular la nueva posición 'left' del triángulo para centrarlo
        const triangleWidth = triangle.offsetWidth || 8; // El triángulo del juego es pequeño, aprox. 8-10px
        const newLeft = buttonCenterRelativeToContainer - (triangleWidth / 2);

        triangle.style.left = `${newLeft}px`;
        // console.log(`Triángulo movido a: ${newLeft}px para el botón ID: ${targetButton.id}`);
    }

    function addCustomColors() {
        const drawControlsContainer = document.getElementById('drawcontrols');
        if (!drawControlsContainer) return false;

        const actualButtonContainer = document.getElementById('drawcontrols-colors') || drawControlsContainer;

        if (document.getElementById('custom-color-teal')) return true; // Ya inicializado

        // El botón del selector de color original, para insertar antes de él
        const colorPickerButtonOriginal = actualButtonContainer.querySelector('.drawcontrols-colorpicker');
        const proxyGameButton = actualButtonContainer.querySelector('.drawcontrols-button.drawcontrols-color:not(.drawcontrols-colorpicker)');

        if (!proxyGameButton) {
            console.error("Drawaria Extra Colors: Botón proxy del juego no encontrado.");
            return false;
        }

        findGameTriangle(); // Intentar encontrar el triángulo del juego pronto

        NEW_COLORS.forEach(colorInfo => {
            const newButton = document.createElement('div');
            newButton.className = 'drawcontrols-button drawcontrols-color custom-color-button';
            newButton.style.backgroundColor = colorInfo.hex;
            newButton.dataset.ctrlgroup = 'color'; // Para que el juego lo reconozca como un control de color
            newButton.title = colorInfo.name;
            newButton.id = `custom-color-${colorInfo.name.toLowerCase()}`;

            newButton.addEventListener('click', function(event) {
                const originalProxyColor = proxyGameButton.style.backgroundColor;
                proxyGameButton.style.backgroundColor = this.style.backgroundColor;

                // Simular clic en el botón proxy
                proxyGameButton.click();

                // Después de que el juego mueva el triángulo (al botón proxy),
                // nosotros lo movemos a nuestro botón personalizado.
                requestAnimationFrame(() => {
                    proxyGameButton.style.backgroundColor = originalProxyColor; // Restaurar color visual del proxy
                    updateTrianglePosition(this); // Mover el triángulo a NUESTRO botón
                });

                // Gestionar el estado activo visual de nuestros botones personalizados
                document.querySelectorAll('.custom-color-button.custom-active-color').forEach(btn => {
                    btn.classList.remove('custom-active-color');
                });
                this.classList.add('custom-active-color');

                // El juego debería quitar el resaltado de sus propios botones (excepto el proxy momentáneamente)
                // cuando el color cambia a través del proxy.
            });

            if (colorPickerButtonOriginal) {
                actualButtonContainer.insertBefore(newButton, colorPickerButtonOriginal);
            } else {
                actualButtonContainer.appendChild(newButton);
            }
        });

        // Añadir listeners a los botones de color originales del juego
        actualButtonContainer.querySelectorAll('.drawcontrols-button.drawcontrols-color:not(.custom-color-button):not(.drawcontrols-colorpicker)').forEach(gameBtn => {
            gameBtn.addEventListener('click', function() {
                // Cuando se hace clic en un botón original, quitar el estado activo de nuestros botones personalizados
                document.querySelectorAll('.custom-color-button.custom-active-color').forEach(customBtn => {
                    customBtn.classList.remove('custom-active-color');
                });
                // El juego se encargará de mover su triángulo.
                // Podríamos forzar una actualización si fuera necesario, pero es mejor dejar que el juego lo maneje.
                // requestAnimationFrame(() => {
                //     updateTrianglePosition(this); // O mejor, dejar que el juego lo haga.
                // });
            });
        });

        // Si se usa el color picker del juego, también limpiar nuestros botones activos
        if (colorPickerButtonOriginal) {
            // Necesitaríamos observar cambios en el color picker o cuando se selecciona un color de él.
            // Esto es más complejo. Una solución simple es que cuando se selecciona un color del picker,
            // el triángulo se moverá allí, y nuestros botones personalizados perderán su "custom-active-color"
            // si el proxy no fue el último clickeado. Por ahora, el click en un botón original lo maneja.
        }


        console.log("Drawaria Extra Colors: Botones personalizados añadidos con lógica de triángulo.");
        return true;
    }

    const observer = new MutationObserver((mutationsList, observerInstance) => {
        const targetContainer = document.getElementById('drawcontrols-colors') || document.getElementById('drawcontrols');
        if (targetContainer && targetContainer.querySelector('.drawcontrols-button.drawcontrols-color')) {
            if (addCustomColors()) {
                observerInstance.disconnect();
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    let attempts = 0;
    const intervalID = setInterval(() => {
        attempts++;
        if (addCustomColors() || attempts > 60) { // Intentar durante ~6 segundos
            clearInterval(intervalID);
        }
    }, 100);

})();
欢迎访问Greasy Fork镜像
