blob: dc400bd169a79af54e9139041fd56e332fc2532c (
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
|
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
};
|
