8 définition dune couleur en fonction du placement des lettres (#26)

* #8 Ajout de couleurs par rapport aux placements des lettres bien placé ou pas + ajouts de quelques verifications d'erreurs + commentaires

* #8 Suppression des messages d'ESLint

---------

Co-authored-by: Ephraim Adda <adda.ephraim@gmail.com>

src/components/InputAnswer.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import words from 'an-array-of-french-words'
 import { useLocation } from 'react-router-dom'
 
 export type WordHistoryProps = {
@@ -15,6 +16,7 @@ export default function InputAnswer ({
 	inputValue,
 	setInputValue
 }: WordHistoryProps) {
+	const [textErrorInput, setTextErrorInput] = useState<string>('')
 	const nbInputStringLeft = answer.length - inputValue.length
 	const location = useLocation()
 	const locationState = location.state
@@ -27,6 +29,20 @@ export default function InputAnswer ({
 	function verifyInput (answer: string) {
 		if (inputValue.length !== answer.length) return false // si pas la bonne longueur
 		if (!/^[a-zA-Z]*$/.test(inputValue)) return false // si pas que des lettres
+		if (!errorInput(inputValue.toLowerCase())) return false // si pas dans le dictionnaire
+		if (historyInput.includes(inputValue.toUpperCase())) { // si déjà utilisé
+			setTextErrorInput('Le mot ' + inputValue + ' a déjà été utilisé. Choisissez un autre mot.')
+			return false
+		}
+		return true
+	}
+
+	function errorInput (InputValue: string) {
+		if (!(words as any[]).includes(inputValue.toLowerCase())) {
+			setTextErrorInput('Le mot ' + inputValue + ' n\'existe pas dans le dictionnaire. Veuillez réessayer.') // erreur
+			return false
+		}
+		setTextErrorInput('') // reset de l'erreur
 		return true
 	}
 
@@ -63,6 +79,7 @@ export default function InputAnswer ({
 						   placeholder="Entrez votre réponse" onKeyDown={handlePressEnter}></input>
 					<button onClick={handleClick}>Envoyer</button>
 					<p>{nbInputStringLeft}</p>
+          <p>{textErrorInput}</p>
 				</div>
 			</div>
 		)

src/components/WordHistory.tsx

@@ -5,18 +5,34 @@ export type WordHistoryProps = {
 	historyInput: string[]
 	inputValue: string
 }
-export default function WordHistory ({ answer, historyInput, inputValue }: WordHistoryProps) {
-	// state
+export default function WordHistory ({
+	answer,
+	historyInput,
+	inputValue
+}: WordHistoryProps) {
+	const wordLetter = answer.split('')
+
+	const verifyLetter = (letter: string, index: number, wordLetter: string[]) => {
+		if (letter === wordLetter[index]) {
+			return 'green'
+		} else if (answer.includes(letter)) {
+			return 'orange'
+		} else {
+			return 'red'
+		}
+	}
 
 	// render
 	return (
 		<div>
 			<p>{inputValue}</p>
-			<ul>
-				{historyInput.map((answer) => (
-					<li key={answer}>{answer}</li>
-				))}
-			</ul>
+			{historyInput.map((answer, index) => (
+				<div key={index} className={'container-history'}>
+					{answer.split('').map((letter, indexLetter) => (
+						<p key={indexLetter} className={verifyLetter(letter, indexLetter, wordLetter)}>{letter}</p>
+					))}
+				</div>
+			))}
 		</div>
 	)
 }

src/home/Motus.css

@@ -96,6 +96,27 @@ p {
     color: red;
 }
 
+.container-history {
+    display: flex;
+}
+
+.container-history p {
+    margin-right: 5px;
+    padding: 10px;
+}
+
+.green {
+    background: green;
+}
+
+.red {
+    background: red;
+}
+
+.orange {
+    background: orange;
+}
+
 .lose-game {
     display: flex;
     justify-content: center;