Construire le plateau de jeu
Créer l'UI que les joueurs vont vraiment voir et cliquer
⏱ Estim. ~7 min
01 · Lire
Ton serveur est prêt. Il te faut maintenant un visage — la page HTML que les joueurs verront dans leur navigateur.
C'est du pur HTML, CSS, JavaScript. Pas de React, pas de framework. Juste les fondations du web sur lesquelles tous les frameworks sont construits.
C'est volontaire. Les frameworks sont super pour les grosses apps, mais comprendre ce qui se passe sans eux te rend bien meilleur dev. Quand React casse, les devs qui maîtrisent HTML et JavaScript bruts règlent ça en quelques minutes. Ceux qui ne connaissent que React fixent l'erreur pendant des heures.
Points clés
- Le front-end, c'est du pur HTML, CSS, JavaScript
- Aucun framework n'est nécessaire pour un jeu de cette taille
- Comprendre les bases te rend meilleur dans n'importe quel framework par la suite
- Socket.io sert automatiquement sa propre librairie client
02 · Modèle de prompt
Demande à Claude de construire la page du jeu. Sois précis sur les éléments dont tu as besoin.
Aide-moi à créer un public/index.html pour le tic-tac-toe. Il doit contenir : (1) Un titre 'Tic Tac Toe'. (2) Un bouton 'Find Game'. (3) Une zone de statut, affichant initialement 'Click Find Game to start'. (4) Un plateau 3x3 où chaque case est un élément button cliquable. (5) Un bouton 'Play Again' caché par défaut, à afficher en fin de partie. Inclus le script Socket.io client depuis '/socket.io/socket.io.js' (Socket.io sert ce fichier automatiquement), et fais le lien avec style.css et client.js.
03 · Modèle de prompt
Maintenant, demande à Claude d'ajouter du style au jeu. Donne-lui une direction de design précise.
Aide-moi à créer un public/style.css pour le tic-tac-toe. Construis le plateau en CSS grid 3x3, chaque case faisant 100x100 pixels. Bordures claires entre les cases, effet hover sur les cases vides. Centre tout à l'écran, fond sombre. X en bleu, O en rouge. Rends le bouton Find Game un peu plus visible. Ajoute une animation de léger scale quand un symbole est posé. Le rendu général doit être propre et moderne.
04 · Lire
Le pattern CSS clé qui fait marcher le plateau, c'est CSS Grid. Pas de mise en page complexe à base de table ou de hack flexbox, CSS Grid construit une 3x3 en trois lignes : ``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
C'est tout. Trois colonnes, chacune de 100 pixels, 4 pixels d'espace entre les cases. Le navigateur fait tous les calculs de mise en page. Chaque case est un élément <button> dans la grille — on utilise un button plutôt qu'un div parce que les boutons sont focalisables au clavier par défaut et accessibles aux lecteurs d'écran.
Points clés
- CSS Grid rend la mise en page 3x3 simple
- repeat(3, 100px) crée trois colonnes égales
- Chaque case est un <button> pour l'accessibilité clavier et lecteur d'écran
- Socket.io sert son propre client script à /socket.io/socket.io.js
05 · Pratique réelle
Lance ton serveur et prévisualise le plateau dans le navigateur.
06 · Quiz
Pourquoi utiliser des éléments <button> pour les cases du plateau plutôt que des <div> ?
- Les boutons ont un meilleur rendu par défaut
- Les div ne peuvent pas avoir d'event listener au clic
- Les boutons sont focalisables au clavier et accessibles aux lecteurs d'écran, ce qui permet à tous les joueurs de jouer
- Socket.io ne fonctionne qu'avec les éléments button
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.