display player data in PlayerArea component
This commit is contained in:
sorrelbri
parent
49873aa706
commit
6359089e91
2 changed files with 96 additions and 59 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue