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