Tutorial 8 — La página de inicio del juego y su publicación

La página de inicio: `site/`

Una carpeta games/<id>/site/ (una página index.html, imágenes) se convierte en la página del juego en este sitio, y en la raíz de tu dominio si lo despliegas en tu propio servidor (con el juego en play/). Ejemplos: Rainbow Islands, Sapiens.

con los colores del juego y sus imágenes reales: capturas (bin/jumphp shot), sus sprites, sus teselas;
un enlace grande al juego: href="play/";
el posicionamiento en buscadores: <title>, <meta name="description">, Open Graph (og:image de 1200 × 630), un <h1>, alt en las imágenes, los datos estructurados VideoGame;
las direcciones absolutas se escriben https://{{DOMAIN}}/…: el sitio las sustituye por la dirección real;
legible en el móvil (390 píxeles de ancho, sin desplazamiento horizontal).

Compruébala con bin/jumphp build:site <id> y luego bin/jumphp siteshot <id>.

La descripción, en todos los idiomas

El sitio existe en 14 idiomas (fr en es de it pt nl pl ru uk tr ja zh ko): muestra la descripción del juego en el idioma del visitante. Escríbela en config/game.yaml, en tantos de ellos como puedas (al menos fr y en):

game:
  description: "Un rompeladrillos: 3 vidas, un muro nuevo en cada nivel."
  descriptions:
    fr: "Un casse-briques : 3 vies, un nouveau mur à chaque niveau."
    en: "A brick breaker: 3 lives, a new wall every level."
    es: "Un rompeladrillos: 3 vidas, un muro nuevo en cada nivel."

Si no hay traducción en el idioma del visitante, se muestra la descripción del proyecto.

El sitio del juego en otros idiomas

site/index.html es la página en el idioma principal del juego (su <html lang>). Cada traducción va en site/<código>/index.html (por ejemplo site/en/index.html): la misma página traducida, con sus rutas relativas una carpeta más arriba (../images/…, el juego en ../play/). Aquí, el visitante ve la página en su idioma cuando existe. Cada página lista todos los idiomas (<link rel="alternate" hreflang="…">) y ofrece un pequeño menú de idiomas; sitemap.xml da una dirección por idioma. Tu Claude sabe hacerlo (AGENTS.md §13 de JumPHP).

La imagen del directorio

assets/thumbnail.png (16:9). Si no existe, el sitio toma la imagen og:image de la página de inicio, luego el icono del juego y, en su defecto, fotografía el propio juego en un navegador.

Lo que el sitio añade a cada juego

Instalar: cada juego se instala como una aplicación (en el móvil y en el ordenador), con su icono (assets/icon.png);
Compartir: la hoja para compartir del móvil, o las redes sociales en el ordenador;
las valoraciones de los jugadores (de 1 a 5 estrellas, sin cuenta) y el contador de partidas;
el código fuente y el editor online;
las versiones (🕘): cada commit que ha cambiado el juego. Los jugadores siempre tienen la última versión publicada; una antigua se puede volver a jugar, retomar en el sandbox, restaurar (su autor: desde su editor, «Enviar a GitHub») o forkear;
los comentarios, el buzón de ideas y los problemas notificados por los jugadores, con o sin cuenta. Los mensajes anónimos solo aparecen una vez que tú los apruebas. La campana 🔔 de la parte superior del sitio cuenta los mensajes nuevos sobre tus juegos y los que esperan tu aprobación; su página (Notificaciones) los lista todos, con los botones ✓ Aprobar, Marcar como resuelto (para un problema) y Eliminar.

Publicar

Cada push a la rama principal de tu repositorio se publica en un minuto. En el Studio, la página del proyecto muestra el estado de la publicación, los errores, y permite ocultar el juego del directorio.