From 2598e4a3fc47ac692a7f9cc6d2e938b8903c0e24 Mon Sep 17 00:00:00 2001
From: "Anton@habdevs" <a.hramickih@gmail.com>
Date: Mon, 4 Sep 2023 16:05:08 +0500
Subject: [PATCH] feat: added ScoreCard new context #190

---
 components/GameResult/GameResult.tsx          | 15 +--
 components/GameResult/ScoreCard/ScoreCard.tsx | 39 ++++++--
 .../GameResult/ScoreCard/ScoreCardProps.ts    | 10 +-
 contexts/GameStateContext.tsx                 | 93 +++++++++----------
 4 files changed, 93 insertions(+), 64 deletions(-)

diff --git a/components/GameResult/GameResult.tsx b/components/GameResult/GameResult.tsx
index 308f914..6f22496 100644
--- a/components/GameResult/GameResult.tsx
+++ b/components/GameResult/GameResult.tsx
@@ -12,13 +12,12 @@ import { useGameStateContext } from '../../contexts/GameStateContext';
 import { Player } from '../Player';
 import { PlayerI } from '../../types/game';
 import { Players } from '../Players';
-import { ScoreCard } from './ScoreCard'
+import { ScoreCard } from './ScoreCard';
 
 export const GameResult = () => {
   const { finishResult, setFinishResult, playerResult, setPlayerResult } = useGameStateContext();
 
-  console.log('Данные из finishResult: ', finishResult);
-  console.log('Данные из setFinishResult: ', setFinishResult);
+  console.log('GAMERESULT log finishResult: ', finishResult);
   let winner,
     isDraw,
     cheatWin = false;
@@ -38,7 +37,7 @@ export const GameResult = () => {
   //
   // 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);
@@ -73,8 +72,12 @@ export const GameResult = () => {
         {/*<Player {...player2} />*/}
         {/*<Player {...player1} />*/}
         {/*<Players player1={players ? players : [0]} player2={players ? players : [1]} {...props} />*/}
-        <ScoreCard playerResult={playerResult} finishResult={finishResult}/>
-        <ScoreCard playerResult={playerResult} finishResult={finishResult}/>
+        {playerResult && playerResult.players && playerResult.players.length === 2 (
+          <>
+            <ScoreCard finishResult={finishResult} playerResult={playerResult.players[0]} />
+            <ScoreCard finishResult={finishResult} playerResult={playerResult.players[1]} />
+          </>
+        )}
       </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
index a23ca9f..86a2853 100644
--- a/components/GameResult/ScoreCard/ScoreCard.tsx
+++ b/components/GameResult/ScoreCard/ScoreCard.tsx
@@ -3,27 +3,52 @@ import styles from './ScoreCard.module.scss';
 import { IScoreCardProps } from './ScoreCardProps';
 import Image from 'next/image';
 import playerImg from 'public/images/empty_avatar.png';
+import Blockies from 'react-blockies';
+import empty_avatar from '../../../public/images/empty_avatar.png';
 
 export const ScoreCard: React.FC<IScoreCardProps> = ({
-  address,
-  playerType,
-  moves,
+  playerResult,
   finishResult,
   showWinText,
 }) => {
+  const address = playerResult!.address
+  const moves = playerResult!.moves
+  const playerType = playerResult!.playerType
+  console.log('SCORE CARD log playerType', playerType)
+  console.log('SCORE CARD log address', address)
+  console.log('SCORE CARD log address', moves)
   // 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} ${finishResult?.winner === true ? styles.highlight : ''}`}>
+      <div
+        className={`${styles.card} ${moves === true ? styles.highlight : ''} ${
+          finishResult?.winner === true ? styles.highlight : ''
+        }`}>
         {finishResult?.winner === true && showWinText && (
           <p className={styles.titleColor}>Winner!</p>
         )}
         <div className={styles.containerPlayer}>
-          <Image src={playerImg.src} alt='Player' width={24} height={24} />
-          <p className={styles.addressPlayer}>{truncatedAddress}</p>
-          {/*{icon}*/}
+          {address ? (
+            <Blockies
+              seed={!!address ? address : '0x00000000000'}
+              size={10}
+              className='rounded-full'
+            />
+          ) : (
+            <Image src={playerImg.src} alt='Player' width={24} height={24} />
+          )}
+
+          {address ? (
+            <div className={styles.playerData}>
+              {/*<div className={styles.name}>{playerName}&nbsp;{moves && (<span className={styles.move}>move</span>)}</div>*/}
+              <p className={styles.addressPlayer}>{truncatedAddress}</p>
+            </div>
+          ) : (
+            <div className={styles.playerData}>Waiting...</div>
+          )}
         </div>
+        <div className={styles.playerType}>{playerType}</div>
       </div>
     </div>
   );
diff --git a/components/GameResult/ScoreCard/ScoreCardProps.ts b/components/GameResult/ScoreCard/ScoreCardProps.ts
index e32e3de..8425360 100644
--- a/components/GameResult/ScoreCard/ScoreCardProps.ts
+++ b/components/GameResult/ScoreCard/ScoreCardProps.ts
@@ -4,10 +4,12 @@ import { PlayerI } from 'types/game';
 import { PlayerPropsI } from '../../Player/PlayerProps'
 export interface IScoreCardProps extends PlayerPropsI{
   playerResult: {
-    address?: string | null;
-    playerType?: React.ReactNode;
-    moves?: boolean;
-  } | null;
+    players: ({
+      address?: string | null;
+      playerType?: React.ReactNode;
+      moves?: boolean;
+    } | null)[];
+  };
   showWinText?: boolean,
   finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null
 }
diff --git a/contexts/GameStateContext.tsx b/contexts/GameStateContext.tsx
index 71bb9ae..f27b4a0 100644
--- a/contexts/GameStateContext.tsx
+++ b/contexts/GameStateContext.tsx
@@ -1,62 +1,61 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
-import { PlayerI } from '../types/game';
+import React, { createContext, ReactNode, useContext, useState } from 'react'
+import { PlayerI } from '../types/game'
 
 export interface IGameStateContext {
   finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null;
-  setFinishResult: (
-    newFinishResult: {
-      winner: boolean;
-      isDraw: boolean;
-      cheatWin: boolean;
-    } | null,
-  ) => void;
+  setFinishResult: (newFinishResult: {
+    winner: boolean; isDraw: boolean; cheatWin: boolean;
+  } | null) => void;
   playerResult: {
-    address?: string | null;
-    playerType?: React.ReactNode;
-    moves?: boolean;
-  } | null;
-  setPlayerResult: (newPlayerResult: {
-    address?: string | null;
-    playerType?: React.ReactNode;
-    moves?: boolean;
+    players: ({
+      address?: string | null; playerType?: React.ReactNode; moves?: boolean;
+    } | null)[];
+  };
+  setPlayerResult: (newPlayersResult: {
+    players: ({
+      address?: string | null; playerType?: React.ReactNode; moves?: boolean;
+    } | null)[];
   }) => void;
-  // playerTypeResult: React.ReactNode | null;
 }
 
 export const GameStateContextDefault: IGameStateContext = {
-  finishResult: null,
-  setFinishResult: () => {},
-  playerResult: null,
-  setPlayerResult: () => {}, // playerTypeResult: null,
-};
-export const useGameStateContext = () => useContext(GameStateContext);
-export const GameStateContext = createContext<IGameStateContext>(GameStateContextDefault);
+  finishResult: null, setFinishResult: () => {},
+  playerResult: {
+    players: [{
+        address: null,
+      }],
+  }, setPlayerResult: () => {},
+}
+export const useGameStateContext = () => useContext(GameStateContext)
+export const GameStateContext = createContext<IGameStateContext>(
+  GameStateContextDefault)
 
 export const GameStateContextProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
   const [finishResult, setFinishResult] = useState<{
-    winner: boolean;
-    isDraw: boolean;
-    cheatWin: boolean;
-  } | null>(null);
-  const [playerResult, setPlayerResult] = useState<{
-    address?: string | null;
-    playerType?: React.ReactNode;
-    moves?: boolean;
-  } | null>(null);
-  const [playerTypeResult] = useState<ReactNode>(null);
+    winner: boolean; isDraw: boolean; cheatWin: boolean;
+  } | null>(null)
+  const [playerResult, setPlayerResult] = useState<
+    IGameStateContext['playerResult']
+  >({
+    players: [
+      {
+        address: null,
+        playerType: null,
+        moves: false,
+      },
+    ],
+  });
+  const [playerTypeResult] = useState<ReactNode>(null)
   // TODO NEXT STEP habdevs 02/09/23
   const contextValue: IGameStateContext = {
-    finishResult,
-    setFinishResult,
-    playerResult,
-    setPlayerResult,
-    // playerTypeResult,
-  };
-  console.log('CONTEXT setFinishResult', setFinishResult);
-  console.log('CONTEXT finishResult', finishResult);
-  console.log('CONTEXT setPlayerResult', setPlayerResult);
-  console.log('CONTEXT PlayerResult', playerResult);
-  return <GameStateContext.Provider value={contextValue}>{children}</GameStateContext.Provider>;
-};
+    finishResult, setFinishResult, playerResult, setPlayerResult,
+  }
+  console.log('CONTEXT setFinishResult', setFinishResult)
+  console.log('CONTEXT finishResult', finishResult)
+  console.log('CONTEXT setPlayerResult', setPlayerResult)
+  console.log('CONTEXT PlayerResult', playerResult)
+  return <GameStateContext.Provider
+    value={contextValue}>{children}</GameStateContext.Provider>
+}