feat: connects to other player

Misfits-Labs · Sep 7, 2023 · ade34a1 · ade34a1
1 parent 2a80744
commit ade34a1
Show file tree

Hide file tree

Showing 14 changed files with 181 additions and 133 deletions.
diff --git a/src/api/blockchain/blokchainApi.ts b/src/api/blockchain/blokchainApi.ts
@@ -148,6 +148,7 @@ export class BlockchainAPI implements IBlockchainAPI {
  }
 
  async getGameResults(escrowHash: HexishString, player: HexishString) {
+
   const results = await readContract({
     address: this.gameControllerConfig.address,
     abi: this.gameControllerConfig.abi,

diff --git a/src/common/ButtonForJoinableGame/index.tsx b/src/common/ButtonForJoinableGame/index.tsx
@@ -2,21 +2,20 @@ import {
   useConnectModal,
 } from '@rainbow-me/rainbowkit';
 import Button from '../Button';
-import { useWegaStore } from '../../hooks';
 import{ StarLoaderIcon } from '../../assets/icons';
-import { AllPossibleWegaTypes, Player } from '../../models';
+import { AllPossibleWegaTypes} from '../../models';
 import { Link } from 'react-router-dom';
+import { useFirebaseData, useWegaStore } from '../../hooks';
 
 interface ButtonForJoinableGameBar {
   gameType: AllPossibleWegaTypes;
   gameId: number;
-  requiredPlayerNum: number;
-  players: Player[];
+  gameUuid: string;
 }
-
-export const ButtonForJoinableGame = ({ gameType, gameId, requiredPlayerNum, players }: ButtonForJoinableGameBar) => {
+export const ButtonForJoinableGame = ({ gameType, gameId, gameUuid }: ButtonForJoinableGameBar) => {
   const { wallet } = useWegaStore();
-  const {openConnectModal} = useConnectModal();
+  const { openConnectModal } = useConnectModal();
+  const { isGamePlayable } = useFirebaseData(gameUuid);
   return ( !wallet && openConnectModal ?
     <Button 
         buttonType="secondary"  
@@ -25,7 +24,7 @@ export const ButtonForJoinableGame = ({ gameType, gameId, requiredPlayerNum, pla
       >
       Join
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
-    </Button> : requiredPlayerNum !== players.length ? <Link to={`/${gameType.toLowerCase()}/join/${gameId}`}>
+    </Button> : !isGamePlayable ? <Link to={`/${gameType.toLowerCase()}/join/${gameId}`} >
       <Button buttonType="secondary" className="flex items-center">
         Join
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />

diff --git a/src/common/ButtonForWaitingGame/index.tsx b/src/common/ButtonForWaitingGame/index.tsx
@@ -2,33 +2,41 @@ import {
  useConnectModal,
 } from '@rainbow-me/rainbowkit';
 import Button from '../Button';
-import { useWegaStore } from '../../hooks';
+import { useWegaStore, useFirebaseData } from '../../hooks';
 import{ StarLoaderIcon } from '../../assets/icons';
 import { AllPossibleWegaTypes } from '../../models';
 import { Link } from 'react-router-dom';
 
 interface ButtonForWaitingGameProps {
  gameType: AllPossibleWegaTypes;
  gameId: number;
+ gameUuid: string;
 }
 
-export const ButtonForWaitingGame = ({ gameType, gameId }: ButtonForWaitingGameProps) => {
- const { wallet } = useWegaStore();
- const {openConnectModal} = useConnectModal();
- return ( !wallet && openConnectModal ?
-   <Button 
-       buttonType="secondary"  
-       className="flex items-center"
-       onClick={openConnectModal}
-     >
-     Play
-     <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
-   </Button> :
-   <Link to={`/${gameType.toLowerCase()}/play/${gameId}`}>
-     <Button buttonType="secondary" className="flex items-center">
-       Play
-     <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
-     </Button>
-   </Link>  
- )
+export const ButtonForWaitingGame = ({ gameType, gameId, gameUuid }: ButtonForWaitingGameProps) => {
+  const { wallet } = useWegaStore();
+  const { isGamePlayable } = useFirebaseData(gameUuid);
+  const { openConnectModal } = useConnectModal();
+  return ( !wallet && openConnectModal ?
+    <Button 
+        buttonType="secondary"  
+        className="flex items-center"
+        onClick={openConnectModal}
+      >
+      Play
+      <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
+    </Button> : isGamePlayable ? (
+    <Link to={`/${gameType.toLowerCase()}/play/${gameId}`}>
+      <Button buttonType="secondary" className="flex items-center">
+        Play
+      <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
+      </Button>
+    </Link>  
+    ) : (  
+    <Button buttonType="secondary" className="flex items-center">
+      Searching...
+    <StarLoaderIcon loading={true} className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
+    </Button>
+    )
+)
 }
diff --git a/src/common/CreateGameCard/index.tsx b/src/common/CreateGameCard/index.tsx
@@ -207,11 +207,11 @@ const CreateGameCard = ({
           isWagerApproved ? 
           <Button type="submit" buttonType="primary" tw="flex">
               {(isCreateWagerLoading || isCreateGameLoading) ? "Loading..." : "Start game" }
-              <StarLoaderIcon loading={isCreateWagerLoading || isCreateGameLoading} color="#000000" tw="h-[16px] w-[16px] ms-[5px]" />
+              <StarLoaderIcon loading={isCreateWagerLoading || isCreateGameLoading} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
           </Button> :
           <Button type="submit" buttonType="primary" tw="flex">
             {(isApproveERC20Loading || isGetAllowanceLoading)  ? "Loading..." : "Approve" }
-            <StarLoaderIcon loading={isApproveERC20Loading || isGetAllowanceLoading} color="#000000" tw="h-[16px] w-[16px] ms-[5px]" />
+            <StarLoaderIcon loading={isApproveERC20Loading || isGetAllowanceLoading} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
           </Button>
         }
         {/* button approve */}

diff --git a/src/common/GameBar/index.tsx b/src/common/GameBar/index.tsx
@@ -60,14 +60,17 @@ function GameBar({
     </WagerTypeBadgeWrapper>
     {/* escrow link button */}
 
-    {/* render for a joinable game */} 
+    {/* render for a joinable game */}
+     {/* 
+      // when the player list a
+      */}
     {
-      game.creatorUuid !== user.uuid && <ButtonForJoinableGame gameType={game.gameType} gameId={game.id} requiredPlayerNum={game.requiredPlayerNum} players={game.players} /> 
+      game.creatorUuid !== user.uuid && <ButtonForJoinableGame gameType={game.gameType} gameId={game.id} gameUuid={game.uuid} /> 
     }
 
     {/* playable game button */}
     {  
-      game.creatorUuid === user.uuid && <ButtonForWaitingGame gameType={game.gameType} gameId={game.id} />  
+      game.creatorUuid === user.uuid && <ButtonForWaitingGame gameType={game.gameType} gameId={game.id} gameUuid={game.uuid} />  
     }
 
    </BarWrapper>

diff --git a/src/common/JoinGameCard/index.tsx b/src/common/JoinGameCard/index.tsx
@@ -160,10 +160,10 @@ const JoinGameCard = ({
         { 
           isWagerApproved ? <Button type="submit" buttonType="primary" tw="flex">
           {(isDepositWagerLoading || isUpdateGameLoading) ? "Loading..." : "Deposit" }
-          <StarLoaderIcon loading={(isDepositWagerLoading || isUpdateGameLoading)} color="#000000" tw="h-[16px] w-[16px] ms-[5px]" /> 
+          <StarLoaderIcon loading={(isDepositWagerLoading || isUpdateGameLoading)} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" /> 
           </Button> : <Button type="submit" buttonType="primary" tw="flex">
               { (isGetAllowanceLoading || isApproveERC20Loading) ? "Loading..." : "Approve" }
-              <StarLoaderIcon loading={(isGetAllowanceLoading || isApproveERC20Loading)} color="#000000" tw="h-[16px] w-[16px] ms-[5px]" />
+              <StarLoaderIcon loading={(isGetAllowanceLoading || isApproveERC20Loading)} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
           </Button>
         }
         {/* details */}

diff --git a/src/components/PlayGamePlayerCard/index.tsx b/src/components/PlayGamePlayerCard/index.tsx
@@ -1,8 +1,8 @@
-import { User, Player } from "../../models";
+import { User, Player, HexishString } from "../../models";
 import WalletAvatar from "../../common/WalletAvatar";
 import { PlayerCardContainer, PlayerAvatarWrapper } from './types';
 import { NormalText } from '../../common/CreateGameCard/types';
-import { isGameCreator, miniWalletAddress } from '../../utils'
+import { miniWalletAddress } from '../../utils'
 import { WagerTypeBadgeWrapper, BadgeText} from "../../common/GameBar/types";
 import { BadgeIcon, renderWagerBadge } from "../../common/GameBar";
 import { WaitForPlayerConnectCard } from '../../components/WaitForPlayerConnectCard';
@@ -11,26 +11,24 @@ import 'twin.macro';
 
 export interface PlayGamePlayerCardProps {
  status: 'connecting' | 'connected' | 'idle' | 'rolling';
- player: User;
- players: Player[];
  wager: any;
+ player?: User;
+ opponent?: Player;
 }
-
-export const PlayGamePlayerCard = ({ players, player, wager, status }: PlayGamePlayerCardProps) => {
-  const isCreator = isGameCreator(player.uuid ,players);
+export const PlayGamePlayerCard = ({ status, wager, player, opponent }: PlayGamePlayerCardProps) => {
   return status !== 'connecting' ? (
     <PlayerCardContainer>
-      {
-        player.wallet && 
+      { 
+        (player || opponent) &&
         <PlayerAvatarWrapper tw="flex items-center gap-x-[15px]">
           <WalletAvatar 
-            address={player.wallet.address} 
-            ensImage={player.wallet.ensAvatar || undefined }
+            address={player && player.wallet ? player.wallet.address : opponent?.walletAddress} 
+            ensImage={undefined}
             size={10} 
           />
           <NormalText>{
-            isCreator ? miniWalletAddress(player.wallet?.address).concat('(you') : miniWalletAddress(player.wallet?.address) 
-          }(you)
+            player && player.wallet ? miniWalletAddress(player.wallet.address).concat('(you)') : miniWalletAddress(opponent?.walletAddress as HexishString) 
+          }
           </NormalText>
         </PlayerAvatarWrapper>
       }

diff --git a/src/components/PlayGameSection/index.tsx b/src/components/PlayGameSection/index.tsx
@@ -1,54 +1,40 @@
-import { AllPossibleWegaTypes, HexishString } from "../../models"
+import { Wega, HexishString } from "../../models"
 import { useEffect } from 'react';
-import { selectGameById } from '../../containers/App/api';
-import { useSelector } from 'react-redux';
 import 'twin.macro';
 import { HelpCircleIcon, ClockIcon, SparkleIcon } from '../../assets/icons';
 import { NormalText } from '../../common/CreateGameCard/types';
 import { PlayGameContainer } from './types';
 import { PlayGamePlayerCard } from "../PlayGamePlayerCard";
 import { Dice } from "../Dice";
-import { useList } from 'react-use';
 import Button from "../../common/Button";
-import { useWegaStore, useBlockchainApiHooks, useNavigateTo} from "../../hooks";
+import { useWegaStore, useBlockchainApiHooks, useFirebaseData } from "../../hooks";
 
 interface PlayGameSectionProps {
- gameType?: AllPossibleWegaTypes;
- gameId: number;
+ game: Wega;
 }
 export const PlayGameSection: React.FC<PlayGameSectionProps>= ({
- gameId,
+ game,
 }: PlayGameSectionProps) => {
   const { user, wallet } = useWegaStore();
-  const game = useSelector(state => selectGameById(state, gameId));
-  const [connectedPlayers,{ filter: filterPlayers }] =  useList(() => game ? game.players : []);
   const { useGetGameResultsQuery, useGetWinnersQuery } = useBlockchainApiHooks;
+  const { isGamePlayable, players, currentTurn } = useFirebaseData(game.uuid as string);
   const { getGameResults, data: gameResults } = useGetGameResultsQuery();
   const { getWinners, data: winners } = useGetWinnersQuery();
-  const navigateTo = useNavigateTo(); 
-
-
+
   useEffect(() => {
+
     // navigates the user back to home page if not the correct address
-    if (wallet) filterPlayers(player => player.walletAddress === wallet.address);
-    if(wallet && connectedPlayers.length === 0){
-      navigateTo('/', 10, {replace: true})
-    }
-    // get game results
-    if(wallet && game) {
-      getGameResults(game?.wager.wagerHash as HexishString, wallet.address as HexishString);
-      getWinners(game?.wager.wagerHash as HexishString);
-    }
 
-    if(gameResults){
-      console.log('gameResults: ', gameResults)
-    } 
-    if(winners){
-      console.log('winners: ', winners)
-    }
-  }, [gameResults, winners, wallet, game]);
+    // if(wallet && connectedPlayers.length === 0){
+    //   navigateTo('/', 0, {replace: true})
+    // }
+    // get game results
+    if(game.wager.wagerHash && wallet && wallet.address) getGameResults(game.wager.wagerHash as HexishString, wallet.address as HexishString);
+    getWinners(game.wager.wagerHash as HexishString);
+    console.log(players)
+  }, [game, players , wallet, wallet?.address ]);
 
- return user && game && (<>
+ return user && players && players.length > 0 && (<>
    <PlayGameContainer>
     {/* orbs */}
     {/* timer icon row */}
@@ -61,10 +47,9 @@ export const PlayGameSection: React.FC<PlayGameSectionProps>= ({
     <div tw="flex gap-x-[25px] items-center justify-center">
       {/* player card */}
       <PlayGamePlayerCard
-        status={'connected'} 
-        player={user} 
-        players={game.players}
-        wager={game.wager} 
+        status={'connected'}
+        player={user}
+        wager={game.wager}
       />
       {
         /* dice render
@@ -76,9 +61,10 @@ export const PlayGameSection: React.FC<PlayGameSectionProps>= ({
       <Dice />
       {/* searching for opponent box */}
       <PlayGamePlayerCard
-        status={'connecting'} 
-        player={user} 
-        players={game.players}
+        status={isGamePlayable ? 'connected' : 'connecting'} 
+        opponent={players.filter(player => {
+          return player.uuid !== user.uuid 
+        })[0]}
         wager={game.wager}
       />
    </div>

diff --git a/src/containers/PlayGamePage/index.tsx b/src/containers/PlayGamePage/index.tsx
@@ -5,38 +5,40 @@ import {
  SectionHeaderSubtitle,
  SectionHeaderContainer
 } from "../../common/Section/types"
+import { useSelector } from 'react-redux';
 import { BADGE_TEXTS } from "../../common/GameBar"
 import { useParams } from "react-router-dom"
 import { ComponentLoader } from "../../common/loaders"
 import { PlayGameSection } from "../../components/PlayGameSection"
 import { FloatingOrbs } from "../../common/FloatingOrbs"
-import { AllPossibleWegaTypes } from "../../models";
 import MainContainer from '../../components/MainContainer';
+import { selectGameById } from '../../containers/App/api';
+
 import "twin.macro"
 
 const PlayGamePage = () => {
- const { gameType, id: gameId } = useParams()
+ const { id: gameId } = useParams();
+ const game = useSelector(state => selectGameById(state, Number(gameId as string)));
 
- return gameType && gameId ? (<div tw="min-w-[100vw] min-h-[100vh] relative">
+ return game ? (<div tw="min-w-[100vw] min-h-[100vh] relative">
   <Helmet>
-   <title>Play - {BADGE_TEXTS[gameType?.toUpperCase()]}</title>
+   <title>Play - {BADGE_TEXTS[game.gameType.toUpperCase()]}</title>
   </Helmet>
   <FloatingOrbs />
   <MainContainer>
    <Section
     direction="col"
     hdr={
      <SectionHeaderContainer tw="flex-col items-center">
-      <SectionHeaderTitle>{BADGE_TEXTS[gameType?.toUpperCase()]}</SectionHeaderTitle>
+      <SectionHeaderTitle>{BADGE_TEXTS[game.gameType.toUpperCase()]}</SectionHeaderTitle>
       <SectionHeaderSubtitle tw="dark:text-shinishi">
        The player with the highest number after each round, wins.
       </SectionHeaderSubtitle>
      </SectionHeaderContainer>
     }
    >
     <PlayGameSection
-     gameType={gameType.toUpperCase() as AllPossibleWegaTypes}
-     gameId={parseInt(gameId)}
+     game={game}
     />
    </Section>
   </MainContainer>