☰

Drawaria Image Chat Importer!

Allows you to select and upload an image from your computer to the chatbox.

// ==UserScript==
// @name         Drawaria Image Chat Importer!
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Allows you to select and upload an image from your computer to the chatbox.
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Función para crear un elemento de imagen con la fuente de la imagen seleccionada
    function createImageElement(src) {
        var img = document.createElement('img');
        img.src = src;
        img.style.maxWidth = '100%'; // Ajusta el tamaño de la imagen al tamaño del contenedor
        return img;
    }

    // Función para agregar un mensaje de chat con una imagen al chatbox
    function addChatMessageWithImage(imageSrc, imageUrl) {
        var chatbox = document.getElementById('chatbox_messages');
        if (!chatbox) {
            console.error('Chatbox element not found.');
            return;
        }

        var messageDiv = document.createElement('div');
        messageDiv.className = 'chatmessage playerchatmessage-highlightable';
        messageDiv.dataset.playerid = '1';
        messageDiv.dataset.ts = Date.now();

        // Elemento para la imagen visible solo para el usuario
        var imageElement = createImageElement(imageSrc);
        messageDiv.appendChild(imageElement);

        // Elemento de enlace para los otros jugadores
        var linkElement = document.createElement('a');
        linkElement.href = imageUrl;
        linkElement.textContent = '';
        linkElement.target = '_blank';
        messageDiv.appendChild(linkElement);

        chatbox.appendChild(messageDiv);
        chatbox.scrollTop = chatbox.scrollHeight; // Scroll to the bottom
    }

    /**
     * Utility :
     * Easily upload an Image for your Avatar
     */
    function uploadToAvatar(img, callback) {
        fetch(window.LOGGEDIN ? 'https://drawaria.online/saveavatar' : 'https://drawaria.online/uploadavatarimage', {
            method: 'POST',
            body: 'imagedata=' + encodeURIComponent(img) + '&fromeditor=true',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                Accept: 'text/plain, */*; q=0.01',
                'X-Requested-With': 'XMLHttpRequest',
            },
        }).then((response) => {
            if (response.ok) {
                const imageUrl = 'https://drawaria.online/avatar/cache/' + encodeURIComponent(img);
                callback(null, imageUrl);
            } else {
                callback(response.statusText);
            }
        }).catch((error) => {
            callback('Upload error: ' + error.message);
        });
    }

    /**
     * Socket event emitters
     */
    const emits = {
        chatmsg: function (message) {
            let data = ['chatmsg', message];
            return `${42}${JSON.stringify(data)}`;
        }
    };

    // Agrega un botón al lado del botón secundario
    var secondaryButton = document.getElementById('gesturespickerbutton');
    if (!secondaryButton) {
        console.error('Secondary button not found.');
        return;
    }

    var uploadButton = document.createElement('button');
    uploadButton.textContent = 'Upload Image';
    uploadButton.style.marginLeft = '5px'; // Espacio entre el botón secundario y el nuevo botón

    // Event listener para el botón de carga de imagen
    uploadButton.addEventListener('click', function() {
        var fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/png, image/jpeg';
        fileInput.click();

        fileInput.addEventListener('change', function() {
            var file = fileInput.files[0];
            if (!file) {
                console.error('No file selected.');
                return;
            }

            var reader = new FileReader();
            reader.onload = function(e) {
                var imageSrc = e.target.result;

                // Subir la imagen al servidor
                uploadToAvatar(imageSrc, function(error, imageUrl) {
                    if (error) {
                        console.error(error);
                        return;
                    }

                    // Agregar el mensaje de chat con la imagen y el enlace
                    addChatMessageWithImage(imageSrc, imageUrl);

                    // Emitir el mensaje de chat con el enlace para otros jugadores
                    const socket = io(); // Asumiendo que `io` está disponible en el ámbito global para conectarse al socket
                    socket.emit('chatmsg', emits.chatmsg(imageUrl));
                });
            };
            reader.readAsDataURL(file);
        });
    });

    secondaryButton.parentNode.insertBefore(uploadButton, secondaryButton.nextSibling);

    // Elimina el botón de gestos
    secondaryButton.remove();
})();