Proyecto
Una aplicación de escritorio tipo overlay para Black Desert Online, construida con Tauri 2 + Svelte 5 + TypeScript, migrada desde una aplicación de escritorio .NET WPF. Incluye una base de datos de 981 recetas de crafteo, seguimiento de inventario, planificador de crafteo con árboles de dependencias, rastreador de grindeo con 98 zonas y 435 objetos de botín, temporizadores de bosses en vivo, seguimiento de progreso de tesoros, un sistema adaptativo de 3 modos de vista (mini/medio/completo), temática neon cyberpunk y distribución portable en un solo ejecutable.
Black Desert Online tiene sistemas de habilidades de vida profundos — cocina, alquimia y brebajes — con cientos de recetas, cada una requiriendo ingredientes específicos en cantidades específicas. Rastrear lo que tienes, lo que necesitas y qué craftear después significaba hacer malabares entre hojas de cálculo, pestañas de wiki y cálculos mentales. El BDO Life Skill Companion original fue construido como una aplicación de escritorio .NET WPF para resolver esto: una única ventana overlay que se sitúa encima del juego, permitiéndote buscar recetas, rastrear inventario y registrar sesiones de crafteo sin necesidad de hacer alt-tab.
La versión WPF funcionaba, pero era exclusiva de Windows, producía un paquete de 165MB, y extenderla con patrones de UI modernos era tedioso. La base de datos de recetas había crecido a 981 recetas en tres catálogos, con 759 imágenes de objetos — la aplicación necesitaba una mejor base.
La aplicación completa fue reescrita desde cero usando Tauri 2 con un frontend en Svelte 5 y un backend en Rust. Tauri utiliza el webview nativo del sistema en lugar de empaquetar Chromium, lo que redujo el binario de 165MB a aproximadamente 22MB. El backend en Rust maneja toda la persistencia — lectura y escritura de archivos JSON y CSV en un directorio de datos portable junto al ejecutable — mientras que el frontend en Svelte maneja todo el renderizado de la UI con stores reactivos.
La migración siguió una estrategia incremental en cuatro fases: fundación (modelos, stores, servicios), UI principal (las cinco pestañas), funcionalidades avanzadas (importar/exportar, navegación de recetas, modo mini, temporizadores de bosses), y mejoras (planificador de crafteo, rastreador de grindeo, rastreador de tesoros, anuncios). Cada fase fue validada contra el comportamiento original de WPF, y la versión Tauri rápidamente superó la paridad de funcionalidades con capacidades que la versión WPF nunca tuvo.
El sistema de crafteo es el corazón de la aplicación. 981 recetas distribuidas en Cocina (427), Alquimia (508) y Brebajes (46) son buscables con favoritos, y cada receta muestra sus ingredientes con conteos de inventario en vivo. Hacer clic en un ingrediente navega a las recetas que lo producen, y hacer doble clic salta directamente al catálogo de esa receta. Se soportan ingredientes alternativos — algunas recetas aceptan sustituciones con diferentes cantidades, mostradas mediante un indicador [alt] con tooltips. La sección "Usado En" muestra búsquedas inversas: cada receta que consume el objeto actual como ingrediente.
El Planificador de Crafteo lleva esto más allá. Selecciona cualquier receta, establece la cantidad deseada, y el planificador construye un árbol de dependencias completo — resolviendo recursivamente sub-recetas en los tres catálogos con detección de dependencias circulares. Resta lo que ya tienes en inventario y propaga el déficit hacia abajo. Tres vistas presentan el plan: una Vista de Árbol colapsable mostrando la jerarquía completa con columnas de necesidad/disponible/déficit, una Lista de Compras que agrega todos los materiales base, y una Vista de Pasos mostrando el orden de crafteo de abajo hacia arriba con casillas de verificación y una barra de progreso. La función de saltar al crafteo permite hacer clic en cualquier paso para navegar directamente a esa receta en la pestaña de crafteo.
La gestión de inventario soporta importación, exportación y combinación de CSV — permitiendo a los jugadores respaldar sus cantidades rastreadas o compartirlas entre máquinas. Todas las cantidades son editables en línea, tanto en la pestaña de inventario como directamente dentro de las listas de ingredientes de recetas.
El Rastreador de Grindeo cubre 98 zonas de grindeo con 435 objetos de botín únicos, cada uno con su propio icono y grado de rareza (común hasta legendario). Un diseño de dos columnas coloca un temporizador de cuenta regresiva con anillo SVG a la izquierda — con duraciones preestablecidas y controles de reproducir/pausar/detener — y una búsqueda de zona con seguimiento de botín a la derecha. Los campos de AP y DP se persisten por sesión, y las sesiones completadas se registran con desgloses completos de botín buscables en el Registro de Grindeo.
El Rastreador de Tesoros funciona junto al grindeo, rastreando el progreso en los cinco objetos de tesoro obtenibles por grindeo de BDO — Brújula, Poción de HP, Poción de MP, Mapa del Arqueólogo y Anillo del Mercader Rico. Cada tesoro se desglosa en sus piezas componentes con insignias de tipo (grindeo/crafteo/intercambio), seguimiento de horas invertidas y tiempo restante estimado basado en tu ritmo.
Los temporizadores de bosses rastrean los 14 bosses mundiales con horarios de EU y NA, mostrando una cuenta regresiva en vivo hasta el próximo spawn con imágenes de bosses e indicadores de bosses raros. Las alertas sonoras se activan un número configurable de minutos antes de que aparezca un boss. Los temporizadores de reinicio del juego cuentan hacia el reinicio diario, reinicio semanal, guerra de nodos y guerra de conquista — todos conscientes del horario de verano según la región. Estos temporizadores son visibles en los tres modos de vista.
La aplicación funciona como un overlay encima del juego, por lo que el espacio en pantalla importa. Tres modos de vista abordan diferentes situaciones. El modo completo (560x680, redimensionable) es la interfaz completa con pestañas con las cinco pestañas — Crafteo, Inventario, Registro, Grindeo y Configuración. El modo medio (560x170) se comprime en una franja horizontal de dashboard mostrando la cuenta regresiva del boss, temporizadores de reinicio, estado de la sesión de grindeo, resumen de botín y un ticker de anuncios. El modo mini (480x56) se reduce a una barra delgada con un icono de boss, cuenta regresiva, previsualización de receta y anuncios desplazables.
El modo mini es consciente del contexto: si estabas en la pestaña de Crafteo, muestra tu receta seleccionada e ingredientes; si estabas en la pestaña de Grindeo, muestra la zona activa, temporizador y conteo de botín; de lo contrario, muestra información del boss por defecto. Los usuarios pueden ciclar entre modos mediante el botón del logo, o saltar directamente entre cualquier par de modos usando botones de control dedicados. El tamaño de ventana, posición y modo de vista se persisten entre sesiones.
El tema neon cyberpunk predeterminado usa un fondo negro con púrpura (#C77DFF) como acento principal, verde (#00FF9D) para éxito y resaltados secundarios, y cian (#00E5FF) para elementos informativos. Los efectos de brillo neón son controlados por una variable CSS que los activa o desactiva globalmente. Dos temas adicionales — Dark Minimal (gris-azulado tenue, sin brillo) y Light (fondos claros para uso diurno) — son seleccionables desde Configuración. Todos los temas se intercambian mediante propiedades personalizadas CSS en el elemento raíz.
El diseño de UI se realizó en una instancia autoalojada de Penpot conectada a Claude Code vía MCP, permitiendo crear y consultar diseños programáticamente. Los wireframes para cada vista y estado fueron construidos primero en Penpot, luego implementados en Svelte con adherencia precisa a las especificaciones de diseño — tamaños de fuente, espaciado, colores y proporciones de layout coincidían con los mockups.
Un sistema de anuncios remotos obtiene mensajes desde un endpoint de API configurable, los almacena en caché localmente mediante el backend en Rust, y los muestra en un carrusel de rotación 3D tipo cubo en modo completo o un ticker marquesina desplazable en modos compactos. Los anuncios soportan cuatro tipos — información, actualización, evento y advertencia — cada uno con codificación de color distinta. Los usuarios pueden descartar anuncios individuales, y los IDs de descarte obsoletos se limpian automáticamente. El sondeo ocurre cada dos horas y también se aprovecha de los eventos de alerta de boss.
Tauri sobre Electron — Usar el webview del sistema en lugar de empaquetar Chromium redujo el binario de 165MB a 22MB. El backend en Rust proporciona I/O de archivos seguro y rápido y obtención HTTP sin un proceso separado.
Runes de Svelte 5 sobre stores externos — Los stores derivados en archivos .ts causan crashes en la combinación Tauri+SvelteKit+adapter-static. Todo el estado derivado usa runes $derived dentro de archivos .svelte, mientras que los stores escribibles en archivos .ts manejan el estado global. Este patrón fue descubierto tras depurar crashes en producción.
Distribución portable primero — Todos los datos (inventario, configuración, registros, estado del planificador, progreso de tesoros) se almacenan en una carpeta data/ junto al ejecutable. Sin instalador, sin AppData, sin entradas de registro. Descomprimir y ejecutar.
Solo entrada manual — Una restricción de seguridad estricta: sin automatización del juego, sin OCR, sin lectura de pantalla, sin lectura de memoria, sin inyección de DLL. Todo es ingresado manualmente por el jugador. Esto mantiene la aplicación firmemente dentro de los Términos de Servicio del juego.
Desarrollo dirigido por diseño con Penpot MCP — Una instancia autoalojada de Penpot conectada vía MCP permite consultar especificaciones de diseño programáticamente durante la implementación. Cada componente fue diseñado primero como wireframe, luego construido para coincidir — previniendo la divergencia que ocurre cuando el diseño y el código evolucionan por separado.
Temas con variables CSS — Los tres temas comparten el mismo markup de componentes. El cambio de tema intercambia una clase CSS en el elemento raíz, que actualiza docenas de propiedades personalizadas. Una variable --neon-glow (1 o 0) controla los efectos de brillo condicionales mediante calc() — sin necesidad de ramificación JavaScript para las diferencias visuales entre temas.