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

4 files changed, 68 insertions, 6 deletions

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 19d1e8c..141b332 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -17,6 +17,7 @@
  */
 
 import React, { useState } from 'react';
+import MessageBox from './MessageBox';
 import ScoreBoard from './ScoreBoard';
 import Grid from './Grid';
 import Footer from './Footer';
@@ -25,10 +26,13 @@ import './style.css';
 const App: React.FC = () => {
   const [scoreX, setScoreX] = useState<number>(0);
   const [scoreO, setScoreO] = useState<number>(0);
+  const [showMessageBox, setShowMessageBox] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("");
   return (
     <>
+      {showMessageBox && <MessageBox message={message} setShowMessage={setShowMessageBox}/>}
       <ScoreBoard scoreX={scoreX} scoreO={scoreO}/>
-      <Grid scoreX={scoreX} setScoreX={setScoreX} scoreO={scoreO} setScoreO={setScoreO}/>
+      <Grid scoreX={scoreX} setScoreX={setScoreX} scoreO={scoreO} setScoreO={setScoreO} setMessage={setMessage} setShowMessage={setShowMessageBox}/>
       <Footer/>
     </>
   );
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(() => {
diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
new file mode 100644
index 0000000..de65c48
--- /dev/null
+++ b/src/components/MessageBox.tsx
@@ -0,0 +1,35 @@
+/*
+ * Tic Tac Toe - Minimalistic Tic Tac Toe
+ * Copyright (C) 2021  Vidhu Kant Sharma
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, {Dispatch, SetStateAction} from 'react';
+import './style.css';
+
+interface Props {
+  message: string
+  setShowMessage: Dispatch<SetStateAction<boolean>>
+}
+
+const MessageBox: React.FC<Props> = (props) => {
+  return (
+    <div className={"MessageBox"} onClick={() => props.setShowMessage(false)}>
+      <p>{props.message}</p>
+    </div>
+  );
+}
+
+export default MessageBox;
diff --git a/src/components/style.css b/src/components/style.css
index 4dac3c2..13daabc 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -28,6 +28,24 @@ body, #root {
   color: white;
 }
 
+.MessageBox {
+  font-size: 7rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  position: fixed;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+}
+
+
+.MessageBox p {
+  background-color: black;
+  padding: 0.5rem 2rem;
+}
+
 .ScoreBoard { 
   display: flex;
   justify-content: space-between;
@@ -76,6 +94,9 @@ body, #root {
 }
 
 @media only screen and (max-width: 600px) {
+  .MessageBox {
+    font-size: 4rem;
+  }
   .Grid {
     grid-template-columns: 6rem 6rem 6rem;
     grid-template-rows: 6rem 6rem 6rem;