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 LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';

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

import { itemCardShort } from 'game.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,
            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,
            startingOtbs: 2,
            trade: true,
            showLogin: false
        };
    }

    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 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}
                                   required
                                   onChange={this.handleInputChange} />
                        </label>
                    </Col>
                </Row>
            ),
            settingsClass = this.state.showSettings ? '' : 'hidden',
            mainScreenClass = !this.state.showSettings ? '' : 'hidden';
        return (
            <GroupBox title={titleBar}>
            {this.props.user ? (
                <form onSubmit={this.handleSubmit}>
                    <div className={mainScreenClass}>
                        <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} />
                        <InputRow label={'Number of Starting ' + itemCardShort}
                                  name='startingOtbs'
                                  min={0}
                                  max={8}
                                  step={1}
                                  value={this.state.startingOtbs}
                                  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>
            ) : (
                <>
                    <span>Sign in or create account to continue</span>
                    <LoginOrCreateAccount login={this.props.login}
                                          createAccount={this.props.createAccount}
                                          errors={this.props.errors}
                    />
                </>
            )}
            </GroupBox>
        );
    }
}

export default connect(
    state => state.start.start,
    { startOrJoinGame, start }
)(NewGame)