Skip to content

Commit

Permalink
feat: added ScoreCard new context #190
Browse files Browse the repository at this point in the history
  • Loading branch information
hramickih committed Sep 4, 2023
1 parent 78eb8ec commit 2598e4a
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 64 deletions.
15 changes: 9 additions & 6 deletions components/GameResult/GameResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
39 changes: 32 additions & 7 deletions components/GameResult/ScoreCard/ScoreCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
10 changes: 6 additions & 4 deletions components/GameResult/ScoreCard/ScoreCardProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
93 changes: 46 additions & 47 deletions contexts/GameStateContext.tsx
Original file line number Diff line number Diff line change
@@ -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>
}

0 comments on commit 2598e4a

Please sign in to comment.