Implemented an alternative for alert() so now it works on more browsers

1 files changed, 7 insertions, 5 deletions

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 1e06ea6..97448b0 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -25,6 +25,8 @@ interface Props {
   scoreO: number
   setScoreX: Dispatch<SetStateAction<number>>
   setScoreO: Dispatch<SetStateAction<number>>
+  setMessage: Dispatch<SetStateAction<string>>
+  setShowMessage: Dispatch<SetStateAction<boolean>>
 }
 
 const Grid: React.FC<Props> = (props) => {
@@ -62,13 +64,13 @@ const Grid: React.FC<Props> = (props) => {
 
   const endGame = (winner: number) => {
     const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw";
-    // clean up before alerting
+    props.setMessage(`WINNER: ${gameWinner}`);
+    props.setShowMessage(true);
+    gameWinner === "Draw" || gameWinner === "X" 
+      ? props.setScoreX(props.scoreX + 1)
+      : props.setScoreO(props.scoreO + 1);
     setBoard([2,2,2,2,2,2,2,2,2]);
     setWinner(2);
-    gameWinner === "Draw" || gameWinner === "X" 
-      ? props.setScoreX(props.scoreX + 1) 
-      : props.setScoreO(props.scoreO + 1)
-    alert(`WINNER: ${gameWinner}`)
   }
 
   useEffect(() => {