web-busters · December 24, 2015 09:02
diff --git a/scifi.html b/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 Selector = React.createClass({

        // Основываемся на том что ключевым параметром персонажа является планета
        
        getInitialState: function() {
            return {
                planet: this.props.planet,
                race:   this.props.race
            };
        },

        races: {
            earth: {
                human: 'Люди'
            },
            mars: {
                human: 'Люди',
                marsian: 'Марсиане'
            },
            venera: {
                human: 'Люди',
                venerian: 'Венерианцы'
            }
        },

        genders: {
            human: {
                man: 'Мужской',
                woman: 'Женский'
            },
            marsian: {
                man: 'Мужской',
            },
            venerian: {
                man: 'Мужской',
                woman: 'Женский',
                medium: 'Средний'
            }
        },

        onChangePlanet: function(e) {
            this.setState({
                planet: e.target.value,
                race:   this.props.race
            });
        },

        onChangeRace: function(e) {
            this.setState({
                race: e.target.value
            });
        },

        renderRaces() {
            var racesArr = this.races[this.state.planet];
            var racesOut = [];
            for (var key in racesArr) {
                racesOut.push(
                    <option key={key} value={key}>{racesArr[key]}</option>
                );
            }
            return racesOut;
        },

        renderGenders() {
            var gendersArr = this.genders[this.state.race];
            var gendersOut = [];
            for (var key in gendersArr) {
                gendersOut.push(
                    <option key={key} value={key} data-planet={this.state.planet}>{gendersArr[key]}</option>
                );
            }
            return gendersOut;
        },

        render() {
            return (
                <div>
                    <div className="form-group">
                        <label>Планета</label>
                        <select name="planet" className="planets form-control" onChange={this.onChangePlanet}>
                            <option value="mars">Марс</option>
                            <option value="earth">Земля</option>
                            <option value="venera">Венера</option>
                        </select>
                    </div>
                        
                    <div className="form-group">
                        <label>Расса</label>
                        <select name="race" className="races form-control" onChange={this.onChangeRace}>
                            {this.renderRaces()}
                        </select>
                    </div>

                    <div className="form-group">
                        <label>Пол</label>
                        <select name="gender" className="genders form-control">
                            {this.renderGenders()}
                        </select>
                    </div>
                </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 Selector = React.createClass({

	// Основываемся на том что ключевым параметром персонажа является планета

	getInitialState: function() {
	return {
	planet: this.props.planet,
	race: this.props.race
	};
	},

	races: {
	earth: {
	human: 'Люди'
	},
	mars: {
	human: 'Люди',
	marsian: 'Марсиане'
	},
	venera: {
	human: 'Люди',
	venerian: 'Венерианцы'
	}
	},

	genders: {
	human: {
	man: 'Мужской',
	woman: 'Женский'
	},
	marsian: {
	man: 'Мужской',
	},
	venerian: {
	man: 'Мужской',
	woman: 'Женский',
	medium: 'Средний'
	}
	},

	onChangePlanet: function(e) {
	this.setState({
	planet: e.target.value,
	race: this.props.race
	});
	},

	onChangeRace: function(e) {
	this.setState({
	race: e.target.value
	});
	},

	renderRaces() {
	var racesArr = this.races[this.state.planet];
	var racesOut = [];
	for (var key in racesArr) {
	racesOut.push(
	<option key={key} value={key}>{racesArr[key]}</option>
	);
	}
	return racesOut;
	},

	renderGenders() {
	var gendersArr = this.genders[this.state.race];
	var gendersOut = [];
	for (var key in gendersArr) {
	gendersOut.push(
	<option key={key} value={key} data-planet={this.state.planet}>{gendersArr[key]}</option>
	);
	}
	return gendersOut;
	},

	render() {
	return (
	<div>
	<div className="form-group">
	<label>Планета</label>
	<select name="planet" className="planets form-control" onChange={this.onChangePlanet}>
	<option value="mars">Марс</option>
	<option value="earth">Земля</option>
	<option value="venera">Венера</option>
	</select>
	</div>

	<div className="form-group">
	<label>Расса</label>
	<select name="race" className="races form-control" onChange={this.onChangeRace}>
	{this.renderRaces()}
	</select>
	</div>

	<div className="form-group">
	<label>Пол</label>
	<select name="gender" className="genders form-control">
	{this.renderGenders()}
	</select>
	</div>
	</div>
	);
	}
	});
	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>