#24 Modification des boutons, correction d'oublis sur une balise, mod…

…ification de la route de boutons

src/components/DictionaryRuleProcessor.tsx

@@ -50,7 +50,7 @@ export default function DictionaryRuleProcessor ({
 			<div className="color-code">
 				<p>Code couleur du jeu : </p>
 				<li>🟩 : La lettre est bien placée</li>
-				<p>🟧 : La lettre est présente dans le mot</p>
+				<li>🟧 : La lettre est présente dans le mot</li>
 			</div>
 		)
 	}

src/components/DifficultyRules.tsx

@@ -37,7 +37,7 @@ export default function DifficultyRules ({ answer }: DifficultyRulesProps) {
 					<p>☄️ {locationDifficulty.isColor() ? 'Couleur autorisée' : 'Couleur non autorisée'}</p>
 				</div>
 				<div className="rules">
-					<button onClick={handleClick} className='button-style'>Besoin d&rsquo;un indice ?</button>
+					<button onClick={handleClick}>Besoin d&rsquo;un indice ?</button>
 				</div>
 			</div>
 		)

src/home/Difficulty.tsx

@@ -5,11 +5,14 @@ import easy from '../resources/images/black_swan.png'
 import medium from '../resources/images/jingliu.png'
 import hard from '../resources/images/sparkle.png'
 import impossible from '../resources/images/ruan_mei.png'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Navigate, useLocation, useNavigate } from 'react-router-dom'
 
 export default function Difficulty () {
 	const navigate = useNavigate()
 	const location = useLocation()
+	if (location.state.theme === undefined || location.state.theme === null) {
+		return <Navigate to="/"/> // Rediriger vers la page de base
+	}
 
 	interface FormData {
 		difficulty: string

src/home/Motus.tsx

@@ -5,7 +5,7 @@ import DictionaryRuleProcessor from '../components/DictionaryRuleProcessor'
 import WordHistory from '../components/WordHistory'
 import InputAnswer from '../components/InputAnswer'
 import DifficultyRules from '../components/DifficultyRules'
-import { Link, Navigate, useLocation } from 'react-router-dom'
+import { Navigate, useLocation, useNavigate } from 'react-router-dom'
 import HealthTry from '../components/HealthTry'
 import { LocationDifficulty } from '../entities/LocationDifficulty'
 
@@ -14,15 +14,20 @@ export default function Motus () {
 	const [historyInput, setHistoryInput] = useState<string[]>([])
 	const [inputValue, setInputValue] = useState<string>('')
 	const location = useLocation()
-	if (location.state === undefined || location.state === null) {
-		return <Navigate to="/motus"/> // Rediriger vers la page de base
+	const navigate = useNavigate()
+	if (location.state.difficulty === undefined || location.state.difficulty === null) {
+		return <Navigate to="/"/> // Rediriger vers la page de base
 	}
 	const locationDifficulty = new LocationDifficulty(location)
 
 	const reloadPage = () => {
 		window.location.reload()
 	}
 
+	const handleNavigate = () => {
+		navigate('/motus', {})
+	}
+
 	const theme: string = location.state.theme
 
 	useEffect(() => {
@@ -62,8 +67,8 @@ export default function Motus () {
 					/>
 				</div>
 				<div className="retry">
-					<Link to='/' className='button-style'>Page d&rsquo;accueil</Link>
-					<button onClick={reloadPage} className="button-style">Recommencer</button>
+					<button onClick={handleNavigate}>Page d&rsquo;accueil</button>
+					<button onClick={reloadPage}>Recommencer</button>
 				</div>
 			</div>
 			<DifficultyRules answer={answer}/>

src/home/styles/App.css

@@ -50,9 +50,11 @@ button {
     color: white;
     text-decoration: none;
     padding: 10px;
-    background-color: #e58585;
+    background-color: var(--init-border-color);
     border-radius: 10px;
     border-color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
 .items img {