extiser · January 5, 2016 10:55
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-12">
            <p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p>
            <ul>
                <li>планет всего три: «Земля», «Марс» и «Венера»;</li>
                <li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li>
                <li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li>
            </ul>
            <p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="app"></div>
        </div>
    </div>
 </div>
 <script type="text/babel">
    var SpaceGame = React.createClass({
        getInitialState: function() {
            return {
                name: "",
                race: "",
                sex: "",
                planet: ""
            };
        },

        handleSetName: function(event) {
            this.setState({ name: event.target.value });
        },

        handleSetRace: function(event) {
            this.setState({sex: '', planet: ''})
            this.setState({ race: event.target.innerHTML });
        },

        handleSetSex: function(event) {
            this.setState({ sex: event.target.innerHTML });
        },

        handleSetPlanet: function(event) {
            this.setState({ planet: event.target.innerHTML });
        },

        viewAll: function() {
            if (!this.state.name && !this.state.race && !this.state.sex && !this.state.planet) {
                return (
                    <div className="col-md-12">
                        <div className="alert alert-info clearfix">Пожалуйста задайте данные для своего персонажа!</div>
                    </div>
                );
            } else {
                return (
                    <div className="col-md-12">
                        <div className="well clearfix">
                            <ul className="list-group">
                                <li className="list-group-item">Имя персонажа: <span className="badge">{this.state.name}</span></li>
                                <li className="list-group-item">Расса: <span className="badge">{this.state.race}</span></li>
                                <li className="list-group-item">Пол: <span className="badge">{this.state.sex}</span></li>
                                <li className="list-group-item">Планета обитания: <span className="badge">{this.state.planet}</span></li>
                            </ul>
                        </div>
                    </div>
                );
            }
        },

        render: function() {
            return (
                <div>
                    <div className="row">
                        <div className="col-md-3">
                            <div className="well clearfix">
                                <h4>Имя героя:</h4>
                                <input type="text" className="form-control" onChange={this.handleSetName} />
                            </div>
                        </div>

                        <div className="col-md-3">
                            <div className="well clearfix">
                                <h4>Выберите рассу:</h4>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Люди</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Венерианцы</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Марсиане</button>
                            </div>
                        </div>

                        <div className="col-md-3">
                            <div className="well clearfix">
                                <h4>Выберите пол:</h4>

                                <button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === ''}>Мужской</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === '' || this.state.race === 'Люди' || this.state.race === 'Марсиане'}>Средний</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === '' || this.state.race === 'Марсиане'}>Женский</button>
                            </div>
                        </div>

                        <div className="col-md-3">
                            <div className="well clearfix">
                                <h4>Выберите планету:</h4>

                                <button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' || this.state.race === 'Марсиане' || this.state.race === 'Венерианцы'}>Земля</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' || this.state.race === 'Марсиане'}>Венера</button>
                                <button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' || this.state.race === 'Венерианцы'}>Марс</button>
                            </div>
                        </div>
                    </div>

                    <div className="row">
                        { this.viewAll() }
                    </div>
                </div>
            );
        }
    });

    ReactDOM.render(
        <SpaceGame/>,
        document.getElementById("app")
    );
 </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-12">
	<p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p>
	<ul>
	<li>планет всего три: «Земля», «Марс» и «Венера»;</li>
	<li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li>
	<li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li>
	</ul>
	<p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p>
	</div>
	</div>
	<div class="row">
	<div class="col-md-12">
	<div id="app"></div>
	</div>
	</div>
	</div>
	<script type="text/babel">
	var SpaceGame = React.createClass({
	getInitialState: function() {
	return {
	name: "",
	race: "",
	sex: "",
	planet: ""
	};
	},

	handleSetName: function(event) {
	this.setState({ name: event.target.value });
	},

	handleSetRace: function(event) {
	this.setState({sex: '', planet: ''})
	this.setState({ race: event.target.innerHTML });
	},

	handleSetSex: function(event) {
	this.setState({ sex: event.target.innerHTML });
	},

	handleSetPlanet: function(event) {
	this.setState({ planet: event.target.innerHTML });
	},

	viewAll: function() {
	if (!this.state.name && !this.state.race && !this.state.sex && !this.state.planet) {
	return (
	<div className="col-md-12">
	<div className="alert alert-info clearfix">Пожалуйста задайте данные для своего персонажа!</div>
	</div>
	);
	} else {
	return (
	<div className="col-md-12">
	<div className="well clearfix">
	<ul className="list-group">
	<li className="list-group-item">Имя персонажа: <span className="badge">{this.state.name}</span></li>
	<li className="list-group-item">Расса: <span className="badge">{this.state.race}</span></li>
	<li className="list-group-item">Пол: <span className="badge">{this.state.sex}</span></li>
	<li className="list-group-item">Планета обитания: <span className="badge">{this.state.planet}</span></li>
	</ul>
	</div>
	</div>
	);
	}
	},

	render: function() {
	return (
	<div>
	<div className="row">
	<div className="col-md-3">
	<div className="well clearfix">
	<h4>Имя героя:</h4>
	<input type="text" className="form-control" onChange={this.handleSetName} />
	</div>
	</div>

	<div className="col-md-3">
	<div className="well clearfix">
	<h4>Выберите рассу:</h4>
	<button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Люди</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Венерианцы</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetRace}>Марсиане</button>
	</div>
	</div>

	<div className="col-md-3">
	<div className="well clearfix">
	<h4>Выберите пол:</h4>

	<button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === ''}>Мужской</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === '' \|\| this.state.race === 'Люди' \|\| this.state.race === 'Марсиане'}>Средний</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetSex} disabled={this.state.race === '' \|\| this.state.race === 'Марсиане'}>Женский</button>
	</div>
	</div>

	<div className="col-md-3">
	<div className="well clearfix">
	<h4>Выберите планету:</h4>

	<button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' \|\| this.state.race === 'Марсиане' \|\| this.state.race === 'Венерианцы'}>Земля</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' \|\| this.state.race === 'Марсиане'}>Венера</button>
	<button className="btn btn-info btn-xs" onClick={this.handleSetPlanet} disabled={this.state.race === '' \|\| this.state.race === 'Венерианцы'}>Марс</button>
	</div>
	</div>
	</div>

	<div className="row">
	{ this.viewAll() }
	</div>
	</div>
	);
	}
	});

	ReactDOM.render(
	<SpaceGame/>,
	document.getElementById("app")
	);
	</script>
	</body>
	</html>