Drawaria Flag Draw Tool

Herramienta de dibujo de banderas para Drawaria.online, con renderizado local y menú arrastrable.

// ==UserScript==
// @name         Drawaria Flag Draw Tool
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Herramienta de dibujo de banderas para Drawaria.online, con renderizado local y menú arrastrable.
// @author       YouTubeDrawaria
// @match        *://drawaria.online/*
// @grant        none
// @run-at       document-idle
// @license      MIT
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// ==/UserScript==

(function () {
    'use strict';

    // === Global Variables & Constants ===
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let socket; // La conexión WebSocket principal del juego

    // Variables para Autodraw (imágenes y banderas)
    let drawing_active = false;
    let previewCanvas = document.createElement('canvas'); // Canvas auxiliar para cargar y procesar imágenes
    let previewCtx = previewCanvas.getContext('2d');
    let imgDataGlobal; // Datos de píxeles de la imagen cargada
    let executionLine = []; // Líneas a dibujar

    // Configuración por defecto de Autodraw (ajustables desde la UI)
    let autodrawImageSize = 4;
    let autodrawBrushSize = 13;
    let autodrawPixelSize = 2;
    let autodrawOffsetX = 0;
    let autodrawOffsetY = 0;

    let socketStatus = 'disconnected'; // Estado de la conexión WebSocket

    // === Hook into WebSocket (Captura la conexión principal del juego) ===
    const originalSend = WebSocket.prototype.send;
    WebSocket.prototype.send = function (...args) {
        if (!socket) { // Si aún no hemos capturado el socket principal
            socket = this; // Guárdalo
            // Añade un listener para monitorear el estado del socket
            this.addEventListener('open', () => updateConnectionStatus('connected'));
            this.addEventListener('close', () => updateConnectionStatus('disconnected'));
            this.addEventListener('error', () => updateConnectionStatus('disconnected'));
            // Monitorear mensajes entrantes para mantener el estado (opcional, pero útil)
            this.addEventListener('message', (event) => {
                let message = String(event.data);
                if (message.startsWith('430')) { // Mensaje de configuración de sala
                    try {
                        let configs = JSON.parse(message.slice(3))[0];
                        if (configs.roomid) {
                            updateConnectionStatus('connected'); // Confirma conexión al entrar a una sala
                        }
                    } catch (e) {
                        console.debug('Error parsing room config message:', e);
                    }
                } else if (message.startsWith('41')) { // Mensaje de ping/pong o cierre
                    // Este es un mensaje de "ping" o similar, no necesariamente desconexión
                }
            });
            console.log('Drawaria Flag Draw Tool: WebSocket hooked successfully.');
            if (this.readyState === WebSocket.OPEN) {
                 updateConnectionStatus('connected');
            }
        }
        return originalSend.apply(this, args);
    };


    // === Flag Configurations ===
    const flags = {
        Russia: 'https://flagcdn.com/w320/ru.png',
        Ukraine: 'https://flagcdn.com/w320/ua.png',
        Uzbekistan: 'https://flagcdn.com/w320/uz.png',
        India: 'https://flagcdn.com/w320/in.png',
        Armenia: 'https://flagcdn.com/w320/am.png',
        Latvia: 'https://flagcdn.com/w320/lv.png',
        Estonia: 'https://flagcdn.com/w320/ee.png',
        Bulgaria: 'https://flagcdn.com/w320/bg.png',
        Germany: 'https://flagcdn.com/w320/de.png',
        Netherlands: 'https://flagcdn.com/w320/nl.png',
        Hungary: 'https://flagcdn.com/w320/hu.png',
        Luxembourg: 'https://flagcdn.com/w320/lu.png'
    };


    // === Utility Functions ===
    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }

    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function updateConnectionStatus(status) {
        socketStatus = status;
        const statusIndicator = document.getElementById('connectionStatus');
        const statusText = document.getElementById('statusText');

        if (statusIndicator && statusText) {
            if (status === 'connected') {
                statusIndicator.className = 'status-indicator status-connected';
                statusText.textContent = 'Connected';
            } else {
                statusIndicator.className = 'status-indicator status-disconnected';
                statusText.textContent = 'Disconnected';
            }
        }
    }

    // === Drawing Functions (Local Rendering + Sending) ===

    // Función central para dibujar una línea (local y remoto)
    function drawLineAndSendCommand(x1, y1, x2, y2, color, thickness) {
        if (!canvas) {
            console.error('Canvas element not found.');
            return;
        }

        // Dibuja localmente en tu lienzo
        ctx.strokeStyle = color;
        ctx.lineWidth = thickness;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // Envía el comando al servidor vía WebSocket
        if (socket && socket.readyState === WebSocket.OPEN) {
            const normX1 = (x1 / canvas.width).toFixed(4);
            const normY1 = (y1 / canvas.height).toFixed(4);
            const normX2 = (x2 / canvas.width).toFixed(4);
            const normY2 = (y2 / canvas.height).toFixed(4);

            const command = `42["drawcmd",0,[${normX1},${normY1},${normX2},${normY2},false,${0 - thickness},"${color}",0,0,{}]]`;
            socket.send(command);
        } else {
            console.warn('WebSocket not open. Command not sent to server.');
        }
    }

    // === Autodraw Core Functions (Flags) ===

    // Convierte coordenadas de píxeles a coordenadas normalizadas (0-1) con offset
    function recalc(value, offset) {
        const cw = canvas.width;
        const ch = canvas.height;
        return [
            Math.min(1, Math.max(0, (value[0] / cw + offset.x / 100))).toFixed(4),
            Math.min(1, Math.max(0, (value[1] / ch + offset.y / 100))).toFixed(4)
        ];
    }

    // Carga la imagen en un canvas auxiliar para obtener sus datos de píxeles
    function loadImageForAutodraw(url) {
        let img = new Image();
        img.crossOrigin = 'anonymous'; // Necesario para imágenes de diferentes orígenes
        img.src = url;
        img.addEventListener('load', () => {
            if (!canvas) { // Asegúrate de que el canvas principal existe
                console.error('Main canvas element not found for Autodraw.');
                return;
            }
            const cw = canvas.width;
            const ch = canvas.height;

            previewCanvas.width = cw;
            previewCanvas.height = ch;
            previewCtx.clearRect(0, 0, cw, ch); // Limpia el canvas auxiliar

            // Escala y centra la imagen en el canvas auxiliar
            let scale = Math.min(cw / img.width, ch / img.height); // Usa Math.min para que la imagen quepa completamente
            let scaledWidth = img.width * scale;
            let scaledHeight = img.height * scale;
            let dx = (cw - scaledWidth) / 2;
            let dy = (ch - scaledHeight) / 2;

            previewCtx.drawImage(img, dx, dy, scaledWidth, scaledHeight);
            imgDataGlobal = previewCtx.getImageData(0, 0, cw, ch).data; // Almacena los datos de píxeles
            console.debug('Image loaded and processed for Autodraw.');
        });
        img.addEventListener('error', () => {
            console.error('Failed to load image for Autodraw:', url);
        });
    }

    // Procesa los datos de la imagen para generar la línea de ejecución de dibujo
    function processImageForAutodraw(size, modifier = 1, thickness = 5, offset = { x: 0, y: 0 }, ignoreColors = []) {
        if (!imgDataGlobal || !canvas) {
            console.error('No image data or canvas available for processing.');
            return;
        }
        executionLine = [];
        const cw = canvas.width;
        const ch = canvas.height;
        const step = size * modifier; // Distancia de muestreo entre píxeles

        // Recorre la imagen fila por fila
        for (let y = 0; y < ch; y += step) {
            let startX = 0;
            let currentColor = null;

            for (let x = 0; x < cw; x += 1) { // Recorre píxel por píxel horizontalmente para detectar cambios de color
                const currentPixelX = Math.floor(x / step) * step; // Asegura que se muestree en la cuadrícula
                const currentPixelY = Math.floor(y / step) * step;

                const index = (Math.floor(currentPixelY) * cw + Math.floor(currentPixelX)) * 4;
                const a = imgDataGlobal[index + 3] || 0; // Canal alfa

                if (a > 20) { // Si el píxel no es transparente
                    const r = imgDataGlobal[index + 0] || 0;
                    const g = imgDataGlobal[index + 1] || 0;
                    const b = imgDataGlobal[index + 2] || 0;
                    const color = `rgb(${r},${g},${b})`;

                    if (!ignoreColors.includes(color)) {
                        if (color !== currentColor) { // Si el color cambia
                            if (currentColor !== null && x > startX) { // Si había un segmento de color anterior
                                executionLine.push({
                                    pixelPos1: [startX, y],
                                    pixelPos2: [x, y],
                                    color: currentColor,
                                    thickness: thickness,
                                });
                            }
                            currentColor = color;
                            startX = x;
                        }
                    } else { // Si el color está en la lista de ignorados o es transparente
                        if (currentColor !== null && x > startX) {
                            executionLine.push({
                                pixelPos1: [startX, y],
                                pixelPos2: [x, y],
                                color: currentColor,
                                thickness: thickness,
                            });
                        }
                        currentColor = null;
                    }
                } else { // Si el píxel es transparente
                    if (currentColor !== null && x > startX) {
                        executionLine.push({
                            pixelPos1: [startX, y],
                            pixelPos2: [x, y],
                            color: currentColor,
                            thickness: thickness,
                        });
                    }
                    currentColor = null;
                }
            }
            // Agrega el último segmento de la fila si existe
            if (currentColor !== null && cw > startX) {
                executionLine.push({
                    pixelPos1: [startX, y],
                    pixelPos2: [cw, y], // Hasta el final de la fila
                    color: currentColor,
                    thickness: thickness,
                });
            }
        }
        console.debug('Image processing complete, lines:', executionLine.length);
    }

    // Ejecuta el dibujo de las líneas generadas
    async function executeAutodraw() {
        if (!socket || socket.readyState !== WebSocket.OPEN) {
            alert('WebSocket no está conectado. Asegúrate de estar en una sala de Drawaria.');
            return;
        }
        if (executionLine.length === 0) {
            alert('No se generaron líneas para dibujar. Carga y procesa una imagen primero.');
            return;
        }

        drawing_active = true;
        for (let i = 0; i < executionLine.length; i++) {
            if (!drawing_active) {
                console.log('Autodraw detenido por el usuario.');
                break;
            }
            const line = executionLine[i];
            const p1 = recalc(line.pixelPos1, { x: autodrawOffsetX, y: autodrawOffsetY }); // Normalizadas para enviar
            const p2 = recalc(line.pixelPos2, { x: autodrawOffsetX, y: autodrawOffsetY });
            const color = line.color;
            const thickness = line.thickness;

            // Dibuja localmente y envía el comando
            drawLineAndSendCommand(line.pixelPos1[0], line.pixelPos1[1], line.pixelPos2[0], line.pixelPos2[1], color, thickness);
            await delay(1); // Pequeña pausa para evitar sobrecargar el servidor
        }
        drawing_active = false;
        console.log('Autodraw completo.');
    }


    // === UI Elements CSS ===
    const style = document.createElement('style');
    style.textContent = `
        /* Boxicons - if not already linked by Tampermonkey's @require */
        @import url('https://unpkg.com/[email protected]/css/boxicons.min.css');

        .drawaria-flag-autodraw-tool-container { /* Changed class name */
            position: fixed;
            top: 20px;
            right: 20px;
            width: 320px;
            max-height: 90vh; /* Limita la altura para que no desborde la pantalla */
            background: #2c3e50;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            color: #ecf0f1;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            z-index: 9999;
            overflow: hidden; /* Oculta el scroll si no es necesario */
            display: none; /* Hidden by default, toggled by 'T' button */
            flex-direction: column; /* Para layout interno */
        }

        .drawaria-flag-autodraw-tool-header { /* Changed class name */
            padding: 12px 15px;
            cursor: grab; /* Cursor para arrastrar */
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #2c3e50;
            user-select: none; /* Evita selección de texto al arrastrar */
        }
        .drawaria-flag-autodraw-tool-header.dragging { /* Changed class name */
            cursor: grabbing;
        }

        .drawaria-flag-autodraw-tool-title { /* Changed class name */
            font-weight: 600;
            font-size: 16px;
            color: #ecf0f1;
        }

        .drawaria-flag-autodraw-tool-close { /* Changed class name */
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .drawaria-flag-autodraw-tool-close:hover { /* Changed class name */
            color: #e74c3c;
        }

        .drawaria-flag-autodraw-tool-content { /* Changed class name */
            padding: 15px;
            overflow-y: auto; /* Scroll si el contenido es demasiado largo */
            flex-grow: 1; /* Permite que el contenido se expanda */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            color: #bdc3c7;
        }

        .form-control {
            width: calc(100% - 24px); /* Ancho total menos padding */
            padding: 8px 12px;
            border: 1px solid #2c3e50;
            border-radius: 4px;
            font-size: 13px;
            transition: border-color 0.2s;
        }

        .form-control:focus {
            outline: none;
            border-color: #3498db;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .btn-primary {
            background: #3498db;
            color: white;
            border: none;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
            border: none;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid #3498db;
            color: #3498db;
        }

        .btn-outline:hover {
            background: rgba(52, 152, 219, 0.1);
        }

        .btn-block {
            width: 100%;
        }

        .btn-group {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
        }

        .btn-group .btn {
            flex: 1;
        }

        .select-control {
            position: relative;
        }

        .select-control:after {
            content: "▼";
            font-size: 10px;
            color: #bdc3c7;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

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

        .slider-container label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            color: #bdc3c7;
        }

        .slider-value {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 12px;
            color: #7f8c8d;
        }

        input[type="range"] {
            width: 100%;
            height: 6px;
            -webkit-appearance: none;
            border-radius: 3px;
            margin: 5px 0;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            background: #3498db;
            border-radius: 50%;
            cursor: pointer;
        }

        .section-title {
            font-size: 14px;
            color: #3498db;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #2c3e50;
            font-weight: bold;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            vertical-align: middle;
        }

        .status-connected {
            background-color: #2ecc71;
        }

        .status-disconnected {
            background-color: #e74c3c;
        }

        /* Styles for the main toggle button */
        #drawariaFlagToolToggleButton { /* Changed ID */
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 1001; /* Higher z-index to be above the main panel */
            background-color: #4CAF50; /* Green color to make it stand out */
            color: white;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            width: 45px; /* Increased size */
            height: 45px; /* Increased size */
            border-radius: 50%; /* Make it round */
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: background-color 0.2s, transform 0.2s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #drawariaFlagToolToggleButton:hover { /* Changed ID */
            background-color: #45a049;
            transform: scale(1.05);
        }
    `;
    document.head.appendChild(style);


    // === UI Elements HTML Structure ===
    const mainContainer = document.createElement('div');
    mainContainer.className = 'drawaria-flag-autodraw-tool-container'; // Changed class name
    mainContainer.innerHTML = `
        <div class="drawaria-flag-autodraw-tool-header">
            <div class="drawaria-flag-autodraw-tool-title">Drawaria Flag Autodraw Tool</div>
            <button class="drawaria-flag-autodraw-tool-close">×</button>
        </div>
        <div class="drawaria-flag-autodraw-tool-content">
            <div class="section-title">Connection Status</div>
            <div style="margin-bottom: 15px;">
                <span id="connectionStatus" class="status-indicator status-disconnected"></span>
                <span id="statusText">Disconnected</span>
            </div>

            <div class="section-title">Flag Drawing</div>
            <div class="form-group">
                <label for="flagSelect">Select Flag to Draw</label>
                <div class="select-control">
                    <select id="flagSelect" class="form-control">
                        <option value="">Select a Flag</option>
                        ${Object.keys(flags).map(flag => `<option value="${flag}">${flag}</option>`).join('')}
                    </select>
                </div>
            </div>

            <div class="slider-container">
                <label for="autodraw_imagesize">Image Size</label>
                <div class="slider-value">
                    <span>Big</span>
                    <span id="autodrawImagesizeValue">4</span>
                    <span>Small</span>
                </div>
                <input type="range" id="autodraw_imagesize" min="1" max="10" value="4">
            </div>

            <div class="slider-container">
                <label for="autodraw_brushsize">Brush Size</label>
                <div class="slider-value">
                    <span>Thin</span>
                    <span id="autodrawBrushsizeValue">13</span>
                    <span>Thick</span>
                </div>
                <input type="range" id="autodraw_brushsize" min="2" max="20" value="13">
            </div>

            <div class="slider-container">
                <label for="autodraw_pixelsize">Pixel Distance</label>
                <div class="slider-value">
                    <span>Close</span>
                    <span id="autodrawPixelsizeValue">2</span>
                    <span>Far</span>
                </div>
                <input type="range" id="autodraw_pixelsize" min="2" max="20" value="2">
            </div>

            <div class="slider-container">
                <label for="autodraw_offset_x">Horizontal Offset (%)</label>
                <div class="slider-value">
                    <span>0</span>
                    <span id="autodrawOffsetXValue">0</span>
                    <span>100</span>
                </div>
                <input type="range" id="autodraw_offset_x" min="0" max="100" value="0">
            </div>

            <div class="slider-container">
                <label for="autodraw_offset_y">Vertical Offset (%)</label>
                <div class="slider-value">
                    <span>0</span>
                    <span id="autodrawOffsetYValue">0</span>
                    <span>100</span>
                </div>
                <input type="range" id="autodraw_offset_y" min="0" max="100" value="0">
            </div>

            <div class="btn-group">
                <button id="startAutodrawButton" class="btn btn-primary"><i class='bx bx-play-circle'></i> Start Autodraw</button>
                <button id="stopAutodrawButton" class="btn btn-danger"><i class='bx bx-stop-circle'></i> Stop Autodraw</button>
            </div>

            <div class="btn-group">
                <button id="clearCanvasButton" class="btn btn-outline"><i class='bx bxs-eraser'></i> Clear All</button>
            </div>
        </div>
    `;
    document.body.appendChild(mainContainer);

    const toggleButton = document.createElement('button');
    toggleButton.id = 'drawariaFlagToolToggleButton'; // Changed ID
    toggleButton.innerText = 'T';
    document.body.appendChild(toggleButton);


    // === UI Elements References ===
    // Autodraw (Flags)
    const flagSelect = document.getElementById('flagSelect');
    // Removed imageFileInput as it's no longer needed
    const autodrawImageSizeInput = document.getElementById('autodraw_imagesize');
    const autodrawBrushSizeInput = document.getElementById('autodraw_brushsize');
    const autodrawPixelSizeInput = document.getElementById('autodraw_pixelsize');
    const autodrawOffsetXInput = document.getElementById('autodraw_offset_x');
    const autodrawOffsetYInput = document.getElementById('autodraw_offset_y');
    const startAutodrawButton = document.getElementById('startAutodrawButton');
    const stopAutodrawButton = document.getElementById('stopAutodrawButton');
    const clearCanvasButton = document.getElementById('clearCanvasButton');


    // === Event Handlers ===

    // Make the main container draggable
    let isDragging = false;
    let offsetX, offsetY;
    const header = mainContainer.querySelector('.drawaria-flag-autodraw-tool-header'); // Changed class name

    header.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - mainContainer.getBoundingClientRect().left;
        offsetY = e.clientY - mainContainer.getBoundingClientRect().top;
        mainContainer.classList.add('dragging');
        e.preventDefault(); // Prevent text selection
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        mainContainer.style.left = `${e.clientX - offsetX}px`;
        mainContainer.style.top = `${e.clientY - offsetY}px`;
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        mainContainer.classList.remove('dragging');
    });

    // Close button for the main container
    mainContainer.querySelector('.drawaria-flag-autodraw-tool-close').addEventListener('click', () => { // Changed class name
        mainContainer.style.display = 'none';
        // Reset toggle button color
        toggleButton.style.backgroundColor = '#4CAF50';
        toggleButton.style.color = 'white';
        toggleButton.style.transform = 'scale(1)';
    });


    // Update slider values display
    const updateSliderValueDisplay = (sliderInput, valueSpan) => {
        valueSpan.textContent = sliderInput.value;
        sliderInput.addEventListener('input', () => {
            valueSpan.textContent = sliderInput.value;
        });
    };
    updateSliderValueDisplay(autodrawImageSizeInput, document.getElementById('autodrawImagesizeValue'));
    updateSliderValueDisplay(autodrawBrushSizeInput, document.getElementById('autodrawBrushsizeValue'));
    updateSliderValueDisplay(autodrawPixelSizeInput, document.getElementById('autodrawPixelsizeValue'));
    updateSliderValueDisplay(autodrawOffsetXInput, document.getElementById('autodrawOffsetXValue'));
    updateSliderValueDisplay(autodrawOffsetYInput, document.getElementById('autodrawOffsetYValue'));


    // Autodraw Event Listeners
    flagSelect.addEventListener('change', (e) => {
        const selectedFlagName = e.target.value;
        if (selectedFlagName && flags[selectedFlagName]) {
            // No need to clear imageFileInput as it doesn't exist anymore
            loadImageForAutodraw(flags[selectedFlagName]);
        } else if (!selectedFlagName) {
            imgDataGlobal = null; // Clear image data if no flag is selected
            console.debug('No flag selected, image data cleared.');
        }
    });

    // Removed imageFileInput.addEventListener('change', ...) as it's no longer needed

    startAutodrawButton.addEventListener('click', () => {
        if (!socket || socket.readyState !== WebSocket.OPEN) {
            alert('WebSocket no está conectado. Asegúrate de estar en una sala de Drawaria.');
            return;
        }
        if (!imgDataGlobal) {
            alert('Por favor, selecciona una bandera primero para el autodraw.');
            return;
        }

        autodrawImageSize = parseInt(autodrawImageSizeInput.value, 10);
        autodrawBrushSize = parseInt(autodrawBrushSizeInput.value, 10);
        autodrawPixelSize = parseInt(autodrawPixelSizeInput.value, 10);
        autodrawOffsetX = parseInt(autodrawOffsetXInput.value, 10);
        autodrawOffsetY = parseInt(autodrawOffsetYInput.value, 10);

        processImageForAutodraw(autodrawImageSize, autodrawPixelSize, autodrawBrushSize, { x: autodrawOffsetX, y: autodrawOffsetY });
        executeAutodraw();
    });

    stopAutodrawButton.addEventListener('click', () => {
        drawing_active = false;
        console.log('Autodraw stopped by user.');
    });

    clearCanvasButton.addEventListener('click', async () => {
        if (!socket || socket.readyState !== WebSocket.OPEN) {
            alert('WebSocket no está conectado. No se puede borrar el lienzo.');
            return;
        }

        // Borrar lienzo local inmediatamente
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Enviar múltiples comandos de borrado al servidor
        const clearThickness = 1000;
        const clearColor = '#ffffff'; // Blanco para borrar
        const steps = 5; // Número de líneas para cubrir el lienzo

        for (let i = 0; i <= steps; i++) {
            // Líneas horizontales
            drawLineAndSendCommand(0, (i / steps) * canvas.height, canvas.width, (i / steps) * canvas.height, clearColor, clearThickness);
            await delay(5);
            // Líneas verticales
            drawLineAndSendCommand((i / steps) * canvas.width, 0, (i / steps) * canvas.width, canvas.height, clearColor, clearThickness);
            await delay(5);
        }
    });


    // Toggle Button Logic (activar/desactivar el menú principal)
    toggleButton.addEventListener('click', () => {
        const isHidden = mainContainer.style.display === 'none' || mainContainer.style.display === '';
        mainContainer.style.display = isHidden ? 'flex' : 'none'; // 'flex' para mantener el layout interno

        if (isHidden) {
            toggleButton.style.backgroundColor = '#949494'; // Color gris cuando está abierto
            toggleButton.style.color = 'white';
            toggleButton.style.transform = 'scale(1)'; // Quita el efecto de hover
        } else {
            toggleButton.style.backgroundColor = '#4CAF50'; // Vuelve al color original cuando está cerrado
            toggleButton.style.color = 'white';
        }
    });

    // Initial check for connection status
    if (socket && socket.readyState === WebSocket.OPEN) {
        updateConnectionStatus('connected');
    } else {
        updateConnectionStatus('disconnected');
    }

})();