Skip to content

Commit

Permalink
upd: scoreCard | gameStateContex | gameResult - component #190
Browse files Browse the repository at this point in the history
  • Loading branch information
habdevs committed Sep 5, 2023
1 parent 2598e4a commit 58ca6fd
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 67 deletions.
7 changes: 4 additions & 3 deletions components/GameResult/GameResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,13 @@ export const GameResult = () => {
{/*<Player {...player2} />*/}
{/*<Player {...player1} />*/}
{/*<Players player1={players ? players : [0]} player2={players ? players : [1]} {...props} />*/}
{playerResult && playerResult.players && playerResult.players.length === 2 (
{playerResult.length === 2 && (
<>
<ScoreCard finishResult={finishResult} playerResult={playerResult.players[0]} />
<ScoreCard finishResult={finishResult} playerResult={playerResult.players[1]} />
<ScoreCard finishResult={finishResult} playerResult={playerResult[0]} />
<ScoreCard finishResult={finishResult} playerResult={playerResult[1]} />
</>
)}

</div>
<BlockPayedGame />
<h2 className={styles.titleCenter}>Read more about our technology</h2>
Expand Down
8 changes: 4 additions & 4 deletions components/GameResult/ScoreCard/ScoreCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ export const ScoreCard: React.FC<IScoreCardProps> = ({
finishResult,
showWinText,
}) => {
const address = playerResult!.address
const moves = playerResult!.moves
const playerType = playerResult!.playerType
const { address, playerType, moves } = playerResult;
// const address = playerResult!.players
// const moves = playerResult!.players
// const playerType = playerResult!.players
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}`}>
Expand Down
20 changes: 8 additions & 12 deletions components/GameResult/ScoreCard/ScoreCardProps.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import { StaticImageData } from 'next/image';
import React, { ReactNode } from 'react';
import { PlayerI } from 'types/game';
import { PlayerPropsI } from '../../Player/PlayerProps'
export interface IScoreCardProps extends PlayerPropsI{
playerResult: {
players: ({
address?: string | null;
playerType?: React.ReactNode;
moves?: boolean;
} | null)[];
};
showWinText?: boolean,
finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null
import { PlayerPropsI } from '../../Player/PlayerProps';
import { PlayerInfo } from '../../../contexts/GameStateContext'

export interface IScoreCardProps extends PlayerPropsI {
playerResult: PlayerInfo
showWinText?: boolean;
finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null;
}

// playerName: string,
Expand All @@ -24,4 +20,4 @@ export interface IScoreCardProps extends PlayerPropsI{
// winner: boolean;
// isDraw: boolean;
// cheatWin: boolean;
// } | null,
// } | null,
89 changes: 41 additions & 48 deletions contexts/GameStateContext.tsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,54 @@
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 PlayerInfo {
playerName: string | null;
address: string | null;
playerType?: React.ReactNode;
moves?: boolean
}
export interface IGameStateContext {
finishResult: { winner: boolean; isDraw: boolean; cheatWin: boolean } | null;
setFinishResult: (newFinishResult: {
winner: boolean; isDraw: boolean; cheatWin: boolean;
} | null) => void;
playerResult: {
players: ({
address?: string | null; playerType?: React.ReactNode; moves?: boolean;
} | null)[];
};
setPlayerResult: (newPlayersResult: {
players: ({
address?: string | null; playerType?: React.ReactNode; moves?: boolean;
} | null)[];
}) => void;
setFinishResult: (
newFinishResult: {
winner: boolean;
isDraw: boolean;
cheatWin: boolean;
} | null,
) => void;
playerResult: PlayerInfo[]
setPlayerResult: (newPlayersResult: PlayerInfo[]) => void;
}

export const GameStateContextDefault: IGameStateContext = {
finishResult: null, setFinishResult: () => {},
playerResult: {
players: [{
address: null,
}],
}, setPlayerResult: () => {},
}
export const useGameStateContext = () => useContext(GameStateContext)
export const GameStateContext = createContext<IGameStateContext>(
GameStateContextDefault)
finishResult: null,
setFinishResult: () => {},
playerResult: [],
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<
IGameStateContext['playerResult']
>({
players: [
{
address: null,
playerType: null,
moves: false,
},
],
});
const [playerTypeResult] = useState<ReactNode>(null)
winner: boolean;
isDraw: boolean;
cheatWin: boolean;
} | null>(null);
const [playerResult, setPlayerResult] = useState<PlayerInfo[]>([]);
const [playerTypeResult] = useState<ReactNode>(null);
// TODO NEXT STEP habdevs 02/09/23
const contextValue: IGameStateContext = {
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>
}
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 58ca6fd

Please sign in to comment.