Revert "Hover on board"

RodrigoCSolari · Sep 7, 2022 · 5017d2e · 5017d2e
1 parent 0fb870d
commit 5017d2e
Show file tree

Hide file tree

Showing 27 changed files with 275 additions and 619 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@fontsource/titillium-web": "^4.5.9",
     "@near-wallet-selector/core": "^6.0.0",
     "@near-wallet-selector/modal-ui": "^6.0.0",
     "@near-wallet-selector/my-near-wallet": "^6.0.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,6 @@ import { ReactQueryDevtools } from "react-query/devtools";
 import Main from "./components/Main/Main";
 import { WalletSelectorContextProvider } from "./contexts/WalletSelectorContext";
 import { theme } from "./components/lib/theme";
-import "@fontsource/titillium-web";
 
 const queryClient = new QueryClient();
 

diff --git a/src/components/Navbar/components/ButtonConnectWallet.tsx b/src/components/Navbar/components/ButtonConnectWallet.tsx
@@ -1,12 +1,10 @@
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import { Button, Menu, MenuButton, MenuList } from "@chakra-ui/react";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
-import useScreenSize from "../../../hooks/useScreenSize";
 import { YellowButton } from "../../../shared/components/YellowButton";
 
 export function ButtonConnectWallet() {
   const walletSelector = useWalletSelector();
-  const { width } = useScreenSize();
 
   const handleOnClick = async () => {
     if (walletSelector.selector.isSignedIn() && walletSelector.wallet) {
@@ -27,7 +25,7 @@ export function ButtonConnectWallet() {
             borderRadius="full"
             rightIcon={<ChevronDownIcon />}
           >
-            {walletSelector.ticTacToeLogic?.getDisplayableAccountId(width)}
+            {walletSelector.accountId}
           </MenuButton>
           <MenuList
             minWidth="auto"

diff --git a/src/components/TicTacToe/components/ActiveGame.tsx b/src/components/TicTacToe/components/ActiveGame.tsx
@@ -18,12 +18,10 @@ import { CrossIcon } from "../../../shared/components/CrossIcon";
 import { PurpleButton } from "../../../shared/components/PurpleButton";
 import {
   GameParamsState,
-  initialActiveGameParamsState,
+  initialActiveGameParamsState2,
 } from "../containers/TicTacToe";
 import cheddarIcon from "../../../assets/cheddar-icon.svg";
 import TokenName from "./TokenName";
-import useScreenSize from "../../../hooks/useScreenSize";
-import { formatAccountId } from "../../../shared/helpers/formatAccountId";
 
 type Props = {
   data: GameParams | undefined;
@@ -39,7 +37,6 @@ export function ActiveGame({
   const [timeLeft, settimeLeft] = useState<number | undefined>();
   const [loadingFinalizedGame, setLoadingFinalizedGame] = useState(false);
   const walletSelector = useWalletSelector();
-  const { width } = useScreenSize();
 
   const handleGiveUp = () => {
     if (data?.active_game?.[0]) {
@@ -54,7 +51,7 @@ export function ActiveGame({
   };
 
   const handleCloseGame = () => {
-    setActiveGameParams(initialActiveGameParamsState);
+    setActiveGameParams(initialActiveGameParamsState2);
   };
 
   useEffect(() => {
@@ -153,11 +150,7 @@ export function ActiveGame({
                     {activeGameParams.game_result.winner_id ===
                     walletSelector.accountId
                       ? "You Are The Winner!"
-                      : `The Winner is 
-                      ${formatAccountId(
-                        activeGameParams.game_result.winner_id,
-                        width
-                      )}`}
+                      : `The Winner is ${activeGameParams.game_result.winner_id}`}
                   </Text>
                   <Text>
                     Reward:{" "}
@@ -229,10 +222,7 @@ export function ActiveGame({
                 {data.active_game[1].current_player.account_id ===
                 walletSelector.accountId
                   ? "You"
-                  : formatAccountId(
-                      data.active_game[1].current_player.account_id,
-                      width
-                    )}
+                  : data.active_game[1].current_player.account_id}
               </Text>
             </Flex>
             <Text>

diff --git a/src/components/TicTacToe/components/Board.tsx b/src/components/TicTacToe/components/Board.tsx
@@ -1,7 +1,5 @@
 import { Box, Flex } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
-import { useQuery } from "react-query";
-import { GameParams } from "../../../hooks/useContractParams";
+import React, { useState } from "react";
 import { GameParamsState } from "../containers/TicTacToe";
 import { BoardSquare } from "./BoardSquare";
 
@@ -25,17 +23,13 @@ export default function Board({
     row: null,
     column: null,
   });
-
-  const { data } = useQuery<GameParams>("contractParams");
-
   const boardSize = {
     base: "260px",
     sm: isLandscape ? "260px" : "350px",
     md: "350px",
     lg: "455px",
     "2xl": "605px",
   };
-
   const squareSize = {
     base: "80px",
     sm: isLandscape ? "80px" : "110px",
@@ -44,18 +38,6 @@ export default function Board({
     "2xl": "195px",
   };
 
-  useEffect(() => {
-    if (
-      data?.active_game === undefined &&
-      loadingSquare.row &&
-      loadingSquare.column
-    ) {
-      setLoadingSquare({ row: null, column: null });
-    }
-  }, [data?.active_game, loadingSquare]);
-
-  console.log(activeGameParams);
-
   return (
     <Flex justifyContent="center">
       <Box

diff --git a/src/components/TicTacToe/components/BoardSquare.tsx b/src/components/TicTacToe/components/BoardSquare.tsx
@@ -4,6 +4,7 @@ import cheddarIcon from "../../../assets/cheddar-icon.svg";
 import { useQuery } from "react-query";
 import { GameParams } from "../../../hooks/useContractParams";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
+import { getTransactionLastResult } from "near-api-js/lib/providers";
 import { CircleIcon } from "../../../shared/components/CircleIcon";
 import { CrossIcon } from "../../../shared/components/CrossIcon";
 import { GameParamsState } from "../containers/TicTacToe";
@@ -36,73 +37,64 @@ export function BoardSquare({
 }: Props) {
   const walletSelector = useWalletSelector();
   const { data } = useQuery<GameParams>("contractParams");
+  const currentPlayer = data?.active_game?.[1].current_player.account_id;
   const border = "5px solid";
   const borderColor = "purpleCheddar";
-  const tiles = data?.active_game?.[1].tiles;
-  const currentPlayer = data?.active_game?.[1].current_player;
 
   const handleClick = async (
     e: React.MouseEvent<HTMLDivElement, MouseEvent>
   ) => {
     console.log(e.currentTarget.id);
     if (
-      data?.active_game &&
       activeGameParams.board[row][column] === null &&
-      activeGameParams.current_player.account_id === walletSelector.accountId &&
-      !loadingSquare.column &&
-      !loadingSquare.row
+      currentPlayer === walletSelector.accountId
     ) {
       const gameId = parseInt(data?.active_game?.[0]!);
       console.log("play(", gameId, row, column, ")");
       setLoadingSquare({ row, column });
       try {
         if (walletSelector.ticTacToeLogic) {
-          await walletSelector.ticTacToeLogic.play(gameId, row, column);
+          const response = await walletSelector.ticTacToeLogic.play(
+            gameId,
+            row,
+            column
+          );
+          setActiveGameParams((prev) => {
+            return {
+              ...prev,
+              board: getTransactionLastResult(response),
+            };
+          });
         }
       } catch (error) {
         console.error(error);
+      } finally {
         setLoadingSquare({ row: null, column: null });
       }
     }
   };
 
+  const tiles = data?.active_game?.[1].tiles;
   useEffect(() => {
-    if (
-      tiles &&
-      tiles[row][column] !== activeGameParams.board[row][column] &&
-      currentPlayer
-    ) {
+    if (tiles && tiles[row][column] !== activeGameParams.board[row][column]) {
       setActiveGameParams((prev) => {
         return {
           ...prev,
           board: tiles,
-          current_player: currentPlayer,
         };
       });
+      //setLoading(false);
       setLoadingSquare({ row: null, column: null });
     }
   }, [
-    activeGameParams,
-    currentPlayer,
+    activeGameParams.board,
     column,
     row,
     setActiveGameParams,
     tiles,
     setLoadingSquare,
   ]);
 
-  const isAvailableToClick =
-    !activeGameParams.board[row][column] &&
-    activeGameParams.current_player.account_id === walletSelector.accountId &&
-    !loadingSquare.column &&
-    !loadingSquare.row;
-
-  const isActiveTurn =
-    data?.active_game &&
-    activeGameParams.current_player.account_id === walletSelector.accountId &&
-    !loadingSquare.row &&
-    !loadingSquare.column;
-
   return (
     <Box
       height={squareSize}
@@ -114,27 +106,18 @@ export function BoardSquare({
       borderColor={borderColor}
     >
       <Box
-        cursor={isAvailableToClick ? "pointer" : "auto"}
+        cursor={currentPlayer === walletSelector.accountId ? "pointer" : "auto"}
         id={`r${row}c${column}`}
         w="100%"
         h="100%"
         onClick={handleClick}
-        _hover={isAvailableToClick ? { bg: "#FFF4" } : {}}
       >
         {activeGameParams.board[row][column] && (
           <Flex justifyContent="center" alignItems="center" h="100%">
             {activeGameParams.board[row][column] === "O" ? (
-              <CircleIcon
-                w="75%"
-                h="75%"
-                color={isActiveTurn ? "yellowCheddar" : "#ffd26288"}
-              />
+              <CircleIcon w="75%" h="75%" color="yellowCheddar" />
             ) : (
-              <CrossIcon
-                w="65%"
-                h="65%"
-                color={isActiveTurn ? "yellowCheddar" : "#ffd26288"}
-              />
+              <CrossIcon w="65%" h="65%" color="yellowCheddar" />
             )}
           </Flex>
         )}

diff --git a/src/components/TicTacToe/components/Info.tsx b/src/components/TicTacToe/components/Info.tsx
@@ -2,25 +2,22 @@ import { Accordion } from "@chakra-ui/react";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
 import { GameParams } from "../../../hooks/useContractParams";
 import WaitingList from "./WaitingList";
-import WaitingListForm from "./WaitingListForm/WaitingListForm";
+import WaitingListForm from "./WaitingListForm";
 import { useEffect, useState } from "react";
 import { ActiveGame } from "./ActiveGame";
 import { HowToPlay } from "./HowToPlay";
 import { GameParamsState } from "../containers/TicTacToe";
 import { UserStats } from "./Stats";
 import { Referral } from "./Referral";
-import { WhiteListedTokens } from "../../../hooks/useWhiteListedTokens";
 
 type Props = {
   data: GameParams | undefined;
-  tokensData: WhiteListedTokens[];
   activeGameParams: GameParamsState;
   setActiveGameParams: React.Dispatch<React.SetStateAction<GameParamsState>>;
 };
 
 export default function Info({
   data,
-  tokensData,
   activeGameParams,
   setActiveGameParams,
 }: Props) {
@@ -52,7 +49,7 @@ export default function Info({
 
       {walletSelector.selector.isSignedIn() &&
         !data?.active_game &&
-        !haveOwnChallenge && <WaitingListForm tokensData={tokensData} />}
+        !haveOwnChallenge && <WaitingListForm />}
 
       {walletSelector.selector.isSignedIn() && <UserStats data={data} />}
       <HowToPlay showingReferral={walletSelector.accountId !== null} />

diff --git a/src/components/TicTacToe/components/WaiitingListElement.tsx b/src/components/TicTacToe/components/WaiitingListElement.tsx
@@ -1,17 +1,15 @@
-import { Button, Flex, Grid, Text } from "@chakra-ui/react";
+import { Button, Grid, Text } from "@chakra-ui/react";
 import { utils } from "near-api-js";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
 import { AvailablePlayerConfig } from "../../../near/contracts/TicTacToe";
 import { PurpleButton } from "../../../shared/components/PurpleButton";
-import { formatAccountId } from "../../../shared/helpers/formatAccountId";
 import TokenName from "./TokenName";
 
 type Props = {
   player: [string, AvailablePlayerConfig];
-  width: number;
 };
 
-export function WaiitingListElement({ player, width }: Props) {
+export function WaiitingListElement({ player }: Props) {
   const walletSelector = useWalletSelector();
 
   const handleAcceptButton = (
@@ -39,33 +37,19 @@ export function WaiitingListElement({ player, width }: Props) {
     walletSelector.ticTacToeLogic?.removeBet();
   };
 
-  const isSmallDesign = width < 480 || (width > 768 && width < 992);
   return (
     <Grid
       mb="5px"
       bg="#1111"
-      templateColumns={isSmallDesign ? "2.5fr 1fr" : "2.2fr 2fr 1fr"}
+      templateColumns="2.5fr 2fr 1fr"
       p="6px 12px"
       borderRadius="8px"
-      alignItems="center"
     >
-      {isSmallDesign ? (
-        <Flex flexDirection="column" fontSize="0.9em">
-          <Text textAlign="initial">{formatAccountId(player[0], width)}</Text>
-          <Text textAlign="initial">
-            {utils.format.formatNearAmount(player[1].deposit)}&nbsp;
-            {<TokenName tokenId={player[1].token_id} />}
-          </Text>
-        </Flex>
-      ) : (
-        <>
-          <Text textAlign="initial">{formatAccountId(player[0], width)}</Text>
-          <Text textAlign="initial">
-            {utils.format.formatNearAmount(player[1].deposit)}&nbsp;
-            {<TokenName tokenId={player[1].token_id} />}
-          </Text>
-        </>
-      )}
+      <Text textAlign="initial">{player[0]}</Text>
+      <Text textAlign="initial">
+        {utils.format.formatNearAmount(player[1].deposit)}{" "}
+        {<TokenName tokenId={player[1].token_id} />}
+      </Text>
       {player[0] !== walletSelector.accountId ? (
         <PurpleButton
           size="sm"