#30 Ajout de la possibilité de choisir un thème + CSS Page d'accueil

src/home/App.tsx

@@ -1,12 +1,76 @@
 import React from 'react'
 import './styles/styles.css'
 import './styles/App.css'
-import heart from '../resources/images/blue_heart.png'
+import { useNavigate } from 'react-router-dom'
+import minecraft from '../resources/themes/minecraft/icon.png'
+import sao from '../resources/themes/sword_art_online/icon.png'
+import hsr from '../resources/themes/honkai_star_rail/icon.png'
 
 export default function App () {
+	const navigate = useNavigate()
+
+	interface FormData {
+		theme: string
+	}
+
+	const handleRequest = (formData: FormData) => {
+		navigate('/motus/difficulty', { state: formData })
+	}
+
 	return (
-		<div className='container'>
-			<img src={heart} height='300' width='300'/>
+		<div>
+			<h1>Sélectionnez un thème</h1>
+			<div className="">
+				<div className="container-elements">
+					<div className="items">
+						<div className="head-items">
+							<img src={minecraft} alt="sla"/>
+							<h2>Minecraft</h2>
+						</div>
+						<p>Offre des conseils dans le domaine informatique</p>
+						<button onClick={() => {
+							handleRequest({
+								theme: 'minecraft'
+							})
+						}}>Sélectionner
+						</button>
+					</div>
+					<div className="items">
+						<div className="head-items">
+							<img src={sao} alt="sla"/>
+							<h2>Sword Art Online</h2>
+						</div>
+						<p>Ce service d’équipement et logiciel vous offre une solution complète pour répondre à vos
+							besoins
+							informatiques. De la sélection à l’installation, nous vous accompagnons pour garantir
+							un environnement de travail optimal. Nous nous assurerons de vous faire acquérir et de vous
+							installer des équipements matériels et logiciels.</p>
+						<button onClick={() => {
+							handleRequest({
+								theme: 'sao'
+							})
+						}}>Sélectionner
+						</button>
+					</div>
+					<div className="items">
+						<div className="head-items">
+							<img src={hsr} alt="sla"/>
+							<h2>Honkai Star Rail</h2>
+						</div>
+						<p>Ce service de Solutions de Stockage offre une expertise spécialisée pour répondre à vos
+							besoins
+							de gestion de données. Nous proposons des conseils stratégiques et des solutions
+							personnalisées,
+							allant de la migration vers le cloud à la mise en place de sauvegardes automatiques.</p>
+						<button onClick={() => {
+							handleRequest({
+								theme: 'hsr'
+							})
+						}}>Sélectionner
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	)
 }

src/home/Difficulty.tsx

@@ -5,16 +5,18 @@ 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 { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export default function Difficulty () {
 	const navigate = useNavigate()
+	const location = useLocation()
 
 	interface FormData {
 		difficulty: string
 		tip: number
 		attempts: number
 		color: boolean
+		theme: string
 	}
 
 	const handleRequest = (formData: FormData) => {
@@ -31,31 +33,35 @@ export default function Difficulty () {
 						difficulty: 'Facile',
 						tip: 1,
 						attempts: 10,
-						color: true
+						color: true,
+						theme: location.state.theme
 					})
 				}} src={easy} alt="easy" width="300"/>
 				<img onClick={() => {
 					handleRequest({
 						difficulty: 'Moyen',
 						tip: 1,
 						attempts: 7,
-						color: true
+						color: true,
+						theme: location.state.theme
 					})
 				}} src={medium} alt="medium" width="300"/>
 				<img onClick={() => {
 					handleRequest({
 						difficulty: 'Difficile',
 						tip: 1,
 						attempts: 5,
-						color: true
+						color: true,
+						theme: location.state.theme
 					})
 				}} src={hard} alt="hard" width="300"/>
 				<img onClick={() => {
 					handleRequest({
 						difficulty: 'Impossible',
 						tip: 1,
 						attempts: 3,
-						color: false
+						color: false,
+						theme: location.state.theme
 					})
 				}} src={impossible} alt="impossible" width="300"/>
 			</div>

src/home/Motus.tsx

@@ -23,11 +23,13 @@ export default function Motus () {
 		window.location.reload()
 	}
 
+	const theme: string = location.state.theme
+
 	useEffect(() => {
-		document.body.classList.add('minecraft') // Récupérer la classe envoyée
+		document.body.classList.add(theme) // Récupérer la classe envoyée
 
 		return () => {
-			document.body.classList.remove('minecraft')
+			document.body.classList.remove(theme)
 		}
 	}, [])
 

src/home/styles/App.css

@@ -13,4 +13,85 @@
     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;
+}
+
+p {
+    font-size: 1.2em;
+}
+
+button {
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    background-color: #e58585;
+    border-radius: 10px;
+    border-color: white;
+}
+
+.items img {
+    width: 100px;
+    height: 100px;
+}
+
+.head-items {
+    display: flex;
+    align-items: center;
+}
+
+.head-items > * {
+    margin: 10px;
+}
+
+.nav-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+    width: 100%;
+    background-color: rgba(221, 238, 244, 0.5);
+}
+
+.nav-item {
+    margin-right: 30px;
+    margin-left: 30px;
+}
+
+.nav-item a {
+    color: white;
+    padding: 10px;
+    text-decoration: none;
+    font-size: 25px;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}