1 files changed, 94 insertions, 0 deletions
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js b/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js
new file mode 100644
index 0000000..5c40f1c
--- /dev/null
+++ b/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js
@@ -0,0 +1,94 @@
+import React from "react";
+import {Maps} from "./mapList";
+import {FancyBox} from "../../components/fancyBox";
+import PropTypes from "prop-types";
+
+export class PanelChooseMap extends React.Component {
+    render() {
+        const mapImg = require(`../../../maps/svg/${this.props.params.map.svgName()}.svg`);
+        const mapEntries = [];
+        let count = 0;
+        for (let mapInfo of Maps) {
+            ++count;
+            if (!mapInfo.variants) {
+                mapEntries.push(
+                    <div key={count} className="mb-1">
+                        <button type="button"
+                                className="btn btn-secondary btn-sm btn-block"
+                                onMouseOver={() => this.props.onUpdateParams({map: mapInfo})}
+                                onClick={() => this.props.forward()}>
+                            {mapInfo.title}
+                        </button>
+                    </div>
+                );
+            } else {
+                const dropDownID = `collapse-${count}-${mapInfo.name}`;
+                const variants = mapInfo.variants.slice();
+                const defaultVariant = variants[0];
+                mapEntries.push(
+                    <div key={count}>
+                        <div className="mb-1 d-flex flex-row justify-content-center">
+                            <button type="button"
+                                    className="btn btn-secondary btn-sm flex-grow-1 mr-1"
+                                    onMouseOver={() => this.props.onUpdateParams({map: defaultVariant})}
+                                    onClick={() => this.props.forward()}>
+                                {mapInfo.title} ({defaultVariant.title})
+                            </button>
+                            <button type="button"
+                                    className="btn btn-outline-secondary btn-sm collapsed"
+                                    data-toggle="collapse"
+                                    data-target={`#${dropDownID}`}
+                                    aria-expanded={false}
+                                    aria-controls={dropDownID}>
+                                <span className="unroll"><strong>+</strong></span>
+                                <span className="roll"><strong>-</strong></span>
+                            </button>
+                        </div>
+                        <div className="collapse" id={dropDownID}>
+                            <div>
+                                {(() => {
+                                    const views = [];
+                                    for (let i = 1; i < variants.length; ++i) {
+                                        const variantInfo = variants[i];
+                                        views.push(
+                                            <div key={variantInfo.name} className="mb-1">
+                                                <button type="button"
+                                                        className="btn btn-outline-secondary btn-sm btn-block"
+                                                        onMouseOver={() => this.props.onUpdateParams({map: variantInfo})}
+                                                        onClick={() => this.props.forward()}>
+                                                    {variantInfo.title}
+                                                </button>
+                                            </div>
+                                        );
+                                    }
+                                    return views;
+                                })()}
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+        }
+        return (
+            <FancyBox title={'Choose a map'} onClose={this.props.cancel}>
+                <div className="row panel-choose-map">
+                    <div className="col-md">
+                        <div className="map-list p-1 ml-0 ml-sm-1">
+                            {mapEntries}
+                        </div>
+                    </div>
+                    <div className="col-md">
+                        <img className="img-fluid" src={mapImg} alt={this.props.params.map.title}/>
+                    </div>
+                </div>
+            </FancyBox>
+        );
+    }
+}
+
+PanelChooseMap.propTypes = {
+    forward: PropTypes.func.isRequired,
+    cancel: PropTypes.func.isRequired,
+    params: PropTypes.object.isRequired,
+    onUpdateParams: PropTypes.func.isRequired
+};