← Volver a Lion Game Studio
TOOL

Game Document Design Software — Web Edition (GDDS Web)

Compilador de lenguaje de marcado propio (GDD-Mark) con editor Monaco, diagramador visual interactivo de autómatas SVG, preview en tiempo real y exportación a PDF/HTML.

Herramienta en desarrollo
Abrir GDDS Web →

Visión del proyecto

GDDS Web es la segunda generación de GDDS, rediseñada como aplicación web completa. Donde la versión original era una aplicación de escritorio basada en Chromium y C#, esta edición es una SPA construida con React y TypeScript que corre íntegramente en el browser — sin instalación, accesible desde cualquier dispositivo con navegador moderno.

Stack tecnológico

CapaTecnologíaRol
UIReact 18 + TypeScriptFramework y tipado
BuildViteBundler y servidor de desarrollo
EditorMonaco Editor (@monaco-editor/react)Editor con soporte de lenguajes personalizados y CodeLens
Syntax highlighthighlight.jsColorizado de bloques @Codigo en el preview
AudioWeb Audio APIAmbiente sonoro generativo sin archivos externos
DeployVercelHosting con CI/CD desde GitHub

Sin librerías de estado externas — todo con hooks nativos de React.

Arquitectura del compilador

El núcleo es un compilador de tres fases escrito desde cero en TypeScript:

1. Lexer (lexer.ts)

Tokeniza el código GDD-Mark línea por línea. Reconoce dos categorías:

  • Bloques con cuerpo: @Seccion[Nombre]{...} → BLOCK_OPEN + contenido + BLOCK_CLOSE
  • Bloques inline: @UsarDiagrama[Nombre] → emite BLOCK_OPEN + BLOCK_CLOSE sin cuerpo

2. Parser (parser.ts)

Produce un AST tipado por bloque:

type ASTNode =
  | PortadaNode | SeccionNode | SubseccionNode
  | JugadorNode | EnemigoNode | NivelNode
  | DiagramaNode | UsarDiagramaNode
  | CodigoNode | TablaNode | ListaNode
  | GraficoNode | SonidoNode | AssetNode
  | LinkNode | TextNode | UnknownNode;

Parser recursivo descendente. DiagramaNode incluye flags inicial y final por estado, y coordenadas x, y que el parser lee del bloque #posiciones:{ [Nombre, x, y] } si está presente.

3. Generator (generator.ts)

Opera en dos pasadas:

Primera: registra recursivamente todos los @Diagrama[Nombre] en un Map<string, DiagramaNode>.

Segunda: genera HTML nodo por nodo. El generator recibe un flag isDark que se propaga al renderizador para que los diagramas respeten el tema activo.

Diagramador visual interactivo (DiagramEditor.tsx)

El componente más notable de la segunda generación. Se abre como modal fullscreen con un canvas SVG interactivo accesible desde un CodeLens que Monaco muestra encima de cada línea @Diagrama[Nombre] en el editor de código.

Controles:

  • Doble clic en canvas → crear nodo (abre mini-modal de nombre y color)
  • Clic en nodo → seleccionar; Supr → borrar con sus transiciones
  • Botón Conectar + clic en destino → crear transición
  • Doble clic en flecha → editar etiqueta de la transición
  • Arrastrar nodo → mover posición libremente
  • Arrastrar fondo → hacer pan del canvas

El canvas muestra un recuadro de área recomendada (900×600px, punteado en amarillo) para que el usuario sepa cuándo el diagrama excede el espacio disponible en el documento.

Al confirmar, toGDDMark() genera el bloque GDD-Mark completo incluyendo #posiciones:{ [Nombre, x, y] } para persistir el layout manual. Si el diagrama ya existía en el código, buildDiagramPattern() lo busca y reemplaza en su lugar usando setCode(). Si es nuevo, lo inserta en el cursor.

Al reabrir un diagrama existente, parseGDDMarkDiagram() lee las posiciones guardadas y restaura los nodos exactamente donde el usuario los dejó.

Renderizador de diagramas SVG (diagramRenderer.ts)

Completamente propio, sin Dagre ni D3. Soporta dos modos de layout:

Layout manual: si algún estado tiene coordenadas x, y distintas de cero (guardadas por el diagramador), el renderer las usa directamente. El SVG se dimensiona dinámicamente al bounding box de los nodos.

Layout automático (BFS): si no hay posiciones guardadas, asigna un nivel (rank) a cada nodo mediante BFS desde el nodo inicial y los distribuye en columnas izquierda→derecha.

Render de aristas:

  • Hacia adelante: curva suave arriba (cpy = midY - 28)
  • Hacia atrás: curva proporcional a la distancia horizontal (max(80, hDist × 0.55))
  • Bidireccionales: alternan arriba/abajo ±50px
  • Auto-bucle: curva cúbica encima del nodo

Etiquetas: punto real de la curva en t=0.5, desplazadas perpendicularmente a la tangente en min(32, max(16, curvature × 0.28)) px. Colores adaptan al flag isDark.

Sistema de autocompletado (Monaco Language Provider)

highlight.ts registra GDD-Mark como lenguaje en Monaco con cuatro providers y un CodeLens provider:

  • Bloques (trigger @): snippets con placeholders Tab-navegables
  • Atributos (trigger #): detecta el bloque padre y sugiere atributos válidos
  • Imágenes (integrado en #): filtra archivos cargados desde el primer carácter
  • Diagramas (trigger [): filtra diagramas definidos en el documento
  • CodeLens: muestra ”🔷 Abrir en diagramador” encima de cada @Diagrama[Nombre]; al hacer clic llama a handleOpenDiagramEditor(nombre) via función global _editDiagramaHandler

Sistema de temas

themes.ts define 8 temas predefinidos con 13 variables CSS cada uno. El flag isDark se propaga a través de compile() → generate() → renderDiagramaSVG() para que los diagramas adapten colores al tema. El ThemeSelector muestra un grid 4×2 de miniaturas con los colores reales de cada tema.

Vista previa de PDF

El preview incluye un toggle Vista PDF que simula el layout del documento exportado: ancho 155mm centrado, padding 18mm, sombra de papel y altura mínima A4.

Persistencia de archivos

Formato .gdds — JSON autocontenido con source (código GDD-Mark) y assets (imágenes en Base64). FileService.ts usa File System Access API en Chrome/Edge con fallback para Firefox.

El bloque #posiciones:{ [Nombre, x, y] } dentro de cada @Diagrama persiste el layout visual entre sesiones de trabajo.

Exportación

PDF: ventana con HTML + CSS de impresión inlineado. Cards usan <table> HTML real. Imágenes externas (URL) convertidas a base64 vía fetch() antes de imprimir.

HTML: archivo .html autocontenido descargado vía URL.createObjectURL.

Audio y efectos visuales

Audio generativo: cuatro osciladores sawtooth en A1/E2/A2/E3 modulados por LFOs de 0.15–0.27 Hz. Ruido blanco bandpass a 180 Hz como textura. Activado en el primer pointerdown.

Efecto de fuego: tres capas de gradientes CSS animadas independientemente (3.2s, 2.8s, 4s) en la pantalla de bienvenida simulando brasas y llamas que suben.

Plantillas predefinidas

templates.ts incluye 6 plantillas:

  • Diagramas de IA — autómatas de referencia con posiciones manuales incluidas: PatrullaSimple, JefeFases, BotTactico
  • Manual de GDD-Mark — referencia completa de todas las etiquetas
  • RPG de Aventura — estructura estilo Dark Souls/Zelda
  • FPS Táctico — estructura 5v5 estilo Valorant
  • Plataformer Indie — estructura estilo Celeste
  • Puzzle Casual — estructura F2P