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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
// ==============================================================================
// 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 {UTILS} from "../../../diplomacy/utils/utils";
import {ArrowLeftIcon} from "@primer/octicons-react";
const DEADLINES = [
[0, '(no deadline)'],
[60, '1 min'],
[60 * 5, '5 min'],
[60 * 30, '30 min'],
[60 * 60 * 2, '2 hrs'],
[60 * 60 * 24, '24 hrs'],
];
export class PanelChooseSettings extends React.Component {
constructor(props) {
super(props);
this.onCheckNoPress = this.onCheckNoPress.bind(this);
this.onSelectDeadline = this.onSelectDeadline.bind(this);
this.onSetRegistrationPassword = this.onSetRegistrationPassword.bind(this);
this.onSetGameID = this.onSetGameID.bind(this);
}
onCheckNoPress(event) {
this.props.onUpdateParams({no_press: event.target.checked});
}
onSelectDeadline(event) {
this.props.onUpdateParams({deadline: parseInt(event.target.value)});
}
onSetRegistrationPassword(event) {
this.props.onUpdateParams({registration_password: event.target.value});
}
onSetGameID(event) {
let gameID = event.target.value;
if (!gameID)
gameID = UTILS.createGameID(this.props.username);
this.props.onUpdateParams({game_id: gameID});
}
render() {
return (
<FancyBox title={'Other settings'} onClose={this.props.cancel}>
<div>
<form>
<div className="form-group row align-items-center mb-2">
<label className="col-md col-form-label" htmlFor="deadline">Deadline</label>
<div className="col-md">
<select id="deadline" className="custom-select custom-select-sm"
value={this.props.params.deadline}
onChange={this.onSelectDeadline}>
{DEADLINES.map((deadline, index) => (
<option key={index} value={deadline[0]}>{deadline[1]}</option>
))}
</select>
</div>
</div>
<div className="form-group row mb-2">
<label className="col-md col-form-label" htmlFor="registration-password">Login
password</label>
<div className="col-md">
<input type="password" className="form-control form-control-sm"
id="registration-password"
value={this.props.params.registration_password}
onChange={this.onSetRegistrationPassword} placeholder="(no password)"/>
</div>
</div>
<div className="form-group row mb-2">
<label className="col-md col-form-label" htmlFor="game-id">Game ID</label>
<div className="col-md">
<input type="text" className="form-control form-control-sm"
id="game-id"
value={this.props.params.game_id}
onChange={this.onSetGameID}/>
</div>
</div>
<div className="custom-control custom-checkbox mb-5">
<input type="checkbox" className="custom-control-input" id="no-press"
checked={this.props.params.no_press} onChange={this.onCheckNoPress}/>
<label className="custom-control-label" htmlFor="no-press">No messages allowed</label>
</div>
</form>
</div>
<div className="row">
<div className="col-sm">
<button type="button" className="btn btn-secondary btn-sm btn-block"
onClick={() => this.props.backward()}>
<ArrowLeftIcon/>
</button>
</div>
<div className="col-sm">
<button type="button" className="btn btn-success btn-sm btn-block inline"
onClick={() => this.props.forward()}>
<strong>create the game</strong>
</button>
</div>
</div>
</FancyBox>
);
}
}
PanelChooseSettings.propTypes = {
backward: PropTypes.func.isRequired,
forward: PropTypes.func.isRequired,
cancel: PropTypes.func.isRequired,
params: PropTypes.object.isRequired,
onUpdateParams: PropTypes.func.isRequired,
username: PropTypes.string.isRequired
};
|
