blob: 432d1a8a24f3e8329bef3263d69a726449d5b751 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
// ==============================================================================
// 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 {Maps} from "./mapList";
import {FancyBox} from "../../components/fancyBox";
import PropTypes from "prop-types";
export class PanelChooseMap extends React.Component {
render() {
const mapImg = require(`../../../diplomacy/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
};
|
