feat: continued to refine the logic of the result display #190

chainhackers · Aug 10, 2023 · 385ee39 · 385ee39
1 parent 7ae1976
commit 385ee39
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 44 deletions.
diff --git a/components/GameField/GameField.tsx b/components/GameField/GameField.tsx
@@ -30,13 +30,7 @@ export const GameField: React.FC<GameFieldPropsI> = ({
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [isShowReport, setShowReport] = useState<boolean>(false);
   const [isShowDispute, setShowDispute] = useState<boolean>(false);
-  const [showGameResult, setShowGameResult] = useState(false);
-
-  useEffect(() => {
-    if (!!finishedGameState) {
-      setShowGameResult(true);
-    }
-  }, [finishedGameState]);
+
 
   // TODO: delete badge @habdevs #190
   // type TMedal = 'bronze' | 'silver' | 'gold';
@@ -218,7 +212,7 @@ export const GameField: React.FC<GameFieldPropsI> = ({
   // TODO: delete badge @habdevs #190
   return (
     <div className={styles.container}>
-      {showGameResult && <GameResult result={'win'} gameType={'checkers'} />}
+
       {version && <div className={styles.version}>{`Ver.${version}`}</div>}
       {isShowShade && (
         <div className={styles.shade}>

diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx
@@ -13,21 +13,21 @@ import { ScoreCard } from 'components/GameResult/ScoreCard/index';
 import { TeamMemberBasic } from 'components/shared/ui/TeamMemberBasic';
 import { OIcon, XIcon } from 'components/shared/ui/XOIcons';
 export const GameResult = (props: IGameResultProps) => {
-  const { result, gameType } = props;
-  const player1 = {
-    playerName: '0xh20...7260',
-    playerImg: playerImg,
-    showWinText: result === 'win',
-    gameType: 'tic-tac-toe',
-    icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
-  };
-  const player2 = {
-    playerName: '0xh07...6035',
-    playerImg: playerImg2,
-    showWinText: result === 'lose',
-    gameType: 'tic-tac-toe',
-    icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
-  };
+  const { result, player1, player2, gameType } = props;
+  // const player1 = {
+  //   playerName: '0xh20...7260',
+  //   playerImg: playerImg,
+  //   showWinText: result === 'win',
+  //   gameType: 'tic-tac-toe',
+  //   icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
+  // };
+  // const player2 = {
+  //   playerName: '0xh07...6035',
+  //   playerImg: playerImg2,
+  //   showWinText: result === 'lose',
+  //   gameType: 'tic-tac-toe',
+  //   icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
+  // };
   return (
     <div
       className={classNames(styles.container, {
@@ -52,8 +52,26 @@ export const GameResult = (props: IGameResultProps) => {
         </h1>
       )}
       <div className={styles.containerCard}>
-        <ScoreCard {...player1} result={result} />
-        <ScoreCard {...player2} result={result === 'win' ? 'lose' : result === 'lose' ? 'win' : result} />
+        {player1 && (
+          <ScoreCard
+            playerName={player1.playerName}
+            avatarUrl={player1.avatarUrl}
+            showWinText={result === 'win'}
+            icon={gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />}
+            result={result}
+            gameType={gameType}
+          />
+        )}
+        {player2 && (
+          <ScoreCard
+            playerName={player2.playerName}
+            avatarUrl={player2.avatarUrl}
+            showWinText={result === 'lose'}
+            icon={gameType === 'tic-tac-toe' ? <OIcon /> : <WhiteIcon />}
+            result={result === 'win' ? 'lose' : result === 'lose' ? 'win' : result}
+            gameType={gameType}
+          />
+        )}
       </div>
       <BlockPayedGame />
       <h2 className={styles.titleCenter}>Read more about our technology</h2>

diff --git a/components/GameResult/GameResultProps.ts b/components/GameResult/GameResultProps.ts
@@ -1,6 +1,9 @@
-export type TGameResult = 'win' | 'lose' | 'draw'
-import { TGameType } from 'types/game';
+export type TGameResult = 'winner' | 'loser' | 'isDraw'
+import { PlayerI, TGameType } from 'types/game';
 export interface IGameResultProps {
   result: TGameResult;
-  gameType: TGameType;
+  gameType: string;
+  player1: PlayerI | null;
+  player2: PlayerI | null;
+
 }
diff --git a/components/GameResult/ScoreCard/ScoreCard.tsx b/components/GameResult/ScoreCard/ScoreCard.tsx
@@ -3,13 +3,13 @@ import styles from './ScoreCard.module.scss';
 import { ScoreCardProps } from './ScoreCardProps';
 import Image from 'next/image';
 export const ScoreCard = (props: ScoreCardProps) => {
-  const { playerName, result, playerImg, showWinText, icon } = props;
+  const { playerName, result, avatarUrl, showWinText, icon } = props;
   return (
     <div className={`${styles.container}`}>
       <div className={`${styles.card} ${result === 'win' ? styles.highlight : ''}`}>
         {result === 'win' && showWinText && <p className={styles.titleColor}>Winner!</p>}
         <div className={styles.containerPlayer}>
-          <Image src={playerImg} alt='Player' width={24} height={24} />
+          <Image src={avatarUrl} alt='Player' width={24} height={24} />
           <p className={styles.addressPlayer}>{playerName}</p>
           {icon}
         </div>

diff --git a/components/GameResult/ScoreCard/ScoreCardProps.ts b/components/GameResult/ScoreCard/ScoreCardProps.ts
@@ -3,8 +3,9 @@ import { StaticImageData } from 'next/image';
 import { ReactNode } from 'react';
 export interface ScoreCardProps {
   playerName: string;
-  playerImg: string | StaticImageData;
+  avatarUrl: string | StaticImageData;
   result: TGameResult;
   showWinText: boolean;
   icon: ReactNode;
+  gameType: string;
 }
diff --git a/pages/game-result/index.tsx b/pages/game-result/index.tsx
@@ -24,7 +24,7 @@ const GameResultPage = () => {
         <button onClick={handleGameTypeButtonClick} className='p-2 bg-slate-600 text-[#C89DFB] text-4xl w-[300px] rounded-3xl m-2 place-content-center'>
           Переключить игру
         </button>
-        <GameResult result={currentResult} gameType={gameType} />
+        <GameResult result={currentResult} gameType={gameType} player1={null} player2={null} />
       </div>
     </div>
   );

diff --git a/pages/games/[gameType].tsx b/pages/games/[gameType].tsx
@@ -33,6 +33,7 @@ import useConversation, { IAnyMessage } from "../../hooks/useConversation";
 import { PlayerI, TGameType } from 'types/game';
 import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
+import { GameResult } from 'components/GameResult';
 
 
 interface IGamePageProps {
@@ -49,6 +50,18 @@ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
 const FETCH_OPPONENT_ADDRESS_TIMEOUT = 2500;
 
 const Game: NextPage<IGamePageProps> = ({ gameType, version }) => {
+// TODO: @habdevs #190
+const [gameResult, setGameResult] = useState<{ winner: PlayerI | null; loser: PlayerI | null; isDraw: boolean } | null>(null);
+const handleGameFinished = (finishedGameState: FinishedGameState, players: PlayerI[]) => {
+  const winner = players.find((player) => player.address === finishedGameState.winner);
+  const loser = players.find((player) => player.address === finishedGameState.loser);
+
+  setGameResult({
+    winner: winner || null,
+    loser: loser || null,
+    isDraw: finishedGameState.isDraw,
+  });
+};
 
   const [playerIngameId, setPlayerIngameId] = useState<0 | 1>(0);
   const [isInDispute, setIsInDispute] = useState<boolean>(false);
@@ -137,6 +150,7 @@ const Game: NextPage<IGamePageProps> = ({ gameType, version }) => {
   };
 
   const runFinishGameHandler = async () => {
+
     if (!nextGameState) {
       throw 'no nextGameState';
     }
@@ -594,38 +608,55 @@ const Game: NextPage<IGamePageProps> = ({ gameType, version }) => {
             finishTimeout={finishTimeoutHandler}
             isTimeoutRequested={isTimeoutRequested}
             onRunDisput={runDisputeHandler}
-            isDisputAvailable={isDisputAvailable}          
+            isDisputAvailable={isDisputAvailable}
             gameId={gameId}
           />
-          {gameType === 'checkers' && <Link href="#disclaimer"><div className={styles.disclaimerLink}><DisclaimerNotice><strong>{t('games.checkers.disclaimer.notice')}
-          </strong></DisclaimerNotice></div></Link>}
-
+          {gameType === 'checkers' && (
+            <Link href='#disclaimer'>
+              <div className={styles.disclaimerLink}>
+                <DisclaimerNotice>
+                  <strong>{t('games.checkers.disclaimer.notice')}</strong>
+                </DisclaimerNotice>
+              </div>
+            </Link>
+          )}
+
           <GameField
             gameId={gameId?.toString()}
             rivalPlayerAddress={opponentAddress}
             isConnected={!!client}
             isInDispute={isInDispute}
-            disputeMode={{isInDispute, disputeRunner}}
+            disputeMode={{ isInDispute, disputeRunner }}
             finishedGameState={finishedGameState}
             onConnect={setConversationHandler}
             players={players}
             finishGameCheckResult={finishGameCheckResult}
             version={version}
             onClaimWin={runFinishGameHandler}
             onRunDisput={runDisputeHandler}
-            isInvalidMove={isInvalidMove}
-          >
+            isInvalidMove={isInvalidMove}>
             {gameComponent}
           </GameField>
+          {/* TODO: add props @habdevs #190 */}
+          {gameResult && <GameResult result={gameResult.isDraw ? 'draw' : gameResult.winner ? 'win' : 'lose'} player1={gameResult.winner} player2={gameResult.loser} gameType={gameType} 
+          />}
           <RightPanel>
-          <div style={{ position: 'absolute', right: '0'}}>
-              <GetHistory history={lastMessages} messageHistory={messageHistory} gameId={gameId}/>
+            <div style={{ position: 'absolute', right: '0' }}>
+              <GetHistory history={lastMessages} messageHistory={messageHistory} gameId={gameId} />
             </div>
             <XMTPChatLog anyMessages={collectedMessages} isLoading={loading} />
           </RightPanel>
-          {gameType === 'checkers' && <Disclaimer>{t('games.checkers.disclaimer.s1')} <strong>
-            <Link href='https://www.officialgamerules.org/checkers' target={'_blank'}>{t('games.checkers.disclaimer.l1')}</Link>
-            </strong> {t('games.checkers.disclaimer.s2')}</Disclaimer>}
+          {gameType === 'checkers' && (
+            <Disclaimer>
+              {t('games.checkers.disclaimer.s1')}{' '}
+              <strong>
+                <Link href='https://www.officialgamerules.org/checkers' target={'_blank'}>
+                  {t('games.checkers.disclaimer.l1')}
+                </Link>
+              </strong>{' '}
+              {t('games.checkers.disclaimer.s2')}
+            </Disclaimer>
+          )}
         </div>
       );
     }
@@ -646,8 +677,10 @@ export const getStaticPaths: GetStaticPaths<IParams> = () => {
   const gamesType = ['tic-tac-toe', 'checkers', 'other'];
   const paths = gamesType.map((gameType) => ({ params: { gameType } }));
   return {
+
     paths,
     fallback: false,
+
   };
 };