✨ (Game): Help popup

Help popup to learn how to play
2024-02-12 19:22:03 +01:00
parent 9033ef8f68
commit 8a669324c9
6 changed files with 195 additions and 1 deletions
@@ -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;
@@ -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;
+		}
+	}
+}