blob: 84a47a0da30e47adaef60b026f22d92e0ef22b56 (
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
|
import React from "react";
import {FancyBox} from "../../components/fancyBox";
import PropTypes from "prop-types";
import Octicon, {ArrowLeft} from "@primer/octicons-react";
export class PanelChoosePlayers extends React.Component {
render() {
return (
<FancyBox title={'Number of human players'} 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({n_controls: 0});
this.props.forward(2);
}}>None - just bots
</button>
</div>
<div className="col-sm">
<button type="button" className="btn btn-secondary btn-sm btn-block inline" onClick={() => {
this.props.onUpdateParams({n_controls: this.props.nbPowers});
this.props.forward();
}}>All humans - no bots
</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>
<div>
<button type="button" className="btn btn-secondary btn-sm px-3"
onClick={() => this.props.backward()}>
<Octicon icon={ArrowLeft}/>
</button>
</div>
</FancyBox>
);
}
}
PanelChoosePlayers.propTypes = {
backward: PropTypes.func.isRequired,
forward: PropTypes.func.isRequired,
cancel: PropTypes.func.isRequired,
onUpdateParams: PropTypes.func.isRequired,
nbPowers: PropTypes.number.isRequired
};
|
