87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ React --------------------------------------------------------
|
|
import { useState } from 'react';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------- Context -------------------------------------------------------
|
|
import { useRecoilState } from 'recoil';
|
|
import { gameStateAtom } from '../../contexts/gameState';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ Hooks --------------------------------------------------------
|
|
import { useActions } from './hooks/useActions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ Utils --------------------------------------------------------
|
|
import { genGrid } from '../../utils/generation';
|
|
import { getCellDisplayContent } from '../../utils/gameInteractions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------- Assets --------------------------------------------------------
|
|
import Podium from '../../assets/podium';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Grid = () => {
|
|
const [gameState, setGameState] = useRecoilState(gameStateAtom);
|
|
const [grid, setGrid] = useState(genGrid(gameState.gridSize));
|
|
|
|
const { handleLeftClick, handleRightClick } = useActions(grid, setGrid, gameState, setGameState);
|
|
|
|
return (
|
|
<div
|
|
className='grid'
|
|
style={{
|
|
gridTemplateRows: `repeat(${gameState.gridSize}, var(--size))`,
|
|
}}
|
|
>
|
|
{grid.map((row, rowIndex) => (
|
|
<div
|
|
key={`row${rowIndex}`}
|
|
className='row'
|
|
style={{
|
|
gridTemplateColumns: `repeat(${gameState.gridSize}, var(--size))`,
|
|
}}
|
|
>
|
|
{row.map((cell, cellIndex) => {
|
|
return (
|
|
<button
|
|
key={`cell${cellIndex}`}
|
|
className={`cell ${cell.hidden ? 'hidden' : cell.value !== 'empty' ? `v${cell.value}` : ''}`}
|
|
onClick={(ev) => handleLeftClick(ev, rowIndex, cellIndex)}
|
|
onContextMenu={(ev) => handleRightClick(ev, rowIndex, cellIndex)}
|
|
>
|
|
{getCellDisplayContent(cell)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
{gameState.endType !== '' && (
|
|
<div
|
|
className='overlay'
|
|
style={
|
|
{
|
|
'--overlayColor': gameState.endType === 'win' ? '#5f8e59' : '#ca5940',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<p className='overlayTitle'>{gameState.endType === 'win' ? 'Gagné !' : 'Perdu !'}</p>
|
|
<button
|
|
className='overlayButton'
|
|
onClick={() => setGameState((prev) => ({ ...prev, status: 'board' }))}
|
|
>
|
|
<Podium />
|
|
Leaderboard
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Grid;
|