feat: rewrite context and ScoreCard #190

chainhackers · Sep 4, 2023 · 78eb8ec · 78eb8ec
1 parent 9164023
commit 78eb8ec
Show file tree

Hide file tree

Showing 9 changed files with 659 additions and 661 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -5,7 +5,7 @@ module.exports = {
   trailingComma: "all",
   jsxBracketSameLine: true,
   tabWidth: 2,
-  printWidth: 200,
+  printWidth: 100,
   singleAttributePerLine: false,
   useTabs: false,
 }
diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx
@@ -1,101 +1,133 @@
-'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 { PlayerI } from '../../types/game'
+'use client';
+import React from 'react';
+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 { PlayerI } from '../../types/game';
+import { Players } from '../Players';
+import { ScoreCard } from './ScoreCard'
 
 export const GameResult = () => {
-  const {
-    finishResult, setFinishResult, playerResult, setPlayerResult,
-  } = useGameStateContext()
-
-  console.log('Данные из finishResult: ', finishResult)
-  console.log('Данные из setFinishResult: ', setFinishResult)
-  let winner, isDraw, cheatWin = false
+  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('Данные из finishResult в GameResult: ', finishResult)
-  console.log('Данные из winner: ', winner)
+
+  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 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}/>)}
+  // 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}>
+        {/*<Players player1={players[0]} player2={players[1]} {...props}/>*/}
+        {/*<Player {...player2} />*/}
+        {/*<Player {...player1} />*/}
+        {/*<Players player1={players ? players : [0]} player2={players ? players : [1]} {...props} />*/}
+        <ScoreCard playerResult={playerResult} finishResult={finishResult}/>
+        <ScoreCard playerResult={playerResult} finishResult={finishResult}/>
+      </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>
-    <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',
@@ -110,4 +142,4 @@ export const GameResult = () => {
 //   showWinText: setFinishResult?.winner === false,
 //   gameType: 'tic-tac-toe',
 //   icon: gameType ===  'tic-tac-toe' ? <OIcon /> : <WhiteIcon />,
-// };
+// };
diff --git a/components/GameResult/ScoreCard/ScoreCard.tsx b/components/GameResult/ScoreCard/ScoreCard.tsx
@@ -1,19 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styles from './ScoreCard.module.scss';
-import { ScoreCardProps } from './ScoreCardProps';
+import { IScoreCardProps } from './ScoreCardProps';
 import Image from 'next/image';
-import { FinishedGameState } from 'gameApi';
-export const ScoreCard = (props: ScoreCardProps) => {
-  const { playerImg, showWinText, icon, playerIndex, players, finishGameCheckResult } = props;
-  const playerData = players ? players[playerIndex] : null;
+import playerImg from 'public/images/empty_avatar.png';
+
+export const ScoreCard: React.FC<IScoreCardProps> = ({
+  address,
+  playerType,
+  moves,
+  finishResult,
+  showWinText,
+}) => {
+  // const playerData = players ? players[playerIndex] : null;
+  const truncatedAddress = address ? address.slice(0, 5) + '...' + address.slice(-5) : null;
   return (
     <div className={`${styles.container}`}>
-      <div className={`${styles.card} ${finishGameCheckResult?.winner === true ? styles.highlight : ''}`}>
-        {finishGameCheckResult?.winner === true && showWinText && <p className={styles.titleColor}>Winner!</p>}
+      <div className={`${styles.card} ${finishResult?.winner === true ? styles.highlight : ''}`}>
+        {finishResult?.winner === true && showWinText && (
+          <p className={styles.titleColor}>Winner!</p>
+        )}
         <div className={styles.containerPlayer}>
-          <Image src={playerImg} alt='Player' width={24} height={24} />
-          <p className={styles.addressPlayer}>{playerData?.playerName}</p>
-          {icon}
+          <Image src={playerImg.src} alt='Player' width={24} height={24} />
+          <p className={styles.addressPlayer}>{truncatedAddress}</p>
+          {/*{icon}*/}
         </div>
       </div>
     </div>

diff --git a/components/GameResult/ScoreCard/ScoreCardProps.ts b/components/GameResult/ScoreCard/ScoreCardProps.ts
@@ -1,17 +1,25 @@
 import { StaticImageData } from 'next/image';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { PlayerI } from 'types/game';
-export interface ScoreCardProps {
-  playerName: string,
-  playerImg: string | StaticImageData,
-  showWinText: boolean,
-  icon: ReactNode,
-  playerIndex: number,
-  players?: PlayerI[],
-  finishGameCheckResult: {
-    winner: boolean;
-    isDraw: boolean;
-    cheatWin: boolean;
-  } | null,
+import { PlayerPropsI } from '../../Player/PlayerProps'
+export interface IScoreCardProps extends PlayerPropsI{
+  playerResult: {
+    address?: string | null;
+    playerType?: React.ReactNode;
+    moves?: boolean;
+  } | null;
+  showWinText?: boolean,
   finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null
 }
+
+// playerName: string,
+// playerImg: string | StaticImageData,
+// showWinText: boolean,
+// icon: ReactNode,
+// playerIndex: number,
+// players?: PlayerI[],
+// finishGameCheckResult: {
+//   winner: boolean;
+//   isDraw: boolean;
+//   cheatWin: boolean;
+// } | null,
diff --git a/components/Player/Player.tsx b/components/Player/Player.tsx
@@ -1,36 +1,32 @@
-import Image from 'next/image'
-import Blockies from 'react-blockies'
-import empty_avatar from 'public/images/empty_avatar.png'
-import { PlayerPropsI } from './PlayerProps'
-import styles from './Player.module.scss'
-import { ScoreCardProps } from '../GameResult/ScoreCard/ScoreCardProps'
-import React from 'react'
+import Image from 'next/image';
+import Blockies from 'react-blockies';
+import empty_avatar from 'public/images/empty_avatar.png';
+import { PlayerPropsI } from './PlayerProps';
+import styles from './Player.module.scss';
+import React from 'react';
 
 export const Player: React.FC<PlayerPropsI> = ({
-                                                 playerName,
-                                                 address,
-                                                 playerType,
-                                                 avatarUrl,
-                                                 moves,
-                                               }) => {
+  playerName,
+  address,
+  playerType,
+  avatarUrl,
+  moves,
+}) => {
   // const address = '0x1215991085d541A586F0e1968355A36E58C9b2b4';
-  const truncatedAddress = address ? address.slice(0, 5) + '...' +
-    address.slice(-5) : null
-  console.log('Player TYPE', playerType)
+  const truncatedAddress = address ? address.slice(0, 5) + '...' + address.slice(-5) : null;
+  console.log('Player TYPE', playerType);
   return (
     <div className={styles.container}>
-      <div
-        className={`${styles.card} ${moves === true ? styles.highlight : ''}`}>
+      <div className={`${styles.card} ${moves === true ? styles.highlight : ''}`}>
         <div className={styles.avatar}>
           {address ? (
             <Blockies
               seed={!!address ? address : '0x00000000000'}
               size={10}
-              className="rounded-full"
+              className='rounded-full'
             />
           ) : (
-            <Image src={empty_avatar} alt="avatar" width="30px"
-                   height="30px"></Image>
+            <Image src={empty_avatar} alt='avatar' width='30px' height='30px'></Image>
           )}
           {address ? (
             <div className={styles.playerData}>
@@ -44,8 +40,8 @@ export const Player: React.FC<PlayerPropsI> = ({
         <div className={styles.playerType}>{playerType}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 // export const ScoreCard = (props: ScoreCardProps) => {
 //     const { playerImg, showWinText, icon, playerIndex, players, finishGameCheckResult } = props;

diff --git a/components/Player/PlayerProps.ts b/components/Player/PlayerProps.ts
@@ -2,9 +2,9 @@ import React from "react";
 
 export interface PlayerPropsI {
   children?: React.ReactNode;
-  playerName: string | null;
-  address: string | null;
-  playerType: React.ReactNode;
-  avatarUrl: string;
+  playerName?: string | null;
+  address?: string | null;
+  playerType?: React.ReactNode;
+  avatarUrl?: string;
   moves?: boolean;
 }