diff --git a/src/components/grid/Cell.tsx b/src/components/grid/Cell.tsx index 9d8abb3..edfcde0 100644 --- a/src/components/grid/Cell.tsx +++ b/src/components/grid/Cell.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react' import { CharStatus } from '../../lib/statuses' import classnames from 'classnames' @@ -7,6 +8,14 @@ type Props = { } export const Cell = ({ value, status }: Props) => { + const [cellAnimation, setCellAnimation] = useState('') + + useEffect(() => { + if (value !== undefined) { + setCellAnimation('cellAnimation') + } + }, [value]) + const classes = classnames( 'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded', { @@ -19,7 +28,7 @@ export const Cell = ({ value, status }: Props) => { return ( <> -
{value}
+
{value}
) } diff --git a/src/index.css b/src/index.css index b5c61c9..bc42849 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,23 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.cellAnimation { + animation: revealCharCell linear; + animation-duration: 0.15s; + border-color: black; +} + +@keyframes revealCharCell { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } +}