✨ Integrated Home comp with the game comp

src/components/Home/Home.tsx

@@ -1,27 +1,79 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Styles --------------------------------------------------------
+import { useRef } from 'react';
 import './styles.scss';
+import { useRecoilState } from 'recoil';
+import { gameStateAtom } from '../../contexts/gameState';
+// ---------------------------------------------------------------------------------------------------------------------
 
 const Home = () => {
+	const difficultyRef = useRef<HTMLSelectElement>(null);
+	const sizeRef = useRef<HTMLSelectElement>(null);
+
+	const [, setGameState] = useRecoilState(gameStateAtom);
+
+	const onClick = () => {
+		if (difficultyRef.current !== null && sizeRef.current !== null) {
+			const difficulty = difficultyRef.current.value;
+			const size = sizeRef.current.value;
+
+			setGameState((prev) => ({
+				...prev,
+				difficulty: difficulty,
+				gridSize: parseInt(size),
+				status: 'idle',
+			}));
+		}
+	};
+
 	return (
 		<div className='gameContainer'>
-			<h1 className='gameTitle'>Démineur</h1>
+			<h1 className='title'>Démineur</h1>
+
 			<div className='settingsContainer'>
 				<div className='selectorBox'>
-					<p className='chooseTitle'>Choisissez la taille de la grille</p>
-					<select className='parameterBox'>
-						<option value='little'>Petit</option>
-						<option value='medium'>Moyen</option>
-						<option value='big'>Grand</option>
+					<p className='settingLabel'>Taille de la grille</p>
+					<select
+						ref={sizeRef}
+						className='select'
+					>
+						<option
+							value='12'
+							selected
+						>
+							Petit
+						</option>
+						<option value='16'>Moyen</option>
+						<option value='20'>Grand</option>
 					</select>
 				</div>
+
 				<div className='selectorBox'>
-					<p className='chooseTitle'>Choisissez votre niveau</p>
-					<select className='parameterBox'>
-						<option value='easy'>Facile</option>
-						<option value='medium'>Moyen</option>
-						<option value='hard'>Difficile</option>
+					<p className='settingLabel'>Difficulté</p>
+					<select
+						ref={difficultyRef}
+						className='select'
+					>
+						<option
+							value='beginner'
+							selected
+						>
+							Facile
+						</option>
+						<option value='intermediate'>Moyen</option>
+						<option value='expert'>Difficile</option>
 					</select>
 				</div>
-				<button className='startGameBtn'>Commencer</button>
+
+				<button
+					className='startButton'
+					onClick={onClick}
+				>
+					Commencer
+				</button>
 			</div>
 		</div>
 	);