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'

class NewGame extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            playerName: '',
            checkedColor: props.colors[0],
            gameName: props.gameName || ''
        };
    }

    handleInputChange = e => {
        const target = e.target,
              value = target.type === 'checkbox' ? target.name : target.value,
              name = target.type === 'checkbox' ? 'checkedColor' : target.name;

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

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

    render() {
        let playerNameInput;
        return (
            <GroupBox title={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 && (
                <Row>
                  <Col width='12'>
                    <label>Game Name
                      <input type='text' name='gameName' value={this.state.gameName}
                             onChange={this.handleInputChange} />
                    </label>
                  </Col>
                </Row>
                )}
                <Row>
                  <Col width='12'>
                    <Button type='submit'>{this.props.button} Game</Button>
                  </Col>
                </Row>
              </form>
            </GroupBox>
        );
    }
}

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