Merge pull request #67 from jcari-dev/66-rendering-board-bug

added bug notifier

chess/src/components/main/home/BugNotifier.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Text,
+  useDisclosure,
+  Button,
+} from "@chakra-ui/react";
+
+function BugNotifier() {
+  const OverlayOne = () => (
+    <ModalOverlay
+      bg="none"
+      backdropFilter="auto"
+      backdropInvert="80%"
+      backdropBlur="2px"
+    />
+  );
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useEffect(() => {
+    const checkServerResponse = () => {
+        onOpen();
+      };
+
+
+    checkServerResponse();
+  }, [onOpen]);
+
+  return (
+    <>
+      <Modal isCentered isOpen={isOpen} onClose={onClose}>
+        <OverlayOne />
+        <ModalContent>
+          <ModalHeader>Uh Oh!</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text mb={4}>
+              Please note, there is a known rendering issue in CPU matches that
+              may prevent you from completing the game (but feel free to give it
+              a try!).
+            </Text>
+
+            <Text mb={4}>
+              This bug does not affect player vs player mode and is currently
+              being addressed!
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Got it, thanks for the heads up!
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default BugNotifier;

chess/src/pages/cpu/Cpu.js

@@ -21,6 +21,7 @@ import { useNavigate } from "react-router-dom";
 import endpoints from "../../utils/Endpoints";
 import { getCsrfToken } from "../../utils/Auth";
 import { useAuth0 } from "@auth0/auth0-react";
+import BugNotifier from "../../components/main/home/BugNotifier";
 
 function CpuDispatch() {
   const [difficulty, setDifficulty] = React.useState(0);
@@ -80,6 +81,7 @@ function CpuDispatch() {
 
   return (
     <Flex height="100vh" alignItems="center" justifyContent="center">
+      <BugNotifier/>
       <Box width="60%" p={5} shadow="md" borderWidth="1px">
         <VStack spacing={4}>
           <Text fontSize="xl">Choose Your Difficulty</Text>