noxalex/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>
    <style>
        .well-sm {
            margin-top: 50px;
            box-shadow: 0px 5px 5px -5px rgba(0,0,0,.7), 0px 0px 5px rgba(0,0,0,.3);
        }
    </style>
</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">
            <div id="container">

            </div>
        </div>
    </div>
</div>
<script type="text/babel">
    var Selector = React.createClass({
      getInitialState: function() {
        return {
            gender: this.props.gender,
            planet: this.props.planet,
            race: this.props.race,
            name: 'Безымянный'
        };
      },
      raceHandler: function(e) {
         this.setState({ race: e.target.value });
         if(e.target.value === 'venusian') {
            this.setState({ planet: 'venus'});
         } else if(e.target.value === 'martian') {
            this.setState({ planet: 'mars'});
         } else if(e.target.value === 'human') {
            this.setState({ planet: 'earth'});
         }
      },
      genderHandler: function(e) {
         this.setState({ gender: e.target.value });
      },
      nameHandler: function(e) {
         this.setState({ name: e.target.value });
      },
      planetHandler: function(e) {
         this.setState({ planet: e.target.value });
      },
      racePlanetParameters: function() {
        if(this.state.race === 'human') {
            return(
              <select className="form-control" id="planet" onChange={this.planetHandler}>
                <option value="earth">Земля</option>
                <option value="mars">Марс</option>
                <option value="venus">Венера</option>
              </select>
            );
        } else if(this.state.race === 'martian') {
            return(
                <div className="radio">
                  <label>
                    <input type="radio" name="planetRadios" id="planetRadiosMars" value="mars" checked /> Марс
                  </label>
                </div>
            );
        } else {
            return(
                <div className="radio">
                  <label>
                    <input type="radio" name="planetRadios" id="planetRadiosVenus" value="venus" checked /> Венера
                  </label>
                </div>

            );
        }
      },
      raceGenderParameters: function() {
        if(this.state.race === 'human') {
            return(
              <select className="form-control" id="gender" onChange={this.genderHandler}>
                <option value="man">Мужской</option>
                <option value="woman">Женский</option>
              </select>
            );
        } else if(this.state.race === 'martian') {
            return(
                <div className="radio">
                  <label>
                    <input type="radio" name="genderRadios" id="genderRadiosMan" value="man" checked /> Мужской
                  </label>
                </div>
            );
        } else {
            return(
                <select className="form-control" id="gender" onChange={this.genderHandler}>
                  <option value="man">Мужской</option>
                  <option value="woman">Женский</option>
                  <option value="middle">Средний</option>
                </select>
            );
        }
      },
      createPersonage: function() {
        return( <div className="well-sm bg-success">
            <h3>Ваш персонаж: </h3>
            <div className="form-group">
                <label for="name">Имя:&nbsp;</label>
                {this.state.name}
            </div>
            <div className="form-group">
                <label for="name">Раса:&nbsp;</label>
                {this.state.race}
            </div>
            <div className="form-group">
                <label for="name">Планета:&nbsp;</label>
                {this.state.planet}
            </div>
            <div className="form-group">
                <label for="name">Пол:&nbsp;</label>
                {this.state.gender}
            </div>
        </div>
        );
      },
      render: function() {
        return(

            <div className="main well">
                <h3>Создайте Вашего персонажа и начните игру!</h3>
                <form>
                    <div className="form-group">
                    <label for="name">Имя</label>
                        <input className="form-control" name="name" id="name" onChange={this.nameHandler} />
                    </div>
                    <div className="form-group">
                        <label for="race">Раса</label>
                        <select className="form-control" id="race" defaultValue={this.state.race} onChange={this.raceHandler}>
                          <option value="human">Люди</option>
                          <option value="martian">Марсиане</option>
                          <option value="venusian">Венерианцы</option>
                        </select>
                    </div>
                    <div className="form-group">
                        <label for="planet">Планета</label>
                            {this.racePlanetParameters()}
                    </div>
                    <div className="form-group">
                        <label for="gender">Пол</label>
                        {this.raceGenderParameters()}
                    </div>
                    <input type="submit" className="btn btn-primary" value="Создать персонажа" onClick={this.createPersonage} />
                </form>
                {this.createPersonage()}
            </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>
	<style>
	.well-sm {
	margin-top: 50px;
	box-shadow: 0px 5px 5px -5px rgba(0,0,0,.7), 0px 0px 5px rgba(0,0,0,.3);
	}
	</style>
	</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">
	<div id="container">

	</div>
	</div>
	</div>
	</div>
	<script type="text/babel">
	var Selector = React.createClass({
	getInitialState: function() {
	return {
	gender: this.props.gender,
	planet: this.props.planet,
	race: this.props.race,
	name: 'Безымянный'
	};
	},
	raceHandler: function(e) {
	this.setState({ race: e.target.value });
	if(e.target.value === 'venusian') {
	this.setState({ planet: 'venus'});
	} else if(e.target.value === 'martian') {
	this.setState({ planet: 'mars'});
	} else if(e.target.value === 'human') {
	this.setState({ planet: 'earth'});
	}
	},
	genderHandler: function(e) {
	this.setState({ gender: e.target.value });
	},
	nameHandler: function(e) {
	this.setState({ name: e.target.value });
	},
	planetHandler: function(e) {
	this.setState({ planet: e.target.value });
	},
	racePlanetParameters: function() {
	if(this.state.race === 'human') {
	return(
	<select className="form-control" id="planet" onChange={this.planetHandler}>
	<option value="earth">Земля</option>
	<option value="mars">Марс</option>
	<option value="venus">Венера</option>
	</select>
	);
	} else if(this.state.race === 'martian') {
	return(
	<div className="radio">
	<label>
	<input type="radio" name="planetRadios" id="planetRadiosMars" value="mars" checked /> Марс
	</label>
	</div>
	);
	} else {
	return(
	<div className="radio">
	<label>
	<input type="radio" name="planetRadios" id="planetRadiosVenus" value="venus" checked /> Венера
	</label>
	</div>

	);
	}
	},
	raceGenderParameters: function() {
	if(this.state.race === 'human') {
	return(
	<select className="form-control" id="gender" onChange={this.genderHandler}>
	<option value="man">Мужской</option>
	<option value="woman">Женский</option>
	</select>
	);
	} else if(this.state.race === 'martian') {
	return(
	<div className="radio">
	<label>
	<input type="radio" name="genderRadios" id="genderRadiosMan" value="man" checked /> Мужской
	</label>
	</div>
	);
	} else {
	return(
	<select className="form-control" id="gender" onChange={this.genderHandler}>
	<option value="man">Мужской</option>
	<option value="woman">Женский</option>
	<option value="middle">Средний</option>
	</select>
	);
	}
	},
	createPersonage: function() {
	return( <div className="well-sm bg-success">
	<h3>Ваш персонаж: </h3>
	<div className="form-group">
	<label for="name">Имя: </label>
	{this.state.name}
	</div>
	<div className="form-group">
	<label for="name">Раса: </label>
	{this.state.race}
	</div>
	<div className="form-group">
	<label for="name">Планета: </label>
	{this.state.planet}
	</div>
	<div className="form-group">
	<label for="name">Пол: </label>
	{this.state.gender}
	</div>
	</div>
	);
	},
	render: function() {
	return(

	<div className="main well">
	<h3>Создайте Вашего персонажа и начните игру!</h3>
	<form>
	<div className="form-group">
	<label for="name">Имя</label>
	<input className="form-control" name="name" id="name" onChange={this.nameHandler} />
	</div>
	<div className="form-group">
	<label for="race">Раса</label>
	<select className="form-control" id="race" defaultValue={this.state.race} onChange={this.raceHandler}>
	<option value="human">Люди</option>
	<option value="martian">Марсиане</option>
	<option value="venusian">Венерианцы</option>
	</select>
	</div>
	<div className="form-group">
	<label for="planet">Планета</label>
	{this.racePlanetParameters()}
	</div>
	<div className="form-group">
	<label for="gender">Пол</label>
	{this.raceGenderParameters()}
	</div>
	<input type="submit" className="btn btn-primary" value="Создать персонажа" onClick={this.createPersonage} />
	</form>
	{this.createPersonage()}
	</div>
	);
	}
	});

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

	</body>
	</html>