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

Adding multiplayer info bar, game settings, cleaning up loans.

Browse Source
This commit is contained in:
Thomas Hintz
2020-02-11 12:46:13 -08:00
parent a22cf21662
commit 77a8692f71
10 changed files with 443 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/new-game/NewGame.jsx
View File

@@ -25,16 +25,44 @@ import { startOrJoinGame } from '../start/actions.js'
import { start } from '../app/actions.js'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
import { faArrowCircleLeft, faCog } from '@fortawesome/free-solid-svg-icons'
class InputRow extends React.Component {
render() {
return (
<Row>
<Col width='12'>
<label>
{this.props.label}
<input type='number'
min={this.props.min}
max={this.props.max}
step={this.props.step}
name={this.props.name}
value={this.props.value}
onChange={this.props.onChange} />
</label>
</Col>
</Row>
);
}
}
class NewGame extends React.Component {
constructor(props) {
super(props);
this.state = {
showSettings: false,
playerName: '',
checkedColor: props.colors[0],
gameId: typeof props.gameId === 'undefined' ? -1 : props.gameId,
gameName: props.gameName || ''
gameName: props.gameName || '',
downPayment: 0.2,
loanInterest: 0.2,
maxDebt: 50000,
auditThreshold: 250000,
startingCash: 5000,
startingDebt: 5000
};
}
@@ -54,46 +82,35 @@ class NewGame extends React.Component {
}
handleBack = e => {
e.preventDefault();
this.props.start();
}
toggleSettings = e => {
e.preventDefault();
this.setState({ showSettings: !this.state.showSettings });
}
render() {
let playerNameInput;
return (
<GroupBox title={!this.props.hideBack ? (
let playerNameInput,
titleBar = !this.props.hideBack ? (
<Fragment>
<a href="#" onClick={this.handleBack}>
<a onClick={this.handleBack}>
<FontAwesomeIcon icon={faArrowCircleLeft} />
</a>
{this.props.title}
</Fragment>
) : this.props.title}>
<form onSubmit={this.handleSubmit}>
<Row>
<Col width='12'>
<label>Your Name
<input type='text' name='playerName'
value={this.state.playerName}
onChange={this.handleInputChange} />
</label>
</Col>
</Row>
<Row>
<Col width='12'>
<label>Your Color</label>
{this.props.colors
.map(c =>
(<label key={c} className={'player player-selectable player-' + c + (this.state.checkedColor === c ? ' player-selected' : '')}>
<input type='checkbox'
checked={this.state.checkedColor === c}
onChange={this.handleInputChange}
name={c} />
</label>))
}
<br /><br />
</Col>
</Row>
{this.props.showGameName && (
) : this.props.title,
colors = this.props.colors.map(c => (
<label key={c} className={'player player-selectable player-' + c + (this.state.checkedColor === c ? ' player-selected' : '')}>
<input type='checkbox'
checked={this.state.checkedColor === c}
onChange={this.handleInputChange}
name={c} />
</label>
)
),
gameName = this.props.showGameName && (
<Row>
<Col width='12'>
<label>Game Name
@@ -102,10 +119,81 @@ class NewGame extends React.Component {
</label>
</Col>
</Row>
)}
),
settingsClass = this.state.showSettings ? '' : 'hidden',
mainScreenClass = !this.state.showSettings ? '' : 'hidden';
return (
<GroupBox title={titleBar}>
<form onSubmit={this.handleSubmit}>
<div className={mainScreenClass}>
<Row>
<Col width='12'>
<label>Your Name
<input type='text' name='playerName'
value={this.state.playerName}
onChange={this.handleInputChange} />
</label>
</Col>
</Row>
<Row>
<Col width='12'>
<label>Your Color</label>
{colors}
<br /><br />
</Col>
</Row>
{gameName}
</div>
<div className={settingsClass}>
<InputRow label='Down Payment'
name='downPayment'
min={0}
max={1}
step={0.1}
value={this.state.downPayment}
onChange={this.handleInputChange} />
<InputRow label='Loan Interest'
name='loanInterest'
min={0}
max={1}
step={0.1}
value={this.state.loanInterest}
onChange={this.handleInputChange} />
<InputRow label='Maximum Debt'
name='maxDebt'
min={0}
step={5000}
value={this.state.maxDebt}
onChange={this.handleInputChange} />
<InputRow label='Audit Threshold'
name='auditThreshold'
min={0}
step={25000}
value={this.state.auditThreshold}
onChange={this.handleInputChange} />
<InputRow label='Starting Cash'
name='startingCash'
min={0}
step={1000}
value={this.state.startingCash}
onChange={this.handleInputChange} />
<InputRow label='Starting Debt'
name='startingDebt'
min={0}
step={1000}
value={this.state.startingDebt}
onChange={this.handleInputChange} />
</div>
<Row>
<Col width='12'>
<Button type='submit'>{this.props.button} Game</Button>
<div className='new-game-submit-container'>
<Button type='submit'>{this.props.button} Game</Button>
{this.props.showGameName ? (
<a onClick={this.toggleSettings}>
<FontAwesomeIcon icon={faCog} size='lg' />
</a>
) : (<Fragment />)}
</div>
</Col>
</Row>
</form>