1 files changed, 95 insertions, 0 deletions
diff --git a/diplomacy/web/src/gui/forms/create_form.jsx b/diplomacy/web/src/gui/forms/create_form.jsx
new file mode 100644
index 0000000..6753519
--- /dev/null
+++ b/diplomacy/web/src/gui/forms/create_form.jsx
@@ -0,0 +1,95 @@
+// ==============================================================================
+// Copyright (C) 2019 - Philip Paquette, Steven Bocco
+//
+//  This program is free software: you can redistribute it and/or modify it under
+//  the terms of the GNU Affero General Public License as published by the Free
+//  Software Foundation, either version 3 of the License, or (at your option) any
+//  later version.
+//
+//  This program 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 Affero General Public License for more
+//  details.
+//
+//  You should have received a copy of the GNU Affero General Public License along
+//  with this program.  If not, see <https://www.gnu.org/licenses/>.
+// ==============================================================================
+import React from 'react';
+import {Forms} from "../components/forms";
+import {STRINGS} from "../../diplomacy/utils/strings";
+import PropTypes from "prop-types";
+
+export class CreateForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = this.initState();
+    }
+
+    initState() {
+        const state = {
+            game_id: '',
+            power_name: '',
+            n_controls: 7,
+            deadline: 300,
+            registration_password: ''
+        };
+        for (let rule of STRINGS.PUBLIC_RULES)
+            state[`rule_${rule.toLowerCase()}`] = false;
+        return state;
+    }
+
+    render() {
+        const onChange = Forms.createOnChangeCallback(this, this.props.onChange);
+        const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit);
+        return (
+            <form>
+                {Forms.createRow(
+                    Forms.createColLabel('game_id', 'Game ID (optional)'),
+                    <input id={'game_id'} className={'form-control'} type={'text'}
+                           value={Forms.getValue(this.state, 'game_id')} onChange={onChange}/>
+                )}
+                {Forms.createRow(
+                    Forms.createColLabel('power_name', 'power:'),
+                    <select id={'power_name'} className={'form-control custom-select'}
+                            value={Forms.getValue(this.state, 'power_name')} onChange={onChange}>
+                        {Forms.createSelectOptions(STRINGS.ALL_POWER_NAMES, true)}
+                    </select>
+                )}
+                {Forms.createRow(
+                    Forms.createColLabel('n_controls', 'number of required players:'),
+                    <input id={'n_controls'} className={'form-control'} type={'number'}
+                           value={Forms.getValue(this.state, 'n_controls')} onChange={onChange}/>
+                )}
+                {Forms.createRow(
+                    Forms.createColLabel('deadline', 'deadline (in seconds)'),
+                    <input id={'deadline'} className={'form-control'} type={'number'}
+                           value={Forms.getValue(this.state, 'deadline')}
+                           onChange={onChange}/>
+                )}
+                {Forms.createRow(
+                    Forms.createColLabel('registration_password', 'registration password'),
+                    <input id={'registration_password'} className={'form-control'} type={'password'}
+                           value={Forms.getValue(this.state, 'registration_password')} onChange={onChange}/>
+                )}
+                <div><strong>RULES:</strong></div>
+                <div className={'mb-4'}>
+                    {STRINGS.PUBLIC_RULES.map((rule, index) => (
+                        <div key={index} className={'form-check-inline'}>
+                            {Forms.createCheckbox(
+                                `rule_${rule.toLowerCase()}`,
+                                rule,
+                                Forms.getValue(this.state, `rule_${rule.toLowerCase()}`),
+                                onChange)}
+                        </div>
+                    ))}
+                </div>
+                {Forms.createRow('', Forms.createSubmit('create a game', true, onSubmit))}
+            </form>
+        );
+    }
+}
+
+CreateForm.propTypes = {
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func
+};