Skip to content

Instantly share code, notes, and snippets.

@AndrewDonnelly93

AndrewDonnelly93/scifi.html

Last active January 5, 2016 22:03
Show Gist options
  • Save AndrewDonnelly93/f55a33c04958fcfabbba to your computer and use it in GitHub Desktop.
Save AndrewDonnelly93/f55a33c04958fcfabbba to your computer and use it in GitHub Desktop.
Download ZIP
Scifi test for ivelum vacancy
Raw
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/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