95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------- Styles --------------------------------------------------------
|
|
import { useEffect, useRef } from 'react';
|
|
import './styles.scss';
|
|
import { useRecoilState } from 'recoil';
|
|
import { gameStateAtom } from '../../contexts/gameState';
|
|
import localforage from 'localforage';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const store = localforage.createInstance({
|
|
name: 'leaderboard',
|
|
driver: localforage.INDEXEDDB,
|
|
version: 1.0,
|
|
storeName: 'leaderboard',
|
|
description: 'Store 10 best game time',
|
|
});
|
|
|
|
const Home = () => {
|
|
const difficultyRef = useRef<HTMLSelectElement>(null);
|
|
const sizeRef = useRef<HTMLSelectElement>(null);
|
|
|
|
const [, setGameState] = useRecoilState(gameStateAtom);
|
|
|
|
useEffect(() => {
|
|
const initIDB = async () => {
|
|
if ((await store.getItem('leaderboard')) === null) {
|
|
await store.setItem('leaderboard', []);
|
|
}
|
|
};
|
|
initIDB();
|
|
}, []);
|
|
|
|
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='title'>Démineur</h1>
|
|
|
|
<div className='settingsContainer'>
|
|
<div className='selectorBox'>
|
|
<p className='settingLabel'>Taille de la grille</p>
|
|
<select
|
|
ref={sizeRef}
|
|
name='gridSize'
|
|
className='select'
|
|
defaultValue={'12'}
|
|
>
|
|
<option value='12'>Petit</option>
|
|
<option value='16'>Moyen</option>
|
|
<option value='20'>Grand</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className='selectorBox'>
|
|
<p className='settingLabel'>Difficulté</p>
|
|
<select
|
|
ref={difficultyRef}
|
|
name='difficulty'
|
|
className='select'
|
|
defaultValue={'beginner'}
|
|
>
|
|
<option value='beginner'>Facile</option>
|
|
<option value='intermediate'>Moyen</option>
|
|
<option value='expert'>Difficile</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
className='startButton'
|
|
onClick={onClick}
|
|
>
|
|
Commencer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|