Intérprete Qdraw

⚠️ Versión Beta: Este proyecto está en desarrollo activo. Si encontrás errores o tenés sugerencias, por favor abrí un issue en GitHub.

Intérprete moderno del lenguaje de programación educativo Qdraw desarrollado para la Universidad Nacional de Quilmes.

🎯 ¿Qué es Qdraw?

Qdraw es un lenguaje educativo diseñado para enseñar programación mediante dibujo en un tablero interactivo. Este proyecto es un intérprete web completo que trae el lenguaje al navegador con una experiencia moderna.

✨ Características

• Editor Monaco: El mismo editor de VS Code con syntax highlighting personalizado
• Ejecución en tiempo real: Visualiza cómo se ejecuta tu código paso a paso
• Parser robusto: Tokenizer, AST parser y executor completamente implementados
• Seguridad: Límites de ejecución, sin eval(), validación de entrada
• Exportación: Guarda y carga tus programas en formato .qdraw
• Responsive: Funciona perfecto en desktop y mobile

🎨 Sintaxis del lenguaje

Comandos básicos

programa {
    MoverDerecha
    PintarRojo
    MoverAbajo
    PintarVerde
}

Estructuras de control

repetir 5 veces {
    PintarRojo
    MoverDerecha
}

si (estaVacia?) {
    PintarNegro
} sino {
    Limpiar
}

Procedimientos personalizados

procedimiento DibujarCuadrado() {
    repetir 4 veces {
        PintarRojo
        MoverDerecha
    }
}

programa {
    DibujarCuadrado()
}

🛠️ Arquitectura técnica

Tokenizer (Lexer)

Convierte el código fuente en tokens identificables:

• Keywords (programa, procedimiento, si, sino, repetir)
• Comandos (MoverArriba, PintarRojo, etc.)
• Sensores (estaVacia?, estaPintadaDeRojo?)
• Números, identificadores, comentarios

Parser

Genera un Árbol de Sintaxis Abstracta (AST) validando la estructura:

• Programa principal
• Definiciones de procedimientos
• Estructuras de control (if/else, repeat)
• Llamadas a comandos y procedimientos

Executor

Ejecuta el AST de forma segura con:

• Límite de 100,000 pasos de ejecución
• Recursión limitada a 1000 niveles
• Velocidades ajustables (instantáneo, rápido, normal, lento)
• Cancelación de ejecución

🔒 Seguridad

• Sin eval(): Parser manual sin ejecutar código arbitrario
• Límites estrictos: Prevención de loops infinitos y recursión excesiva
• Validación de archivos: Solo acepta .qdraw y .txt hasta 500KB
• Sanitización: Limpieza de input para prevenir XSS
• CSP Headers: Content Security Policy configurado

🎮 Controles interactivos

• Click en celda: Cambia el color (vacío → rojo → verde → negro)
• Shift + Click: Teletransporta el cabezal
• Velocidades: 4 modos de ejecución
• Tablero ajustable: De 1x1 hasta 50x50
• Vista inicial/final: Compara estado antes y después

🚀 Uso

1. Escribe tu código Qdraw en el editor
2. Configura el tamaño del tablero (ancho x alto)
3. Presiona "Ejecutar" para ver la animación
4. Usa los botones para guardar/cargar programas

📚 Comandos disponibles

Movimiento:

• MoverArriba, MoverAbajo, MoverDerecha, MoverIzquierda

Pintura:

• PintarNegro, PintarRojo, PintarVerde, Limpiar

Sensores:

• estaVacia?
• estaPintadaDeNegro?
• estaPintadaDeRojo?
• estaPintadaDeVerde?

🎓 Proyecto educativo

Desarrollado para la materia Elementos de Programación y Lógica de la Universidad Nacional de Quilmes. El intérprete permite a los estudiantes aprender conceptos fundamentales de programación de forma visual e interactiva.

📄 Licencia

MIT License - Ver LICENSE