oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

display player data in PlayerArea component

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

53
packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
View file

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

102
packages/play-node-go/src/pages/Game/Game.js
View file

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