I am making a typeracer on reactjs (I am new in the frontend languages) and so far, so good. The typeracing is working as expected (singleplayer for now). Now what I want to implement is two types of timers:
- A typeracing game should last not more than 60 seconds. After 60 seconds I want to end the game.
- Before a new game starts, there should be another time for 10 seconds. Which is the same timer after the game ends.
So, in perfect starting scenario, everything would look like this (for now): I wait 10 seconds (where I have a button to either join the game or not and review the typeracer text), if I've joined the game I have 60 seconds to finish it (if I do, I wait until the end of the timer or until everyone has finished), and then this cycle repeats.
Here comes my question -> how can I set this timer so it is not possible to type in the box:
<div className="box userTypingBox">
<input type="text" onChange={onChange}></input>
</div>
until the timer finished (and also display the seconds left until the game starts/ends). And then how can I set a timer where the box is available for those who has joined and after 60 seconds, the cycle repeats. Keep in mind (if important) that later I am going to use socket io to make the game for multiple players and multiple players to join one game.
NOT IMPORTANT FOR THE ANSWER: Of course I have also done a research but don't really have something as good as an idea which I could try. The only thing I can think of is make a while cycle for the box and have another class with a timer function which returns either false and true. And if its true the player can type, if its false it should display the 10 second timer.