☰

Drawaria Layer Animation System

Adds a layer-based animation system to Drawaria, create and manage multiple drawing layers with PokeAPI integration

// ==UserScript==
// @name         Drawaria Layer Animation System
// @namespace    http://tampermonkey.net/
// @version      3.6
// @description  Adds a layer-based animation system to Drawaria, create and manage multiple drawing layers with PokeAPI integration
// @author       YouTubeDrawaria
// @match        *://drawaria.online/*
// @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';

    class RealLayerAnimationSystem {
        constructor() {
            this.layers = [{ commands: [], visible: true, name: 'Layer 1' }];
            this.currentLayer = 0;
            this.isDrawing = false;
            this.lastX = 0;
            this.lastY = 0;
            this.isAnimating = false;
            this.animationSpeed = 50;

            this.isLoopEnabled = false;

            // Nueva variable para controlar la calidad de importación
            this.highQualityImport = false;
            this.pixelProcessingStep = 2;
            this.targetImageResolution = 100;

            this.gameCanvas = null;
            this.gameCtx = null;
            this.previewCanvas = null;
            this.previewCtx = null;

            this.gameSocket = null;
            this.onionOpacity = 0.3;
            this.menuVisible = false;

            this.init();
        }

        init() {
            this.captureGameWebSocket();
            this.waitForGameCanvas();
            this.createCompactInterface();
            this.setupEventListeners();
        }

        // ... [mantengo todos los métodos existentes sin cambios hasta setupEventListeners]

        captureGameWebSocket() {
            const originalSend = WebSocket.prototype.send;
            WebSocket.prototype.send = function (...args) {
                if (!this.url || !this.url.includes('drawaria')) {
                    return originalSend.apply(this, args);
                }

                if (!window.layerAnimationSocket) {
                    window.layerAnimationSocket = this;
                    console.log('✅ WebSocket capturado para Layer Animation');
                }

                return originalSend.apply(this, args);
            };

            const checkExisting = () => {
                if (window.layerAnimationSocket && window.layerAnimationSocket.readyState === 1) {
                    this.gameSocket = window.layerAnimationSocket;
                    this.updateSocketStatus();
                    return;
                }
                setTimeout(checkExisting, 1000);
            };
            checkExisting();
        }

        sendRealDrawCommand(x1, y1, x2, y2, color, thickness) {
            if (!this.gameSocket || this.gameSocket.readyState !== 1) return false;

            const normX1 = (x1 / this.gameCanvas.width).toFixed(4);
            const normY1 = (y1 / this.gameCanvas.height).toFixed(4);
            const normX2 = (x2 / this.gameCanvas.width).toFixed(4);
            const normY2 = (y2 / this.gameCanvas.height).toFixed(4);

            const command = `42["drawcmd",0,[${normX1},${normY1},${normX2},${normY2},false,${0 - thickness},"${color}",0,0,{}]]`;

            try {
                this.gameSocket.send(command);
                return true;
            } catch (error) {
                console.error('Error enviando comando:', error);
                return false;
            }
        }

        waitForGameCanvas() {
            const checkCanvas = () => {
                this.gameCanvas = document.getElementById('canvas');
                if (this.gameCanvas) {
                    this.gameCtx = this.gameCanvas.getContext('2d');
                    this.setupPreviewCanvas();
                } else {
                    setTimeout(checkCanvas, 100);
                }
            };
            checkCanvas();
        }

        setupPreviewCanvas() {
            this.previewCanvas = document.createElement('canvas');
            this.previewCtx = this.previewCanvas.getContext('2d');
            this.previewCanvas.width = 220;
            this.previewCanvas.height = 160;
            this.previewCanvas.id = 'layerPreviewCanvas';

            this.previewCtx.lineCap = 'round';
            this.previewCtx.lineJoin = 'round';
        }

        createCompactInterface() {
            const html = `
                <!-- Toggle Button -->
                <div id="layerToggleBtn" class="layer-toggle">🎬</div>

                <!-- Compact Panel -->
                <div id="layerCompactPanel" class="layer-compact-panel">
                    <div class="compact-header">
                        Layer Animator <span id="socketIndicator">⚫</span>
                    </div>

                    <div class="compact-canvas">
                        <div id="previewContainer"></div>
                    </div>

                    <div class="compact-controls">
                        <div class="layer-nav-compact">
                            <button id="prevLayer">◀</button>
                            <span id="layerInfo">1/1</span>
                            <button id="nextLayer">▶</button>
                        </div>

                        <div class="layer-actions-compact">
                            <button id="addLayer" title="Add Layer">➕</button>
                            <button id="removeLayer" title="Remove Layer">➖</button>
                            <button id="clearLayer" title="Clear Layer">🗑️</button>
                            <button id="duplicateLayer" title="Duplicate Layer">📋</button>
                            <button id="toggleLoopBtn" title="Toggle Loop Animation">🔄</button>
                            <button id="toggleQualityBtn" title="Toggle High Quality Image Import">⭐</button>
                            <button id="importImageBtn" title="Import Image(s)">🏞️</button>
                            <button id="loadPokemonBtn" title="Load Random Pokemon Pixel Art">🎮</button>
                            <input type="file" id="imageFileInput" multiple accept="image/*" style="display: none;">
                        </div>
                    </div>

                    <div class="onion-compact">
                        <label><input type="checkbox" id="onionToggle" checked> Onion</label>
                        <input type="range" id="onionRange" min="10" max="100" value="30">
                    </div>

                    <div class="animation-compact">
                        <button id="playBtn" class="play-btn-compact">▶️ PLAY</button>
                        <button id="stopBtn" class="stop-btn-compact" disabled>⏹️ STOP</button>

                        <div class="speed-compact">
                            <label class="speed-label">Speed: <span id="speedValue">18</span>ms</label>
                            <input type="range" id="speedRange" min="3" max="500" value="18" class="speed-slider">
                        </div>
                    </div>

                    <div class="layer-list-compact" id="layerListCompact"></div>
                </div>
            `;

            document.body.insertAdjacentHTML('beforeend', html);

            const container = document.getElementById('previewContainer');
            if (container && this.previewCanvas) {
                container.appendChild(this.previewCanvas);
            }

            this.addCompactStyles();
            this.updateLayerList();
            this.updateOnionSkin();
            this.updateSocketStatus();
            this.updateLoopButtonState();
            this.updateQualityButtonState();
        }

        addCompactStyles() {
            const css = `
                .layer-toggle {
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    width: 40px;
                    height: 40px;
                    background: linear-gradient(45deg, #4CAF50, #45a049);
                    color: white;
                    border: none;
                    border-radius: 50%;
                    cursor: pointer;
                    z-index: 10000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                    transition: all 0.3s ease;
                }

                .layer-toggle:hover {
                    transform: scale(1.1);
                }

                .layer-compact-panel {
                    position: fixed;
                    top: 60px;
                    right: 10px;
                    width: 260px;
                    background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
                    border: 2px solid #4CAF50;
                    border-radius: 10px;
                    padding: 12px;
                    z-index: 9999;
                    font-family: 'Arial', sans-serif;
                    color: #fff;
                    font-size: 12px;
                    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
                    display: none;
                }

                .compact-header {
                    text-align: center;
                    font-weight: bold;
                    margin-bottom: 10px;
                    color: #4CAF50;
                    border-bottom: 1px solid #444;
                    padding-bottom: 5px;
                }

                .compact-canvas {
                    margin-bottom: 10px;
                }

                #layerPreviewCanvas {
                    width: 100%;
                    height: 120px;
                    border: 2px solid #555;
                    border-radius: 5px;
                    background: white;
                    cursor: crosshair;
                    display: block;
                }

                .compact-controls {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    margin-bottom: 10px;
                }

                .layer-nav-compact {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 12px;
                }

                .layer-nav-compact button {
                    background: #4CAF50;
                    border: none;
                    color: white;
                    padding: 6px 10px;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 12px;
                    transition: background 0.3s;
                }

                .layer-nav-compact button:hover:not(:disabled) {
                    background: #45a049;
                }

                .layer-nav-compact button:disabled {
                    background: #666;
                    cursor: not-allowed;
                }

                #layerInfo {
                    background: #333;
                    padding: 6px 12px;
                    border-radius: 4px;
                    min-width: 50px;
                    text-align: center;
                    font-size: 11px;
                    font-weight: bold;
                }

                .layer-actions-compact {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 6px;
                }

                .layer-actions-compact button {
                    background: #555;
                    border: none;
                    color: white;
                    padding: 6px 8px;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 12px;
                    transition: all 0.2s;
                    min-width: 30px;
                    text-align: center;
                }

                .layer-actions-compact button:hover:not(:disabled) {
                    background: #777;
                    transform: scale(1.05);
                }

                .layer-actions-compact button:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }

                #toggleLoopBtn.active, #toggleQualityBtn.active {
                    background: linear-gradient(45deg, #FFD700, #DAA520);
                    color: #333;
                }

                #loadPokemonBtn {
                    background: linear-gradient(45deg, #FF6B35, #F7931E);
                    color: white;
                    animation: pokemonGlow 2s infinite alternate;
                }

                #loadPokemonBtn:hover:not(:disabled) {
                    background: linear-gradient(45deg, #F7931E, #FF6B35);
                    transform: scale(1.1);
                }

                @keyframes pokemonGlow {
                    0% { box-shadow: 0 0 5px rgba(255,107,53,0.5); }
                    100% { box-shadow: 0 0 15px rgba(255,107,53,0.8); }
                }

                .onion-compact {
                    background: #333;
                    padding: 8px;
                    border-radius: 5px;
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .onion-compact label {
                    font-size: 11px;
                }

                .onion-compact input[type="range"] {
                    width: 70px;
                }

                .animation-compact {
                    margin-bottom: 10px;
                }

                .play-btn-compact, .stop-btn-compact {
                    width: 100%;
                    padding: 10px;
                    margin-bottom: 8px;
                    border: none;
                    border-radius: 6px;
                    font-size: 12px;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.3s;
                }

                .play-btn-compact {
                    background: linear-gradient(45deg, #4CAF50, #45a049);
                    color: white;
                }

                .stop-btn-compact {
                    background: linear-gradient(45deg, #f44336, #da190b);
                    color: white;
                }

                .play-btn-compact:hover:not(:disabled) {
                    transform: scale(1.02);
                }

                .stop-btn-compact:hover:not(:disabled) {
                    transform: scale(1.02);
                }

                .play-btn-compact:disabled, .stop-btn-compact:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                    transform: none;
                }

                .speed-compact {
                    background: #444;
                    padding: 8px;
                    border-radius: 5px;
                    text-align: center;
                }

                .speed-label {
                    display: block;
                    font-size: 11px;
                    margin-bottom: 5px;
                    color: #ccc;
                }

                .speed-slider {
                    width: 100%;
                    height: 4px;
                    background: #666;
                    outline: none;
                    border-radius: 2px;
                    cursor: pointer;
                }

                .speed-slider::-webkit-slider-thumb {
                    appearance: none;
                    width: 14px;
                    height: 14px;
                    background: #4CAF50;
                    border-radius: 50%;
                    cursor: pointer;
                }

                .speed-slider::-moz-range-thumb {
                    width: 14px;
                    height: 14px;
                    background: #4CAF50;
                    border-radius: 50%;
                    cursor: pointer;
                    border: none;
                }

                #speedValue {
                    font-weight: bold;
                    color: #4CAF50;
                }

                .layer-list-compact {
                    max-height: 120px;
                    overflow-y: auto;
                    background: #2a2a2a;
                    border-radius: 5px;
                    padding: 4px;
                }

                .layer-item-compact {
                    padding: 5px 8px;
                    border-bottom: 1px solid #444;
                    cursor: pointer;
                    font-size: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 3px;
                    transition: background 0.2s;
                }

                .layer-item-compact:hover {
                    background: #3a3a3a;
                }

                .layer-item-compact.active {
                    background: #4CAF50;
                    color: white;
                    font-weight: bold;
                }

                .layer-item-compact.has-content {
                    border-left: 3px solid #4CAF50;
                }

                .layer-visibility-compact {
                    cursor: pointer;
                    padding: 2px 4px;
                    border-radius: 2px;
                    background: #555;
                    font-size: 10px;
                }

                #socketIndicator.connected {
                    color: #4CAF50;
                }

                #socketIndicator.disconnected {
                    color: #f44336;
                }

                .layer-list-compact::-webkit-scrollbar {
                    width: 5px;
                }

                .layer-list-compact::-webkit-scrollbar-track {
                    background: #1a1a1a;
                    border-radius: 2px;
                }

                .layer-list-compact::-webkit-scrollbar-thumb {
                    background: #555;
                    border-radius: 2px;
                }

                .layer-list-compact::-webkit-scrollbar-thumb:hover {
                    background: #777;
                }

                .pokemon-loading {
                    animation: pokemonSpin 1s linear infinite;
                }

                @keyframes pokemonSpin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;

            const style = document.createElement('style');
            style.textContent = css;
            document.head.appendChild(style);
        }

        setupEventListeners() {
            document.getElementById('layerToggleBtn').addEventListener('click', () => this.togglePanel());

            this.setupCanvasDrawing();

            document.getElementById('prevLayer').addEventListener('click', () => this.previousLayer());
            document.getElementById('nextLayer').addEventListener('click', () => this.nextLayer());

            document.getElementById('addLayer').addEventListener('click', () => this.addLayer());
            document.getElementById('removeLayer').addEventListener('click', () => this.removeLayer());
            document.getElementById('clearLayer').addEventListener('click', () => this.clearCurrentLayer());
            document.getElementById('duplicateLayer').addEventListener('click', () => this.duplicateCurrentLayer());

            document.getElementById('toggleLoopBtn').addEventListener('click', () => this.toggleLoop());
            document.getElementById('importImageBtn').addEventListener('click', () => this.importImages());
            document.getElementById('imageFileInput').addEventListener('change', (e) => this.handleImageFiles(e.target.files));
            document.getElementById('toggleQualityBtn').addEventListener('click', () => this.toggleQuality());

            // Nuevo evento para el botón de Pokémon
            document.getElementById('loadPokemonBtn').addEventListener('click', () => this.loadRandomPokemon());

            document.getElementById('onionToggle').addEventListener('change', () => this.updateOnionSkin());
            document.getElementById('onionRange').addEventListener('input', (e) => {
                this.onionOpacity = e.target.value / 100;
                this.updateOnionSkin();
            });

            document.getElementById('playBtn').addEventListener('click', () => this.playRealAnimation());
            document.getElementById('stopBtn').addEventListener('click', () => this.stopAnimation());

            document.getElementById('speedRange').addEventListener('input', (e) => {
                this.animationSpeed = parseInt(e.target.value);
                document.getElementById('speedValue').textContent = this.animationSpeed;
            });
        }

        // Nueva función para cargar Pokémon aleatorio usando PokeAPI
        async loadRandomPokemon() {
            const pokemonBtn = document.getElementById('loadPokemonBtn');

            if (this.isAnimating) {
                console.log('No se puede cargar Pokémon durante la animación.');
                return;
            }

            // Animación de loading
            pokemonBtn.classList.add('pokemon-loading');
            pokemonBtn.disabled = true;

            try {
                // Generar ID aleatorio entre 1 y 1010 (cantidad aproximada de Pokémon en PokeAPI)
                const randomId = Math.floor(Math.random() * 1010) + 1;
                const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomId}`);

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const pokemonData = await response.json();
                const spriteUrl = pokemonData.sprites.front_default;

                if (!spriteUrl) {
                    throw new Error('No sprite disponible para este Pokémon');
                }

                console.log(`🎮 Cargando ${pokemonData.name.toUpperCase()} (ID: ${pokemonData.id})`);

                // Crear nueva imagen y procesarla
                const img = new Image();
                img.crossOrigin = 'anonymous';

                img.onload = async () => {
                    try {
                        const newCommands = await this.processImageToCommands(img);
                        if (newCommands.length > 0) {
                            // Crear nueva capa para el Pokémon
                            this.addLayer();
                            this.layers[this.currentLayer].name = `🎮 ${pokemonData.name.charAt(0).toUpperCase() + pokemonData.name.slice(1)}`;
                            this.layers[this.currentLayer].commands = newCommands;

                            console.log(`✅ ${pokemonData.name.toUpperCase()} importado exitosamente a la Capa ${this.currentLayer + 1}. Comandos: ${newCommands.length}`);
                            this.updateUI();
                        } else {
                            console.warn(`❌ No se pudieron generar comandos para ${pokemonData.name}`);
                        }
                    } catch (error) {
                        console.error('Error al procesar el sprite del Pokémon:', error);
                    } finally {
                        // Restaurar estado del botón
                        pokemonBtn.classList.remove('pokemon-loading');
                        pokemonBtn.disabled = false;
                    }
                };

                img.onerror = () => {
                    console.error(`❌ No se pudo cargar el sprite de ${pokemonData.name}`);
                    pokemonBtn.classList.remove('pokemon-loading');
                    pokemonBtn.disabled = false;
                };

                img.src = spriteUrl;

            } catch (error) {
                console.error('Error al cargar Pokémon desde PokeAPI:', error);
                pokemonBtn.classList.remove('pokemon-loading');
                pokemonBtn.disabled = false;
            }
        }

        // ... [resto de los métodos permanecen igual]

        togglePanel() {
            const panel = document.getElementById('layerCompactPanel');
            this.menuVisible = !this.menuVisible;
            panel.style.display = this.menuVisible ? 'block' : 'none';
        }

        setupCanvasDrawing() {
            if (!this.previewCanvas) return;

            this.previewCanvas.addEventListener('mousedown', (e) => this.startDrawing(e));
            this.previewCanvas.addEventListener('mousemove', (e) => this.draw(e));
            this.previewCanvas.addEventListener('mouseup', () => this.stopDrawing());
            this.previewCanvas.addEventListener('mouseout', () => this.stopDrawing());
        }

        getMousePos(e) {
            const rect = this.previewCanvas.getBoundingClientRect();
            const scaleX = this.previewCanvas.width / rect.width;
            const scaleY = this.previewCanvas.height / rect.height;

            return {
                x: (e.clientX - rect.left) * scaleX,
                y: (e.clientY - rect.top) * scaleY
            };
        }

        startDrawing(e) {
            this.isDrawing = true;
            const pos = this.getMousePos(e);
            this.lastX = pos.x;
            this.lastY = pos.y;
        }

        draw(e) {
            if (!this.isDrawing) return;

            const pos = this.getMousePos(e);
            const command = {
                type: 'line',
                x1: this.lastX,
                y1: this.lastY,
                x2: pos.x,
                y2: pos.y,
                color: this.getCurrentColor(),
                thickness: this.getCurrentThickness()
            };

            this.layers[this.currentLayer].commands.push(command);
            this.drawCommand(this.previewCtx, command);

            this.lastX = pos.x;
            this.lastY = pos.y;
            this.updateLayerList();
        }

        stopDrawing() {
            this.isDrawing = false;
        }

        getCurrentColor() {
            const colorPicker = document.querySelector('input[type="color"]');
            return colorPicker ? colorPicker.value : '#000000';
        }

        getCurrentThickness() {
            const thicknessPicker = document.querySelector('input[type="range"]');
            return thicknessPicker ? parseInt(thicknessPicker.value) : 5;
        }

        drawCommand(ctx, command) {
            if (command.type === 'line') {
                ctx.strokeStyle = command.color;
                ctx.lineWidth = command.thickness;
                ctx.lineCap = 'round';
                ctx.beginPath();
                ctx.moveTo(command.x1, command.y1);
                ctx.lineTo(command.x2, command.y2);
                ctx.stroke();
            }
        }

        async playRealAnimation() {
            if (!this.gameCanvas || !this.gameSocket || this.isAnimating) {
                console.log('Canvas o WebSocket no disponible o animación ya en curso.');
                return;
            }

            this.isAnimating = true;
            document.getElementById('playBtn').disabled = true;
            document.getElementById('stopBtn').disabled = false;
            this.disableLayerControls(true);

            do {
                await this.clearRealCanvas();
                await this.delay(300);

                for (let layerIndex = 0; layerIndex < this.layers.length && this.isAnimating; layerIndex++) {
                    const layer = this.layers[layerIndex];
                    if (!layer.visible || layer.commands.length === 0) continue;

                    if (layerIndex > 0) {
                        await this.clearRealCanvas();
                        await this.delay(200);
                    }

                    for (let i = 0; i < layer.commands.length && this.isAnimating; i++) {
                        const command = layer.commands[i];
                        await this.executeRealCommand(command);
                        await this.delay(this.animationSpeed);
                    }

                    if (this.isAnimating && layerIndex < this.layers.length - 1) {
                        await this.delay(300);
                    }
                }

                if (this.isAnimating && this.isLoopEnabled) {
                    await this.delay(500);
                }

            } while (this.isAnimating && this.isLoopEnabled);

            this.stopAnimation();
        }

        async executeRealCommand(command) {
            if (!this.gameCanvas || !this.gameSocket) return;

            const scaleX = this.gameCanvas.width / this.previewCanvas.width;
            const scaleY = this.gameCanvas.height / this.previewCanvas.height;

            const gameX1 = command.x1 * scaleX;
            const gameY1 = command.y1 * scaleY;
            const gameX2 = command.x2 * scaleX;
            const gameY2 = command.y2 * scaleY;

            this.gameCtx.strokeStyle = command.color;
            this.gameCtx.lineWidth = command.thickness + 5;
            this.gameCtx.lineCap = 'round';
            this.gameCtx.beginPath();
            this.gameCtx.moveTo(gameX1, gameY1);
            this.gameCtx.lineTo(gameX2, gameY2);
            this.gameCtx.stroke();

            const success = this.sendRealDrawCommand(
                gameX1, gameY1, gameX2, gameY2,
                command.color, command.thickness
            );

            if (!success) {
                console.log('Error enviando comando real');
            }
        }

        async clearRealCanvas() {
            if (!this.gameSocket || !this.gameCtx || !this.gameCanvas) return;

            this.gameCtx.clearRect(0, 0, this.gameCanvas.width, this.gameCanvas.height);

            try {
                const clearThickness = Math.max(this.gameCanvas.width, this.gameCanvas.height) * 0.8;
                const clearColor = '#ffffff';

                const steps = 3;
                for (let i = 0; i < steps; i++) {
                    const y = (i / (steps - 1)) * this.gameCanvas.height;
                    const success = this.sendRealDrawCommand(
                        0, y,
                        this.gameCanvas.width, y,
                        clearColor, clearThickness
                    );

                    if (success) {
                        await this.delay(10);
                    }
                }
            } catch (error) {
                console.error('Error limpiando canvas real:', error);
            }
        }

        updateSocketStatus() {
            const indicator = document.getElementById('socketIndicator');
            if (!indicator) return;

            if (this.gameSocket && this.gameSocket.readyState === 1) {
                indicator.textContent = '🟢';
                indicator.className = 'connected';
            } else {
                indicator.textContent = '🔴';
                indicator.className = 'disconnected';
            }

            setTimeout(() => this.updateSocketStatus(), 3000);
        }

        stopAnimation() {
            this.isAnimating = false;
            document.getElementById('playBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
            this.disableLayerControls(false);
        }

        disableLayerControls(disable) {
            document.getElementById('prevLayer').disabled = disable;
            document.getElementById('nextLayer').disabled = disable;
            document.getElementById('addLayer').disabled = disable;
            document.getElementById('removeLayer').disabled = disable;
            document.getElementById('clearLayer').disabled = disable;
            document.getElementById('duplicateLayer').disabled = disable;
            document.getElementById('toggleLoopBtn').disabled = disable;
            document.getElementById('importImageBtn').disabled = disable;
            document.getElementById('toggleQualityBtn').disabled = disable;
            document.getElementById('loadPokemonBtn').disabled = disable; // Nuevo control
            document.getElementById('onionToggle').disabled = disable;
            document.getElementById('onionRange').disabled = disable;
            document.getElementById('speedRange').disabled = disable;
        }

        addLayer() {
            this.layers.push({ commands: [], visible: true, name: `Layer ${this.layers.length + 1}` });
            this.currentLayer = this.layers.length - 1;
            this.updateUI();
            console.log(`Capa ${this.currentLayer + 1} agregada.`);
        }

        removeLayer() {
            if (this.layers.length <= 1) {
                console.log('No se puede eliminar la última capa.');
                return;
            }
            if (this.currentLayer === this.layers.length - 1) {
                this.currentLayer = Math.max(0, this.currentLayer - 1);
            }
            this.layers.splice(this.currentLayer, 1);
            this.updateUI();
            console.log(`Capa eliminada. Capas restantes: ${this.layers.length}`);
        }

        previousLayer() {
            if (this.currentLayer > 0) {
                this.currentLayer--;
                this.updateUI();
            }
        }

        nextLayer() {
            if (this.currentLayer < this.layers.length - 1) {
                this.currentLayer++;
                this.updateUI();
            }
        }

        clearCurrentLayer() {
            this.layers[this.currentLayer].commands = [];
            this.updateOnionSkin();
            this.updateLayerList();
            console.log(`Capa ${this.currentLayer + 1} limpiada.`);
        }

        duplicateCurrentLayer() {
            const duplicated = {
                commands: [...this.layers[this.currentLayer].commands],
                visible: true,
                name: `${this.layers[this.currentLayer].name} Copy`
            };
            this.layers.push(duplicated);
            this.currentLayer = this.layers.length - 1;
            this.updateUI();
            console.log(`Capa ${this.currentLayer + 1} duplicada.`);
        }

        toggleLoop() {
            this.isLoopEnabled = !this.isLoopEnabled;
            this.updateLoopButtonState();
            console.log(`Modo de bucle: ${this.isLoopEnabled ? 'ACTIVADO' : 'DESACTIVADO'}`);
        }

        updateLoopButtonState() {
            const loopBtn = document.getElementById('toggleLoopBtn');
            if (loopBtn) {
                if (this.isLoopEnabled) {
                    loopBtn.classList.add('active');
                } else {
                    loopBtn.classList.remove('active');
                }
            }
        }

        toggleQuality() {
            this.highQualityImport = !this.highQualityImport;
            this.pixelProcessingStep = this.highQualityImport ? 1 : 2;
            this.targetImageResolution = this.highQualityImport ? 150 : 100;
            this.updateQualityButtonState();
            console.log(`Calidad de importación de imagen: ${this.highQualityImport ? 'ALTA' : 'NORMAL'} (paso de píxel: ${this.pixelProcessingStep}, resolución: ${this.targetImageResolution}x${this.targetImageResolution})`);
        }

        updateQualityButtonState() {
            const qualityBtn = document.getElementById('toggleQualityBtn');
            if (qualityBtn) {
                if (this.highQualityImport) {
                    qualityBtn.classList.add('active');
                } else {
                    qualityBtn.classList.remove('active');
                }
            }
        }

        importImages() {
            document.getElementById('imageFileInput').click();
        }

        async handleImageFiles(files) {
            if (files.length === 0) return;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.startsWith('image/')) {
                    console.warn(`El archivo ${file.name} no es una imagen, se omitirá.`);
                    continue;
                }

                console.log(`Procesando imagen: ${file.name}`);
                const reader = new FileReader();

                reader.onload = async (e) => {
                    const img = new Image();
                    img.onload = async () => {
                        try {
                            const newCommands = await this.processImageToCommands(img);
                            if (newCommands.length > 0) {
                                this.addLayer();
                                this.layers[this.currentLayer].name = `Image Layer (${file.name.substring(0,15)}...)`;
                                this.layers[this.currentLayer].commands = newCommands;
                                console.log(`Imagen "${file.name}" importada a la Capa ${this.currentLayer + 1}. Comandos generados: ${newCommands.length}`);
                                this.updateUI();
                            } else {
                                console.warn(`No se pudieron generar comandos de dibujo para la imagen "${file.name}".`);
                            }
                        } catch (error) {
                            console.error('Error al procesar la imagen:', error);
                        }
                    };
                    img.onerror = () => {
                        console.error(`No se pudo cargar la imagen: ${file.name}`);
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        async processImageToCommands(img) {
            const tempCanvas = document.createElement('canvas');
            const tempCtx = tempCanvas.getContext('2d');

            const maxWidth = this.targetImageResolution;
            const maxHeight = this.targetImageResolution;
            let width = img.width;
            let height = img.height;

            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }

            tempCanvas.width = width;
            tempCanvas.height = height;

            tempCtx.imageSmoothingEnabled = this.highQualityImport;
            tempCtx.imageSmoothingQuality = this.highQualityImport ? 'high' : 'medium';

            tempCtx.drawImage(img, 0, 0, width, height);

            const imageData = tempCtx.getImageData(0, 0, width, height);
            const data = imageData.data;
            const commands = [];
            const previewWidth = this.previewCanvas.width;
            const previewHeight = this.previewCanvas.height;

            const currentPixelStep = this.pixelProcessingStep;
            const baseThickness = currentPixelStep;

            for (let y = 0; y < height; y += currentPixelStep) {
                let currentSegment = null;

                for (let x = 0; x < width; x += currentPixelStep) {
                    const i = (y * width + x) * 4;
                    const r = data[i];
                    const g = data[i + 1];
                    const b = data[i + 2];
                    const a = data[i + 3];

                    if (a < 50) {
                        if (currentSegment) {
                            const color = currentSegment.color;
                            commands.push({
                                type: 'line',
                                x1: (currentSegment.startX / width) * previewWidth,
                                y1: (y / height) * previewHeight,
                                x2: (x / width) * previewWidth,
                                y2: (y / height) * previewHeight,
                                color: color,
                                thickness: baseThickness
                            });
                            currentSegment = null;
                        }
                        continue;
                    }

                    const currentColor = `rgb(${r},${g},${b})`;

                    if (currentSegment === null) {
                        currentSegment = { startX: x, color: currentColor };
                    } else if (currentSegment.color !== currentColor) {
                        commands.push({
                            type: 'line',
                            x1: (currentSegment.startX / width) * previewWidth,
                            y1: (y / height) * previewHeight,
                            x2: (x / width) * previewWidth,
                            y2: (y / height) * previewHeight,
                            color: currentSegment.color,
                            thickness: baseThickness
                        });
                        currentSegment = { startX: x, color: currentColor };
                    }
                }

                if (currentSegment) {
                    commands.push({
                        type: 'line',
                        x1: (currentSegment.startX / width) * previewWidth,
                        y1: (y / height) * previewHeight,
                        x2: (width / width) * previewWidth,
                        y2: (y / height) * previewHeight,
                        color: currentSegment.color,
                        thickness: baseThickness
                    });
                }
            }

            return commands;
        }

        updateUI() {
            this.updateLayerInfo();
            this.updateOnionSkin();
            this.updateLayerList();
            this.updateButtonStates();
            this.updateLoopButtonState();
            this.updateQualityButtonState();
        }

        updateLayerInfo() {
            const info = document.getElementById('layerInfo');
            if (info) {
                info.textContent = `${this.currentLayer + 1}/${this.layers.length}`;
            }
        }

        updateButtonStates() {
            const prevBtn = document.getElementById('prevLayer');
            const nextBtn = document.getElementById('nextLayer');
            const removeBtn = document.getElementById('removeLayer');
            const addBtn = document.getElementById('addLayer');

            if (prevBtn) prevBtn.disabled = this.currentLayer === 0 || this.isAnimating;
            if (nextBtn) nextBtn.disabled = this.currentLayer === this.layers.length - 1 || this.isAnimating;
            if (removeBtn) removeBtn.disabled = this.layers.length <= 1 || this.isAnimating;
            if (addBtn) addBtn.disabled = this.isAnimating;

            document.getElementById('clearLayer').disabled = this.isAnimating;
            document.getElementById('duplicateLayer').disabled = this.isAnimating;
            document.getElementById('importImageBtn').disabled = this.isAnimating;
            document.getElementById('toggleQualityBtn').disabled = this.isAnimating;
            document.getElementById('loadPokemonBtn').disabled = this.isAnimating;
        }

        updateOnionSkin() {
            if (!this.previewCtx) return;

            this.previewCtx.clearRect(0, 0, this.previewCanvas.width, this.previewCanvas.height);
            const showOnion = document.getElementById('onionToggle')?.checked;

            if (showOnion) {
                if (this.currentLayer > 0) {
                    this.previewCtx.globalAlpha = this.onionOpacity;
                    this.layers[this.currentLayer - 1].commands.forEach(command => {
                        this.drawCommand(this.previewCtx, {...command, color: '#ff6b6b'});
                    });
                }

                if (this.currentLayer < this.layers.length - 1) {
                    this.previewCtx.globalAlpha = this.onionOpacity;
                    this.layers[this.currentLayer + 1].commands.forEach(command => {
                        this.drawCommand(this.previewCtx, {...command, color: '#6bb6ff'});
                    });
                }
            }

            this.previewCtx.globalAlpha = 1;
            this.layers[this.currentLayer].commands.forEach(command => {
                this.drawCommand(this.previewCtx, command);
            });
        }

        updateLayerList() {
            const container = document.getElementById('layerListCompact');
            if (!container) return;

            container.innerHTML = '';

            this.layers.forEach((layer, index) => {
                const item = document.createElement('div');
                item.className = `layer-item-compact ${index === this.currentLayer ? 'active' : ''} ${layer.commands.length > 0 ? 'has-content' : ''}`;

                item.innerHTML = `
                    <span>${layer.name || `L${index + 1}`} (${layer.commands.length})</span>
                    <span class="layer-visibility-compact" data-layer="${index}">${layer.visible ? '👁️' : '🚫'}</span>
                `;

                item.addEventListener('click', (e) => {
                    if (this.isAnimating) return;
                    if (e.target.classList.contains('layer-visibility-compact')) {
                        this.layers[index].visible = !this.layers[index].visible;
                        this.updateLayerList();
                    } else {
                        this.currentLayer = index;
                        this.updateUI();
                    }
                });

                container.appendChild(item);
            });
        }

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

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => new RealLayerAnimationSystem(), 3000);
        });
    } else {
        setTimeout(() => new RealLayerAnimationSystem(), 3000);
    }
})();