const Stars = (props) => { | |
// const numberofStars = 1 + Math.floor(Math.random()*9); | |
return ( | |
<div className="col-5"> | |
{_.range(props.numberofStars).map(i => | |
<i key={i} className="fa fa-star"></i> | |
)} | |
</div> | |
); | |
}; | |
const Button = (props) => { | |
return ( | |
<div className="col-2"> | |
<button>=</button> | |
</div> | |
); | |
}; | |
const Answer = (props) => { | |
return ( | |
<div className="col-5"> | |
{props.selectedNumbers.map((number, i) => | |
<span key={i}>{number}</span> | |
)} | |
</div> | |
); | |
}; | |
const Numbers = (props) => { | |
const numberClassName = (number) => { | |
if(props.selectedNumbers.indexOf(number) >= 0) { | |
return 'selected'; | |
} | |
} | |
return ( | |
<div className="card text-center"> | |
<div> | |
{Numbers.list.map((number, i) => | |
<span key={i} className={numberClassName(number)} | |
onClick={() => props.selectNumber(number)}> | |
{number}</span> | |
)} | |
</div> | |
</div> | |
); | |
}; | |
Numbers.list = _.range(1, 10); | |
class Game extends React.Component { | |
state = { | |
selectedNumbers: [], | |
randomNumberOfStars: 1 + Math.floor(Math.random()*9), | |
}; | |
selectNumber = (clickedNumber) => { | |
if(this.state.selectedNumbers.indexOf(clickedNumber) >= 0) {return; } | |
this.setState(prevState => ({ | |
selectedNumbers: prevState.selectedNumbers.concat(clickedNumber) | |
})); | |
}; | |
render() { | |
return ( | |
<div className="container"> | |
<h3>Play Nine</h3> | |
<hr /> | |
<div className="row"> | |
<Stars numberofStars={this.state.randomNumberOfStars} /> | |
<Button /> | |
<Answer selectedNumbers={this.state.selectedNumbers} /> | |
</div> | |
<br /> | |
<Numbers selectedNumbers={this.state.selectedNumbers} | |
selectNumber={this.selectNumber} /> | |
</div> | |
); | |
} | |
} | |
class App extends React.Component { | |
render() { | |
return ( | |
<div> | |
<Game /> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render(<App />,mountNode); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment