feat: upd score card #190

chainhackers · Aug 14, 2023 · 30592a7 · 30592a7
1 parent 80e8e17
commit 30592a7
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 206 deletions.
diff --git a/components/GameField/GameField.tsx b/components/GameField/GameField.tsx
@@ -31,7 +31,6 @@ export const GameField: React.FC<GameFieldPropsI> = ({
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [isShowReport, setShowReport] = useState<boolean>(false);
   const [isShowDispute, setShowDispute] = useState<boolean>(false);
-
 
   // TODO: delete badge @habdevs #190
   // type TMedal = 'bronze' | 'silver' | 'gold';
@@ -213,12 +212,11 @@ export const GameField: React.FC<GameFieldPropsI> = ({
   //   }
   //   return <div className={styles.row}>{badges}</div>;
   // };
-// TODO: add GameResult @habdevs #190
+  // TODO: add GameResult @habdevs #190
   // return <div>{showGameResult && <GameResult result={'win'} gameType={'checkers'} />}</div>;
   // TODO: delete badge @habdevs #190
   return (
     <div className={styles.container}>
-
       {version && <div className={styles.version}>{`Ver.${version}`}</div>}
       {isShowShade && (
         <div className={styles.shade}>
@@ -341,7 +339,7 @@ export const GameField: React.FC<GameFieldPropsI> = ({
               <div className={styles.small}>{makeFinishedGameReasonDescription(finishedGameState)}</div>
             </div>
           )}
-// TODO: delete badge @habdevs #190
+          // TODO: delete badge @habdevs #190
           {/* {!!finishedGameState && (
             <div className={styles.link}>
               <div className={styles.badges}>

diff --git a/components/GameResult/ScoreCard/ScoreCard.tsx b/components/GameResult/ScoreCard/ScoreCard.tsx
@@ -1,16 +1,76 @@
-import React from 'react';
 import styles from './ScoreCard.module.scss';
 import { ScoreCardProps } from './ScoreCardProps';
 import Image from 'next/image';
+import { BigNumber } from 'ethers';
+import { getPlayers, getArbiterRead } from 'gameApi';
+import { useState, useEffect } from 'react';
+import { ZERO_ADDRESS } from 'types/constants';
+import { useRouter } from 'next/router';
+import { useAccount } from 'wagmi';
 export const ScoreCard = (props: ScoreCardProps) => {
   const { playerName, result, avatarUrl, showWinText, icon } = props;
+
+  const { query } = useRouter();
+  const account = useAccount();
+  const gameId = parseInt(query.game as string);
+  const [opponentAddress, setOpponentAddress] = useState(null);
+  const [playerIngameId, setPlayerIngameId] = useState<0 | 1>(0);
+
+  useEffect(() => {
+    const FETCH_OPPONENT_ADDRESS_TIMEOUT = 5000;
+
+    const interval = setInterval(async () => {
+      if (opponentAddress) {
+        clearInterval(interval);
+        return;
+      }
+
+      if (!gameId) {
+        clearInterval(interval);
+        return;
+      }
+
+      try {
+        const players = await getPlayers(await getArbiterRead(), BigNumber.from(gameId));
+        const address = account.address;
+
+        if (!address || !players) {
+          clearInterval(interval);
+          return;
+        }
+
+        if (!(players[0] === ZERO_ADDRESS && players[1] === ZERO_ADDRESS) && !players.includes(address)) {
+          throw new Error(`Player ${address} is not in game ${gameId}, players: ${players}`);
+        }
+
+        const inGameId = players.indexOf(address) === 0 ? 0 : 1;
+        setPlayerIngameId(inGameId);
+
+        let opponent = players[1 - inGameId];
+        if (!opponent || opponent === ZERO_ADDRESS) {
+          clearInterval(interval);
+          return;
+        }
+
+        setOpponentAddress(opponent);
+        clearInterval(interval);
+      } catch (error) {
+        console.error('Error fetching opponent address:', error);
+      }
+    }, FETCH_OPPONENT_ADDRESS_TIMEOUT);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [opponentAddress, gameId]);
+
   return (
     <div className={`${styles.container}`}>
       <div className={`${styles.card} ${result === 'winner' ? styles.highlight : ''}`}>
         {result === 'winner' && showWinText && <p className={styles.titleColor}>Winner!</p>}
         <div className={styles.containerPlayer}>
           <Image src={avatarUrl} alt='Player' width={24} height={24} />
-          <p className={styles.addressPlayer}>{playerName}</p>
+          <p className={styles.addressPlayer}>{playerName[0].playerName}</p>
           {icon}
         </div>
       </div>

diff --git a/components/shared/Button/ButtonProps.ts b/components/shared/Button/ButtonProps.ts
@@ -5,4 +5,5 @@ export interface ButtonPropsI extends React.ButtonHTMLAttributes<HTMLButtonEleme
   color?: string;
   borderless?: boolean;
   size?: 'sm' | 'md';
+  onClick?: () => void
 }
diff --git a/pages/game-result/index.tsx b/pages/game-result/index.tsx
@@ -6,27 +6,12 @@ import { FinishedGameState } from 'gameApi/index';
 import { useRouter } from 'next/router';
 
 const GameResultPage = () => {
-const [finishedGameState, setFinishedGameState] = useState<FinishedGameState | null>(null);
-const router = useRouter();
-const dynamicGameType = router.query.gameType as TGameType;
+  const [finishedGameState, setFinishedGameState] = useState<FinishedGameState | null>(null);
+  const router = useRouter();
+  const getGameType = router.query.gameType as TGameType;
   return (
     <div className={styles.wrapper}>
-      <div className={styles.container}>
-        {finishedGameState && (
-          <GameResult
-            result={finishedGameState.winner ? 'winner' : finishedGameState.isDraw ? 'isDraw' : 'loser'}
-            gameType={dynamicGameType}
-            player1={{
-              playerName: finishedGameState.winner ? 'playerName' : 'Opponent Name',
-              avatarUrl: '',
-            }}
-            player2={{
-              playerName: finishedGameState.winner ? 'Opponent Name' : 'Your Name',
-              avatarUrl: '',
-            }}
-          />
-        )}
-      </div>
+      <div className={styles.container}>{finishedGameState && <GameResult gameType={getGameType} result={'winner'} player1={null} player2={null} />}</div>
     </div>
   );
 };