[Web] Added game creation interface

- Replaced fancybox with react-confirm-alert + dialog box
- Removed unused code
- Default map can be selected with 1-click
- Added ability to select map variants

3 files changed, 24 insertions, 106 deletions

diff --git a/diplomacy/web/src/gui/forms/create_form.jsx b/diplomacy/web/src/gui/forms/create_form.jsx
deleted file mode 100644
index 6753519..0000000
--- a/diplomacy/web/src/gui/forms/create_form.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// ==============================================================================
-// 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
-};
diff --git a/diplomacy/web/src/gui/forms/select_location_form.jsx b/diplomacy/web/src/gui/forms/select_location_form.jsx
index ca7be09..1725c9b 100644
--- a/diplomacy/web/src/gui/forms/select_location_form.jsx
+++ b/diplomacy/web/src/gui/forms/select_location_form.jsx
@@ -17,20 +17,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {Button} from "../components/button";
+import {FancyBox} from "../components/fancyBox";
 
 export class SelectLocationForm extends React.Component {
     render() {
+        const title = `Select location to continue building order: ${this.props.path.join(' ')}`;
         return (
-            <div>
-                {this.props.locations.map((location, index) => (
-                    <Button key={index} title={location} large={true} onClick={() => this.props.onSelect(location)}/>
-                ))}
-            </div>
+            <FancyBox title={title} onClose={this.props.onClose}>
+                <div>
+                    {this.props.locations.map((location, index) => (
+                        <Button key={index} title={location} large={true}
+                                onClick={() => this.props.onSelect(location)}/>
+                    ))}
+                </div>
+            </FancyBox>
         );
     }
 }
 
 SelectLocationForm.propTypes = {
     locations: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onSelect: PropTypes.func.isRequired // onSelect(location)
+    onSelect: PropTypes.func.isRequired, // onSelect(location)
+    onClose: PropTypes.func.isRequired,
+    path: PropTypes.array.isRequired
 };
diff --git a/diplomacy/web/src/gui/forms/select_via_form.jsx b/diplomacy/web/src/gui/forms/select_via_form.jsx
index b779b8d..8b340af 100644
--- a/diplomacy/web/src/gui/forms/select_via_form.jsx
+++ b/diplomacy/web/src/gui/forms/select_via_form.jsx
@@ -17,19 +17,25 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {Button} from "../components/button";
+import {FancyBox} from "../components/fancyBox";
 
 export class SelectViaForm extends React.Component {
     render() {
         return (
-            <div>
-                <Button title={'regular move (M)'} large={true} onClick={() => this.props.onSelect('M')}/>
-                <Button title={'move via (V)'} large={true} onClick={() => this.props.onSelect('V')}/>
-            </div>
+            <FancyBox title={`Select move type for move order: ${this.props.path.join(' ')}`}
+                      onClose={this.props.onClose}>
+                <div>
+                    <Button title={'regular move (M)'} large={true} onClick={() => this.props.onSelect('M')}/>
+                    <Button title={'move via (V)'} large={true} onClick={() => this.props.onSelect('V')}/>
+                </div>
+            </FancyBox>
         );
     }
 }
 
 SelectViaForm.propTypes = {
-    onSelect: PropTypes.func.isRequired
+    path: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired
 };