tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Showing only first 5 games by default.

Browse Source
This commit is contained in:
Thomas Hintz
2020-04-23 08:13:15 -07:00
parent a066a507ef
commit 80399ac7b1
1 changed files with 94 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/join-game/JoinGame.jsx
View File

@@ -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,69 +71,98 @@ 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>
<a href="#" onClick={this.handleBack}>
<FontAwesomeIcon icon={faArrowCircleLeft} />
</a>
Join Game
</Fragment>
<Fragment>
<a href="#" onClick={this.handleBack}>
<FontAwesomeIcon icon={faArrowCircleLeft} />
</a>
Join Game
</Fragment>
)}>
<Row>
<Col width='12'>
{this.state.screen === JoinGameScreens.list ?
(<>
<h3>My Games</h3>
{(!this.props.user && !this.state.showSignIn) ? (
<a onClick={this.showSignIn}>Sign In to see your games</a>
) : (<></>)}
{(!this.props.user && this.state.showSignIn) ? (
<>
<hr />
<LoginOrCreateAccount login={this.props.login}
createAccount={this.props.createAccount}
errors={this.props.errors}
showLogin={true}
/>
<hr />
</>
) : (<></>)}
<ul>
{this.props.games
.map((g, i) =>
(<li key={i}>
<a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
</li>))}
</ul>
<h3>Open Games</h3>
<ul>
{this.props.openGames
.map((g, i) =>
(<li key={i}>
<a onClick={e => {
e.preventDefault();
this.handleClickGame(g); }}>{g.name}</a>
</li>))}
</ul>
</>
)
: (
<Fragment>
<h3><b>Game:</b> {this.state.game.name}</h3>
<NewGame colors={this.state.game.colors}
button={'Join'}
showGameName={false}
gameName={this.state.game.name}
gameId={this.state.game.id}
type={'join-game'}
hideBack={true}
createAccount={this.props.createAccount}
login={this.props.login}
errors={this.props.errors}
title={'Join as New Player'} />
</Fragment>)}
<Row>
<Col width='12'>
{this.state.screen === JoinGameScreens.list ?
(<>
<h3>My Games</h3>
{(!this.props.user && !this.state.showSignIn) ? (
<a onClick={this.showSignIn}>Sign In to see your games</a>
) : (<></>)}
{(!this.props.user && this.state.showSignIn) ? (
<>
<hr />
<LoginOrCreateAccount login={this.props.login}
createAccount={this.props.createAccount}
errors={this.props.errors}
showLogin={true}
/>
<hr />
</>
) : (<></>)}
<ul>
{games.slice(0, this.state.maxGames)
.map((g, i) =>
(
<li key={i}>
<a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
</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>
{openGames.slice(0, this.state.maxOpenGames)
.map((g, i) =>
(
<li key={i}>
<a onClick={e => {
e.preventDefault();
this.handleClickGame(g); }}>{g.name}</a>
</li>
))}
{openGames.length > this.state.maxOpenGames ? (
<li>
<center>
<a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
</center>
</li>
) : (<></>)}
</ul>
</>
)
: (
<Fragment>
<h3><b>Game:</b> {this.state.game.name}</h3>
<NewGame colors={this.state.game.colors}
button={'Join'}
showGameName={false}
gameName={this.state.game.name}
gameId={this.state.game.id}
type={'join-game'}
hideBack={true}
createAccount={this.props.createAccount}
login={this.props.login}
errors={this.props.errors}
title={'Join as New Player'} />
</Fragment>)}
</Col>
</Row>
</GroupBox>