dryoma · January 15, 2016 11:20
diff --git a/scifi.html b/scifi.html
 <!DOCTYPE html>
 <html lang="ru">
 <head>
 	<meta charset="UTF-8">
 	<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>
 	
 	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 	<script src="react.js"></script>
 	<script src="react-dom.js"></script>
 	<script src="browser.min.js"></script>
 	<style type="text/css">
 		.StatPicker-param{
 			position: relative;
 			display: block;
 			overflow: hidden;
 			margin: 0 0 1em;
 		}
 		.StatPicker-param:last-child{
 			margin: 0;
 		}
 		.StatPicker-radio{
 			position: absolute;
 			clip: rect(0, 0, 0, 0);
 			visibility: hidden;
 		}
 	</style>
 	
 	<title>Sci-Fi</title>
 </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">
 	// For simplicity: plain objects, separate, non normalized
 	var planets = {
 			earth: {
 				name: 'Земля',
 				races: ['human']
 			},
 			mars: {
 				name: 'Марс',
 				races: ['martian', 'human']
 			},
 			venus: {
 				name: 'Венера',
 				races: ['venusian','human']
 			}
 		},
 		races = {
 			martian: {
 				name: 'Марсианин',
 				genders: ['man']
 			},
 			human: {
 				name: 'Человек',
 				genders: ['man', 'woman']
 			},
 			venusian: {
 				name: 'Венерианец',
 				genders: ['man', 'woman', 'third']
 			}
 		},
 		genders = {
 			man: {
 				name: 'Мужской'
 			},
 			woman: {
 				name: 'Женский'
 			},
 			third: {
 				name: 'Средний'
 			}
 		};

 	var Selector = React.createClass({
 		
 		/**
 		 * Updating component's props on inputs change.
 		 * Using on inputs themselves since React does the enent delegation
 		 * 
 		 * @param {Event} e
 		 */
 		statChange(e) {
 			let inpt = e.target;

 			// Just updating the props as there is no Redux or any other
 			// state managing tool
 			// setProps is deprecated, but used here for simplicity and since
 			// it seems that the component is ought to be a "dumb" one
 			this.setProps({
 				[inpt.name]:
 					inpt.value
 			});
 		},

 		render() {
 			let planet = this.props.planet;
 			if(Object.keys(planets).indexOf(planet) === -1)
 				planet = planets(Object.keys(planets)[0]);

 			let race = this.props.race;
 			if(planets[planet].races.indexOf(race) === -1)
 				race = planets[planet].races[0];

 			let gender = this.props.gender;
 			if(races[race].genders.indexOf(gender) === -1)
 				gender = races[race].genders[0];

 			return (
 				<div className="StatPicker well">
 					<p><strong>Планета:</strong></p>
 					<div className="btn-group StatPicker-param" role="group">
 						{Object.keys(planets).map((planetVal) => {
 							let isActive = planetVal == planet;

 							// Decided not to include a whole Bootstrap JS
 							// just for labels only; handled them manually
 							return (
 								<label className={'btn btn-default' + (isActive ? ' active' : '')} key={planetVal}>
 									<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="planet" onChange={this.statChange} type="radio" value={planetVal} />{planets[planetVal].name}
 								</label>
 							);
 						})}
 					</div>
 					<p><strong>Раса:</strong></p>
 					<div className="btn-group StatPicker-param" role="group">
 						{planets[planet].races.map((raceVal) => {
 							let isActive = raceVal == race;
 							return (
 								<label className={'btn btn-default' + (isActive ? ' active' : '')} key={raceVal}>
 									<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="race" onChange={this.statChange} type="radio" value={raceVal} />{races[raceVal].name}
 								</label>
 							);
 						})}
 					</div>
 					<p><strong>Пол:</strong></p>
 					<div className="btn-group StatPicker-param" role="group">
 						{races[race].genders.map((genderVal) => {
 							let isActive = genderVal == gender;
 							return (
 								<label className={'btn btn-default' + (isActive ? ' active' : '')} key={genderVal}>
 									<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="gender" onChange={this.statChange} type="radio" value={genderVal} />{genders[genderVal].name}
 								</label>
 							);
 						})}
 					</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">
	<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>

	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="browser.min.js"></script>
	<style type="text/css">
	.StatPicker-param{
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 0 1em;
	}
	.StatPicker-param:last-child{
	margin: 0;
	}
	.StatPicker-radio{
	position: absolute;
	clip: rect(0, 0, 0, 0);
	visibility: hidden;
	}
	</style>

	<title>Sci-Fi</title>
	</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">
	// For simplicity: plain objects, separate, non normalized
	var planets = {
	earth: {
	name: 'Земля',
	races: ['human']
	},
	mars: {
	name: 'Марс',
	races: ['martian', 'human']
	},
	venus: {
	name: 'Венера',
	races: ['venusian','human']
	}
	},
	races = {
	martian: {
	name: 'Марсианин',
	genders: ['man']
	},
	human: {
	name: 'Человек',
	genders: ['man', 'woman']
	},
	venusian: {
	name: 'Венерианец',
	genders: ['man', 'woman', 'third']
	}
	},
	genders = {
	man: {
	name: 'Мужской'
	},
	woman: {
	name: 'Женский'
	},
	third: {
	name: 'Средний'
	}
	};

	var Selector = React.createClass({

	/**
	* Updating component's props on inputs change.
	* Using on inputs themselves since React does the enent delegation
	*
	* @param {Event} e
	*/
	statChange(e) {
	let inpt = e.target;

	// Just updating the props as there is no Redux or any other
	// state managing tool
	// setProps is deprecated, but used here for simplicity and since
	// it seems that the component is ought to be a "dumb" one
	this.setProps({
	[inpt.name]:
	inpt.value
	});
	},

	render() {
	let planet = this.props.planet;
	if(Object.keys(planets).indexOf(planet) === -1)
	planet = planets(Object.keys(planets)[0]);

	let race = this.props.race;
	if(planets[planet].races.indexOf(race) === -1)
	race = planets[planet].races[0];

	let gender = this.props.gender;
	if(races[race].genders.indexOf(gender) === -1)
	gender = races[race].genders[0];

	return (
	<div className="StatPicker well">
	<p><strong>Планета:</strong></p>
	<div className="btn-group StatPicker-param" role="group">
	{Object.keys(planets).map((planetVal) => {
	let isActive = planetVal == planet;

	// Decided not to include a whole Bootstrap JS
	// just for labels only; handled them manually
	return (
	<label className={'btn btn-default' + (isActive ? ' active' : '')} key={planetVal}>
	<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="planet" onChange={this.statChange} type="radio" value={planetVal} />{planets[planetVal].name}
	</label>
	);
	})}
	</div>
	<p><strong>Раса:</strong></p>
	<div className="btn-group StatPicker-param" role="group">
	{planets[planet].races.map((raceVal) => {
	let isActive = raceVal == race;
	return (
	<label className={'btn btn-default' + (isActive ? ' active' : '')} key={raceVal}>
	<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="race" onChange={this.statChange} type="radio" value={raceVal} />{races[raceVal].name}
	</label>
	);
	})}
	</div>
	<p><strong>Пол:</strong></p>
	<div className="btn-group StatPicker-param" role="group">
	{races[race].genders.map((genderVal) => {
	let isActive = genderVal == gender;
	return (
	<label className={'btn btn-default' + (isActive ? ' active' : '')} key={genderVal}>
	<input className="StatPicker-radio" checked={isActive ? ' checked' : ''} name="gender" onChange={this.statChange} type="radio" value={genderVal} />{genders[genderVal].name}
	</label>
	);
	})}
	</div>
	</div>
	);
	}
	});
	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>