60 lines
1.8 KiB
Markdown
60 lines
1.8 KiB
Markdown
# 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`:
|
|
|
|
```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.
|