alexis/Minesweeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (Game): Help popup

Browse Source 
Help popup to learn how to play
This commit is contained in:
alexis
2024-02-12 19:22:03 +01:00
parent 9033ef8f68
commit 8a669324c9
6 changed files with 195 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.scss
+21
View File
@@ -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
+23 -1
View File
@@ -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
+20
View File
@@ -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
+26
View File
@@ -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
+43
View File
@@ -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
+62
View File
@@ -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;
}
}
}