I am working on a game like this enter image description here
When the first image is dragged, i need to start the timer in seconds. When all the images are dragged, i need to stop the timer. Right now i have a timer working when an image is dragged, but the UI is not showing the current seconds. Here is some of my code, i hope you can tell me what i am doing wrong.
constructor(props) {
super(props);
this.state = { name: '', sent: false, time: 0};
const ordered = ["z","o","o","v","u"];
ordered.sort(() => Math.random() - 0.5);
this.images = ordered;
this.props = props;
this.started = false;
this.totalSeconds = 0;
}
drag = (event) => {
event.dataTransfer.setData("text", event.target.id);
if(this.started == false) {
this.started = true;
setInterval(this.setTime, 1000);
}
}
setTime = () => {
++this.totalSeconds;
this.setState({time: this.totalSeconds});
console.log(this.state.time);
}
render() {
let content = '';
content = <div id="time" key={this.state.time}><img src="./img/clock.svg"/>Your score: {this.state.time} seconds </div>;
return (
<div>
{content}
</div>
);
} ```