Implementing an online game in react - reactjs

Question

I wrote a small game in React which consists of three components,
App <= MainInfo <= Game. The essence of the game is to press the START GAME button and quickly click on all the blue cubes that disappear after clicking. At the end, an alert window pops up with the time and number of cubes pressed, but there are bugs:
After loading, you can click on the blue cubes and they will disappear without pressing START GAME. (So you can even win the game with a zero time counter).
If you press START GAME a couple of times in a row, the counter is accelerated, and after winning, if you press the button, the time continues.
How to make a REFRESH button to restart the game after winning and not reload the entire page?
Link to game - https://quintis1212.github.io/react-game/build/index.html
import React from 'react';
import './App.css';
import MainInfo from './GameContent/MainInfo';
function App() {
return (
<div className="App">
<MainInfo />
</div>
);
}
export default App;
import React, {Component} from 'react';
import Game from './GameTable/Game';
class MainInfo extends Component {
state = {
count:0,
timer:0,
initGame: false
}
shouldComponentUpdate(){
return this.state.initGame;
}
logToConsole = (e)=> {
if (e.target.className === 'Element') {
this.setState((state)=>{
return {count: state.count + 1}
});
e.target.className = 'Element-empty';
console.log(e.target.className)
}
}
timerUpdated(){ this.setState((state)=>{
return {timer: state.timer + 1}
}); }
initGameHandler =()=>{
this.setState({initGame: true})
console.log('refreshHandler')
this.timerID=setInterval(() => { this.timerUpdated() }, 1000);
}
finishGameHandler = (score)=>{
console.log(score)
if(this.state.count === score-1) {
alert('-----GAME OVER-----'+
'YOUR TIME: '+this.state.timer+'seconds'+
' YOUR COUNT: '+this.state.count+'points');
clearInterval(this.timerID)
this.setState({initGame: false})
}
}
render(){
return(
<div>
<p>Timer : <strong>{this.state.timer} seconds </strong></p>
<p>Counter :<strong>{this.state.count}</strong></p>
<button onClick={this.initGameHandler}>START GAME</button>
<Game click={this.logToConsole} updateData={this.finishGameHandler} />
</div>
)
}
}
export default MainInfo;
import React,{Component} from 'react';
class Game extends Component {
shouldComponentUpdate(){
return false
}
render() {
let item;
let count = 0;
let arr = [];
for (let i = 0; i < 70; i++) {
arr.push(Math.floor(Math.random() * 10));
}
item = arr.map((el,i,arr) => {
count++
return el < 2 ? arr[i-1] < 4?<div key={count} className='Element-empty'></div>:<div onClick={(e)=>{this.props.click(e)}} key={count} className='Element'></div> : <div key={count} className='Element-empty'></div>
})
// console.log(item.filter(el => el.props.className == 'Element'))
let score = item.filter(el => el.props.className === 'Element')
let scoreLenhgth=score.length
return(
<div onClick={() => { this.props.updateData(scoreLenhgth)}} >
{item}
</div>
)
}
}
export default Game;

Answer 1

I made quite some changes but got it all to work, didn't put any comments on the changes so please comment if you have any questions.
function App() {
return (
<div className="App">
<MainInfo />
</div>
);
}
class MainInfo extends React.Component {
state = {
count: 0,
timer: 0,
initGame: false,
};
timerUpdated() {
this.setState(state => {
return { timer: state.timer + 1 };
});
}
initGameHandler = () => {
this.setState({ initGame: true });
this.timerID = setInterval(() => {
this.timerUpdated();
}, 1000);
};
gameClickHandler = (correct, itemsLeft) => {
this.setState(
{
count: this.state.count + (correct ? 1 : 0),
},
() => {
if (itemsLeft === 0 || !correct) {
alert(
'-----GAME OVER-----' +
'YOUR TIME: ' +
this.state.timer +
' seconds ' +
' YOUR COUNT: ' +
this.state.count +
' points'
);
clearInterval(this.timerID);
this.setState({
initGame: false,
count: 0,
timer: 0,
});
}
}
);
};
render() {
return (
<div>
<p>
Timer :{' '}
<strong>{this.state.timer} seconds </strong>
</p>
<p>
Counter :<strong>{this.state.count}</strong>
</p>
{this.state.initGame || (
<button onClick={this.initGameHandler}>
START GAME
</button>
)}
{this.state.initGame && (
<Game
click={this.logToConsole}
updateData={this.gameClickHandler}
blocks={2}
/>
)}
</div>
);
}
}
const shuffle = array => {
const copy = [...array];
for (let i = copy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copy[i], copy[j]] = [copy[j], copy[i]];
}
return copy;
};
class Game extends React.PureComponent {
constructor(props) {
super(props);
this.state = this.setGame();
}
setGame = () => {
const arr = shuffle(
[...new Array(70)].map((_, i) => i)
);
const selected = arr.slice(0, this.props.blocks || 5);
return { arr, selected };
};
render() {
return (
<div
onClick={e => {
const itemClicked = Number(
e.target.getAttribute('data-id')
);
const correct = this.state.selected.includes(
itemClicked
);
this.props.updateData(
correct,
this.state.selected.length - (correct ? 1 : 0)
);
this.setState(state => ({
selected: state.selected.filter(
v => v !== itemClicked
),
}));
}}
>
{this.state.arr.map((_, i) => (
<div
key={i}
data-id={i}
className={
!this.state.selected.includes(i)
? 'Element-empty'
: 'Element'
}
></div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.App {
text-align: center;
}
.Element {
display: inline-block;
width: 40px;
height: 40px;
background-color: cornflowerblue;
border: 2px solid rgb(68, 209, 179);
}
.Element-empty {
display: inline-block;
width: 40px;
height: 40px;
background-color: rgba(158, 147, 100, 0.394);
border: 2px solid rgb(68, 209, 179);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>