Tutoriel 8 — La page d'accueil du jeu et sa publication

La page d'accueil : site/

Un dossier games/<id>/site/ (une page index.html, des images) devient la page du jeu sur ce site, et la racine de votre domaine si vous le déployez chez vous (le jeu étant dans play/). Exemples : Rainbow Islands, Sapiens.

• aux couleurs du jeu, avec ses vraies images : des captures (bin/jumphp shot), ses sprites, ses tuiles ;
• un grand lien vers le jeu : href="play/" ;
• le référencement : <title>, <meta name="description">, Open Graph (og:image de 1200 × 630), un <h1>, des alt sur les images, les données structurées VideoGame ;
• les adresses absolues s'écrivent https://{{DOMAIN}}/… : le site les remplace par la vraie adresse ;
• lisible sur téléphone (390 pixels de large, sans défilement horizontal).

Vérifiez-la avec bin/jumphp build:site <id> puis bin/jumphp siteshot <id>.

La description, dans toutes les langues

Le site existe en 14 langues (fr en es de it pt nl pl ru uk tr ja zh ko) : il montre la description du jeu dans la langue du visiteur. Écrivez-la dans config/project.yaml (les projets plus anciens ont config/game.yaml, sous game: : les deux sont lus), dans autant de ces langues que possible (au moins fr et en) :

project:
  description: "Un casse-briques : 3 vies, un nouveau mur à chaque niveau."
  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."

Sans traduction dans la langue du visiteur, c'est la description du projet qui s'affiche.

Le site du jeu dans d'autres langues

site/index.html est la page dans la langue principale du jeu (son <html lang>). Chaque traduction va dans site/<code>/index.html (par exemple site/en/index.html) : la même page traduite, avec ses chemins relatifs un dossier plus haut (../images/…, le jeu en ../play/). Ici, le visiteur voit la page dans sa langue quand elle existe. Chaque page liste toutes les langues (<link rel="alternate" hreflang="…">) et propose un petit menu des langues ; sitemap.xml donne une adresse par langue. Votre Claude sait le faire (AGENTS.md §13 de JumPHP).

L'image de l'annuaire

assets/thumbnail.png (16:9). Sinon le site prend l'image og:image de la page d'accueil, sinon l'icône du jeu, et à défaut il photographie le jeu lui-même dans un navigateur.

Ce que le site ajoute à chaque jeu

• Installer : chaque jeu s'installe comme une application (sur téléphone et sur ordinateur), avec son icône (assets/icon.png) ;
• Partager : la feuille de partage du téléphone, ou les réseaux sociaux sur ordinateur ;
• les notes des joueurs (de 1 à 5 étoiles, sans compte) et le compteur de parties ;
• les sources et l'éditeur en ligne ;
• les versions (🕘) : chaque commit qui a changé le jeu. Les joueurs ont toujours la dernière version publiée ; une ancienne se rejoue, se reprend dans le bac à sable, se restaure (son auteur : depuis son éditeur, « Envoyer sur GitHub ») ou se forke ;
• les commentaires, la boîte à idées et les problèmes signalés par les joueurs, avec ou sans compte. Les messages anonymes n'apparaissent qu'une fois validés par vous. La cloche 🔔 en haut du site compte les nouveaux messages sur vos jeux et ceux qui attendent votre validation ; sa page (Notifications) les liste tous, avec les boutons ✓ Valider, Marquer résolu (pour un problème) et Supprimer.

Publier

Chaque push sur la branche principale de votre dépôt est publié dans la minute. Dans le Studio, la page du projet montre l'état de la publication, les erreurs, et permet de cacher le jeu de l'annuaire.