Drawaria Colorful Chat

Allows you to write colors in Drawaria chat

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==UserScript==
// @name         Drawaria Colorful Chat
// @namespace    http://tampermonkey.net/
// @version      Final 2024 Script
// @description  Allows you to write colors in Drawaria chat
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @grant        none
// @connect      https://drawaria.online/socket.io/socket.io.js
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Función para agregar el botón de color
    function addColorButton() {
        const colorPicker = document.createElement('input');
        colorPicker.type = 'color';
        colorPicker.id = 'colorPicker';
        colorPicker.style.marginLeft = '10px';
        colorPicker.style.cursor = 'pointer';

        const chatInput = document.getElementById('chatbox_textinput');
        chatInput.parentNode.insertBefore(colorPicker, chatInput.nextSibling);

        colorPicker.addEventListener('input', function() {
            const color = colorPicker.value;
            chatInput.style.color = color;
            chatInput.dataset.color = color;
        });
    }

    // Función para observar cambios en el DOM y agregar el botón de color
    function observeDOMChanges() {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.id === 'chatbox_textinput') {
                            addColorButton();
                        }
                    });
                }
            });
        });

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

    // Agregar el botón de color si el campo de chat ya está presente
    const chatInput = document.getElementById('chatbox_textinput');
    if (chatInput) {
        addColorButton();
    } else {
        observeDOMChanges();
    }

    // Interceptar el envío del mensaje y añadir el estilo de color
    const originalSendMessage = window.sendChatMessage;
    window.sendChatMessage = function(message) {
        const color = document.getElementById('colorPicker').value;
        if (color) {
            message = `<span style="color: ${color};">${message}</span>`;
        }
        originalSendMessage(message);
    };

    // Observar cambios en el chatbox_messages y aplicar el estilo de color
    const chatboxMessages = document.getElementById('chatbox_messages');
    if (chatboxMessages) {
        const chatObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.classList.contains('chatmessage')) {
                            const messageText = node.querySelector('.playerchatmessage-text');
                            if (messageText) {
                                const color = document.getElementById('colorPicker').value;
                                messageText.style.color = color;
                            }
                        }
                    });
                }
            });
        });

        chatObserver.observe(chatboxMessages, {
            childList: true,
            subtree: true
        });
    }
})();