Add forwardRef with-computer game board

Author: mustafadalga

client/app/_components/Cell.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, forwardRef } from "react";
 import { IMove } from "@/_types";
 import { EGamer } from "@/_enums";
 import Stone from "./Stone";
@@ -12,7 +12,13 @@ interface Props {
     onClick: (stone: IMove) => void
 }
 
-export default function Cell({ stone, hasHint, activeGamer, clickedHint, onClick }: Props) {
+export default forwardRef<HTMLDivElement, Props>(function Cell({
+                                                                   stone,
+                                                                   hasHint,
+                                                                   activeGamer,
+                                                                   clickedHint,
+                                                                   onClick
+                                                               }, ref) {
     const [ isHintClicked, setIsHintClicked ] = useState(false);
 
     const handleClick = useCallback(() => {
@@ -31,11 +37,12 @@ export default function Cell({ stone, hasHint, activeGamer, clickedHint, onClick
 
     return (
         <div onClick={handleClick}
+             ref={ref}
              className="relative bg-gradient-to-r from-[#038947] via-[#03A454] to-[#04D46C] grid place-items-center rounded w-6 h-6 min-[300px]:w-8 min-[300px]:h-8 min-[320px]:w-[2.25rem] min-[320px]:h-[2.25rem] min-[400px]:w-10 min-[400px]:h-10 min-[480px]:w-12 min-[480px]:h-12 min-[600px]:w-16 min-[600px]:h-16 min-[720px]:w-[72px] min-[720px]:h-[72px] group">
 
             {stone.gamer && <Stone gamer={stone.gamer}/>}
 
             {( clickedHint ? isHintClicked : hasHint) && <Hint isHintClicked={isHintClicked} activeGamer={activeGamer}/>}
         </div>
     )
-}
+})

client/app/_components/with-computer/Board.tsx

@@ -20,10 +20,8 @@ export default function Board() {
     const { game, board, updateGame, updateBoard } = usePlayWithComputerStore();
     const { onOpen } = useGameResultModal()
 
-    /**
-     * This state will be used to hint animation
-     */
-    const [ isHintClicked, setIsHintClicked ] = useState<boolean>(false)
+
+    const [ clickedHint, setClickedHint ] = useState<IMove | null>(null);
     const cellRefs = useRef<(HTMLDivElement | null)[]>([]);
     const activeMoveOrder = useDeepCompareMemoize<IActiveGamerData>(getActiveGamerData(game as IGame));
     const opponent: EGamer = activeMoveOrder.gamer.color == EGamer.BLACK ? EGamer.WHITE : EGamer.BLACK;
@@ -41,7 +39,7 @@ export default function Board() {
     }, [ hints ]);
 
     const handleHint = useCallback(async (move: IMove) => {
-        if (isHintClicked) return;
+        if (clickedHint) return;
         if (!game?.isGameStarted) {
             return toast.info("Game has not started yet!");
         }
@@ -60,7 +58,7 @@ export default function Board() {
                 gamer: activeMoveOrder.gamer.color,
             })))
         ];
-        setIsHintClicked(true);
+        setClickedHint(move);
 
         setTimeout(() => {
             updateBoard(board.map(cell => {
@@ -74,7 +72,7 @@ export default function Board() {
             });
         }, 500);// set timeout is for hint animation
 
-    }, [ game, board, activeMoveOrder, isHintClicked ]);
+    }, [ game, board, activeMoveOrder, clickedHint ]);
 
     const handleGameFinish = useCallback(() => {
         const winnerGamer: string | null = getWinnerGamer(game as IGame, board);
@@ -142,9 +140,9 @@ export default function Board() {
         }
     }, [ isComputerTurn, board, game?.isGameStarted ]);
 
-    // set to initial state when component unmount
+    // set to initial state when active move order change
     useEffect(() => {
-        setIsHintClicked(false);
+        setClickedHint(null);
     }, [ activeMoveOrder ]);
 
 
@@ -158,12 +156,13 @@ export default function Board() {
 
     return (
         <section
-            className={`${isHintClicked ? 'pointer-events-none' : ''} relative grid grid-cols-8 grid-rows-8 gap-0.5 sm:gap-1 bg-white`}>
+            className="relative grid grid-cols-8 grid-rows-8 gap-0.5 sm:gap-1 bg-white">
             {board.map((cell, index) => <Cell key={`${cell.row}${cell.col}`}
                                               onClick={handleHint}
                                               hasHint={hints.includes(index)}
                                               stone={cell}
                                               activeGamer={activeMoveOrder.gamer.color}
+                                              clickedHint={clickedHint}
                                               ref={(element: HTMLDivElement) => {
                                                   cellRefs.current[index] = element
                                               }}/>)}