73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useLangStore } from '@/store/langState';
|
|
import { useActions } from './hooks/useActions';
|
|
import { getCellDisplayContent } from '../../utils/gameInteractions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import Podium from '../../assets/podium';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Grid = () => {
|
|
const config = useLangStore((state) => state.config);
|
|
const { grid, gridSize, endType, handleLeftClick, handleRightClick, openLeaderboard } = useActions();
|
|
|
|
return (
|
|
<div
|
|
className='grid'
|
|
style={{
|
|
gridTemplateRows: `repeat(${gridSize}, var(--size))`,
|
|
}}
|
|
>
|
|
{grid.map((row, rowIndex) => (
|
|
<div
|
|
key={`row${rowIndex}`}
|
|
className='row'
|
|
style={{
|
|
gridTemplateColumns: `repeat(${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>
|
|
))}
|
|
{endType !== '' && (
|
|
<div
|
|
className='overlay'
|
|
style={
|
|
{
|
|
'--overlayColor': endType === 'win' ? '#5f8e59' : '#ca5940',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<p className='overlayTitle'>{endType === 'win' ? config.win : config.loose}</p>
|
|
<button
|
|
className='overlayButton'
|
|
onClick={openLeaderboard}
|
|
>
|
|
<Podium />
|
|
Leaderboard
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Grid;
|