ewgenius/scifi.html

## scifi.html
<!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="container"></div>
          <input type="submit" class="btn btn-primary" value="Создать персонажа">
        </form>
      </div>
    </div>
  </div>
  <script type="text/babel">
    var ListSelector = React.createClass({
      render() {
        return (
          <div className="form-group">
            <label htmlFor="gender">{this.props.label}</label>
            <select name={this.props.id} id={this.props.id} value={this.props.value} className="form-control" onChange={this.props.set}>
              {
                this.props.items.map(item => {
                  return (<option key={item.key} value={item.key}>{item.name}</option>);
                })
              }
            </select>
          </div>
        );
      }
    });

    var Selector = React.createClass({
      getInitialState() {
        var planets = [
          { key: 'earth', name:'Земля'},
          { key: 'mars', name:'Марс'},
          { key: 'venera', name:'Венера'}
        ];
        var races = [
          { key: 'human', name: 'Человек'},
          { key: 'marsian', name: 'Марсианин'},
          { key: 'venerian', name: 'Венерианец'}
        ];
        var genders = [
          { key: 'man', name: 'Мужской'},
          { key: 'middle', name: 'Средний'},
          { key: 'woman', name: 'Женский'}
        ];

        return {
          planets: planets,
          races: races,
          genders: genders,

          validRaces: this.getValidRaces(races, this.props.planet ? this.props.planet : 'earth'),
          validGenders: this.getValidGenders(genders, this.props.race ? this.props.race : 'human'),

          planet: this.props.planet ? this.props.planet : 'earth',
          race: this.props.race ? this.props.race : 'human',
          gender: this.props.gender ? this.props.gender : 'man',
        };
      },

      getValidRaces(races, planet) {
        return {
          earth: [races[0]],
          mars: [races[0], races[1]],
          venera: [races[0], races[2]]
        }[planet];
      },

      getValidGenders(genders, race) {
        return {
          human: [genders[0], genders[2]],
          marsian: [genders[0]],
          venerian: genders
        }[race];
      },

      handlePlanet(event) {
        this.setState({
          planet: event.target.value,
          validRaces: this.getValidRaces(this.state.races, event.target.value),
          validGenders: this.getValidGenders(this.state.genders, 'human'),
          gender: 'man'
        });
        setTimeout(() => {
          console.log(`selected planet ${this.state.planet}`);
          console.log(`selected race ${this.state.race}`);
          console.log(`valid races: ${this.state.validRaces.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
          console.log(`valid genders: ${this.state.validGenders.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
        }, 500);
      },

      handleRace(event) {
        this.setState({
          race: event.target.value,
          validGenders: this.getValidGenders(this.state.genders, event.target.value),
          gender: 'man'
        });
        setTimeout(() => {
          console.log(`selected planet ${this.state.planet}`);
          console.log(`selected race ${this.state.race}`);
          console.log(`valid genders: ${this.state.validGenders.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
        }, 500);
      },

      handleGender(event) {
        this.setState({
          gender: event.target.value
        });
      },

      render() {
        return (
          <div className="selector">
            <ListSelector label="планета" key="planet" items={this.state.planets} value={this.state.planet} set={this.handlePlanet} />
            <ListSelector label="раса" key="race" items={this.state.validRaces} value={this.state.race} set={this.handleRace} />
            <ListSelector label="пол" key="gender" items={this.state.validGenders} value={this.state.gender} set={this.handleGender} />
          </div>
        );
    }});

    ReactDOM.render(<Selector gender="man" planet="mars" race="human" />, document.getElementById('container'));
  </script>
</body>

</html>
	<!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="container"></div>
	<input type="submit" class="btn btn-primary" value="Создать персонажа">
	</form>
	</div>
	</div>
	</div>
	<script type="text/babel">
	var ListSelector = React.createClass({
	render() {
	return (
	<div className="form-group">
	<label htmlFor="gender">{this.props.label}</label>
	<select name={this.props.id} id={this.props.id} value={this.props.value} className="form-control" onChange={this.props.set}>
	{
	this.props.items.map(item => {
	return (<option key={item.key} value={item.key}>{item.name}</option>);
	})
	}
	</select>
	</div>
	);
	}
	});

	var Selector = React.createClass({
	getInitialState() {
	var planets = [
	{ key: 'earth', name:'Земля'},
	{ key: 'mars', name:'Марс'},
	{ key: 'venera', name:'Венера'}
	];
	var races = [
	{ key: 'human', name: 'Человек'},
	{ key: 'marsian', name: 'Марсианин'},
	{ key: 'venerian', name: 'Венерианец'}
	];
	var genders = [
	{ key: 'man', name: 'Мужской'},
	{ key: 'middle', name: 'Средний'},
	{ key: 'woman', name: 'Женский'}
	];

	return {
	planets: planets,
	races: races,
	genders: genders,

	validRaces: this.getValidRaces(races, this.props.planet ? this.props.planet : 'earth'),
	validGenders: this.getValidGenders(genders, this.props.race ? this.props.race : 'human'),

	planet: this.props.planet ? this.props.planet : 'earth',
	race: this.props.race ? this.props.race : 'human',
	gender: this.props.gender ? this.props.gender : 'man',
	};
	},

	getValidRaces(races, planet) {
	return {
	earth: [races[0]],
	mars: [races[0], races[1]],
	venera: [races[0], races[2]]
	}[planet];
	},

	getValidGenders(genders, race) {
	return {
	human: [genders[0], genders[2]],
	marsian: [genders[0]],
	venerian: genders
	}[race];
	},

	handlePlanet(event) {
	this.setState({
	planet: event.target.value,
	validRaces: this.getValidRaces(this.state.races, event.target.value),
	validGenders: this.getValidGenders(this.state.genders, 'human'),
	gender: 'man'
	});
	setTimeout(() => {
	console.log(`selected planet ${this.state.planet}`);
	console.log(`selected race ${this.state.race}`);
	console.log(`valid races: ${this.state.validRaces.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
	console.log(`valid genders: ${this.state.validGenders.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
	}, 500);
	},

	handleRace(event) {
	this.setState({
	race: event.target.value,
	validGenders: this.getValidGenders(this.state.genders, event.target.value),
	gender: 'man'
	});
	setTimeout(() => {
	console.log(`selected planet ${this.state.planet}`);
	console.log(`selected race ${this.state.race}`);
	console.log(`valid genders: ${this.state.validGenders.map(item => `[${item.key}: ${item.name}]`).join(', ')}`);
	}, 500);
	},

	handleGender(event) {
	this.setState({
	gender: event.target.value
	});
	},

	render() {
	return (
	<div className="selector">
	<ListSelector label="планета" key="planet" items={this.state.planets} value={this.state.planet} set={this.handlePlanet} />
	<ListSelector label="раса" key="race" items={this.state.validRaces} value={this.state.race} set={this.handleRace} />
	<ListSelector label="пол" key="gender" items={this.state.validGenders} value={this.state.gender} set={this.handleGender} />
	</div>
	);
	}});

	ReactDOM.render(<Selector gender="man" planet="mars" race="human" />, document.getElementById('container'));
	</script>
	</body>

	</html>