Last active
February 11, 2019 15:01
-
-
Save yatinsns/6c7f9f1efb157649e6f33537171bf1fe to your computer and use it in GitHub Desktop.
React - Play Nines
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
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; | |
}; | |
const Stars = (props) => { | |
return ( | |
<div className="col-5"> | |
{_.range(props.randomNumberOfStars).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" disabled={props.selectedNumbers.length === 0} onClick={props.checkAnswer}>=</button>; | |
break; | |
} | |
return ( | |
<div className="col-2"> | |
{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.rollBack(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(), | |
answerIsCorrect: null, | |
usedNumbers: [], | |
redraws: 5, | |
doneStatus: null, | |
}; | |
selectNumber = (clickedNumber) => { | |
if (this.state.selectedNumbers.indexOf(clickedNumber) >= 0) { | |
return; | |
} | |
this.setState(prevState => ({ | |
answerIsCorrect: null, | |
selectedNumbers: prevState.selectedNumbers.concat(clickedNumber) | |
})); | |
}; | |
rollBack = (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 => ({ | |
selectedNumbers: [], | |
answerIsCorrect: null, | |
randomNumberOfStars: Game.randomNumber(), | |
redraws: prevState.redraws - 1, | |
}), this.updateDoneStatus); | |
}; | |
updateDoneStatus = () => { | |
this.setState(prevState => { | |
if (prevState.usedNumbers.length == 9) { | |
return { doneStatus: 'Done. Nice!' }; | |
} | |
if (prevState.redraws === 0 && !this.possibleSolutions(prevState)) { | |
return { doneStatus: 'Game Over!' }; | |
} | |
}); | |
}; | |
possibleSolution = ({randomNumberOfStars, usedNumbers}) => { | |
const possibleNumbers = _.range(1, 10).filter(number => usedNumbers.indexOf(number) === -1); | |
return possibleCombinationSum(possibleNumbers, randomNumberofStars); | |
}; | |
render() { | |
const { | |
selectedNumbers, | |
randomNumberOfStars, | |
answerIsCorrect, | |
usedNumbers, | |
redraws, | |
doneStatus | |
} = this.state; | |
return ( | |
<div className="container"> | |
<h3>Play Nine</h3> | |
<hr /> | |
<div className="row"> | |
<Stars randomNumberOfStars={randomNumberOfStars}/> | |
<Button selectedNumbers={selectedNumbers} checkAnswer={this.checkAnswer} answerIsCorrect={answerIsCorrect} acceptAnswer={this.acceptAnswer} redraw={this.redraw} redraws={redraws}/> | |
<Answer selectedNumbers={selectedNumbers} rollBack={this.rollBack} /> | |
</div> | |
<br /> | |
{doneStatus ? | |
<DoneFrame doneStatus={doneStatus} /> : | |
<Numbers selectedNumbers={selectedNumbers} selectNumber={this.selectNumber} usedNumbers={usedNumbers}/> | |
} | |
<br /> | |
</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