1
0
mirror of synced 2024-12-15 15:51:15 +01:00
bemaniutils/bemani/frontend/static/components/gamesettings.react.js

210 lines
9.9 KiB
JavaScript

/*** @jsx React.DOM */
function makeGameSettingName(game_settings) {
return game_settings.game + '-' + game_settings.version;
}
var GameSettings = createReactClass({
getInitialState: function() {
var valid_settings = this.props.game_settings.map(function(setting) {
return makeGameSettingName(setting);
});
var pagenav = new History(valid_settings);
return {
pagenav: pagenav,
settings: this.props.game_settings,
current_setting: pagenav.getInitialState(makeGameSettingName(this.props.game_settings[0])),
settings_changed: {},
settings_saving: {},
settings_saved: {},
};
},
componentDidMount: function() {
this.state.pagenav.onChange(function(setting) {
this.setState({current_setting: setting});
}.bind(this));
},
getSettingIndex: function(setting_name) {
var real_index = -1;
this.state.settings.map(function(game_settings, index) {
var current = makeGameSettingName(game_settings);
if (current == setting_name) { real_index = index; }
}.bind(this));
return real_index;
},
setChanged: function(val) {
this.state.settings_changed[this.state.current_setting] = val;
return this.state.settings_changed;
},
setSaving: function(val) {
this.state.settings_saving[this.state.current_setting] = val;
return this.state.settings_saving;
},
setSaved: function(val) {
this.state.settings_saved[this.state.current_setting] = val;
return this.state.settings_saved;
},
saveSettings: function(event) {
var index = this.getSettingIndex(this.state.current_setting);
this.setState({settings_saving: this.setSaving(true), settings_saved: this.setSaved(false)});
AJAX.post(
Link.get('update_settings'),
this.state.settings[index],
function(response) {
this.state.settings[index] = response.game_settings;
this.setState({
settings: this.state.settings,
settings_saving: this.setSaving(false),
settings_saved: this.setSaved(true),
settings_changed: this.setChanged(false),
});
}.bind(this)
);
event.preventDefault();
},
render: function() {
return (
<div>
<div className="section settings-nav">
{ this.state.settings.map(function(game_settings) {
var current = makeGameSettingName(game_settings);
return (
<Nav
title={game_settings.name}
active={this.state.current_setting == current}
showAlert={this.state.settings_changed[current]}
onClick={function(event) {
if (this.state.current_setting == current) { return; }
this.setState({current_setting: current});
this.state.pagenav.navigate(current);
}.bind(this)}
/>
);
}.bind(this))}
</div>
<div className="section">
{ this.state.settings[this.getSettingIndex(this.state.current_setting)].ints.map(function(setting, index) {
return (
<div className="arcade menuoption">
<Tip
text={setting.tip}
>
<label htmlFor={setting.setting}>{setting.name}:</label>
<SelectInt
name={setting.setting}
id={setting.setting}
value={setting.value}
choices={setting.values}
onChange={function(value) {
this.state.settings[this.getSettingIndex(this.state.current_setting)].ints[index].value = value;
this.setState({
settings: this.state.settings,
settings_changed: this.setChanged(true),
});
}.bind(this)}
/>
</Tip>
</div>
);
}.bind(this))}
{ this.state.settings[this.getSettingIndex(this.state.current_setting)].bools.map(function(setting, index) {
return (
<div className="arcade menuoption">
<Tip
text={setting.tip}
>
<label htmlFor={setting.setting}>{setting.name}:</label>
<input
name={setting.setting}
id={setting.setting}
type="checkbox"
checked={setting.value}
onChange={function(event) {
this.state.settings[this.getSettingIndex(this.state.current_setting)].bools[index].value = event.target.checked;
this.setState({
settings: this.state.settings,
settings_changed: this.setChanged(true),
});
}.bind(this)}
/>
</Tip>
</div>
);
}.bind(this))}
{ this.state.settings[this.getSettingIndex(this.state.current_setting)].strs.map(function(setting, index) {
return (
<div className="arcade menuoption">
<Tip
text={setting.tip}
>
<label htmlFor={setting.setting}>{setting.name}:</label>
<input
name={setting.setting}
id={setting.setting}
type="text"
value={setting.value}
onChange={function(event) {
this.state.settings[this.getSettingIndex(this.state.current_setting)].strs[index].value = event.target.value;
this.setState({
settings: this.state.settings,
settings_changed: this.setChanged(true),
});
}.bind(this)}
/>
</Tip>
</div>
);
}.bind(this))}
{ this.state.settings[this.getSettingIndex(this.state.current_setting)].longstrs.map(function(setting, index) {
return (
<div className="arcade menuoption">
<Tip
text={setting.tip}
>
<label htmlFor={setting.setting}>{setting.name}:</label>
<textarea
name={setting.setting}
id={setting.setting}
value={setting.value}
onChange={function(event) {
this.state.settings[this.getSettingIndex(this.state.current_setting)].longstrs[index].value = event.target.value;
this.setState({
settings: this.state.settings,
settings_changed: this.setChanged(true),
});
}.bind(this)}
/>
</Tip>
</div>
);
}.bind(this))}
<input
type="submit"
disabled={!this.state.settings_changed[this.state.current_setting]}
value="save"
onClick={function(event) {
this.saveSettings(event);
}.bind(this)}
/>
{ this.state.settings_saving[this.state.current_setting] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
{ this.state.settings_saved[this.state.current_setting] ?
<span>{ "\u2713" }</span> :
null
}
</div>
</div>
);
},
});