Rubik Studio Visualizer

███████╗ █████╗ ██████╗ ██╗██████╗ ███████╗██╗   ██╗  ██╗██████╗ 
██╔════╝██╔══██╗██╔══██╗██║██╔══██╗██╔════╝██║   ██║ ██╔╝╚════██╗
█████╗  ███████║██████╔╝██║██║  ██║█████╗  ██║   ██║██╔╝  █████╔╝
██╔══╝  ██╔══██║██╔══██╗██║██║  ██║██╔══╝  ╚██╗ ██╔╝╚██╗  ╚═══██╗
██║     ██║  ██║██████╔╝██║██████╔╝███████╗ ╚████╔╝  ╚██╗██████╔╝
╚═╝     ╚═╝  ╚═╝╚═════╝ ╚═╝╚═════╝ ╚══════╝  ╚═══╝    ╚═╝╚═════╝ 
                 Obsidian Plugin by: FabiDev<3

💡 Créditos, Idea Original y Ecosistema Tecnológico

• Autor e Idea Original: Fabian Serna (FabiDev<3) — Concepción funcional, diseño pedagógico de los tutoriales progresivos 3x3x3 / 4x4x4, arquitectura de experiencia de usuario y calculador de mapeo desde cubos físicos reales.
• Entorno de Desarrollo Agéntico: Desarrollado desde Google Antigravity, integrando empaquetado autónomo de Web Workers, motor de resolución constructiva por fases (BFS) y sincronización reactiva con el DOM virtual de Obsidian.
• Plugins, Librerías y Motores Consumidos:
  • obsidian API: API oficial de plugins de Obsidian (Plugin, Modal, MarkdownRenderChild, parseYaml, Command Palette) para el renderizado reactivo de bloques de código ```rubik-viz y modales interactivos.
  • cubing (cubing.js / TwistyPlayer): Motor criptográfico y gráfico WebGL/3D/2D de Lucas Garron y la comunidad de speedcubing usado para la simulación geométrica de puzzles 3x3x3 y 4x4x4, máscaras de stickering (OLL, PLL, F2L, centers-only) y línea de tiempo de animaciones.
  • esbuild + TypeScript: Empaquetador de alto rendimiento con inyección inline del Web Worker de búsqueda de cubing.js y parche de registro idempotente de Custom Elements (customElements.define) para evitar colisiones en el virtual scroller de Obsidian.

✨ Características Principales

1. 🎮 Visualización 3D y 2D Interactiva en Bloques Markdown (rubik-viz)

Renderiza cubos 3x3x3 y 4x4x4 dentro de cualquier nota usando bloques YAML limpios:

• Alternancia en vivo 3D ↔ 2D: Cambia entre el cubo 3D orbital y la planta desplegada 2D con un solo clic sin editar la nota.
• Botón 🎯 Centrar cubo: Restablece al instante la órbita de la cámara 3D a su posición natural de lectura (priorizando las caras Superior U, Frontal F y Derecha R) sin perder el paso actual de la secuencia.
• Botón ↺ Reiniciar vista: Regresa la línea de tiempo al estado inicial y centra la cámara.

2. ⚡ Sincronización en Tiempo Real con la Animación 3D

• Iluminación en vivo movimiento por movimiento: Conectado directamente a player.experimentalModel.currentMoveInfo de cubing.js. A medida que el cubo gira en 3D, se ilumina debajo el botón exacto del movimiento que se está ejecutando en ese instante (ej. R, luego U, luego R') junto con una píldora animada (▶ R / ✓ R).
• Reproducción individual al hacer clic: Al hacer clic sobre cualquier movimiento de la lista inferior, el cubo salta a ese instante y reproduce únicamente la animación 3D de ese giro, deteniéndose al terminar el movimiento.
• Resaltado automático para 4x4x4: Distingue automáticamente con etiquetas ámbar los movimientos de capas dobles (Rw, Uw, Lw, r, l) y capas internas (2R, 2R2, 2U) esenciales para las paridades de OLL y PLL.

3. 🎨 Calculador de Estado Inicial desde un Cubo Real (Mapear Cubo Real 3x3)

¿Tienes un cubo de Rubik físico desordenado en la mano?

• Abre la paleta de comandos (Ctrl + P / Cmd + P) y ejecuta:
  • Rubik Studio Visualizer: Mapear colores de cubo real (Calculador de estado inicial 3x3)
• Pintor interactivo de 54 casillas: Pinta las 6 caras (U, L, F, R, B, D) con validación física en tiempo real:
  • Verifica conteo exacto de 9 colores por cara, existencia de las 12 aristas y 8 esquinas reales, orientación de esquinas ($\sum co \equiv 0 \pmod 3$), orientación de aristas ($\sum eo \equiv 0 \pmod 2$) y paridad de permutación.
• Motor Solver 3x3 integrado (RealCubeSolver): Calcula en menos de 5 ms tanto el setup exacto de tu cubo real como una solución paso a paso en alg para que veas en 3D cómo se arma tu propio cubo.

4. 🧰 Constructor Visual con Vista Previa en Vivo

• Ejecuta Rubik Studio Visualizer: Insertar estado de cubo desde la paleta de comandos para abrir el estudio interactivo con plantillas rápidas (Sexy Move, Sune, T-Perm, Paridad OLL 4x4, Paridad PLL 4x4), teclado de movimientos y previsualización 3D instantánea.

🚀 Sintaxis del Bloque rubik-viz

```rubik-viz
title: "4x4x4 - Resolver Paridad de PLL"
puzzle: 4x4x4
view: 3D
setup: "z2 Uw2 2R2 Uw2 2R2 U2 2R2"
alg: "2R2 U2 2R2 Uw2 2R2 Uw2"
anchor: start
mask: full
tempo: 1.0
controls: true
```

Parámetros YAML soportados

📚 Tutoriales Interactivos Incluidos

El repositorio incluye tres documentos listos para abrir en tu bóveda de Obsidian:

1. tutorial-3x3x3.md: Tutorial progresivo que parte de un único cubo 3x3x3 desordenado y lo va armando fase por fase (Cruz Blanca en U, Esquinas Blancas, Segunda Capa, giro z2 después de la Fase 3, OLL y PLL), incluyendo casos alternativos independientes (Forma de "L", Punto Amarillo, Anti-Sune, Doble Sune, Y-Perm, Ub-Perm, H-Perm, etc.).
2. tutorial-4x4x4.md: Tutorial progresivo por reducción para el 4x4x4 (Centros $2\times 2$, Emparejamiento de Aristas Slice-Flip-Slice, Etapa 3x3x3, Paridad de OLL y Paridad de PLL con casos adyacentes y de esquinas).
3. example.md: Galería de referencia con ejemplos de todas las vistas, máscaras y configuraciones del plugin.

📦 Instalación en Obsidian

Instalación Manual

1. Descarga los archivos de la última versión (main.js, manifest.json y styles.css).
2. Crea la carpeta <TuBoveda>/.obsidian/plugins/rubik-visualizer/.
3. Copia dentro main.js, manifest.json y styles.css.
4. En Obsidian, ve a Ajustes → Plugins comunitarios, recarga la lista y activa Rubik Studio Visualizer.

Compilación desde el Código Fuente

# 1. Instalar dependencias
npm install

# 2. Compilar en modo producción (genera main.js empaquetado con Web Workers inline)
npm run build

# 3. Modo desarrollo con recarga en caliente (watch)
npm run dev

📄 Licencia

Distribuido bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.