novelasvm/docs/PORTAL.md

Portal web

El portal web es la interfaz principal de NovelasVM. Muestra el catálogo de novelas disponibles y permite cambiar entre temas visuales.

Archivos

• var-www/index.html — Estructura del portal.
• var-www/assets/styles.css — Tokens y estilos de los tres temas.
• var-www/assets/app.js — Lógica de carga del catálogo, renderizado y temas.

Funcionalidades

• Catálogo dinámico: carga /games.json y renderiza tarjetas.
• Selector de temas: oscuro, claro, inmersivo. Persistencia en localStorage.
• Badges de motor: cada tarjeta muestra el motor (Ren'Py, Unity, Web, ONScripter-RU).
• Portadas: si cover está definido en game.json, se muestra; si no, placeholder.
• Responsive: de 1 columna en móvil hasta 4 en pantallas grandes.
• Sin emojis: todos los iconos son SVG inline.

Metadatos mostrados

Cada tarjeta muestra:

• Portada (16:9)
• Badge del motor
• Título y subtítulo
• Descripción (máximo 2 líneas)
• Versión, autor y fecha
• Botón "Jugar"

Personalización

Cambiar tipografía

Edita la fuente en var-www/index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&..." rel="stylesheet">

Y actualiza --font-sans en styles.css.

Añadir un nuevo tema

1. Añade [data-theme="mi-tema"] en styles.css con sus tokens.
2. Añade un botón en index.html con data-theme-value="mi-tema".
3. Opcionalmente actualiza THEMES en app.js.

Añadir motor/badge

1. Añade el color --engine-<motor> en cada tema de styles.css.
2. Añade clase .engine-badge.<motor>.
3. Añade entrada en engineConfig de app.js.
4. Añade orden en engineOrder del sort.

Ordenación

Los juegos se ordenan:

1. Por motor: renpy, umineko-ru, unity, web.
2. Por título alfabéticamente dentro de cada motor.