feat: added newPlayerResult Context to page game-result #190

chainhackers · Sep 2, 2023 · 9164023 · 9164023
1 parent 24d385e
commit 9164023
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 293 deletions.
diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx
@@ -1,109 +1,113 @@
-'use client';
-import classNames from 'classnames';
-import styles from './GameResult.module.scss';
-import imgWin from 'public/images/win.png';
-import playerImg from 'public/logo/account-avatar.png';
-import playerImg2 from 'public/logo/account-avatar2.png';
-import loseImg from 'public/images/lose.svg';
-import drawImg from 'public/images/draw.svg';
-import team from 'data/team.json';
-import {IGameResultProps} from './GameResultProps';
-import {BlockPayedGame, CustomButton, PurpleIcon, WhiteIcon} from 'components/shared';
-import {ScoreCard} from 'components/GameResult/ScoreCard/index';
-import {TeamMemberBasic} from 'components/shared/ui/TeamMemberBasic';
-import {OIcon, XIcon} from 'components/shared/ui/XOIcons';
-import {useEffect, useState} from 'react';
-import {FinishedGameState} from 'gameApi';
-import {IGameStateContext, useGameStateContext} from "../../contexts/GameStateContext";
+'use client'
+import classNames from 'classnames'
+import styles from './GameResult.module.scss'
+import imgWin from 'public/images/win.png'
+import loseImg from 'public/images/lose.svg'
+import drawImg from 'public/images/draw.svg'
+import team from 'data/team.json'
+
+import { BlockPayedGame, CustomButton } from 'components/shared'
+import { TeamMemberBasic } from 'components/shared/ui/TeamMemberBasic'
+import { useGameStateContext } from '../../contexts/GameStateContext'
 import { Player } from '../Player'
-import { Players } from '../Players'
+import { PlayerI } from '../../types/game'
 
 export const GameResult = () => {
-  const {finishResult, setFinishResult} = useGameStateContext();
-
-
-  console.log('Данные из finishResult: ', finishResult);
+  const {
+    finishResult, setFinishResult, playerResult, setPlayerResult,
+  } = useGameStateContext()
+
+  console.log('Данные из finishResult: ', finishResult)
   console.log('Данные из setFinishResult: ', setFinishResult)
   let winner, isDraw, cheatWin = false
   if (finishResult !== null) {
-    winner = finishResult.winner;
-    isDraw = finishResult.isDraw;
-    cheatWin = finishResult.cheatWin;
+    winner = finishResult.winner
+    isDraw = finishResult.isDraw
+    cheatWin = finishResult.cheatWin
   }
-      console.log('Данные из контекста в GameResult: ', finishResult);
-      console.log('Данные из winner: ', winner)
-  // } else return <div>finishResult NULL</div>
-
-
-  // const player1 = {
-  //   playerName: '0xh20...7260',
-  //   playerImg: playerImg,
-  //   showWinText: setFinishResult?.winner === true,
-  //   gameType: 'tic-tac-toe',
-  //   icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
-  // };
-  // const player2 = {
-  //   playerName: '0xh07...6035',
-  //   playerImg: playerImg2,
-  //   showWinText: setFinishResult?.winner === false,
-  //   gameType: 'tic-tac-toe',
-  //   icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
-  // };
-
-  return (
-    <div
-      className={classNames(styles.container, {
-        [styles.win]: winner,
-        [styles.lose]: !winner,
-        [styles.draw]: isDraw,
-      })}>
-      <h2 className={styles.title}>
-        {winner === true && <span>Winner!</span>}
-        {!winner === true && <span>Better Luck Next Time</span>}
-        {isDraw === true && <span>Better Luck Next Time</span>}
-      </h2>
-      {winner && <img src={imgWin.src} alt='Win' width={640} height={510} className={styles.imageWin}/>}
-      {winner === false && (
-        <h1 className={styles.titleResult}>
-          You lose <img src={loseImg.src} alt='lose' className={styles.imageSize}/>
-        </h1>
-      )}
-      {isDraw === true && (
-        <h1 className={styles.titleResult}>
-          Draw <img src={drawImg.src} alt='draw' className={styles.imageSize}/>
-        </h1>
-      )}
-      <div className={styles.containerCard}>
-        {/*<Players player1={players[0]} player2={players[1]} {...props} />*/}
-        {/*<ScoreCard playerIndex={0} players={players} setFinishResult={setFinishResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />*/}
-        {/*<ScoreCard playerIndex={1} players={players} setFinishResult={setFinishResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />*/}
-      </div>
-      <BlockPayedGame/>
-      <h2 className={styles.titleCenter}>Read more about our technology</h2>
-      <div className={styles.containerBtn}>
-        <CustomButton size='sm' color='gradient' radius='lg' text='Github' imagePosition='right'
-                      image='/images/git.svg'
-                      link='https://github.com/chainhackers'/>
-        <CustomButton size='sm' color='gradient' radius='lg' text='Publications' imagePosition='right'
-                      image='/images/publ.svg'/>
-      </div>
-      <h2 className={styles.titleCenterBottom}>
-        The dream team for your future
-        <br/> games is here!
-      </h2>
-      <div className={styles.teamMemberWrapper}>
-        <div className={styles.teamMemberContainer}>
-          {team && team.map((teamMember) => <TeamMemberBasic key={teamMember.name}
-                                                             image={teamMember.image}
-                                                             name={teamMember.name}
-                                                             role={teamMember.role}/>)}
-        </div>
-      </div>
-      <div className={styles.containerBtnColumn}>
-        <CustomButton size='lg' color='gradient' radius='lg' text='Tell us about your idea'/>
-        <CustomButton size='lg' color='transparent' radius='sm' text='Restart Demo' imagePosition='left'
-                      image='/images/dice.svg'/>
+
+  console.log('Данные из finishResult в GameResult: ', finishResult)
+  console.log('Данные из winner: ', winner)
+  // if (playerResult !== null) {
+  //   const players = playerResult
+  // }
+
+  const players = playerResult! as unknown as PlayerI[]
+  const player1 = players[0]
+  const player2 = players[1]
+  // const player1 = playerResult?.players ? players : [0]
+  // const player2 = playerResult?.players ? players : [1]
+  console.log('Данные из playerResult в GameResult', playerResult)
+
+  return (<div
+    className={classNames(styles.container, {
+      [styles.win]: winner, [styles.lose]: !winner, [styles.draw]: isDraw,
+    })}>
+    <h2 className={styles.title}>
+      {winner === true && <span>Winner!</span>}
+      {!winner && <span>Better Luck Next Time</span>}
+      {isDraw === true && <span>Better Luck Next Time</span>}
+    </h2>
+    {winner && <img src={imgWin.src} alt="Win" width={640} height={510}
+                    className={styles.imageWin}/>}
+    {winner === false && (<h1 className={styles.titleResult}>
+      You lose <img src={loseImg.src} alt="lose"
+                    className={styles.imageSize}/>
+    </h1>)}
+    {isDraw === true && (<h1 className={styles.titleResult}>
+      Draw <img src={drawImg.src} alt="draw" className={styles.imageSize}/>
+    </h1>)}
+    <div className={styles.containerCard}>
+      <Player {...player2} />
+      <Player {...player1} />
+      {/*<Players player1={players ? players : [0]} player2={players ? players : [1]} {...props} />*/}
+      {/*<ScoreCard playerIndex={0} players={players} setFinishResult={setFinishResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />*/}
+      {/*<ScoreCard playerIndex={1} players={players} setFinishResult={setFinishResult} playerName={''} playerImg={''} showWinText={false} icon={undefined} />*/}
+    </div>
+    <BlockPayedGame/>
+    <h2 className={styles.titleCenter}>Read more about our technology</h2>
+    <div className={styles.containerBtn}>
+      <CustomButton size="sm" color="gradient" radius="lg" text="Github"
+                    imagePosition="right"
+                    image="/images/git.svg"
+                    link="https://github.com/chainhackers"/>
+      <CustomButton size="sm" color="gradient" radius="lg" text="Publications"
+                    imagePosition="right"
+                    image="/images/publ.svg"/>
+    </div>
+    <h2 className={styles.titleCenterBottom}>
+      The dream team for your future
+      <br/> games is here!
+    </h2>
+    <div className={styles.teamMemberWrapper}>
+      <div className={styles.teamMemberContainer}>
+        {team && team.map((teamMember) => <TeamMemberBasic key={teamMember.name}
+                                                           image={teamMember.image}
+                                                           name={teamMember.name}
+                                                           role={teamMember.role}/>)}
       </div>
     </div>
-  );
-}
+    <div className={styles.containerBtnColumn}>
+      <CustomButton size="lg" color="gradient" radius="lg"
+                    text="Tell us about your idea"/>
+      <CustomButton size="lg" color="transparent" radius="sm"
+                    text="Restart Demo" imagePosition="left"
+                    image="/images/dice.svg"/>
+    </div>
+  </div>)
+}
+
+// const player1 = {
+//   playerName: '0xh20...7260',
+//   playerImg: playerImg,
+//   showWinText: setFinishResult?.winner === true,
+//   gameType: 'tic-tac-toe',
+//   icon: gameType === 'tic-tac-toe' ? <XIcon /> : <PurpleIcon />,
+// };
+// const player2 = {
+//   playerName: '0xh07...6035',
+//   playerImg: playerImg2,
+//   showWinText: setFinishResult?.winner === false,
+//   gameType: 'tic-tac-toe',
+//   icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
+// };
diff --git a/components/Players/Players.tsx b/components/Players/Players.tsx
@@ -1,31 +1,31 @@
-import {useTranslation} from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
-import {Button, Player} from 'components';
-import {PlayersPropsI} from './PlayersProps';
-import styles from './Players.module.scss';
-import {useState} from 'react';
+import { Button, Player } from 'components'
+import { PlayersPropsI } from './PlayersProps'
+import styles from './Players.module.scss'
+import React, { useState } from 'react'
 
 export const Players: React.FC<PlayersPropsI> = ({
-                                                   player1,
-                                                   player2,
-                                                   isTimeoutAllowed,
-                                                   initTimeout,
-                                                   isResolveTimeoutAllowed,
-                                                   resolveTimeout,
-                                                   isFinishTimeOutAllowed,
-                                                   finishTimeout,
-                                                   isTimeoutRequested,
-                                                   // connectPlayer,
-                                                 }) => {
-  const [legend, setLegend] = useState<'finish' | 'init' | 'resolve' | null>(null);
-  const {t} = useTranslation();
+  player1,
+  player2,
+  isTimeoutAllowed,
+  initTimeout,
+  isResolveTimeoutAllowed,
+  resolveTimeout,
+  isFinishTimeOutAllowed,
+  finishTimeout,
+  isTimeoutRequested, // connectPlayer,
+}) => {
+  const [legend, setLegend] = useState<'finish' | 'init' | 'resolve' | null>(
+    null)
+  const { t } = useTranslation()
 
   const closeLegendHandler: React.MouseEventHandler<HTMLDivElement> = () => {
-    setLegend(null);
+    setLegend(null)
   }
   const showLegendHandler = (type: 'finish' | 'init' | 'resolve'): React.MouseEventHandler<HTMLDivElement> => (event) => {
-    event.stopPropagation();
-    setLegend(type);
+    event.stopPropagation()
+    setLegend(type)
 
   }
 
@@ -34,13 +34,12 @@ export const Players: React.FC<PlayersPropsI> = ({
     'init': { disabled: boolean, cb: () => Promise<void> };
     'resolve': { disabled: boolean, cb: () => Promise<void> };
   } = {
-    'finish': {disabled: !isFinishTimeOutAllowed, cb: finishTimeout},
-    'init': {disabled: !isTimeoutAllowed, cb: initTimeout},
-    'resolve': {disabled: !isResolveTimeoutAllowed, cb: resolveTimeout},
+    'finish': { disabled: !isFinishTimeOutAllowed, cb: finishTimeout },
+    'init': { disabled: !isTimeoutAllowed, cb: initTimeout },
+    'resolve': { disabled: !isResolveTimeoutAllowed, cb: resolveTimeout },
   }
 
-  return (
-    <div className={styles.container}>
+  return (<div className={styles.container}>
       <div className={styles.containerPlayers}>
         <Player {...player1} />
         <Player {...player2} />
@@ -60,27 +59,33 @@ export const Players: React.FC<PlayersPropsI> = ({
         </div>}
         <div
           onClick={isTimeoutAllowed ? initTimeout : undefined}
-          className={cn(styles.popup_button, !isTimeoutAllowed ? styles.disabled : null)}>
+          className={cn(styles.popup_button,
+            !isTimeoutAllowed ? styles.disabled : null)}>
           {t('players.timeoutButtons.init')}
-          <span className={styles.hint} onClick={showLegendHandler('init')}>?</span>
+          <span className={styles.hint}
+                onClick={showLegendHandler('init')}>?</span>
         </div>
         <div
           onClick={isResolveTimeoutAllowed ? resolveTimeout : undefined}
-          className={cn(styles.popup_button, !isResolveTimeoutAllowed ? styles.disabled : null)}>
+          className={cn(styles.popup_button,
+            !isResolveTimeoutAllowed ? styles.disabled : null)}>
           {t('players.timeoutButtons.resolve')}
-          <span className={styles.hint} onClick={showLegendHandler('resolve')}>?</span>
+          <span className={styles.hint}
+                onClick={showLegendHandler('resolve')}>?</span>
         </div>
         <div
           onClick={isFinishTimeOutAllowed ? finishTimeout : undefined}
-          className={cn(styles.popup_button, !isFinishTimeOutAllowed ? styles.disabled : null)}>
+          className={cn(styles.popup_button,
+            !isFinishTimeOutAllowed ? styles.disabled : null)}>
           {t('players.timeoutButtons.finish')}
-          <span className={styles.hint} onClick={showLegendHandler('finish')}>?</span>
+          <span className={styles.hint}
+                onClick={showLegendHandler('finish')}>?</span>
         </div>
-        <div className={cn(styles.timeout, isTimeoutRequested ? styles.show : null)}>
+        <div className={cn(styles.timeout,
+          isTimeoutRequested ? styles.show : null)}>
           {isTimeoutRequested && t('players.timeout')}
         </div>
       </div>
 
-    </div>
-  );
-};
+    </div>)
+}