blob: 8258acd576e7ba86385c816005b0390147c8a824 (
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
|
// ==============================================================================
// 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 {FancyBox} from "../../components/fancyBox";
import PropTypes from "prop-types";
import Octicon, {ArrowLeft} from "@primer/octicons-react";
export class PanelChoosePower extends React.Component {
render() {
this.props.powers.sort();
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="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 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>
);
}
}
PanelChoosePower.propTypes = {
backward: PropTypes.func.isRequired,
forward: PropTypes.func.isRequired,
cancel: PropTypes.func.isRequired,
onUpdateParams: PropTypes.func.isRequired,
powers: PropTypes.arrayOf(PropTypes.string).isRequired
};
|
