NoCodeQuest RPG

"Tu IDE ya no es solo un editor. Es una mazmorra, un tablero de decisiones y una crónica viva."

NoCodeQuest es una extension para VS Code que convierte el trabajo real del IDE en una aventura RPG pixel art. Diagnosticos, TODO, commits, diff, contexto del editor, inventario, mercado, cronica y decisiones HITL conviven en un unico WebView jugable.

La idea no es tapar el IDE con un juego, sino usar el juego como interfaz simbolica y accionable para trabajar mejor: el estado tecnico se refleja en la aventura y Jasper actua como bardo y copiloto, pero la ultima palabra siempre la tiene la persona que desarrolla.

Vision

• Convertir el IDE en un "Espejo del IDE": una capa donde editor, juego e IA comparten contexto.
• Mantener un flujo HITL real: la IA sugiere, pero no ejecuta nada importante sin aprobacion humana.
• Hacer visible el estado tecnico con una UI mas memorable que una lista plana de paneles y logs.

Estado Actual

• WebView jugable con splash, login, escena principal, HUD, panel lateral y chat overlay.
• Fase A del flujo HITL estabilizada: commit transaccional, Inspeccionar fiable, ACK honestos, confirmacion fuerte del pergamino y arranque mas robusto.
• Combate contra bugs con recompensas de EXP y oro.
• Boss contextual para conflictos de merge y recompensas asociadas.
• Misiones generadas desde TODO y FIXME.
• Inventario, mercado, armas, skins, pergaminos y pociones con efectos reales sobre la partida.
• Planta de la guarida como indicador simbolico de deuda tecnica.
• Cronica de aventuras persistente con detalle de eventos relevantes.
• Cartas de Destino generadas desde el estado real del IDE.
• Chat HITL de Jasper con sugerencias estructuradas ejecutables.
• Estado visible del oraculo en el chat: activo, cooldown, guia local o dormido.
• Escena Phaser contextual con fondos por sala, clima tecnico, transiciones de sala y salas de hito.
• Audio de localizacion con pista base y pista secundaria para salas especiales.
• Jasper, la bruja, bug y boss ya conviven en escena con presencia contextual y reacciones a hitos.
• Controles de vista para mover, maximizar, teatro y zen mode.
• Pantalla de creditos y pantalla de apoyo separada, con CTA flotante para colaborar con el desarrollo.

Lo Que Hace Hoy

• Combate: los diagnosticos del editor pueden materializarse como amenazas y puedes atacarlas desde el panel.
• Amenaza real: los conflictos de merge pueden invocar un boss contextual con botin, insignia y celebracion propia.
• Destino: el oraculo local resume contexto del IDE y propone cartas con acciones utiles.
• Jasper: responde con tono narrativo, pero tambien con foco tecnico cuando la pregunta lo requiere.
• Escena reactiva: la mazmorra cambia de fondo segun contexto, sala, hito y clima tecnico del IDE.
• Chat accionable: desde el overlay puedes Inspeccionar, Copiar IDE, Reconsultar, Refrescar IDE y exportar.
• Commit ritualizado: el panel prepara commits con flujo transaccional y el resultado se refleja de verdad en la UI.
• Mercado e inventario: comprar, equipar y consumir recursos funciona sin salir del juego.
• Heroe vivo: inspect, coffee, commit y scroll tienen rituales visuales propios.
• PNJs vivos: Jasper y la bruja aparecen por sala, dialogan entre si y reaccionan a gestas reales como compras, badges, level up o pergaminos.
• Salas de hito: victorias, ascensos, compras importantes y recompensas usan fondos y microescenas dedicadas.
• Cronica: cada accion importante deja huella en adventureLog.
• Pantalla de creditos: muestra accesos directos al repo, Open VSX y apoyo al dev.

Instalacion

Desde Open VSX

• Ficha publica: NoCodeQuest en Open VSX

Desde VSIX

1. Abre VS Code.
2. Ve a Extensiones.
3. Pulsa ....
4. Elige Instalar desde VSIX....
5. Selecciona el .vsix.

Desde codigo fuente

git clone https://github.com/Charran78/NoCodeQuest.git
cd NoCodeQuest
npm install

Despues abre el proyecto en VS Code y pulsa F5 para lanzar la ventana de desarrollo de la extension.

Primer Arranque

1. Abre cualquier proyecto en VS Code.
2. Ejecuta NoCodeQuest: ⚔️ Iniciar Aventura.
3. Espera a la splash y entra en el login.
4. Pulsa Start.
5. Usa Destino, Inventario, Misiones, Mercado, Cronica y Chat segun te convenga.

Comandos disponibles:

• NoCodeQuest: ⚔️ Iniciar Aventura
• NoCodeQuest: 🧙 Ver Perfil del Aventurero
• NoCodeQuest: 🪞 Inspeccionar Estado del IDE

Recorrido Visual

Splash

Pantalla de arranque con mensajes rotatorios, carga ligera y tono retro desde el primer paint.

Login

Entrada a la aventura con fondo dedicado y acceso directo a Start y Creditos.

Juego

Vista principal del WebView con escena, HUD, panel lateral, acciones, chat y cronica.

Creditos

Pantalla de creditos con llamadas a la accion para seguir el repo, ver Open VSX o invitar un cafe al bardo.

Flujo De Uso

1. Abres la aventura desde la paleta de comandos.
2. NoCodeQuest lee archivo activo, diagnosticos, estado Git, quests y progreso del jugador.
3. Destino te propone cartas segun ese contexto.
4. Jasper puede ampliar el siguiente paso con consejo narrativo y tecnico.
5. Tu decides si ejecutar, inspeccionar, refrescar contexto, copiar la respuesta al IDE o ignorarla.

Este es el nucleo HITL del proyecto: contexto real, sugerencia visible y accion humana explicita.

Jasper Y El Oraculo

Modo local

• Si no hay API key, Jasper sigue funcionando con guia local y mensajes de fallback.
• El badge del chat deja claro si el oraculo esta dormido o si estas usando guia local.

Modo Groq

1. Consigue una API key en console.groq.com/keys.
2. Ve a Configuracion -> Extensiones -> NoCodeQuest RPG.
3. Rellena Groq Api Key.
4. Opcionalmente cambia Groq Model.

Modelos utiles:

• llama-3.1-8b-instant
• qwen-2.5-8b-instruct
• gemma2-9b-it
• llama-3.3-70b-versatile

Notas:

• El sistema entra en cooldown temporal si Groq devuelve 429, para evitar spam de errores.
• El badge del chat refleja si la respuesta viene del oraculo real o de fallback.
• La API key se guarda en ajustes de VS Code; no debe commitearse.

UI Y Controles

Zona de juego

• HUD superior con nivel, oro, rango, cafe, pergaminos y planta.
• Panel lateral con Destino, Inventario, Misiones, Mercado y Cronica.
• Barra de accion con ataque, consumibles, commit, chat, musica y accesos rapidos.

Chat de Jasper

• Inspeccionar: intenta abrir el objetivo tecnico sugerido.
• Copiar IDE: copia la respuesta para pegarla en el chat del IDE.
• Reconsultar: pide a Jasper una nueva respuesta con el contexto mas reciente.
• Refrescar IDE: relee el contexto del IDE y las cartas sin volver a consultar a Jasper.
• Exportar: saca el transcript para soporte o seguimiento.

Vista

• IDE: mueve el panel al grupo principal.
• MAX: maximiza o restaura el grupo actual.
• THE: activa modo teatro.
• ZEN: alterna zen mode del editor.

Pantalla De Creditos

• Tiene fondo dedicado y el mismo formato base que splash y login.
• Se puede abrir desde el login o desde la bolita flotante de la esquina inferior derecha.
• Incluye enlaces directos al repo, Open VSX y pagina de apoyo al desarrollo.
• Tiene boton Volver, asi que puedes regresar a la pantalla anterior sin cerrar la extension.

Enlaces actuales:

• Repo: github.com/Charran78/NoCodeQuest
• Open VSX: open-vsx.org/extension/pedromencias/nocodequest
• Cafe para el bardo: buymeacoffee.com/beyonddigiv

Persistencia

• El estado de la partida se guarda en .nocodequestrc.json dentro del workspace.
• Existe un ejemplo en .nocodequestrc.example.json.
• Parte del runtime del WebView usa un espejo local en .nocodequest/webview-runtime.json para mantener sincronizado host y webview.

Arquitectura

[IDE] -> [Estado JSON] -> [Adventure Oracle] -> [Cartas de Destino]
   -> [WebView Phaser + Panel HITL] -> [Decision del jugador] -> [IDE]

Piezas principales:

• extension.js: orquestador entre VS Code, WebView, Git, runtime mirror y acciones del juego.
• adventureOracle.js: recopila ide_state y genera cartas con reglas fijas.
• inventoryManager.js: progreso, recursos, cronica y estado del jugador.
• questBoard.js: convierte TODO y FIXME en misiones.
• narrationEngine.js: integra Groq, cooldown por rate limit y fallback local.
• compactSystem.js: base del contrato /compact y parte del flujo HITL.
• webview/panel.js: HTML, CSS y bootstrap del WebView.
• webview/modules/navigation.js: splash, login, juego, creditos y carga diferida.
• webview/modules/ui-renderer.js: renderizado de chat, cartas, badge del oraculo e inventario.
• webview/modules/event-handlers.js: eventos de UI y puente de acciones al host.

Estado Del Laboratorio Visual

Completado

• Mazmorra Reactiva v1: el fondo y la iluminacion ya reflejan el estado tecnico y la sala activa.
• Rituales del Heroe v1: el heroe responde a inspect, coffee, commit y scroll.
• Bruja Comerciante v1: la tienda tiene presencia diegetica y la bruja acompana shop.
• Enemigo Contextual v1: bug y boss aparecen por errores reales y conflictos de merge.
• Audio de Localizacion v1: la musica diferencia sala base y localizaciones especiales.
• Jasper Escenico v1-v2: Jasper gano presencia en Creditos, Cronica, Destino y en hitos reales.
• PNJs v2-v4: Jasper y la bruja ya comparten escena, dialogan y reaccionan a gestas del jugador.
• Salas de Hito v1-v2: level up, victorias, compras, equipo, pergamino e insignias ya tienen microescena propia.
• Transiciones de Sala v1: los cambios de fondo ya se sienten como viaje entre salas y no como simple swap de textura.

Pospuesto

• Musica Adaptativa v1: se aparca por ahora en favor de audio por localizacion mas simple y controlable.

Roadmap

Ahora

• Validar en runtime todo el bloque visual ya integrado y ajustar timings, intensidades y densidad de apariciones.
• Revisar documentacion, packaging y estado de release para no perder trazabilidad del sprint.
• Preparar el siguiente corte del laboratorio sin romper la base HITL ya estabilizada.

Siguiente

• PNJs v5: reacciones de personajes a amenazas vivas como bug, boss spawn, damageBoss o deuda tecnica critica.
• Sala del Bardo v1 o un espacio mas propio para Jasper dentro del reino.
• Seguir afinando el equilibrio RPG, tienda, progresion y feedback visual del IDE.

Mas adelante

• Reabrir Musica Adaptativa v1 si aporta valor real y no mete ruido en la UX.
• Enriquecer sugerencias estructuradas sin perder control humano.
• Ampliar assets, bosses, escenas y narrativa contextual.
• Publicar releases mas cerradas y documentadas, incluyendo salto al marketplace oficial de VS Code.

Notas De Diseno

• NoCodeQuest no busca automatizarlo todo.
• El objetivo es mantener a la persona dentro del flujo del IDE, no sustituir su criterio.
• El juego dramatiza el contexto, la IA propone y la persona decide.

Creditos

• Pedro Mencias: vision del producto, direccion y arquitectura.
• DeepSeek: diseno narrativo, sistema y documentacion conceptual.
• Claude: implementacion y evolucion tecnica del codigo.
• Gemini: apoyo creativo y refinamiento visual.

Licencia

MIT.

"From factory floor to AI core, pasando por las mazmorras del codigo."