1 files changed, 62 insertions, 0 deletions
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js
new file mode 100644
index 0000000..dc400bd
--- /dev/null
+++ b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js
@@ -0,0 +1,62 @@
+import React from "react";
+import {FancyBox} from "../../components/fancyBox";
+import PropTypes from "prop-types";
+import Octicon, {ArrowLeft} from "@primer/octicons-react";
+
+export class PanelChoosePower extends React.Component {
+    render() {
+        return (
+            <FancyBox title={'Choose your power'} onClose={this.props.cancel}>
+                <div className="row">
+                    <div className="col-sm">
+                        <button type="button" className="btn btn-secondary btn-sm btn-block inline" onClick={() => {
+                            this.props.onUpdateParams({power_name: null});
+                            this.props.forward();
+                        }}>I just want to observe
+                        </button>
+                    </div>
+                    <div className="col-sm">
+                        <button type="button" className="btn btn-secondary btn-sm btn-block inline" onClick={() => {
+                            const powerName = this.props.powers[Math.floor(Math.random() * this.props.powers.length)];
+                            this.props.onUpdateParams({power_name: powerName});
+                            this.props.forward();
+                        }}>Choose randomly for me
+                        </button>
+                    </div>
+                </div>
+                <div className="d-flex flex-row justify-content-center my-2">
+                    {(() => {
+                        const choice = [];
+                        for (let i = 0; i < this.props.powers.length; ++i) {
+                            choice.push(
+                                <button key={i} type="button"
+                                        className={`btn btn-secondary btn-sm flex-grow-1 ${i === 0 ? '' : 'ml-sm-1'}`}
+                                        onClick={() => {
+                                            this.props.onUpdateParams({power_name: this.props.powers[i]});
+                                            this.props.forward();
+                                        }}>
+                                    {this.props.powers[i]}
+                                </button>
+                            );
+                        }
+                        return choice;
+                    })()}
+                </div>
+                <div>
+                    <button type="button" className="btn btn-secondary btn-sm px-3"
+                            onClick={() => this.props.backward()}>
+                        <Octicon icon={ArrowLeft}/>
+                    </button>
+                </div>
+            </FancyBox>
+        );
+    }
+}
+
+PanelChoosePower.propTypes = {
+    backward: PropTypes.func.isRequired,
+    forward: PropTypes.func.isRequired,
+    cancel: PropTypes.func.isRequired,
+    onUpdateParams: PropTypes.func.isRequired,
+    powers: PropTypes.arrayOf(PropTypes.string).isRequired
+};