-
-
Save skulden13/4169b09ef76d2568e78e to your computer and use it in GitHub Desktop.
Задание для https://goo.gl/WGrXbu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Sci-Fi</title> | |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| <script src="https://fb.me/react-0.14.3.js"></script> | |
| <script src="https://fb.me/react-dom-0.14.3.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Задание №4</h1> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p> | |
| <ul> | |
| <li>планет всего три: «Земля», «Марс» и «Венера»;</li> | |
| <li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li> | |
| <li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li> | |
| </ul> | |
| <p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="name">Имя</label> | |
| <input class="form-control" name="name" id="name"> | |
| </div> | |
| <div id="fps-container"></div> | |
| <input type="submit" class="btn btn-primary" value="Создать персонажа"> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/babel"> | |
| var FantasticData = { | |
| planets: { | |
| earth: 'Земля', | |
| mars: 'Марс', | |
| venus: 'Венера' | |
| }, | |
| genders: { | |
| male: 'мужской', | |
| female: 'женский', | |
| neuter: 'средний' | |
| }, | |
| races: { | |
| earthman: 'землянин', | |
| martian: 'марсианин', | |
| venusian: 'венерианец' | |
| } | |
| }; | |
| var FantasticDataRules = { | |
| earthman: { | |
| genders: [FantasticData.genders.male, FantasticData.genders.female], | |
| planets: [FantasticData.planets.earth, FantasticData.planets.mars, FantasticData.planets.venus] | |
| }, | |
| martian: { | |
| genders: [FantasticData.genders.male], | |
| planets: [FantasticData.planets.mars] | |
| }, | |
| venusian: { | |
| genders: [FantasticData.genders.male, FantasticData.genders.female, FantasticData.genders.neuter], | |
| planets: [FantasticData.planets.venus] | |
| } | |
| }; | |
| var FantasticSelect = React.createClass({ | |
| getDefaultProps: function() { | |
| return { | |
| id: 0, | |
| options: [], | |
| labelName: '', | |
| value: '' | |
| } | |
| }, | |
| render: function() { | |
| var options = []; | |
| for (var i = 0; i < this.props.options.length; i++) { | |
| options.push(<option value={this.props.options[i]} key={i}>{this.props.options[i]}</option>); | |
| } | |
| return ( | |
| <div className="form-group"> | |
| <label htmlFor={this.props.id}> {this.props.labelName} </label> | |
| <select className="form-control" value={this.props.value} name={this.props.id} onChange={this.props.onChange}> | |
| {options} | |
| </select> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var FantasticPersonSelector = React.createClass({ | |
| getInitialState: function() { | |
| return { | |
| race: this.props.race, | |
| gender: this.props.gender, | |
| planet: this.props.planet, | |
| races: function() { | |
| var result = []; | |
| for (var item in FantasticData.races) { | |
| result.push(FantasticData.races[item]); | |
| } | |
| return result; | |
| }(), | |
| genders: FantasticDataRules[this.props.race].genders, | |
| planets: FantasticDataRules[this.props.race].planets | |
| } | |
| }, | |
| getValueByKey: function(key, arr) { | |
| var result = ''; | |
| for (var item in arr) { | |
| if (item === key) { | |
| result = arr[item]; | |
| } | |
| } | |
| return result; | |
| }, | |
| getKeyByValue: function(value, arr) { | |
| var result = ''; | |
| for (var item in arr) { | |
| if (arr[item] === value) { | |
| result = item; | |
| } | |
| } | |
| return result; | |
| }, | |
| getRace: function(value) { | |
| return this.getValueByKey(value, FantasticData.races); | |
| }, | |
| getGender: function(value) { | |
| return this.getValueByKey(value, FantasticData.genders); | |
| }, | |
| getPlanet: function(value) { | |
| return this.getValueByKey(value, FantasticData.planets); | |
| }, | |
| raceOnChange: function(e) { | |
| var race = this.getKeyByValue(e.target.value, FantasticData.races); | |
| this.setState({ | |
| race: race, | |
| gender: this.getKeyByValue(FantasticDataRules[race].genders[0], FantasticData.genders), | |
| planet: this.getKeyByValue(FantasticDataRules[race].planets[0], FantasticData.planets), | |
| genders: FantasticDataRules[race].genders, | |
| planets: FantasticDataRules[race].planets | |
| }); | |
| }, | |
| genderOnChange: function(e) { | |
| this.setState({[e.target.name]: this.getKeyByValue(e.target.value, FantasticData.genders)}); | |
| }, | |
| planetOnChange: function(e) { | |
| this.setState({[e.target.name]: this.getKeyByValue(e.target.value, FantasticData.planets)}); | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <FantasticSelect options={this.state.races} labelName="Раса" id="race" value={this.getRace(this.state.race)} onChange={this.raceOnChange} /> | |
| <FantasticSelect options={this.state.genders} labelName="Пол" id="gender" value={this.getGender(this.state.gender)} onChange={this.genderOnChange} /> | |
| <FantasticSelect options={this.state.planets} labelName="Планета" id="planet" value={this.getPlanet(this.state.planet)} onChange={this.planetOnChange} /> | |
| <br /> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var fantasticPerson = ReactDOM.render(<FantasticPersonSelector race="martian" gender="male" planet="mars" /> , | |
| document.getElementById('fps-container') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment