#33 Ajout du Thème + Difficulté

#24 Modification du CSS pour la difficulté et la navbar / footer sur la page d'accueil

src/components/App/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Footer () {
+	return (
+		<footer>
+			<p>&copy; 2024 Mini Jeux en Ligne. Tous droits réservés.</p>
+		</footer>
+	)
+}

src/components/App/Navbar.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function Navbar () {
+	return (
+		<div>
+			<header>
+				Motus Game
+			</header>
+
+			<nav>
+				<Link to='/'>Accueil</Link>
+				<a href="#">Aléatoire</a>
+				<a href="#">Contact</a>
+			</nav>
+		</div>
+	)
+}

src/home/App.tsx

@@ -4,43 +4,47 @@ import './styles/App.css'
 import { useNavigate } from 'react-router-dom'
 import useApi from '../hook/useApi'
 import type { Theme } from '../type'
+import Navbar from '../components/App/Navbar'
+import Footer from '../components/App/Footer'
 
 export default function App () {
 	const navigate = useNavigate()
 	const { data } = useApi<Theme[]>('/theme')
 
-	console.log(data)
-
 	interface FormData {
 		theme: string
-		alias: JSON
+		style: string
 	}
 
 	const handleRequest = (formData: FormData) => {
 		navigate('/motus/difficulty', { state: formData })
 	}
 
 	if (!data) {
-		return <div>Loading...</div>
+		return <div>Une erreur est survenue lors du chargement de l&apos;API.</div>
+	} else {
+		return (
+			<div>
+				<Navbar/>
+				<main>
+					{data.map((theme, index) => (
+						<div className="game" key={theme.id}>
+							<img src={theme.image} alt={theme.name}/>
+							<div className="game-content">
+								<h2>{theme.name}</h2>
+								<button onClick={() => {
+									handleRequest({
+										theme: theme.name,
+										style: theme.style
+									})
+								}}>Sélectionner
+								</button>
+							</div>
+						</div>
+					))}
+				</main>
+				<Footer/>
+			</div>
+		)
 	}
-
-	return (
-		<main>
-			{data.map((theme, index) => (
-				<div className="game" key={theme.id}>
-					<img src={theme.image} alt={theme.name}/>
-					<div className="game-content">
-						<h2>{theme.name}</h2>
-						<button onClick={() => {
-							handleRequest({
-								theme: theme.name,
-								alias: theme.alias
-							})
-						}}>Sélectionner
-						</button>
-					</div>
-				</div>
-			))}
-		</main>
-	)
 }

src/home/Difficulty.tsx

@@ -2,91 +2,61 @@ import React from 'react'
 import './styles/styles.css'
 import './styles/Difficulty.css'
 import { Navigate, useLocation, useNavigate } from 'react-router-dom'
+import useApi from '../hook/useApi'
+import type { DifficultyType } from '../type'
 
 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
 	}
+	const { data } = useApi<DifficultyType[]>('/difficulty')
 
 	interface FormData {
 		difficulty: string
 		tip: number
 		attempts: number
 		color: boolean
 		theme: string
-		alias: string
+		style: string
 	}
 
 	const handleRequest = (formData: FormData) => {
 		navigate('/motus/game', { state: formData })
 	}
 
-	return (
-		<div className="container">
-			<h1>Sélectionnez votre difficulté</h1>
-			<div className="difficulty">
-				<label htmlFor="easy">
-					<input type="radio" id="easy" name="difficulty" value="easy"/>
-					<img onClick={() => {
-						handleRequest({
-							difficulty: 'Facile',
-							tip: 1,
-							attempts: 10,
-							color: true,
-							theme: location.state.theme,
-							alias: location.state.alias
-						})
-					}} src="https://via.placeholder.com/100?text=Facile" alt="Facile"/>
-				</label>
-				<label htmlFor="medium">
-					<input type="radio" id="medium" name="difficulty" value="medium"/>
-					<img onClick={() => {
-						handleRequest({
-							difficulty: 'Moyen',
-							tip: 1,
-							attempts: 7,
-							color: true,
-							theme: location.state.theme,
-							alias: location.state.alias
-						})
-					}} src="https://via.placeholder.com/100?text=Moyen" alt="Moyen"/>
-				</label>
-				<label htmlFor="hard">
-					<input type="radio" id="hard" name="difficulty" value="hard"/>
-					<img onClick={() => {
-						handleRequest({
-							difficulty: 'Difficile',
-							tip: 1,
-							attempts: 5,
-							color: true,
-							theme: location.state.theme,
-							alias: location.state.alias
-						})
-					}} src="https://via.placeholder.com/100?text=Difficile" alt="Difficile"/>
-				</label>
-				<label htmlFor="impossible">
-					<input type="radio" id="hard" name="difficulty" value="impossible"/>
-					<img onClick={() => {
-						handleRequest({
-							difficulty: 'Impossible',
-							tip: 1,
-							attempts: 3,
-							color: false,
-							theme: location.state.theme,
-							alias: location.state.alias
-						})
-					}} src="https://via.placeholder.com/100?text=Impossible" alt="Impossible"/>
-				</label>
-			</div>
-			<div id="selected-difficulty"></div>
+	if (!data) {
+		return <div>Une erreur est survenue lors du chargement de l&apos;API.</div>
+	} else {
+		return (
+			<div className="container">
+				<h1>Sélectionnez votre difficulté</h1>
+				<div className="difficulty">
+					{data.map((difficulty, index) => (
+						<label htmlFor={difficulty.alias} key={index}>
+							<input type="radio" id={difficulty.alias} name="difficulty" value={difficulty.alias}/>
+							<img onClick={() => {
+								handleRequest({
+									difficulty: difficulty.name,
+									tip: difficulty.tips,
+									attempts: difficulty.attempts,
+									color: difficulty.color,
+									theme: location.state.theme,
+									style: location.state.style
+								})
+							}} src={'https://via.placeholder.com/100?text=' + difficulty.name} alt="Facile"/>
+						</label>
+					))}
+				</div>
+				<div id="selected-difficulty"></div>
 
-			<div className="background-shapes">
-				<div className="shape shape1"></div>
-				<div className="shape shape2"></div>
-				<div className="shape shape3"></div>
+				<div className="background-shapes">
+					<div className="shape shape1"></div>
+					<div className="shape shape2"></div>
+					<div className="shape shape3"></div>
+				</div>
 			</div>
-		</div>
-	)
+		)
+	}
 }

src/home/Motus.tsx

@@ -28,7 +28,7 @@ export default function Motus () {
 		navigate('/motus', {})
 	}
 
-	const theme: string = location.state.theme
+	const theme: string = location.state.style
 
 	useEffect(() => {
 		document.body.classList.add(theme) // Récupérer la classe envoyée

src/home/styles/App.css

@@ -7,36 +7,6 @@
     width: 100%;
 }
 
-.input {
-    background-image: url('../../resources/images/retry-bg.png');
-    border-radius: 20px;
-    border: 3px solid #30363d;
-    height: 80px;
-    width: 90%;
-}
-
-.parent-items {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 30px 200px;
-}
-
-.container-elements {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-}
-
-.items {
-    border-radius: 20px;
-    background-color: rgba(70, 75, 77, 0.8);
-    margin: 20px;
-    padding: 20px;
-}
-
 h2, p {
     color: white;
     text-decoration: none;
@@ -104,6 +74,7 @@ main {
     justify-content: center;
     flex-wrap: wrap;
     gap: 30px;
+    min-height: calc(100vh - 169px - 76px - 60px);
 }
 
 .game {
@@ -163,3 +134,47 @@ main {
 .game button:hover {
     background: #5f79e0;
 }
+
+nav {
+    background: #fff;
+    padding: 15px 0;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+}
+
+nav a {
+    color: #333;
+    text-decoration: none;
+    margin: 0 15px;
+    font-size: 18px;
+    transition: color 0.3s;
+}
+
+nav a:hover {
+    color: #4e54c8;
+}
+
+footer {
+    background: #4e54c8;
+    color: #fff;
+    padding: 30px 0;
+    text-align: center;
+    margin-top: 30px;
+}
+
+footer p {
+    margin: 0;
+    font-size: 14px;
+}
+
+header {
+    background: linear-gradient(to right, #4e54c8, #8f94fb);
+    color: #fff;
+    padding: 30px 0;
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 24px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}

src/type.ts

@@ -8,7 +8,16 @@ export interface Word {
 export interface Theme {
 	id: number
 	name: string
-	alias: JSON
+	style: string
 	image: string
 	words: Word[]
 }
+
+export interface DifficultyType {
+	id: number
+	name: string
+	tips: number
+	attempts: number
+	color: boolean
+	alias: string
+}