Last active
November 8, 2017 20:26
-
-
Save YoneMoreno/e8e6f6ee374dd283e1d915d0861507cf to your computer and use it in GitHub Desktop.
Samer Buna Getting Started with React
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
//A function to check if n is reachable which whatever pair's sum in arr | |
//Esta función está creadar por Samer Buna, el resto del código es mío siguiendo su curso en | |
// https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents | |
//Instructions execute it on https://jscomplete.com/repl/ | |
var possibleCombinationSum = function(arr, n) { | |
if (arr.indexOf(n) >= 0) { return true; } | |
if (arr[0] > n) { return false; } | |
if (arr[arr.length - 1] > n) { | |
arr.pop(); | |
return possibleCombinationSum(arr, n); | |
} | |
var listSize = arr.length, combinationsCount = (1 << listSize) | |
for (var i = 1; i < combinationsCount ; i++ ) { | |
var combinationSum = 0; | |
for (var j=0 ; j < listSize ; j++) { | |
if (i & (1 << j)) { combinationSum += arr[j]; } | |
} | |
if (n === combinationSum) { return true; } | |
} | |
return false; | |
}; | |
/*Here Starts the gaame logic*/ | |
const Stars = (props) => { | |
/* | |
let stars = []; | |
for(let i=0; i<numberOfStars; i++){ | |
stars.push(<i key={i} className="fa fa-star"></i>); | |
} | |
*/ | |
return ( | |
<div className="col-5"> | |
{_.range(props.numberOfStars).map(i => | |
<i key={i} className="fa fa-star"></i> | |
)} | |
</div> | |
) | |
} | |
const Button = (props) => { | |
let button; | |
switch(props.answerIsCorrect){ | |
case true: | |
button = | |
<button className="btn btn-success" onClick={props.acceptAnswer}> | |
<i className="fa fa-check"></i> | |
</button> | |
break; | |
case false: | |
button = | |
<button className="btn btn-danger"> | |
<i className="fa fa-times"></i> | |
</button> | |
break; | |
default: | |
button = | |
<button className="btn" | |
onClick={props.checkAnswer} | |
disabled={props.selectedNumbers.length === 0}> | |
= | |
</button> | |
break; | |
} | |
return ( | |
<div className="col-2 text-center"> | |
{button} | |
<br /><br /> | |
<button className="btn btn-warning btn-sm" | |
onClick={props.redraw} disabled={props.redraws === 0}> | |
<i className="fa fa-refresh"></i> | |
{props.redraws} | |
</button> | |
</div> | |
) | |
} | |
const Answer = (props) => { | |
return ( | |
<div className="col-5"> | |
{props.selectedNumbers.map((number, i) => | |
<span key={i} onClick={() => props.unselectNumber(number)}>{number}</span> | |
)} | |
</div> | |
) | |
} | |
const Numbers = (props) => { | |
const numberClassName = (number) => { | |
if (props.usedNumbers.indexOf(number) >= 0){ | |
return 'used'; | |
} | |
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); | |
const DoneFrame = (props) => { | |
return ( | |
<div className="text-center"> | |
<h2>{props.doneStatus}</h2> | |
</div> | |
); | |
}; | |
class Game extends React.Component { | |
static randomNumber = () => 1 + Math.floor(Math.random()*9); | |
state = { | |
selectedNumbers: [], | |
randomNumberOfStars: Game.randomNumber(), | |
usedNumbers: [], | |
answerIsCorrect: null, | |
redraws: 5, | |
doneStatus: null, | |
}; | |
selectNumber = (clickedNumber) => { | |
if (this.state.selectedNumbers.indexOf(clickedNumber) >= 0) { return; } | |
this.setState(prevState => ({ | |
answerIsCorrect: null, | |
selectedNumbers: prevState.selectedNumbers.concat(clickedNumber) | |
})); | |
}; | |
unselectNumber = (clickedNumber) => { | |
this.setState(prevState => ({ | |
answerIsCorrect: null, | |
selectedNumbers: prevState.selectedNumbers | |
.filter(number => number !== clickedNumber) | |
})); | |
}; | |
checkAnswer = () => { | |
this.setState(prevState => ({ | |
answerIsCorrect: prevState.randomNumberOfStars === prevState.selectedNumbers.reduce((acc, n) => acc + n, 0) | |
})); | |
}; | |
acceptAnswer = () => { | |
this.setState(prevState => ({ | |
usedNumbers: prevState.usedNumbers.concat(prevState.selectedNumbers), | |
selectedNumbers: [], | |
answerIsCorrect: null, | |
randomNumberOfStars: Game.randomNumber(), | |
}), this.updateDoneStatus); | |
}; | |
redraw = () => { | |
if(this.state.redraws === 0) { return; } | |
this.setState(prevState => ({ | |
randomNumberOfStars: Game.randomNumber(), | |
answerIsCorrect: null, | |
selectedNumbers: [], | |
redraws: prevState.redraws - 1, | |
}), this.updateDoneStatus); | |
}; | |
possibleSolutions = ({randomNumberOfStars, usedNumbers}) => { | |
const possibleNumbers = _.range(1,100).filter(number => usedNumbers.indexOf(number) === -1 | |
); | |
return possibleCombinationSum(possibleNumbers, randomNumberOfStars); | |
}; | |
updateDoneStatus = () => { | |
this.setState(prevState => { | |
if(prevState.usedNumbers.length === 9){ | |
return { doneStatus: 'Done, Nice!' }; | |
} | |
if(prevState.redraws === 0 && !this.possibleSolutions(prevState)){ | |
return { doneStatus: 'Game Over!' }; | |
} | |
}); | |
}; | |
render() { | |
const { selectedNumbers, | |
randomNumberOfStars, | |
answerIsCorrect, | |
usedNumbers, | |
redraws, | |
doneStatus, | |
} = this.state; | |
return ( | |
<div className="container"> | |
<h3>Play Nine</h3> | |
<hr /> | |
<div className="row"> | |
<Stars numberOfStars={randomNumberOfStars}/> | |
<Button selectedNumbers={selectedNumbers} | |
checkAnswer={this.checkAnswer} | |
answerIsCorrect={answerIsCorrect} | |
acceptAnswer={this.acceptAnswer} | |
redraw={this.redraw} | |
redraws={redraws} | |
/> | |
<Answer selectedNumbers={selectedNumbers} | |
unselectNumber={this.unselectNumber}/> | |
</div> | |
<hr /> | |
{doneStatus ? | |
<DoneFrame doneStatus={doneStatus}/> : | |
<Numbers selectedNumbers={selectedNumbers} | |
selectNumber={this.selectNumber} | |
usedNumbers={usedNumbers} /> | |
} | |
</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