-
-
Save AndrewDonnelly93/d0c380fa3bb3e59262db to your computer and use it in GitHub Desktop.
Задание для https://goo.gl/WGrXbu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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/react/0.13.1/JSXTransformer.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 Planet = React.createClass({ | |
render: function() { | |
return ( | |
<div style={{marginRight: 10 + 'px', display: 'inline-block'}}> | |
<label htmlFor={this.props.planet}>{this.props.planetName}</label> | |
<input type='radio' name='planet' value={this.props.planet} id={this.props.planet} | |
style={{marginLeft: 5 + 'px'}} onChange={this.props.changePlanet} | |
checked={this.props.checkCurrentState} /> | |
</div> | |
); | |
} | |
}); | |
var Race = React.createClass({ | |
render: function() { | |
return ( | |
<div style={{marginRight: 10 + 'px', display: 'inline-block'}}> | |
<label htmlFor={this.props.race}>{this.props.raceName}</label> | |
<input type='radio' name='race' value={this.props.race} id={this.props.race} | |
style={{marginLeft: 5 + 'px'}} onChange={this.props.changeRace} | |
checked={this.props.checkCurrentState} /> | |
</div> | |
); | |
} | |
}); | |
var Gender = React.createClass({ | |
render: function() { | |
return ( | |
<div style={{marginRight: 10 + 'px', display: 'inline-block'}}> | |
<label htmlFor={this.props.gender}>{this.props.genderName}</label> | |
<input type='radio' name='gender' value={this.props.gender} id={this.props.gender} | |
style={{marginLeft: 5 + 'px'}} onChange={this.props.changeGender} | |
checked={this.props.checkCurrentState} /> | |
</div> | |
); | |
} | |
}); | |
var Selector = React.createClass({ | |
getInitialState: function() { | |
return { | |
planets: ['mars', 'venera', 'earth'], | |
planetsNames: ['Марс', 'Венера', 'Земля'], | |
renderedPlanets: [], | |
races: ['human', 'martian', 'venusian'], | |
racesNames: ['Человек', 'Марсианин', 'Венерианец'], | |
renderedRaces: [], | |
genders: ['male', 'female', 'middle'], | |
gendersNames: ['Мужской', 'Женский', 'Средний'], | |
renderedGenders: [], | |
gender: '', | |
planet: '', | |
race: '' | |
}; | |
}, | |
changeRendering: function() { | |
this.state.renderedPlanets = this.renderPlanets(); | |
this.state.renderedRaces = this.renderRaces(); | |
this.state.renderedGenders = this.renderGenders(); | |
}, | |
onChangePlanet: function(e) { | |
if (e.target.value == this.state.planet) { | |
return; | |
}; | |
switch (e.target.value) { | |
case 'mars': | |
this.setState({ | |
planet: e.target.value, | |
races: ['human', 'martian'], | |
racesNames: ['Человек', 'Марсианин'], | |
genders: ['male', 'female'], | |
gendersNames: ['Мужской', 'Женский'] | |
}); | |
// Humans and martians don't have middle sex | |
if (this.state.gender == 'middle') { | |
this.setState({ gender: 'male' }); | |
} | |
// All martians are man | |
if (this.state.race == 'martian') { | |
this.setState({ | |
genders: ['male'], | |
gendersNames: ['Мужской'], | |
gender: 'male' | |
}); | |
} | |
break; | |
case 'venera': | |
this.setState({ | |
planet: e.target.value, | |
races: ['human', 'venusian'], | |
racesNames: ['Человек', 'Венерианец'], | |
genders: ['male', 'female', 'middle'], | |
gendersNames: ['Мужской', 'Женский', 'Средний'] | |
}); | |
// Humans don't have middle sex | |
if (this.state.race == 'human') { | |
this.setState({ | |
genders: ['male', 'female'], | |
gendersNames: ['Мужской', 'Женский'] | |
}); | |
} | |
break; | |
case 'earth': | |
this.setState({ | |
planet: e.target.value, | |
races: ['human'], | |
racesNames: ['Человек'], | |
genders: ['male', 'female'], | |
gendersNames: ['Мужской', 'Женский'] | |
}); | |
// Humans don't have middle sex | |
if (this.state.gender == 'middle') { | |
this.setState({ gender: 'male' }); | |
} | |
// Only people live on Earth | |
if (this.state.race != 'human') { | |
this.setState({ race: 'human' }); | |
} | |
break; | |
}; | |
}, | |
onChangeRace: function(e) { | |
if (e.target.value == this.state.race) { | |
return; | |
}; | |
switch (e.target.value) { | |
case 'human': | |
this.setState({ | |
race: e.target.value, | |
planets: ['mars', 'venera', 'earth'], | |
planetsNames: ['Марс', 'Венера', 'Земля'], | |
genders: ['male', 'female'], | |
gendersNames: ['Мужской', 'Женский'] | |
}); | |
// Humans don't have middle sex | |
if (this.state.gender == 'middle') { | |
this.setState({ gender: 'male' }); | |
// Woman can't live on Mars | |
} else if (this.state.gender == 'female') { | |
this.setState({ | |
planets: ['venera', 'earth'], | |
planetsNames: ['Венера', 'Земля'] | |
}); | |
} | |
break; | |
case 'martian': | |
this.setState({ | |
race: e.target.value, | |
planets: ['mars'], | |
planetsNames: ['Марс'], | |
planet: 'mars', | |
genders: ['male'], | |
gendersNames: ['Мужской'], | |
gender: 'male' | |
}); | |
break; | |
case 'venusian': | |
this.setState({ | |
race: e.target.value, | |
planets: ['venera'], | |
planetsNames: ['Венера'], | |
planet: 'venera', | |
genders: ['male', 'female', 'middle'], | |
gendersNames: ['Мужской', 'Женский', 'Средний'] | |
}); | |
break; | |
}; | |
}, | |
onChangeGender: function(e) { | |
if (e.target.value == this.state.gender) { | |
return; | |
}; | |
switch (e.target.value) { | |
case 'male': | |
this.setState({ | |
gender: e.target.value, | |
planets: ['mars', 'venera', 'earth'], | |
planetsNames: ['Марс', 'Венера', 'Земля'], | |
races: ['human', 'martian', 'venusian'], | |
racesNames: ['Человек', 'Марсианин', 'Венерианец'] | |
}); | |
// Only people live on Earth | |
if (this.state.planet == 'earth') { | |
this.setState({ | |
races: ['human'], | |
racesNames: ['Человек'] | |
}); | |
}; | |
break; | |
case 'female': | |
this.setState({ | |
gender: e.target.value, | |
planets: ['venera', 'earth'], | |
planetsNames: ['Венера', 'Земля'], | |
races: ['human', 'venusian'], | |
racesNames: ['Человек', 'Венерианец'] | |
}); | |
// Woman can't live on Mars | |
if (this.state.planet == 'mars') { | |
this.setState({ planet: 'earth' }); | |
// Only people live on Earth | |
} else if (this.state.planet == 'earth') { | |
this.setState({ | |
races: ['human'], | |
racesNames: ['Человек'] | |
}); | |
}; | |
break; | |
case 'middle': | |
this.setState({ | |
gender: e.target.value, | |
planets: ['venera'], | |
planetsNames: ['Венера'], | |
races: ['venusian'], | |
racesNames: ['Венерианец'], | |
planet: 'venera' | |
}); | |
break; | |
}; | |
}, | |
// Render of the planets | |
renderPlanets: function() { | |
var renderedPlanets = []; | |
var currentPlanet = this.state.planet; | |
for (var i = 0; i < this.state.planets.length; i++) { | |
var planetProperties = { | |
planet: this.state.planets[i], | |
planetName: this.state.planetsNames[i] | |
}; | |
renderedPlanets.push(<Planet changePlanet={this.onChangePlanet} | |
key={i} checkCurrentState={currentPlanet == planetProperties.planet} | |
{...planetProperties}/>); | |
} | |
return renderedPlanets; | |
}, | |
// Render of the races | |
renderRaces: function() { | |
var renderedRaces = []; | |
var currentRace = this.state.race; | |
for (var i = 0; i < this.state.races.length; i++) { | |
var racesProperties = { | |
race: this.state.races[i], | |
raceName: this.state.racesNames[i] | |
}; | |
renderedRaces.push(<Race changeRace={this.onChangeRace} | |
key={i} checkCurrentState={currentRace == racesProperties.race} | |
{...racesProperties}/>); | |
} | |
return renderedRaces; | |
}, | |
// Render of the genders | |
renderGenders: function() { | |
var renderedGenders = []; | |
var currentGender = this.state.gender; | |
for (var i = 0; i < this.state.genders.length; i++) { | |
var gendersProperties = { | |
gender: this.state.genders[i], | |
genderName: this.state.gendersNames[i] | |
}; | |
renderedGenders.push(<Gender changeGender={this.onChangeGender} | |
key={i} checkCurrentState={currentGender == gendersProperties.gender} | |
{...gendersProperties}/>); | |
} | |
return renderedGenders; | |
}, | |
// Initial render | |
componentWillMount: function() { | |
this.changeRendering(); | |
}, | |
render: function() { | |
this.changeRendering(); | |
return ( | |
<fieldset> | |
<div className='form-group'>Выберите планету</div> | |
{this.state.renderedPlanets} | |
<div className='form-group'>Выберите расу</div> | |
{this.state.renderedRaces} | |
<div className='form-group'>Выберите пол</div> | |
{this.state.renderedGenders} | |
</fieldset> | |
); | |
} | |
}); | |
ReactDOM.render( | |
<Selector/>, | |
document.getElementById('container') | |
); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment