Skip to content

Commit

Permalink
fix: useEffect setState finishCheckResult #190
Browse files Browse the repository at this point in the history
  • Loading branch information
@habdevs
habdevs committed Sep 15, 2023
1 parent 6aa1c9c commit 5e962bc
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 41 deletions.
100 changes: 60 additions & 40 deletions components/GameField/GameField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { badgesQuery } from 'queries';
import styles from './GameField.module.scss';
import { Button } from 'components/shared';
import { useAccount } from 'wagmi';
import { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import cn from 'classnames';
import { FinishedGameState } from 'gameApi';
import { useGameStateContext } from '../../contexts/GameStateContext';
import router from "next/router";
import router from 'next/router';

export const GameField: React.FC<GameFieldPropsI> = ({
children,
Expand Down Expand Up @@ -37,18 +37,6 @@ export const GameField: React.FC<GameFieldPropsI> = ({
const { data, error, loading } = useQuery(badgesQuery, {
variables: { id: account.address?.toLowerCase() },
});
// TODO added context @habdevs #190
if (finishGameCheckResult) {

const newFinishResult = {
winner: finishGameCheckResult?.winner || false,
isDraw: finishGameCheckResult?.isDraw || false,
cheatWin: finishGameCheckResult?.cheatWin || false,
};

setFinishResult(newFinishResult);
console.log('CONTEXT GAMEFIELD', newFinishResult)
}

console.log('dispute mode', disputeMode, account.address);

Expand All @@ -60,7 +48,9 @@ export const GameField: React.FC<GameFieldPropsI> = ({
return !!address && !isOpponentAddress(address);
}

function makeFinishedGameReasonDescription(finishedGameState: FinishedGameState): string | undefined {
function makeFinishedGameReasonDescription(
finishedGameState: FinishedGameState,
): string | undefined {
if (finishedGameState.disqualified) {
if (isOpponentAddress(finishedGameState.disqualified)) {
return 'and opponent was disqualified';
Expand All @@ -83,16 +73,14 @@ export const GameField: React.FC<GameFieldPropsI> = ({
}
if (finishedGameState.winner) {
if (isOpponentAddress(finishedGameState.winner)) {

// TODO added router push to /game-result
console.log('WINNER /game-result', finishedGameState.winner)
console.log('WINNER /game-result', finishedGameState.winner);
router.push('/game-result');
return 'Your opponent wins';
} else {
return 'You win';
}
}

}

useEffect(() => {
Expand Down Expand Up @@ -139,7 +127,19 @@ export const GameField: React.FC<GameFieldPropsI> = ({
setShowDispute(false);
}
});

// TODO added context @habdevs #190
useEffect(() => {
if (finishGameCheckResult) {
const newFinishResult = {
winner: finishGameCheckResult?.winner || false,
isDraw: finishGameCheckResult?.isDraw || false,
cheatWin: finishGameCheckResult?.cheatWin || false,
};
setFinishResult(newFinishResult);
console.log('CONTEXT GAMEFIELD', newFinishResult);
}
}, [finishGameCheckResult]);

return (
<div className={styles.container}>
{version && <div className={styles.version}>{`Ver.${version}`}</div>}
Expand Down Expand Up @@ -227,32 +227,43 @@ export const GameField: React.FC<GameFieldPropsI> = ({
{/*//TODO @habdevs #190 Если isShowDispute равно true, отображается информация о споре.*/}
{isShowDispute && (
<div className={styles.appeal}>
<div className={styles.madeAppeal}>{disputeMode.disputeRunner === account.address ? `${t('shade.madeAppeal.runner')}` : `Opponent ${t('shade.madeAppeal.cheater')}`}</div>
<div className={styles.madeAppeal}>
{disputeMode.disputeRunner === account.address
? `${t('shade.madeAppeal.runner')}`
: `Opponent ${t('shade.madeAppeal.cheater')}`}
</div>
<div className={styles.notice}>{t('shade.notice')}</div>
</div>
)}
{/*//TODO @habdevs #190 Если finishGameCheckResult существует, отображается информация о проверке завершения игры*/}
{!!finishGameCheckResult && (
<div className={styles.checking_results}>
{finishGameCheckResult && finishGameCheckResult.winner && !isInvalidMove && !finishGameCheckResult.isDraw && (
<>
<p className={styles.message}>{t('shade.checking.winner')}</p>
<Button title={t('shade.checking.checkingWinner')} onClick={onClaimWin} />
</>
)}
{finishGameCheckResult &&
finishGameCheckResult.winner &&
!isInvalidMove &&
!finishGameCheckResult.isDraw && (
<>
<p className={styles.message}>{t('shade.checking.winner')}</p>
<Button title={t('shade.checking.checkingWinner')} onClick={onClaimWin} />
</>
)}
{/*// TODO: clear shadow FIELD #190 next task """You lose Please wait for the winner's confirmation""" */}
{finishGameCheckResult && !finishGameCheckResult.winner && !isInvalidMove && !finishGameCheckResult.isDraw && (

<p className={styles.message}>
{t('shade.checking.loser')} {t('shade.checking.checkingLoser')}
</p>
)}
{finishGameCheckResult && finishGameCheckResult.isDraw && !finishGameCheckResult.winner && (
<>
<p className={styles.message}>{t('shade.checking.draw')}</p>
<Button title={t('shade.checking.checkingDraw')} onClick={onClaimWin} />
</>
)}
{finishGameCheckResult &&
!finishGameCheckResult.winner &&
!isInvalidMove &&
!finishGameCheckResult.isDraw && (
<p className={styles.message}>
{t('shade.checking.loser')} {t('shade.checking.checkingLoser')}
</p>
)}
{finishGameCheckResult &&
finishGameCheckResult.isDraw &&
!finishGameCheckResult.winner && (
<>
<p className={styles.message}>{t('shade.checking.draw')}</p>
<Button title={t('shade.checking.checkingDraw')} onClick={onClaimWin} />
</>
)}
{finishGameCheckResult && finishGameCheckResult.winner && isInvalidMove && (
<>
<p className={styles.message}>{t('shade.checking.cheatGame')}</p>
Expand All @@ -270,7 +281,9 @@ export const GameField: React.FC<GameFieldPropsI> = ({
{!!finishedGameState && (
<div className={styles.win}>
{makeFinishedGameDescription(finishedGameState)}
<div className={styles.small}>{makeFinishedGameReasonDescription(finishedGameState)}</div>
<div className={styles.small}>
{makeFinishedGameReasonDescription(finishedGameState)}
</div>
</div>
)}
{/* // TODO: тут были бейджи @habdevs #190a*/}
Expand All @@ -286,10 +299,17 @@ export const GameField: React.FC<GameFieldPropsI> = ({

{!isShowShade && (
<div className={styles.header}>
<div className={styles.message}>{players && (players[0]?.moves || players[1]?.moves) && <div className={styles.moveMessage}>{players[0].moves ? 'Your move' : "Opponent's move"}</div>}</div>
<div className={styles.message}>
{players && (players[0]?.moves || players[1]?.moves) && (
<div className={styles.moveMessage}>
{players[0].moves ? 'Your move' : "Opponent's move"}
</div>
)}
</div>
<div className={styles.prize}></div>
</div>
)}

<div className={styles.gameBoardContainer}>{children}</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion components/GameResult/GameResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const GameResult = () => {
{winner && (
<img src={imgWin.src} alt='Win' width={640} height={510} className={styles.imageWin} />
)}
{!!winner && (
{!winner && !isDraw && (
<h1 className={styles.titleResult}>
You lose <img src={loseImg.src} alt='lose' className={styles.imageSize} />
</h1>
Expand Down

0 comments on commit 5e962bc

Please sign in to comment.