mnml/client/src/components/instance.create.form.jsx
2019-06-11 17:44:24 +10:00

92 lines
2.7 KiB
JavaScript

const preact = require('preact');
const { connect } = require('preact-redux');
const { Component } = require('preact');
const addState = connect(
function receiveState(state) {
const { ws, team } = state;
function sendInstanceNew(sConstructs, name, pve) {
if (sConstructs.length) {
return ws.sendInstanceNew(sConstructs, name, pve);
}
return false;
}
return {
sendInstanceNew,
team,
};
}
);
class InstanceCreateForm extends Component {
constructor(props) {
super(props);
this.state = { pve: false, name: '' };
const { sendInstanceNew } = props;
this.sendInstanceNew = sendInstanceNew.bind(this);
this.nameInput = this.nameInput.bind(this);
this.pveChange = this.pveChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
pveChange() {
this.setState({ pve: !this.state.pve });
}
nameInput(event) {
this.setState({ name: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
this.sendInstanceNew(this.props.team, this.state.name, this.state.pve);
this.setState({ name: '', pve: false });
}
render() {
const disabled = !this.props.team.every(c => c);
const classes = `create-form ${disabled ? 'disabled' : ''}`;
return (
<div class={classes}>
<form>
<fieldset>
<legend>New Instance</legend>
<label>Instance Name</label>
<input
class="login-input"
type="text"
disabled={disabled}
value={this.state.name}
placeholder="game name"
onInput={this.nameInput}
/>
<label htmlFor="pveSelect">Practice Mode - vs CPU, no Time Control</label>
<input id="pveSelect"
type="checkbox"
disabled={disabled}
checked={this.state.pve}
onChange={this.pveChange}
>
</input>
</fieldset>
</form>
<button
onClick={this.handleSubmit}
disabled={disabled}
type="submit">
+
</button>
</div>
);
}
}
module.exports = addState(InstanceCreateForm);