1
0
mirror of synced 2024-12-16 00:01:15 +01:00
bemaniutils/bemani/frontend/static/controllers/ddr/settings.react.js

442 lines
19 KiB
JavaScript
Raw Normal View History

/*** @jsx React.DOM */
var valid_versions = Object.keys(window.versions);
var pagenav = new History(valid_versions);
var option_names = {
'character': 'Character',
'arrowskin': 'Arrow Skin',
'guidelines': 'Guide Lines',
'filter': 'Filter',
};
var settings_view = createReactClass({
getInitialState: function(props) {
var profiles = Object.keys(window.player);
var version = pagenav.getInitialState(profiles[profiles.length - 1]);
return {
player: window.player,
profiles: profiles,
version: version,
new_name: window.player[version].name,
new_weight: (window.player[version].weight / 10).toFixed(1),
new_workout_mode: window.player[version].workout_mode,
options_changed: {},
options_saving: {},
options_saved: {},
editing_name: false,
editing_weight: false,
saving_early_late: false,
saving_background_combo: false,
};
},
componentDidMount: function() {
pagenav.onChange(function(version) {
this.setState({version: version});
}.bind(this));
},
componentDidUpdate: function() {
if (this.focus_element && this.focus_element != this.already_focused) {
this.focus_element.focus();
this.already_focused = this.focus_element;
}
},
setOptionsChanged: function(val) {
this.state.options_changed[this.state.version] = val;
return this.state.options_changed;
},
setOptionsSaving: function(val) {
this.state.options_saving[this.state.version] = val;
return this.state.options_saving;
},
setOptionsSaved: function(val) {
this.state.options_saved[this.state.version] = val;
return this.state.options_saved;
},
saveOptions: function(event) {
this.setState({options_saving: this.setOptionsSaving(true), options_saved: this.setOptionsSaved(false)});
AJAX.post(
Link.get('updatesettings'),
{
version: this.state.version,
settings: this.state.player[this.state.version].settings,
},
function(response) {
var player = this.state.player;
player[response.version].settings = response.player[this.state.version].settings;
this.setState({
player: player,
options_saving: this.setOptionsSaving(false),
options_saved: this.setOptionsSaved(true),
options_changed: this.setOptionsChanged(false),
});
}.bind(this)
);
event.preventDefault();
},
toggleEarlyLate: function() {
this.setState({saving_early_late: true})
AJAX.post(
Link.get('updateearlylate'),
{
value: !this.state.player[this.state.version].early_late,
version: this.state.version,
},
function(response) {
var player = this.state.player;
player[response.version].early_late = response.value;
this.setState({
player: player,
saving_early_late: false,
});
}.bind(this)
);
},
toggleBackgroundCombo: function() {
this.setState({saving_background_combo: true})
AJAX.post(
Link.get('updatebackgroundcombo'),
{
value: !this.state.player[this.state.version].background_combo,
version: this.state.version,
},
function(response) {
var player = this.state.player;
player[response.version].background_combo = response.value;
this.setState({
player: player,
saving_background_combo: false,
});
}.bind(this)
);
},
saveName: function(event) {
AJAX.post(
Link.get('updatename'),
{
version: this.state.version,
name: this.state.new_name,
},
function(response) {
var player = this.state.player;
player[response.version].name = response.name;
this.setState({
player: player,
new_name: this.state.player[response.version].name,
editing_name: false,
});
}.bind(this)
);
event.preventDefault();
},
saveWeight: function(event) {
AJAX.post(
Link.get('updateweight'),
{
version: this.state.version,
weight: this.state.new_weight,
enabled: this.state.new_workout_mode,
},
function(response) {
var player = this.state.player;
player[response.version].weight = response.weight;
player[response.version].workout_mode = response.enabled;
this.setState({
player: player,
new_weight: (this.state.player[response.version].weight / 10).toFixed(1),
new_workout_mode: this.state.player[response.version].workout_mode,
editing_weight: false,
});
}.bind(this)
);
event.preventDefault();
},
renderName: function(player) {
return (
<LabelledSection vertical={true} label="Name">{
!this.state.editing_name ?
<span>
<span>{player.name}</span>
<Edit
onClick={function(event) {
this.setState({editing_name: true});
}.bind(this)}
/>
</span> :
<form className="inline" onSubmit={this.saveName}>
<input
type="text"
className="inline"
maxlength="8"
size="8"
autofocus="true"
ref={c => (this.focus_element = c)}
value={this.state.new_name}
onChange={function(event) {
var value = event.target.value.toUpperCase();
var nameRegex = /^[-&$\\.\\?!A-Z0-9 ]*$/;
if (value.length <= 8 && nameRegex.test(value)) {
this.setState({new_name: value});
}
}.bind(this)}
name="name"
/>
<input
type="submit"
value="save"
/>
<input
type="button"
value="cancel"
onClick={function(event) {
this.setState({
new_name: this.state.player[this.state.version].name,
editing_name: false,
});
}.bind(this)}
/>
</form>
}</LabelledSection>
);
},
renderWeight: function(player) {
return (
<LabelledSection vertical={true} label="Weight">{
!this.state.editing_weight ?
<span>
{ player.workout_mode ?
<span>{player.weight / 10} kg</span> :
<span className="placeholder">workout mode disabled</span>
}
<Edit
onClick={function(event) {
this.setState({editing_weight: true});
}.bind(this)}
/>
</span> :
<form className="inline" onSubmit={this.saveWeight}>
<div className="row">
<input
name="enable_workout_mode"
id="enable_workout_mode"
type="checkbox"
className="inline"
checked={this.state.new_workout_mode}
onChange={function(event) {
this.setState({
new_workout_mode: event.target.checked,
});
}.bind(this)}
/>
<label
htmlFor="enable_workout_mode"
className="inline"
>
enable workout mode
</label>
</div>
{ this.state.new_workout_mode ?
<input
type="text"
className="inline"
maxlength="5"
size="5"
autofocus="true"
ref={c => (this.focus_element = c)}
value={this.state.new_weight}
onChange={function(event) {
var value = event.target.value.toUpperCase();
var weightRegex = /^[0-9]?[0-9]?[0-9]?(\.([0-9])?)?$/;
if (value.length <= 5 && weightRegex.test(value)) {
this.setState({new_weight: value});
}
}.bind(this)}
name="name"
/> :
null
}
<input
type="submit"
value="save"
/>
<input
type="button"
value="cancel"
onClick={function(event) {
this.setState({
new_weight: (this.state.player[this.state.version].weight / 10).toFixed(1),
new_workout_mode: this.state.player[this.state.version].workout_mode,
editing_weight: false,
});
}.bind(this)}
/>
</form>
}</LabelledSection>
);
},
render: function() {
if (this.state.player[this.state.version]) {
var player = this.state.player[this.state.version];
return (
<div>
<div className="section">
{this.state.profiles.map(function(version) {
return (
<Nav
title={window.versions[version]}
active={this.state.version == version}
showAlert={this.state.options_changed[version]}
onClick={function(event) {
if (this.state.editing_name) { return; }
if (this.state.editing_weight) { return; }
if (this.state.version == version) { return; }
this.setState({
version: version,
new_name: this.state.player[version].name,
new_weight: (this.state.player[version].weight / 10).toFixed(1),
new_workout_mode: this.state.player[version].workout_mode,
});
pagenav.navigate(version);
}.bind(this)}
/>
);
}.bind(this))}
</div>
<div className="section">
<h3>User Profile</h3>
{this.renderName(player)}
<LabelledSection vertical={true} label={
<span>
Fast/Slow Display
{ this.state.saving_early_late ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
</span>
}>
<Slider
on="on"
off="off"
className="padded fix"
value={this.state.player[this.state.version].early_late}
onChange={function(value) {
this.toggleEarlyLate();
}.bind(this)}
/>
</LabelledSection>
<LabelledSection vertical={true} label={
<span>
Combo Position
{ this.state.saving_background_combo ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
</span>
}>
<Slider
className="padded"
value={this.state.player[this.state.version].background_combo}
onChange={function(value) {
this.toggleBackgroundCombo();
}.bind(this)}
/>
<span className="slider-label">{
this.state.player[this.state.version].background_combo ? 'background' : 'foreground'
}</span>
</LabelledSection>
{this.renderWeight(player)}
</div>
{ this.state.player[this.state.version].settings ?
<div className="section">
<h3>Options</h3>
{Object.keys(DDROptions[this.state.version]).map(function(option) {
return (
<LabelledSection
className="ddr option"
vertical={true}
label={option_names[option]}
>
<SelectInt
name={option}
value={this.state.player[this.state.version].settings[option]}
choices={DDROptions[this.state.version][option]}
onChange={function(choice) {
var player = this.state.player;
player[this.state.version].settings[option] = choice;
this.setState({
player: player,
options_changed: this.setOptionsChanged(true),
});
}.bind(this)}
/>
</LabelledSection>
);
}.bind(this))}
<input
type="submit"
value="save"
disabled={!this.state.options_changed[this.state.version]}
onClick={function(event) {
this.saveOptions(event);
}.bind(this)}
/>
{ this.state.options_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
{ this.state.options_saved[this.state.version] ?
<span>{ "\u2713" }</span> :
null
}
</div> : null
}
</div>
);
} else {
return (
<div>
<div className="section">
You have no profile for {window.versions[this.state.version]}!
</div>
<div className="section">
{this.state.profiles.map(function(version) {
return (
<Nav
title={window.versions[version]}
active={this.state.version == version}
onClick={function(event) {
if (this.state.version == version) { return; }
this.setState({
version: version,
});
pagenav.navigate(version);
}.bind(this)}
/>
);
}.bind(this))}
</div>
</div>
);
}
},
});
ReactDOM.render(
React.createElement(settings_view, null),
document.getElementById('content')
);