✨ (Game): Help popup

Help popup to learn how to play

src/components/Help/Help.tsx

@@ -0,0 +1,43 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Assets --------------------------------------------------------
+import Close from '../../assets/close';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Help = ({ onClose }: { onClose: () => void }) => {
+	return (
+		<div className='helpContainer'>
+			<div className='helpPopup'>
+				<div className='header'>
+					<p className='title'>Comment jouer ?</p>
+					<button
+						className='closeButton'
+						onClick={onClose}
+					>
+						<Close />
+					</button>
+				</div>
+				<div className='content'>
+					<p>
+						Pour commencer, il suffit de cliquer n'importe où sur la grille.
+						<br />
+						Les cases vides vont alors se dévoiler jusqu'à atteindre les cases contenant des numéros.
+						<br />
+						<br />
+						Chaque numéro indique que dans les 8 cases autour de celle-ci, il y a X bombes (numéro affiché).
+						<br />
+						Le but est de dévoiler toute la grille sans faire exploser une bombe en cliquant dessus.
+						<br />
+						<br />
+						Pour éviter tout accident, vous pouvez poser un drapeau sur les cases où vous pensez qu'il y a une bombe en faisant clic droit. Le clic sera alors désactivé jusqu'à ce que vous retiriez le drapeau.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Help;