feat: tic tac toe pieces

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/components/TicTacToe/components/BoardSquare.tsx

@@ -1,5 +1,7 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import { Box, Img } from "@chakra-ui/react";
+import React, { useState } from "react";
+import mouseIcon from "../../../assets/mouse-icon.svg";
+import cheddarIcon from "../../../assets/cheddar-icon.svg";
 
 type Props = {
   column: number;
@@ -14,11 +16,13 @@ type Props = {
 };
 
 export function BoardSquare({ column, row, squareSize }: Props) {
+  const [showIcon, setShowIcon] = useState(false);
   const border = "5px solid";
   const borderColor = "purpleCheddar";
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     console.log(e.currentTarget.id);
+    setShowIcon((prevState) => !prevState);
   };
   return (
     <Box
@@ -36,7 +40,16 @@ export function BoardSquare({ column, row, squareSize }: Props) {
         w="100%"
         h="100%"
         onClick={handleClick}
-      ></Box>
+      >
+        {showIcon && (
+          <Img
+            src={(column + row) % 2 === 0 ? mouseIcon : cheddarIcon}
+            alt=""
+            width="100%"
+            height="100%"
+          />
+        )}
+      </Box>
     </Box>
   );
 }

src/components/TicTacToe/containers/TicTacToe.tsx

@@ -1,6 +1,4 @@
-import { Button, Grid } from "@chakra-ui/react";
-import { useContext } from "react";
-import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
+import { Grid } from "@chakra-ui/react";
 import useScreenSize from "../../../hooks/useScreenSize";
 import Board from "../components/Board";
 import Info from "../components/Info";