diff --git a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js b/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
index 21ad6b8..3e677f9 100644
--- a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
+++ b/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
@@ -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 (
-
-
+
-
{user ? user.username : 'Waiting for player' }
+
+ {playerMeta
+ ? `${playerMeta.player} ${playerMeta.rank}`
+ : "Waiting for player"}
+
Resign?
-
-
{user ? user.captures : 'Captures go here'}
+ className={`player-container__resign-message player-container__resign-message--${playerMeta.stones}`}
+ >
+ Resign?
+
+
+ {playerMeta ? playerMeta.captures : "Captures go here"}
+
-
-
);
-}
+};
-export default PlayerArea;
\ No newline at end of file
+export default PlayerArea;
diff --git a/packages/play-node-go/src/pages/Game/Game.js b/packages/play-node-go/src/pages/Game/Game.js
index 32d0210..518bc3d 100644
--- a/packages/play-node-go/src/pages/Game/Game.js
+++ b/packages/play-node-go/src/pages/Game/Game.js
@@ -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 (
-
+ 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 (
+
-
{state.socket ? '✓' : ' ⃠'}
+
{state.socket ? "✓" : " ⃠"}
Timer
? Game Tree
-
-
+
{
user={state.user}
board={state.board}
/>
-
+
@@ -74,6 +108,6 @@ const Game = (props) => {
);
-}
+};
-export default Game;
\ No newline at end of file
+export default Game;