feat: results experiments â�#190

chainhackers · Aug 17, 2023 · afa6148 · afa6148
1 parent c0bbefb
commit afa6148
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 52 deletions.
diff --git a/components/GameField/GameField.tsx b/components/GameField/GameField.tsx
@@ -29,11 +29,12 @@ export const GameField: React.FC<GameFieldPropsI> = ({
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [isShowReport, setShowReport] = useState<boolean>(false);
   const [isShowDispute, setShowDispute] = useState<boolean>(false);
-  console.log('CLAIM WIN ', onClaimWin);
+  console.log('CLAIM WIN GameField', onClaimWin);
   console.log('FINISHED GameField game state ', finishedGameState);
   console.log('FINISH GameField game result ', finishGameCheckResult);
-  console.log('PLAYERS ', players);
+  console.log('PLAYERS GameField', players);
   console.log('FINISH GameField FinishedGameState', FinishedGameState);
+  // console.log('FINISH Game Field MakeFinished', makeFinishedGameDescription)
   type TMedal = 'bronze' | 'silver' | 'gold';
   type TBelt = 'white' | 'green' | 'black';
   type TAchievement = 'winner' | 'loser' | 'draw' | 'cheater';

diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx
@@ -17,24 +17,23 @@ import { FinishedGameState } from 'gameApi';
 export const GameResult= (props: IGameResultProps) => {
   const { gameType, players, finishGameCheckResult, finishedGameState } = props;
 
-  // const [finishGameCheckResult, setFinishGameCheckResult] = useState<null | { winner: boolean; isDraw: boolean; cheatWin: boolean }>(null);
-  // const [finishedGameState, setFinishedGameState] = useState<FinishedGameState | null>(null);
-  console.log('FInish GamefinishGameCheckResultfinishGameCheckResult', finishGameCheckResult);
+  console.log('FINISH GameResult FinishedGameState', FinishedGameState)
+  console.log('FINISH GameResult finishGameCheckResult', finishGameCheckResult);
 
-  const player1 = {
-    playerName: '0xh20...7260',
-    playerImg: playerImg,
-    showWinText: finishGameCheckResult?.winner === true,
-    gameType: 'tic-tac-toe',
-    icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
-  };
-  const player2 = {
-    playerName: '0xh07...6035',
-    playerImg: playerImg2,
-    showWinText: finishGameCheckResult?.winner === false,
-    gameType: 'tic-tac-toe',
-    icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
-  };
+  // const player1 = {
+  //   playerName: '0xh20...7260',
+  //   playerImg: playerImg,
+  //   showWinText: finishGameCheckResult?.winner === true,
+  //   gameType: 'tic-tac-toe',
+  //   icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
+  // };
+  // const player2 = {
+  //   playerName: '0xh07...6035',
+  //   playerImg: playerImg2,
+  //   showWinText: finishGameCheckResult?.winner === false,
+  //   gameType: 'tic-tac-toe',
+  //   icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
+  // };
 
   return (
     <div
@@ -60,8 +59,8 @@ export const GameResult= (props: IGameResultProps) => {
         </h1>
       )}
       <div className={styles.containerCard}>
-        <ScoreCard playerIndex={0} players={players} finishGameCheckResult={finishGameCheckResult} />
-        <ScoreCard playerIndex={1} players={players} finishGameCheckResult={finishGameCheckResult} />
+        <ScoreCard playerIndex={0} players={players} finishGameCheckResult={finishGameCheckResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />
+        <ScoreCard playerIndex={1} players={players} finishGameCheckResult={finishGameCheckResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />
       </div>
       <BlockPayedGame />
       <h2 className={styles.titleCenter}>Read more about our technology</h2>

diff --git a/components/GameResult/ScoreCard/ScoreCard.tsx b/components/GameResult/ScoreCard/ScoreCard.tsx
@@ -5,20 +5,11 @@ import Image from 'next/image';
 import { FinishedGameState } from 'gameApi';
 export const ScoreCard = (props: ScoreCardProps) => {
   const { playerImg, showWinText, icon, playerIndex, players, finishGameCheckResult } = props;
-  const [finishedGameState, setFinishedGameState] = useState<FinishedGameState | null>(null);
-
-  useEffect(() => {
-    if (finishGameCheckResult?.winner && finishedGameState === null) {
-      setFinishedGameState(FinishedGameState.fromGameFinishedArgs(finishGameCheckResult));
-    }
-  }, [finishGameCheckResult, finishedGameState]);
-
   const playerData = players ? players[playerIndex] : null;
   // console.log('CLAIM WIN  onClaimWin ', onClaimWin);
-  console.log('FINISH scoreCard finishedGameState ', finishedGameState);
-  console.log('FINISH scoreCard finishGameCheckResult ', finishGameCheckResult);
-  console.log('PLAYERS scoreCard', players);
-  console.log('FINISH scoreCard FinishedGameState', FinishedGameState);
+  // console.log('FINISH scoreCard finishGameCheckResult ', finishGameCheckResult);
+  // console.log('PLAYERS scoreCard', players);
+  // console.log('FINISH scoreCard FinishedGameState', FinishedGameState);
   return (
     <div className={`${styles.container}`}>
       <div className={`${styles.card} ${finishGameCheckResult?.winner === true ? styles.highlight : ''}`}>

diff --git a/components/GameResult/ScoreCard/ScoreCardProps.ts b/components/GameResult/ScoreCard/ScoreCardProps.ts
@@ -1,11 +1,9 @@
-import { TGameResult } from '../GameResultProps';
 import { StaticImageData } from 'next/image';
 import { ReactNode } from 'react';
 import { PlayerI } from 'types/game';
 export interface ScoreCardProps {
   playerName: string;
   playerImg: string | StaticImageData;
-  result: TGameResult;
   showWinText: boolean;
   icon: ReactNode;
   playerIndex: number;

diff --git a/pages/game-result/index.tsx b/pages/game-result/index.tsx
@@ -1,29 +1,22 @@
 import { useState } from 'react';
 import { GameResult } from 'components/GameResult';
 import styles from './gameResult.module.scss';
+import {FinishedGameState} from "../../gameApi";
+import {PlayerI} from "../../types/game";
 const GameResultPage = () => {
   const [resultIndex, setResultIndex] = useState(0);
   const [gameType, setGameType] = useState<'tic-tac-toe' | 'checkers'>('checkers');
-  // const results: TGameResult[] = ['winner', 'loser', 'isDraw'];
-
-  // const handleButtonClick = () => {
-  //   setResultIndex((prevIndex) => (prevIndex + 1) % results.length);
-  // };
-  // const handleGameTypeButtonClick = () => {
-  //   setGameType((prevGameType) => (prevGameType === 'tic-tac-toe' ? 'checkers' : 'tic-tac-toe'));
-  // };
-
-  // const currentResult = results[resultIndex];
+  const [finishGameCheckResult, setFinishGameCheckResult] = useState<null | { winner: boolean , isDraw: boolean, cheatWin: boolean} >(null);
+  const [finishedGameState, setFinishedGameState] = useState<FinishedGameState | null>(null);
+  const [players, setPlayers] = useState<PlayerI[]>([]);
+  console.log('FINISH Page GAMERESULT finishedGameState ', finishedGameState);
+  console.log('FINISH Page GAMERESULT finishGameCheckResult ', finishGameCheckResult);
+  console.log('PLAYERS Page GAMERESULT', players);
+  console.log('FINISH Page GAMERESULT FinishedGameState', FinishedGameState);
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        {/* <button onClick={handleButtonClick} className='p-2 bg-slate-600 text-[#C89DFB] text-4xl w-[300px] rounded-3xl m-2 place-content-center'>
-          Переключить результат
-        </button>
-        <button onClick={handleGameTypeButtonClick} className='p-2 bg-slate-600 text-[#C89DFB] text-4xl w-[300px] rounded-3xl m-2 place-content-center'>
-          Переключить игру
-        </button> */}
-        <GameResult />
+        <GameResult finishGameCheckResult={finishGameCheckResult} finishedGameState={finishedGameState} players={players} />
       </div>
     </div>
   );