Une demande, du code, un résultat visible

1. Observer la différence

La version initiale n’a pas de dialogue d’instructions. La version terminée ajoute un bouton près de Sound off, puis explique la règle enregistrée et les offres de démonstration.

2. Partir de la même version

La branche main contient déjà le résultat. Utilisez un nouveau clone et la branche ci-dessous pour reproduire le travail sans remplacer vos modifications existantes.

git clone https://github.com/Adnen-Ben-Abdelaali/ai-games-studio.git ai-games-studio-tutorial
cd ai-games-studio-tutorial
git switch -c tutorial/how-to-play 42db00fc7c36f1de88c0d59d2bf965ee9056e31b
npm ci
npm run demo
npm test

Ouvrez ce dossier dans Codex. Dans un second terminal, servez l’exemple et ouvrez http://127.0.0.1:8080. Sous PowerShell, utilisez npm.cmd et npx.cmd si nécessaire.

npx --yes http-server@14.1.1 examples/html5 -a 127.0.0.1 -p 8080 -c-1

3. Formuler une demande vérifiable

Dans ce dépôt, ajoute un bouton accessible « How to play » à côté de Sound off dans Harvest Tunisia. Ouvre un dialogue HTML natif avec un titre, trois instructions, une note précisant qu’il n’y a aucun paiement et que les offres sont fictives, ainsi que des boutons de fermeture nommés et Got it. Lis la règle et le nombre depuis project.template. Garde la fermeture par Échap, le retour du focus et un affichage adapté à 390 pixels. Préserve les règles, récompenses et comportements du jeu ainsi que le runtime Cocos. Modifie les sources dans tools/, ajoute npm run export:demo pour reconstruire examples/html5 depuis l’exemple existant sans écraser ses modifications, puis régénère, teste et montre le diff.

4. Relire le code et régénérer

Les changements portent sur tools/harvest.html, tools/harvest-player.js, tools/harvest.css et la commande d’export. Le dialogue utilise showModal() ; son texte suit kind et matchCount. Les règles de tirage et d’évaluation restent les mêmes.

Voir le commit et le diff réels ↗

npm run export:demo
npm test
git diff

5. Vérifier les interactions

Le bouton ouvre le dialogue ; Échap le ferme et rend le focus.
Entrée permet de le rouvrir ; Got it le ferme.
La règle du modèle est affichée, sans fixer trois symboles pour tous les jeux.
À 390×844, le dialogue ne déborde pas horizontalement.
L’exemple gagnant guidé fonctionne et les six tests existants passent.

Ces contrôles ont été réalisés sur l’exemple terminé. Une fenêtre de navigateur étroite n’est pas un test de téléphone réel ni un audit complet d’accessibilité. Si des fichiers restent en cache, rechargez toutes les ressources avant de retoucher le code.

Et les diagrammes ?

Cette leçon modifie des fichiers sources HTML5. Elle ne génère pas de nouveaux nœuds UML. Les changements du modèle de comportement utilisent le MCP ou les éditeurs pris en charge, avec application et validation explicites.

Lire le tutoriel complet en français sur GitHub ↗