From 385ee399b5cd8081ba3bd9dd3d92df8cd6595551 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A5=D1=80=D0=B0=D0=BC=D1=8B=D1=86=D0=BA=D0=B8=D1=85=20?= =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD?= Date: Thu, 10 Aug 2023 16:08:40 +0500 Subject: [PATCH] feat: continued to refine the logic of the result display #190 --- components/GameField/GameField.tsx | 10 +--- components/GameResult/GameResult.tsx | 52 +++++++++++------ components/GameResult/GameResultProps.ts | 9 ++- components/GameResult/ScoreCard/ScoreCard.tsx | 4 +- .../GameResult/ScoreCard/ScoreCardProps.ts | 3 +- pages/game-result/index.tsx | 2 +- pages/games/[gameType].tsx | 57 +++++++++++++++---- 7 files changed, 93 insertions(+), 44 deletions(-) diff --git a/components/GameField/GameField.tsx b/components/GameField/GameField.tsx index bdd470fc..b05ee03c 100644 --- a/components/GameField/GameField.tsx +++ b/components/GameField/GameField.tsx @@ -30,13 +30,7 @@ export const GameField: React.FC = ({ const [isConnecting, setIsConnecting] = useState(false); const [isShowReport, setShowReport] = useState(false); const [isShowDispute, setShowDispute] = useState(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 = ({ // TODO: delete badge @habdevs #190 return (
- {showGameResult && } + {version &&
{`Ver.${version}`}
} {isShowShade && (
diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx index 42a35798..843c8bbb 100644 --- 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' ? : , - }; - const player2 = { - playerName: '0xh07...6035', - playerImg: playerImg2, - showWinText: result === 'lose', - gameType: 'tic-tac-toe', - icon: gameType === 'tic-tac-toe' ? : , - }; + 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' ? : , + // }; + // const player2 = { + // playerName: '0xh07...6035', + // playerImg: playerImg2, + // showWinText: result === 'lose', + // gameType: 'tic-tac-toe', + // icon: gameType === 'tic-tac-toe' ? : , + // }; return (
{ )}
- - + {player1 && ( + : } + result={result} + gameType={gameType} + /> + )} + {player2 && ( + : } + result={result === 'win' ? 'lose' : result === 'lose' ? 'win' : result} + gameType={gameType} + /> + )}

Read more about our technology

diff --git a/components/GameResult/GameResultProps.ts b/components/GameResult/GameResultProps.ts index 2af35cd8..f04b99d2 100644 --- 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 index 30f483a3..74bc7eb0 100644 --- 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 (
{result === 'win' && showWinText &&

Winner!

}
- Player + Player

{playerName}

{icon}
diff --git a/components/GameResult/ScoreCard/ScoreCardProps.ts b/components/GameResult/ScoreCard/ScoreCardProps.ts index cc0bde09..33f9537b 100644 --- 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 index c159edac..bbe35369 100644 --- a/pages/game-result/index.tsx +++ b/pages/game-result/index.tsx @@ -24,7 +24,7 @@ const GameResultPage = () => { - +
); diff --git a/pages/games/[gameType].tsx b/pages/games/[gameType].tsx index d839eac9..cb1980b1 100644 --- 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 = ({ 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(false); @@ -137,6 +150,7 @@ const Game: NextPage = ({ gameType, version }) => { }; const runFinishGameHandler = async () => { + if (!nextGameState) { throw 'no nextGameState'; } @@ -594,18 +608,25 @@ const Game: NextPage = ({ gameType, version }) => { finishTimeout={finishTimeoutHandler} isTimeoutRequested={isTimeoutRequested} onRunDisput={runDisputeHandler} - isDisputAvailable={isDisputAvailable} + isDisputAvailable={isDisputAvailable} gameId={gameId} /> - {gameType === 'checkers' &&
{t('games.checkers.disclaimer.notice')} -
} - + {gameType === 'checkers' && ( + +
+ + {t('games.checkers.disclaimer.notice')} + +
+ + )} + = ({ gameType, version }) => { version={version} onClaimWin={runFinishGameHandler} onRunDisput={runDisputeHandler} - isInvalidMove={isInvalidMove} - > + isInvalidMove={isInvalidMove}> {gameComponent} + {/* TODO: add props @habdevs #190 */} + {gameResult && } -
- +
+
- {gameType === 'checkers' && {t('games.checkers.disclaimer.s1')} - {t('games.checkers.disclaimer.l1')} - {t('games.checkers.disclaimer.s2')}} + {gameType === 'checkers' && ( + + {t('games.checkers.disclaimer.s1')}{' '} + + + {t('games.checkers.disclaimer.l1')} + + {' '} + {t('games.checkers.disclaimer.s2')} + + )}
); } @@ -646,8 +677,10 @@ export const getStaticPaths: GetStaticPaths = () => { const gamesType = ['tic-tac-toe', 'checkers', 'other']; const paths = gamesType.map((gameType) => ({ params: { gameType } })); return { + paths, fallback: false, + }; };