stub room display with messages and game link
This commit is contained in:
parent
38014ac497
commit
775e1fc050
12 changed files with 165 additions and 2 deletions
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Game.scss';
|
||||||
|
|
||||||
|
const GameButton = (props) => {
|
||||||
|
const gameData = props.game;
|
||||||
|
return (
|
||||||
|
<div className="GameButton" data-testid="GameButton">
|
||||||
|
<Link to={`/games/${gameData.id}`}>View Game</Link>
|
||||||
|
<p>{gameData.playerBlack} - {gameData.playerBlackRank}</p>
|
||||||
|
<p>{gameData.playerWhite} - {gameData.playerWhiteRank}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GameButton;
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import { BrowserRouter as Router } from 'react-router-dom';
|
||||||
|
import Game from './Game';
|
||||||
|
|
||||||
|
const gameData = {
|
||||||
|
id: 1,
|
||||||
|
name: "main",
|
||||||
|
description: "A general place to play Go",
|
||||||
|
language: "EN"
|
||||||
|
}
|
||||||
|
|
||||||
|
test('renders GameButton without crashing', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<Router>
|
||||||
|
<Game game={gameData} />
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
const GameButton = getByTestId('GameButton');
|
||||||
|
expect(GameButton).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Development = () => {
|
||||||
|
return (<>
|
||||||
|
<p>This Feature is in Development :{')'}</p>
|
||||||
|
</>);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Development;
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Message.scss';
|
||||||
|
|
||||||
|
const Message = (props) => {
|
||||||
|
const messageData = props.message;
|
||||||
|
return (
|
||||||
|
<div className="Message" data-testid="Message">
|
||||||
|
<p>{messageData.content}</p>
|
||||||
|
<p>{messageData.username}</p>
|
||||||
|
<p>{messageData.admin ? 'admin' : <></>}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Message;
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import Message from './Message';
|
||||||
|
|
||||||
|
const messageData = [
|
||||||
|
{
|
||||||
|
"content": "Hey! Welcome to the general room!", "username": "userOne", "admin": true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
test('renders Message without crashing', () => {
|
||||||
|
const { getByTestId } = render( <Message message={messageData} /> );
|
||||||
|
const messageDiv = getByTestId('Message');
|
||||||
|
expect(messageDiv).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import './Game.scss';
|
import './Game.scss';
|
||||||
|
|
||||||
|
import Development from '../../components/Display/Development/Development';
|
||||||
|
|
||||||
const Game = () => {
|
const Game = () => {
|
||||||
return (
|
return (
|
||||||
<div className="Game" data-testid="Game">
|
<div className="Game" data-testid="Game">
|
||||||
<p>Game</p>
|
<p>Game</p>
|
||||||
|
<Development />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,10 @@ import './Room.scss';
|
||||||
import socketIOClient from 'socket.io-client';
|
import socketIOClient from 'socket.io-client';
|
||||||
import config from '../../config';
|
import config from '../../config';
|
||||||
import roomsServices from '../../services/api/roomsServices';
|
import roomsServices from '../../services/api/roomsServices';
|
||||||
|
import GameButton from '../../components/Button/Game/Game';
|
||||||
|
import Message from '../../components/Display/Message/Message';
|
||||||
|
|
||||||
|
import Development from '../../components/Display/Development/Development';
|
||||||
|
|
||||||
const Room = (props) => {
|
const Room = (props) => {
|
||||||
const state = props.state;
|
const state = props.state;
|
||||||
|
@ -45,9 +49,46 @@ const Room = (props) => {
|
||||||
|
|
||||||
// ! [end]
|
// ! [end]
|
||||||
|
|
||||||
|
const renderGames = () => {
|
||||||
|
const games = state.games || [];
|
||||||
|
if (games.length) {
|
||||||
|
return games.map(gameData => (
|
||||||
|
<GameButton
|
||||||
|
key={`game-${gameData.id}`}
|
||||||
|
game={gameData}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
return <p>Loading Games...</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderMessages = () => {
|
||||||
|
const messages = state.messages || [];
|
||||||
|
if (messages.length) {
|
||||||
|
return messages.map((messageData, idx) => (
|
||||||
|
<Message
|
||||||
|
key={`message-${idx}`}
|
||||||
|
message={messageData}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
return <p>Loading Messages...</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Room" data-testid="Room">
|
<div className="Room" data-testid="Room">
|
||||||
<h2></h2>
|
<h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
||||||
|
|
||||||
|
<div className="Room__game-container">
|
||||||
|
{renderGames()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="Room__message-container">
|
||||||
|
{renderMessages()}
|
||||||
|
<Development />
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
div.Room {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: initial;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
justify-self:stretch;
|
||||||
|
align-self: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 5vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
div.Room__game-container {
|
||||||
|
height: 100%;
|
||||||
|
justify-self: flex-start;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.Room__message-container {
|
||||||
|
height: 100%;
|
||||||
|
justify-self: flex-end;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,12 +1,14 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
import { BrowserRouter as Router } from 'react-router-dom';
|
import { BrowserRouter as Router } from 'react-router-dom';
|
||||||
|
import { initState } from '../../reducers/init/stateReducer.init';
|
||||||
import Room from './Room';
|
import Room from './Room';
|
||||||
|
|
||||||
|
const state = initState();
|
||||||
test('renders Room without crashing', () => {
|
test('renders Room without crashing', () => {
|
||||||
const { getByTestId } = render(
|
const { getByTestId } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<Room />
|
<Room state={state} />
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
const RoomDiv = getByTestId('Room');
|
const RoomDiv = getByTestId('Room');
|
||||||
|
|
|
@ -25,6 +25,17 @@ const getRoomService = async (roomIndex) => {
|
||||||
)
|
)
|
||||||
.then(res => res.text())
|
.then(res => res.text())
|
||||||
.then(text => JSON.parse(text))
|
.then(text => JSON.parse(text))
|
||||||
|
.then(obj => {
|
||||||
|
obj.games = obj.roomGames.map(game => {
|
||||||
|
delete Object.assign(game, {boardSize: game.board_size }).board_size;
|
||||||
|
delete Object.assign(game, {playerBlack: game.player_black }).player_black;
|
||||||
|
delete Object.assign(game, {playerBlackRank: game.player_black_rank }).player_black_rank;
|
||||||
|
delete Object.assign(game, {playerWhite: game.player_white }).player_white;
|
||||||
|
delete Object.assign(game, {playerWhiteRank: game.player_white_rank }).player_white_rank;
|
||||||
|
return game;
|
||||||
|
})
|
||||||
|
return obj;
|
||||||
|
})
|
||||||
.catch(err => err);
|
.catch(err => err);
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
|
|
Loading…
Reference in a new issue