/*** @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(event) { 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) ); event.preventDefault(); }, toggleBackgroundCombo: function(event) { 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) ); event.preventDefault(); }, 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 ( { !this.state.editing_name ? {player.name} :
(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" />
}
); }, renderWeight: function(player) { return ( { !this.state.editing_weight ? { player.workout_mode ? {player.weight / 10} kg : workout mode disabled } :
{ this.state.new_workout_mode ? (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 }
}
); }, render: function() { if (this.state.player[this.state.version]) { var player = this.state.player[this.state.version]; return (
{this.state.profiles.map(function(version) { return (

User Profile

{this.renderName(player)} Fast/Slow Display { this.state.saving_early_late ? : null } }> Combo Position { this.state.saving_background_combo ? : null } }> { this.state.player[this.state.version].background_combo ? 'background' : 'foreground' } {this.renderWeight(player)}
{ this.state.player[this.state.version].settings ?

Options

{Object.keys(DDROptions[this.state.version]).map(function(option) { return ( ); }.bind(this))} { this.state.options_saving[this.state.version] ? : null } { this.state.options_saved[this.state.version] ? { "\u2713" } : null }
: null }
); } else { return (
You have no profile for {window.versions[this.state.version]}!
{this.state.profiles.map(function(version) { return (
); } }, }); ReactDOM.render( React.createElement(settings_view, null), document.getElementById('content') );