✨ (Game): Help popup

Help popup to learn how to play

src/App.scss

@@ -17,4 +17,25 @@
 			width: 75px;
 		}
 	}
+
+	& > .helpButton {
+		display: grid;
+		grid-template-columns: 20px 1fr;
+		align-items: center;
+		gap: 5px;
+		padding: 10px 15px;
+		border: 2px solid #f39440;
+		border-radius: 5px;
+		background-color: #ffdccb;
+		font-size: 0.9em;
+		font-weight: 600;
+		color: #f39440;
+		opacity: 0.7;
+		cursor: pointer;
+		transition: opacity 0.3s ease;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
 }

src/App.tsx

@@ -2,6 +2,10 @@
 //!                                                       Imports
 // ---------------------------------------------------------------------------------------------------------------------
 
+// ------------------------------------------------------ React --------------------------------------------------------
+import { useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
 // ----------------------------------------------------- Context -------------------------------------------------------
 import { RecoilRoot } from 'recoil';
 // ---------------------------------------------------------------------------------------------------------------------
@@ -10,14 +14,18 @@ import { RecoilRoot } from 'recoil';
 import Grid from './components/Grid/Grid';
 import Timer from './components/Stats/Timer/Timer';
 import MinesCounter from './components/Stats/MinesCounter/MinesCounter';
+import Help from './components/Help/Help';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ----------------------------------------------------- Styles --------------------------------------------------------
-import './App.scss';
 import Logo from './assets/logo';
+import './App.scss';
+import Question from './assets/question';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const App = () => {
+	const [helpDisplayed, displayHelp] = useState(false);
+
 	return (
 		<div className='App'>
 			<RecoilRoot>
@@ -27,7 +35,21 @@ const App = () => {
 					<MinesCounter />
 				</div>
 				<Grid />
+				<button
+					className='helpButton'
+					onClick={() => displayHelp(true)}
+				>
+					<Question />
+					<span>Comment jouer</span>
+				</button>
 			</RecoilRoot>
+			{helpDisplayed && (
+				<Help
+					onClose={() => {
+						displayHelp(false);
+					}}
+				/>
+			)}
 		</div>
 	);
 };

src/assets/close.tsx

@@ -0,0 +1,20 @@
+const Close = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M368 368L144 144M368 144L144 368'
+			/>
+		</svg>
+	);
+};
+
+export default Close;

src/assets/question.tsx

@@ -0,0 +1,26 @@
+const Question = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M160 164s1.44-33 33.54-59.46C212.6 88.83 235.49 84.28 256 84c18.73-.23 35.47 2.94 45.48 7.82C318.59 100.2 352 120.6 352 164c0 45.67-29.18 66.37-62.35 89.18S248 298.36 248 324'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeMiterlimit='10'
+				strokeWidth='40'
+			/>
+			<circle
+				cx='248'
+				cy='399.99'
+				r='32'
+				fill='currentColor'
+			/>
+		</svg>
+	);
+};
+
+export default Question;

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;

src/components/Help/styles.scss

@@ -0,0 +1,62 @@
+.helpContainer {
+	z-index: 10;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100svw;
+	height: 100svh;
+	background-color: rgba(0, 0, 0, 0.4);
+	backdrop-filter: blur(7px);
+
+	& > .helpPopup {
+		display: flex;
+		flex-direction: column;
+		width: 95svw;
+		max-width: 600px;
+		border-radius: 5px;
+		background-color: #ffeee5;
+		color: #f39440;
+
+		& > .header {
+			display: grid;
+			grid-template-columns: 1fr 30px;
+			gap: 30px;
+			padding: 15px;
+			border-bottom: 1px solid #f39440;
+			box-shadow: 0 0 3px #ffdccb;
+			clip-path: inset(0 0 -3px 0);
+
+			& > .title {
+				font-size: 1.5em;
+			}
+
+			& > .closeButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 2px;
+				border: none;
+				background-color: transparent;
+				cursor: pointer;
+
+				&:focus-visible {
+					outline-color: #f39440;
+				}
+
+				& > svg {
+					width: 100%;
+					color: #f39440;
+				}
+			}
+		}
+
+		& > .content {
+			display: flex;
+			flex-direction: column;
+			padding: 15px;
+			width: 100%;
+			line-height: 1.4em;
+		}
+	}
+}