Showing only first 5 games by default.

master
Thomas Hintz 5 years ago
parent a066a507ef
commit 80399ac7b1

@ -26,19 +26,23 @@ import { start } from '../app/actions.js'
import LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
import { faArrowCircleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons'
import NewGame from '../new-game/NewGame.jsx'
const JoinGameScreens = { list: 'list', details: 'details' };
const defaultMaxGames = 5;
class JoinGame extends React.Component {
constructor(props) {
super(props);
this.state = {
screen: JoinGameScreens.list,
game: null,
showSignIn: false
showSignIn: false,
maxGames: defaultMaxGames,
maxOpenGames: defaultMaxGames
};
}
@ -67,7 +71,18 @@ class JoinGame extends React.Component {
this.setState(state => { return { showSignIn: !state.showSignIn }; });
}
showAllGames = (e) => {
e.preventDefault();
this.setState({ maxGames: Number.MAX_SAFE_INTEGER });
}
showAllOpenGames = (e) => {
e.preventDefault();
this.setState({ maxOpenGames: Number.MAX_SAFE_INTEGER });
}
render() {
const { games, openGames } = this.props;
return (
<GroupBox title={(
<Fragment>
@ -97,21 +112,39 @@ class JoinGame extends React.Component {
</>
) : (<></>)}
<ul>
{this.props.games
{games.slice(0, this.state.maxGames)
.map((g, i) =>
(<li key={i}>
(
<li key={i}>
<a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
</li>))}
</li>
))}
{games.length > this.state.maxGames ? (
<li>
<center>
<a onClick={this.showAllGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
</center>
</li>
) : (<></>)}
</ul>
<h3>Open Games</h3>
<ul>
{this.props.openGames
{openGames.slice(0, this.state.maxOpenGames)
.map((g, i) =>
(<li key={i}>
(
<li key={i}>
<a onClick={e => {
e.preventDefault();
this.handleClickGame(g); }}>{g.name}</a>
</li>))}
</li>
))}
{openGames.length > this.state.maxOpenGames ? (
<li>
<center>
<a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
</center>
</li>
) : (<></>)}
</ul>
</>
)

Loading…
Cancel
Save