[od0201]

чтоб не гадать
это игра пятнашка

<div style={styles} 
    className="container rounded-lg relative mx-auto bg-indigo-200 border-[1rem] border-indigo-600">
    {puzzles.map((e:IPuzzle)=><Puzzle puzzle={e} key={e.id} />)}      
</div>

interface PuzzleProps{
    puzzle:IPuzzle
}

const Puzzle:React.FC<PuzzleProps>=({puzzle})=>{
    const dispatch=useAppDispatch()

    if (puzzle.number===0) return(null)

    const styles={left:`${8*puzzle.x}rem`, top:`${8*puzzle.y}rem`}
    return (
        <div style={styles}  className="absolute rounded-lg w-32 h-32 bg-yellow-600 hover:bg-yellow-300 border text-center text-6xl" 
            onClick={()=>dispatch(clickPuzzle(puzzle.id))}
        >
        <span className="w-0 h-32 inline-block align-middle"></span>
        <span>{puzzle.number}</span>
        </div>
    )
}
export default Puzzle