Tutorial 8 — Die Startseite des Spiels und ihre Veröffentlichung

Die Startseite: `site/`

Ein Ordner games/<id>/site/ (eine Seite index.html, Bilder) wird zur Seite des Spiels auf dieser Website und zum Stammverzeichnis deiner Domain, wenn du sie selbst deployst (das Spiel liegt dann in play/). Beispiele: Rainbow Islands, Sapiens.

in den Farben des Spiels, mit seinen echten Bildern: Screenshots (bin/jumphp shot), seine Sprites, seine Tiles;
ein großer Link zum Spiel: href="play/";
Suchmaschinenoptimierung: <title>, <meta name="description">, Open Graph (og:image mit 1200 × 630), ein <h1>, alt-Texte an den Bildern, die strukturierten Daten VideoGame;
absolute Adressen schreibst du als https://{{DOMAIN}}/…: Die Website ersetzt sie durch die echte Adresse;
lesbar auf dem Smartphone (390 Pixel Breite, ohne horizontales Scrollen).

Prüfe sie mit bin/jumphp build:site <id> und dann bin/jumphp siteshot <id>.

Die Beschreibung in allen Sprachen

Die Seite gibt es in 14 Sprachen (fr en es de it pt nl pl ru uk tr ja zh ko): Sie zeigt die Beschreibung des Spiels in der Sprache des Besuchers. Schreibe sie in config/game.yaml, in so vielen dieser Sprachen wie möglich (mindestens fr und en):

game:
  description: "Ein Breakout-Spiel: 3 Leben, bei jedem Level eine neue Mauer."
  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."

Gibt es keine Übersetzung in der Sprache des Besuchers, wird die Beschreibung des Projekts angezeigt.

Die Seite des Spiels in anderen Sprachen

site/index.html ist die Seite in der Hauptsprache des Spiels (ihr <html lang>). Jede Übersetzung kommt nach site/<Code>/index.html (zum Beispiel site/en/index.html): dieselbe Seite übersetzt, ihre relativen Pfade einen Ordner höher (../images/…, das Spiel unter ../play/). Hier sieht der Besucher die Seite in seiner Sprache, wenn es sie gibt. Jede Seite listet alle Sprachen auf (<link rel="alternate" hreflang="…">) und bietet ein kleines Sprachmenü; sitemap.xml enthält eine Adresse pro Sprache. Dein Claude weiß, wie das geht (AGENTS.md §13 von JumPHP).

Das Bild im Verzeichnis

assets/thumbnail.png (16:9). Sonst nimmt die Website das og:image der Startseite, sonst das Symbol des Spiels, und notfalls fotografiert sie das Spiel selbst in einem Browser.

Was die Website jedem Spiel hinzufügt

Installieren: Jedes Spiel lässt sich als App installieren (auf dem Smartphone und auf dem Computer), mit seinem Symbol (assets/icon.png);
Teilen: das Teilen-Menü des Smartphones oder soziale Netzwerke am Computer;
die Bewertungen der Spieler (von 1 bis 5 Sternen, ohne Konto) und der Spielzähler;
der Quellcode und der Online-Editor;
die Versionen (🕘): jeder Commit, der das Spiel verändert hat. Die Spieler bekommen immer die neueste veröffentlichte Version; eine ältere lässt sich erneut spielen, in der Sandbox weiterverwenden, wiederherstellen (der Autor: in seinem Editor mit „Auf GitHub pushen“) oder forken;
die Kommentare, die Ideenbox und die von Spielern gemeldeten Probleme, mit oder ohne Konto. Anonyme Nachrichten erscheinen erst, nachdem du sie freigegeben hast. Die Glocke 🔔 oben auf der Website zählt die neuen Nachrichten zu deinen Spielen und die, die auf deine Freigabe warten; ihre Seite (Benachrichtigungen) listet sie alle auf, mit den Schaltflächen ✓ Freigeben, Als gelöst markieren (bei einem Problem) und Löschen.

Veröffentlichen

Jeder Push auf den Hauptbranch deines Repositorys wird innerhalb einer Minute veröffentlicht. Im Studio zeigt die Seite des Projekts den Stand der Veröffentlichung und die Fehler und erlaubt es, das Spiel im Verzeichnis zu verstecken.