farm/src/components/new-game/NewGame.jsx

// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

import React, { Fragment } from 'react'
import { connect } from 'react-redux'

import { GroupBox, Row, Col, Button } from '../widgets.jsx'

import { startOrJoinGame } from '../start/actions.js'
import { start } from '../app/actions.js'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
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 || '',
            downPayment: 0,
            loanInterest: 0,
            maxDebt: 50000,
            auditThreshold: 250000,
            startingCash: 5000,
            startingDebt: 5000,
            trade: true
        };
    }

    handleInputChange = e => {
        const target = e.target,
              value = target.type === 'checkbox'  && target.name !== 'trade'
              ? target.name : target.value,

              name = target.type === 'checkbox' && target.name !== 'trade'
              ? 'checkedColor' : target.name;

        this.setState({
            [name]: value
        });
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.startOrJoinGame(Object.assign({ type: this.props.type }, this.state));
    }

    handleBack = e => {
        e.preventDefault();
        this.props.start();
    }

    toggleSettings = e => {
        e.preventDefault();
        this.setState({ showSettings: !this.state.showSettings });
    }

    render() {
        let playerNameInput,
            titleBar = !this.props.hideBack ? (
                <Fragment>
                  <a onClick={this.handleBack}>
                    <FontAwesomeIcon icon={faArrowCircleLeft} />
                  </a>
                  {this.props.title}
                </Fragment>
            ) : 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
                      <input type='text' name='gameName' value={this.state.gameName}
                             onChange={this.handleInputChange} />
                    </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} />
                  <Row>
                    <Col width='12'>
                      <label>
                        <input type='checkbox'
                               checked={this.state.trade}
                               onChange={this.handleInputChange}
                               name='trade' />
                        Enable Trading
                      </label>
                    </Col>
                  </Row>
                </div>
                <Row>
                  <Col width='12'>
                    <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>
            </GroupBox>
        );
    }
}

export default connect(
    null,
    { startOrJoinGame, start }
)(NewGame)