LoL en 1 minute
Comprendre et contrer n'importe quel champion de League of Legends pendant l'écran de chargement.
Le site est pensé pour les débutants : tu tapes le nom du champion adverse sur ton téléphone, et tu as en moins d'une minute :
- ce qu'il faut surveiller en priorité ;
- comment le battre ;
- ses forces et ses faiblesses ;
- ses sorts résumés en une ligne.
Fonctionnalités
- Recherche instantanée : tolère les fautes de frappe et les accents, et reconnaît les surnoms (
mf, j4, kog…). Appuie sur Entrée pour ouvrir le premier résultat, / pour revenir dans la recherche et Échap pour quitter une fiche.
- Filtre par rôle : assassin, combattant, mage, tireur, support, tank.
- Données officielles toujours à jour : champions, sorts et images viennent de Data Dragon (Riot Games), dans la langue de la page, au dernier patch.
- Fiches rédigées à la main : le contenu « comment le battre » est écrit par un joueur. S'il n'existe pas encore de fiche pour un champion, le site affiche un résumé automatique de ses sorts.
- Mobile d'abord, sans backend ni base de données pour le MVP : le site est un front statique très rapide.
- Référencement : chaque page (accueil + une par champion) est pré-rendue en HTML au build, avec son titre, sa description, ses balises de partage (Open Graph, Twitter) et des données structurées (schema.org). Le build génère aussi
sitemap.xml, robots.txt et une vraie page 404.
Stack
- React 19 + Vite
- Vitest pour les tests unitaires
- ESLint
- Déploiement prévu sur Vercel (
vercel.json gère les routes de l'application)
Aucune librairie de routage : deux pages ne le justifiaient pas. Un mini-routeur basé sur l'History API se trouve dans src/lib/router.js.
Démarrer
Prérequis : Node.js 20.19 ou plus récent.
npm install
npm run dev # http://localhost:5173
npm test # tests unitaires
npm run lint
npm run build # version de production dans dist/ (avec pré-rendu, voir plus bas)
npm run preview # sert dist/ en local
Comment fonctionne le build
npm run build enchaîne trois étapes :
vite build : construit l'application pour le navigateur ;vite build --ssr src/entry-server.jsx : construit la même application pour Node ;node scripts/prerender.js : récupère les données Riot du dernier patch, génère avec React le HTML de l'accueil et de chaque champion (dist/champion/Darius.html…), puis écrit sitemap.xml, robots.txt et 404.html.
Chaque page contient ses données : dans le navigateur, React reprend la main sur le HTML existant (hydratation) sans rien retélécharger. vercel.json (cleanUrls) sert champion/Darius.html à l'adresse /champion/Darius.
Le build a besoin d'accéder à Data Dragon. S'il échoue (serveurs de Riot indisponibles), Vercel garde la version précédente en ligne. L'adresse du site utilisée dans les balises se règle avec la variable VITE_SITE_URL (par défaut https://lol-en-1-minute.vercel.app).
Organisation
src/
content/champions/ fiches rédigées (une par champion)
data/nicknames.js surnoms reconnus par la recherche
lib/ddragon.js accès à Data Dragon, cache, mise en forme des données
lib/search.js recherche tolérante (normalisation, surnoms, fautes de frappe)
lib/router.js mini-routeur
lib/seo.js titre, description, balises de partage et données structurées
entry-server.jsx point d'entrée du pré-rendu
scripts/prerender.js génère les pages HTML, le sitemap et robots.txt
pages/ accueil et fiche champion
components/ composants partagés
Charte visuelle
Base gris neutre, avec l'illustration officielle du champion fondue dans le haut de la page. Les couleurs vives sont réservées à ce qui doit se repérer vite ; toutes sont des variables en haut de src/styles.css :
- une couleur par touche de sort (
--key-p … --key-r), identique partout. Dans une fiche, une touche citée seule (« son E », « (Q) ») est automatiquement affichée avec sa couleur ;
- une couleur par rôle (
--role-assassin, --role-mage…) ;
- rouge (
--threat) pour ce qu'il faut craindre, vert (--counter) pour comment gagner, or (--gold) pour les actions.
Ajouter une fiche
Crée src/content/champions/<id>.json, où <id> est l'identifiant Riot du champion en minuscules : darius, missfortune, kogmaw, ou monkeyking pour Wukong. Vite charge automatiquement tous les fichiers de ce dossier.
Inspire-toi de darius.json :
| Champ | Contenu |
|---|
plan | Son plan de jeu en une phrase |
aSurveiller | La menace numéro 1 et comment réagir |
genre | Optionnel : "f" pour une championne (« Comment la battre », « Quand elle devient forte ») |
menace | Optionnel : la touche du sort à surveiller ("E"). Sinon, la première touche citée dans aSurveiller est utilisée |
contrer | 3 conseils concrets pour le battre |
forces | 3 forces |
faiblesses | 3 faiblesses |
sorts | Un résumé d'une ligne pour P, Q, W, E et R |
momentFort | Ses fenêtres de puissance face à son adversaire direct (même voie ou jungle contre jungle) : niveaux clés, sort qui change tout quand il est disponible, bon schéma d'échange. Ex. Ahri : bon niveau 1 (auto, W, auto), dangereuse quand son charme (E) est prêt, puis au niveau 6. Pour un champion joué à deux rôles, deux textes : { "voie": "…", "jungle": "…" }, affichés avec « En voie : » et « En jungle : » |
patch | Le patch où la fiche a été vérifiée (ou null) |
Règle d'or : chaque phrase doit pouvoir se lire en quelques secondes.
Langues
Le site existe en français (à la racine : /champion/Darius), en anglais (/en/champion/Darius) et en espagnol (/es/champion/Darius). Un drapeau dans l'en-tête mène à la même page dans une autre langue. Chaque version a son titre, sa description et des balises hreflang qui relient les trois pages pour Google ; le sitemap les liste toutes.
- Textes de l'interface :
src/i18n.js (un bloc par langue).
- Données Riot : noms, titres et sorts viennent de Data Dragon dans la langue de la page (
fr_FR, en_US, es_ES).
- Fiches traduites :
src/content/champions/en/<id>.json et src/content/champions/es/<id>.json. Elles ne contiennent que les textes (plan, aSurveiller, contrer, forces, faiblesses, sorts, momentFort) ; genre, menace, patch et auteur restent dans la fiche française, qui fait référence.
Quand tu corriges une fiche française, pense à reporter la correction dans ses deux traductions. Les tests vérifient que chaque traduction existe, garde des phrases courtes et cite exactement les mêmes touches (Q, W, E, R) que la fiche française.
Pour ajouter une langue : une entrée dans LANGS et ses textes dans src/i18n.js, son drapeau dans src/components/LanguageSwitcher.jsx, puis un dossier de fiches traduites.
À faire
Les prochaines tâches sont listées dans TODO.md.
Mentions légales
LoL en 1 minute n'est pas approuvé par Riot Games et ne reflète pas les opinions de Riot Games ni de quiconque officiellement impliqué dans la production ou la gestion de League of Legends. League of Legends et Riot Games sont des marques commerciales ou des marques déposées de Riot Games, Inc.
