translate 4-typing-game-readme in french

4 years ago · acd5c49a48
parent 8eccc93bd7
commit acd5c49a48
1 changed files with 70 additions and 70 deletions
--- a/4-typing-game/typing-game/translations/README.fr.md
+++ b/4-typing-game/typing-game/translations/README.fr.md
@ -14,7 +14,7 @@ La façon dont nous marquons une section de code que nous voulons exécuter cons

 Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter.

-> **NOTE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre.
+> **REMARQUE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre.

 ### Les événements courants

@ -45,7 +45,7 @@ Nous aurons besoin de trois fichiers au total : **index.html**, **script.js** et
 - Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante :

 ```bash
-# Linux or macOS
+# Linux ou macOS
 mkdir typing-game && cd typing-game

 # Windows
@ -74,10 +74,10 @@ Si nous explorons les exigences, nous savons que nous aurons besoin d'une poign

 Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer.

-Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant :
+Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant:

 ```html
-<!-- dans index.html -->
+<!-- A l'intrieur de index.html -->
 <html>
 <head>
  <title>Typing game</title>
@ -86,7 +86,7 @@ Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant :
 <body>
  <h1>Typing game!</h1>
  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
-  <p id="quote"></p> <!-- Ceci affichera nos citations -->
+  <p id="quote"></p> <!-- Ceci affichera notre citation -->
  <p id="message"></p> <!-- Ceci affichera chaque messages d'état -->
  <div>
    <input type="text" aria-label="current word" id="typed-value" /> <!-- La zone de texte pour la saisie -->
@ -138,11 +138,11 @@ Créez un nouveau fichier nommé **style.css** et ajoutez la syntaxe suivante.

 ## JavaScript

-Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes :
+Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes:

- [Créer les constantes](#add-the-constants)
- [Écouteur d'événement pour démarrer le jeu](#add-start-logic)
- [Écouteur d'événement de saisie](#add-typing-logic)
+- [Créer les constantes](#ajouter-les-constantes)
+- [Écouteur d'événement pour démarrer le jeu](#ajouter-une-logique-de-démarrage)
+- [Écouteur d'événement de saisie](#ajouter-une-logique-de-frappe)

 Mais d'abord, créez un nouveau fichier nommé **script.js**.

@ -157,8 +157,8 @@ Nous allons avoir besoin de quelques éléments pour nous faciliter la programma

 Nous allons également vouloir des références aux éléments de l'interface utilisateur :

- La zone de texte (**typée-valeur**)
- L'affichage du devis (**devis**)
+- La zone de texte (**typed-value**)
+- L'affichage de la citation (**quote**)
 - Le message (**message**)

 ```javascript
@ -201,112 +201,112 @@ Pour commencer le jeu, le joueur cliquera sur démarrer. Bien sûr, nous ne savo
 Lorsque l'utilisateur clique sur **démarrer**, nous devons sélectionner un devis, configurer l'interface utilisateur et configurer le suivi pour le mot et la synchronisation actuels. Vous trouverez ci-dessous le JavaScript que vous devrez ajouter ; nous en discutons juste après le bloc de script.

 ```javascript
-// at the end of script.js
+// à la fin de script.js
 document.getElementById('start').addEventListener('click', () => {
-  // get a quote
+  // obtenir une citation
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
-  // Put the quote into an array of words
+  // Mettre la citation dans un tableau de mots
  words = quote.split(' ');
-  // reset the word index for tracking
+  // réinitialiser l'index des mots pour le suivi
  wordIndex = 0;

-  // UI updates
-  // Create an array of span elements so we can set a class
+  // Mises à jour de l'interface utilisateur
+  // Crée un tableau d'éléments "span" afin que nous puissions définir une classe
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
-  // Convert into string and set as innerHTML on quote display
+  // Convertir en chaîne et définir comme innerHTML sur l'affichage de la citation
  quoteElement.innerHTML = spanWords.join('');
-  // Highlight the first word
+  // Met en surbrillance le premier mot
  quoteElement.childNodes[0].className = 'highlight';
-  // Clear any prior messages
+  // Effacer tous les messages précédents
  messageElement.innerText = '';

-  // Setup the textbox
-  // Clear the textbox
+  // Configurer la zone de texte
+  // Efface la zone de texte
  typedValueElement.value = '';
-  // set focus
+  // définie le focus
  typedValueElement.focus();
-  // set the event handler
+  // définir le gestionnaire d'événements

-  // Start the timer
+  // Lancer le chronomètre
  startTime = new Date().getTime();
 });
 ```

-Let's break down the code!
+Décomposons le code !

- Setup the word tracking
-  - Using [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) allows us to randomly select a quote from the `quotes` array
-  - We convert the `quote` into an array of `words` so we can track the word the player is currently typing
-  - `wordIndex` is set to 0, since the player will start on the first word
- Setup the UI
-  - Create an array of `spanWords`, which contains each word inside a `span` element
-    - This will allow us to highlight the word on the display
-  - `join` the array to create a string which we can use to update the `innerHTML` on `quoteElement`
-    - This will display the quote to the player
-  - Set the `className` of the first `span` element to `highlight` to highlight it as yellow
-  - Clean the `messageElement` by setting `innerText` to `''`
- Setup the textbox
-  - Clear the current `value` on `typedValueElement`
-  - Set the `focus` to `typedValueElement`
- Start the timer by calling `getTime`
+- Configurer le suivi des mots
+  - L'utilisation de [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) et [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nous permet de sélectionner au hasard une citation dans le tableau `quotes`
+  - Nous convertissons la `quote` en un tableau de `words` afin que nous puissions suivre le mot que le joueur est en train de taper
+  - `wordIndex` est mis à 0, puisque le lecteur commencera sur le premier mot
+- Configurer l'interface utilisateur
+  - Créez un tableau de `spanWords`, qui contient chaque mot à l'intérieur d'un élément `span`
+    - Cela nous permettra de mettre en évidence le mot sur l'écran
+  - Il `join` (rejoins) le tableau pour créer une chaîne que nous pouvons utiliser pour mettre à jour le `innerHTML` sur `quoteElement`
+    - Cela affichera la citation au joueur
+  - Définissez le `className` du premier élément `span` sur `highlight` pour le mettre en surbrillance en jaune
+  - Vider le `messageElement` en définissant `innerText` sur `''`
+- Configurer la zone de texte
+  - Effacer la `value` actuelle sur `typedValueElement`
+  - Définir `focus` sur `typedValueElement`
+- Démarrez le chronomètre en appelant `getTime`

-### Add typing logic
+### Ajouter une logique de saisie

-As the player types, an `input` event will be raised. This event listener will check to ensure the player is typing the word correctly, and handle the current status of the game. Returning to **script.js**, add the following code to the end. We will break it down afterwards.
+Au fur et à mesure que le joueur tape, un événement d'`input` sera déclenché. Cet écouteur d'événement vérifiera que le joueur tape correctement le mot et gérera l'état actuel du jeu. De retour à **script.js**, ajoutez le code suivant à la fin. Nous le décomposerons par la suite.

 ```javascript
 // at the end of script.js
 typedValueElement.addEventListener('input', () => {
-  // Get the current word
+  // Obtenir le mot actuel
  const currentWord = words[wordIndex];
-  // get the current value
+  // obtenir la valeur actuelle
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
-    // end of sentence
-    // Display success
+    // fin de phrase
+    // Afficher le succès
    const elapsedTime = new Date().getTime() - startTime;
    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
    messageElement.innerText = message;
  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
-    // end of word
-    // clear the typedValueElement for the new word
+    // fin de mot
+    // efface le typedValueElement pour le nouveau mot
    typedValueElement.value = '';
-    // move to the next word
+    // passer au mot suivant
    wordIndex++;
-    // reset the class name for all elements in quote
+    // réinitialiser le nom de classe pour tous les éléments entre guillemets
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
-    // highlight the new word
+    // mettre en évidence le nouveau mot
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
-    // currently correct
-    // highlight the next word
+    // actuellement correct
+    // surligner le mot suivant
    typedValueElement.className = '';
  } else {
-    // error state
+    // état d'erreur
    typedValueElement.className = 'error';
  }
 });
 ```

-Let's break down the code! We start by grabbing the current word and the value the player has typed thus far. Then we have waterfall logic, where we check if the quote is complete, the word is complete, the word is correct, or (finally), if there is an error.
-
- Quote is complete, indicated by `typedValue` being equal to `currentWord`, and `wordIndex` being equal to one less than the `length` of `words`
-  - Calculate `elapsedTime` by subtracting `startTime` from the current time
-  - Divide `elapsedTime` by 1,000 to convert from milliseconds to seconds
-  - Display a success message
- Word is complete, indicated by `typedValue` ending with a space (the end of a word) and `typedValue` being equal to `currentWord`
-  - Set `value` on `typedElement` to be `''` to allow for the next word to be typed
-  - Increment `wordIndex` to move to the next word
-  - Loop through all `childNodes` of `quoteElement` to set `className` to `''` to revert to default display
-  - Set `className` of the current word to `highlight` to flag it as the next word to type
- Word is currently typed correctly (but not complete), indicated by `currentWord` started with `typedValue`
-  - Ensure `typedValueElement` is displayed as default by clearing `className`
- If we made it this far, we have an error
-  - Set `className` on `typedValueElement` to `error`
+Décomposons le code ! Nous commençons par saisir le mot actuel et la valeur que le joueur a tapée jusqu'à présent. Ensuite, nous avons une logique en cascade, où nous vérifions si la citation est complète, le mot est complet, le mot est correct ou (enfin) s'il y a une erreur.
+
+- La citation est complète, indiquée par `typedValue` étant égal à `currentWord`, et `wordIndex` étant égal à un de moins que la `length` de `words`
+  - Calculez `elapsedTime` en soustrayant `startTime` de l'heure actuelle
+  - Divisez `elapsedTime` par 1 000 pour convertir des millisecondes en secondes
+  - Afficher un message de succès
+- Le mot est complet, indiqué par `typedValue` se terminant par un espace (la fin d'un mot) et `typedValue` étant égal à `currentWord`
+  - Définissez `value` de `typedElement` sur `''` pour permettre la saisie du mot suivant
+  - Incrémentez `wordIndex` pour passer au mot suivant
+  - Parcourez tous les `childNodes` de `quoteElement` pour définir `className` à `''` pour revenir à l'affichage par défaut
+  - Définissez le `className` du mot actuel sur `highlight` pour le marquer comme le prochain mot à taper
+- Le mot est actuellement tapé correctement (mais pas complet), indiqué par `currentWord` commencé par `typedValue`
+  - Assurez-vous que `typedValueElement` est affiché par défaut en effaçant `className`
+- Si nous sommes arrivés jusqu'ici, nous avons une erreur
+  - Définissez `className` de `typedValueElement` à `error`

 ## Testez votre application