display player data in PlayerArea component

This commit is contained in:
sorrelbri 2020-06-06 16:04:32 -07:00
parent 49873aa706
commit 6359089e91
2 changed files with 96 additions and 59 deletions

View file

@ -1,45 +1,48 @@
import React from 'react'; import React from "react";
import './PlayerArea.scss'; import "./PlayerArea.scss";
const PlayerArea = (props) => { const PlayerArea = ({ playerMeta }) => {
// const { user } = props // const { user } = props
const user = { const user = {
stones: 'black', stones: "black",
username: 'Name', username: "Name",
captures: 0 captures: 0,
} };
return ( return (
<div className={`player-container player-container--${playerMeta.stones}`}>
<div <div
className={`player-container player-container--${user.stones}`} className={`player-container__bowl player-container__bowl--${playerMeta.stones}`}
>
<div
className={`player-container__bowl player-container__bowl--${user.stones}`}
> >
<p>Pass?</p> <p>Pass?</p>
</div> </div>
<div <div
className={`player-container__name-space player-container__name-space--${user.stones}`} className={`player-container__name-space player-container__name-space--${playerMeta.stones}`}
> >
<h4>{user ? user.username : 'Waiting for player' }</h4> <h4>
{playerMeta
? `${playerMeta.player} ${playerMeta.rank}`
: "Waiting for player"}
</h4>
<div <div
className={`player-container__caps-space player-container__caps-space__${user.stones}`} className={`player-container__caps-space player-container__caps-space__${playerMeta.stones}`}
> >
<p <p
className={`player-container__resign-message player-container__resign-message--${user.stones}`} className={`player-container__resign-message player-container__resign-message--${playerMeta.stones}`}
>Resign?</p> >
Resign?
</p>
<p <p
className={`player-container__caps-counter player-container__caps-counter--${user.stones}`} className={`player-container__caps-counter player-container__caps-counter--${playerMeta.stones}`}
>{user ? user.captures : 'Captures go here'}</p> >
{playerMeta ? playerMeta.captures : "Captures go here"}
</p>
</div> </div>
</div> </div>
</div> </div>
); );
} };
export default PlayerArea; export default PlayerArea;

View file

@ -1,62 +1,88 @@
import React, { useEffect } from 'react'; import React, { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'; import { useParams } from "react-router-dom";
import gamesServices from '../../services/api/gamesServices'; import gamesServices from "../../services/api/gamesServices";
import './Game.scss'; import "./Game.scss";
import Logo from '../../components/Display/Logo/Logo'; import Logo from "../../components/Display/Logo/Logo";
import Board from '../../components/GameUI/Board/Board'; import Board from "../../components/GameUI/Board/Board";
import PlayerArea from '../../components/GameUI/PlayerArea/PlayerArea'; import PlayerArea from "../../components/GameUI/PlayerArea/PlayerArea";
const Game = (props) => { const Game = (props) => {
const { state, dispatch } = props; const { state, dispatch } = props;
const gameId = parseInt(useParams().id) || 0; const gameId = parseInt(useParams().id) || 0;
const [playerBlackMeta, setPlayerBlackMeta] = useState({});
const [playerWhiteMeta, setPlayerWhiteMeta] = useState({});
useEffect(() => { useEffect(() => {
const fetchGameAPI = async () => { const fetchGameAPI = async () => {
const response = await gamesServices.getGameService(gameId); const response = await gamesServices.getGameService(gameId);
if (response) { if (response) {
const action = { const action = {
type: 'GAMES', type: "GAMES",
message: 'SET_ACTIVE', message: "SET_ACTIVE",
body: response body: response,
} };
return dispatch(action); return dispatch(action);
} }
} };
fetchGameAPI(); fetchGameAPI();
}, [ gameId, dispatch ]) }, [gameId, dispatch]);
useEffect(() => { useEffect(() => {
const roomSocketConnect = () => { const roomSocketConnect = () => {
const game = state.active.game; const game = state.active.game;
const user = state.user; const user = state.user;
const action = { const action = {
type: 'SOCKET', type: "SOCKET",
message: 'CONNECT_GAME', message: "CONNECT_GAME",
body: { game, user, dispatch } body: { game, user, dispatch },
} };
return dispatch(action); return dispatch(action);
} };
roomSocketConnect(); roomSocketConnect();
}, [ state.active.game, dispatch, state.user ] ) }, [state.active.game, dispatch, state.user]);
useEffect(() => {
if (!state.meta) return;
const {
playerBlack,
playerBlackRank,
playerWhite,
playerWhiteRank,
} = state.active.game;
const { bCaptures, wCaptures } = state.meta.playerState;
setPlayerBlackMeta({
player: playerBlack,
rank: playerBlackRank,
captures: bCaptures,
stones: "black",
});
setPlayerWhiteMeta({
player: playerWhite,
rank: playerWhiteRank,
captures: wCaptures,
stones: "white",
});
}, [state?.meta?.playerState, state.active?.game]);
return ( return (
<div <div className="Game" data-testid="Game">
className="Game"
data-testid="Game"
>
<div className="Game__meta-container"> <div className="Game__meta-container">
<span <span className="Game__socket-flag">{state.socket ? "✓" : " ⃠"}</span>
className="Game__socket-flag"
>{state.socket ? '✓' : ' ⃠'}</span>
<Logo /> <Logo />
<p>Timer</p> <p>Timer</p>
<p>? Game Tree</p> <p>? Game Tree</p>
</div> </div>
<div className="Game__board-container"> <div className="Game__board-container">
<PlayerArea /> <PlayerArea
playerMeta={
state.user &&
playerBlackMeta.playerBlack &&
state.user === playerBlackMeta.playerBlack
? playerBlackMeta
: playerWhiteMeta
}
/>
<Board <Board
dispatch={dispatch} dispatch={dispatch}
game={state.active.game} game={state.active.game}
@ -65,7 +91,15 @@ const Game = (props) => {
user={state.user} user={state.user}
board={state.board} board={state.board}
/> />
<PlayerArea /> <PlayerArea
playerMeta={
state.user &&
playerBlackMeta.playerWhite &&
state.user === playerWhiteMeta.playerWhite
? playerWhiteMeta
: playerBlackMeta
}
/>
</div> </div>
<div className="Game__message-container"> <div className="Game__message-container">
@ -74,6 +108,6 @@ const Game = (props) => {
</div> </div>
</div> </div>
); );
} };
export default Game; export default Game;