Initial public release.

src/components/new-game/NewGame.jsx

@@ -0,0 +1,104 @@
+// 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)