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 LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 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' import NewGame from '../new-game/NewGame.jsx'
const JoinGameScreens = { list: 'list', details: 'details' }; const JoinGameScreens = { list: 'list', details: 'details' };
const defaultMaxGames = 5;
class JoinGame extends React.Component { class JoinGame extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
screen: JoinGameScreens.list, screen: JoinGameScreens.list,
game: null, 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 }; }); 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() { render() {
const { games, openGames } = this.props;
return ( return (
<GroupBox title={( <GroupBox title={(
<Fragment> <Fragment>
<a href="#" onClick={this.handleBack}> <a href="#" onClick={this.handleBack}>
<FontAwesomeIcon icon={faArrowCircleLeft} /> <FontAwesomeIcon icon={faArrowCircleLeft} />
</a> </a>
Join Game Join Game
</Fragment> </Fragment>
)}> )}>
<Row> <Row>
<Col width='12'> <Col width='12'>
{this.state.screen === JoinGameScreens.list ? {this.state.screen === JoinGameScreens.list ?
(<> (<>
<h3>My Games</h3> <h3>My Games</h3>
{(!this.props.user && !this.state.showSignIn) ? ( {(!this.props.user && !this.state.showSignIn) ? (
<a onClick={this.showSignIn}>Sign In to see your games</a> <a onClick={this.showSignIn}>Sign In to see your games</a>
) : (<></>)} ) : (<></>)}
{(!this.props.user && this.state.showSignIn) ? ( {(!this.props.user && this.state.showSignIn) ? (
<> <>
<hr /> <hr />
<LoginOrCreateAccount login={this.props.login} <LoginOrCreateAccount login={this.props.login}
createAccount={this.props.createAccount} createAccount={this.props.createAccount}
errors={this.props.errors} errors={this.props.errors}
showLogin={true} showLogin={true}
/> />
<hr /> <hr />
</> </>
) : (<></>)} ) : (<></>)}
<ul> <ul>
{this.props.games {games.slice(0, this.state.maxGames)
.map((g, i) => .map((g, i) =>
(<li key={i}> (
<a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a> <li key={i}>
</li>))} <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
</ul> </li>
<h3>Open Games</h3> ))}
<ul> {games.length > this.state.maxGames ? (
{this.props.openGames <li>
.map((g, i) => <center>
(<li key={i}> <a onClick={this.showAllGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
<a onClick={e => { </center>
e.preventDefault(); </li>
this.handleClickGame(g); }}>{g.name}</a> ) : (<></>)}
</li>))} </ul>
</ul> <h3>Open Games</h3>
</> <ul>
) {openGames.slice(0, this.state.maxOpenGames)
: ( .map((g, i) =>
<Fragment> (
<h3><b>Game:</b> {this.state.game.name}</h3> <li key={i}>
<NewGame colors={this.state.game.colors} <a onClick={e => {
button={'Join'} e.preventDefault();
showGameName={false} this.handleClickGame(g); }}>{g.name}</a>
gameName={this.state.game.name} </li>
gameId={this.state.game.id} ))}
type={'join-game'} {openGames.length > this.state.maxOpenGames ? (
hideBack={true} <li>
createAccount={this.props.createAccount} <center>
login={this.props.login} <a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
errors={this.props.errors} </center>
title={'Join as New Player'} /> </li>
</Fragment>)} ) : (<></>)}
</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> </Col>
</Row> </Row>
</GroupBox> </GroupBox>