From 5c3bd9b3802e2001a7e77baf2911386135a03839 Mon Sep 17 00:00:00 2001
From: notoraptor <stevenbocco@gmail.com>
Date: Wed, 14 Aug 2019 12:22:22 -0400
Subject: [Web] Integrated new maps on the web interface

- Fixed bug with incorrect dislodged unit on pure map
- [python] Make sure dummy powers are registered only for standard maps.
- Hardcoded supply centers into SVG files.
- Removed supply centers CSS classes.
- Update positions for units and dislodged units on all maps.
- Converted SVGs to React.
- Removed "sym" classes and hardcode related styles into symbol definitions.
- Reordered map list (standard at top, then other ones in alphabetical order)
- Displayed + button for all maps and disable it for maps without variants.
- Minified generated code when converting SVG files to React.
- [web] Added ability to hide/display map abbreviations.
---
 .../wizards/gameCreation/gameCreationWizard.css    | 31 ++++++++++++++
 .../gui/wizards/gameCreation/gameCreationWizard.js |  1 +
 .../web/src/gui/wizards/gameCreation/mapList.js    |  6 +++
 .../src/gui/wizards/gameCreation/panelChooseMap.js |  9 ++--
 .../gui/wizards/gameCreation/panelChoosePlayers.js | 50 ++++++++++++----------
 .../gui/wizards/gameCreation/panelChoosePower.js   | 50 ++++++++++++----------
 6 files changed, 100 insertions(+), 47 deletions(-)
 create mode 100644 diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.css

(limited to 'diplomacy/web/src/gui/wizards')

diff --git a/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.css b/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.css
new file mode 100644
index 0000000..b88095c
--- /dev/null
+++ b/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.css
@@ -0,0 +1,31 @@
+.game-creation-wizard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.game-creation-wizard .row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.game-creation-wizard .fancy-box {
+    width: 75vw;
+    height: 75vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.game-creation-wizard .fancy-content {
+    flex-grow: 1;
+    overflow: auto;
+}
+
+.panel-choose-map {
+    height: 100%;
+}
+
+.panel-choose-map .map-list {
+    border: 1px solid gray;
+    height: 100%;
+}
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.js b/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.js
index e6477d2..5e2b43f 100644
--- a/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.js
+++ b/diplomacy/web/src/gui/wizards/gameCreation/gameCreationWizard.js
@@ -23,6 +23,7 @@ import {PanelChoosePower} from "./panelChoosePower";
 import {PanelChooseSettings} from "./panelChooseSettings";
 import {Maps} from "./mapList";
 import {UTILS} from "../../../diplomacy/utils/utils";
+import './gameCreationWizard.css';
 
 export class GameCreationWizard extends React.Component {
     constructor(props) {
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/mapList.js b/diplomacy/web/src/gui/wizards/gameCreation/mapList.js
index 388066f..1128302 100644
--- a/diplomacy/web/src/gui/wizards/gameCreation/mapList.js
+++ b/diplomacy/web/src/gui/wizards/gameCreation/mapList.js
@@ -54,4 +54,10 @@ export const Maps = [
         new VariantInfo('standard_france_austria', 'France VS Austria'),
         new VariantInfo('standard_germany_italy', 'Germany VS Italy')
     ]),
+    new MapInfo('ancmed', 'Ancient Mediterranean', [
+        new VariantInfo('ancmed', 'Default'),
+        new VariantInfo('ancmed_age_of_empires', 'Age of empires')
+    ]),
+    new MapInfo('modern', 'Modern'),
+    new MapInfo('pure', 'Pure'),
 ];
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js b/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js
index 432d1a8..a934860 100644
--- a/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js
+++ b/diplomacy/web/src/gui/wizards/gameCreation/panelChooseMap.js
@@ -28,13 +28,16 @@ export class PanelChooseMap extends React.Component {
             ++count;
             if (!mapInfo.variants) {
                 mapEntries.push(
-                    <div key={count} className="mb-1">
+                    <div key={count} className="mb-1 d-flex flex-row">
                         <button type="button"
-                                className="btn btn-secondary btn-sm btn-block"
+                                className="btn btn-secondary btn-sm flex-grow-1 mr-1"
                                 onMouseOver={() => this.props.onUpdateParams({map: mapInfo})}
                                 onClick={() => this.props.forward()}>
                             {mapInfo.title}
                         </button>
+                        <button type="button" className="btn btn-outline-secondary btn-sm" disabled={true}>
+                            <strong>+</strong>
+                        </button>
                     </div>
                 );
             } else {
@@ -43,7 +46,7 @@ export class PanelChooseMap extends React.Component {
                 const defaultVariant = variants[0];
                 mapEntries.push(
                     <div key={count}>
-                        <div className="mb-1 d-flex flex-row justify-content-center">
+                        <div className="mb-1 d-flex flex-row">
                             <button type="button"
                                     className="btn btn-secondary btn-sm flex-grow-1 mr-1"
                                     onMouseOver={() => this.props.onUpdateParams({map: defaultVariant})}
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePlayers.js b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePlayers.js
index 53ddd64..e86eb7d 100644
--- a/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePlayers.js
+++ b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePlayers.js
@@ -39,29 +39,35 @@ export class PanelChoosePlayers extends React.Component {
                         </button>
                     </div>
                 </div>
-                <div className="d-flex flex-row justify-content-center my-2">
-                    {(() => {
-                        const choice = [];
-                        for (let i = 0; i < this.props.nbPowers; ++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({n_controls: i + 1});
-                                            this.props.forward();
-                                        }}>
-                                    {i + 1}
-                                </button>
-                            );
-                        }
-                        return choice;
-                    })()}
+                <div className="row">
+                    <div className="col">
+                        <div className="d-flex flex-row justify-content-center my-2">
+                            {(() => {
+                                const choice = [];
+                                for (let i = 0; i < this.props.nbPowers; ++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({n_controls: i + 1});
+                                                    this.props.forward();
+                                                }}>
+                                            {i + 1}
+                                        </button>
+                                    );
+                                }
+                                return choice;
+                            })()}
+                        </div>
+                    </div>
                 </div>
-                <div>
-                    <button type="button" className="btn btn-secondary btn-sm px-3"
-                            onClick={() => this.props.backward()}>
-                        <Octicon icon={ArrowLeft}/>
-                    </button>
+                <div className="row">
+                    <div className="col">
+                        <button type="button" className="btn btn-secondary btn-sm px-3"
+                                onClick={() => this.props.backward()}>
+                            <Octicon icon={ArrowLeft}/>
+                        </button>
+                    </div>
                 </div>
             </FancyBox>
         );
diff --git a/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js
index 1463805..8258acd 100644
--- a/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js
+++ b/diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js
@@ -41,29 +41,35 @@ export class PanelChoosePower extends React.Component {
                         </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 className="row">
+                    <div className="col">
+                        <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>
                 </div>
-                <div>
-                    <button type="button" className="btn btn-secondary btn-sm px-3"
-                            onClick={() => this.props.backward()}>
-                        <Octicon icon={ArrowLeft}/>
-                    </button>
+                <div className="row">
+                    <div className="col">
+                        <button type="button" className="btn btn-secondary btn-sm px-3"
+                                onClick={() => this.props.backward()}>
+                            <Octicon icon={ArrowLeft}/>
+                        </button>
+                    </div>
                 </div>
             </FancyBox>
         );
-- 
cgit v1.2.3