This the first MERN stack app I have written.
Click on the Start Game button and you have 3 seconds the memorise the number. Type the number in the box and click the submit button or hit enter. The number will increase in length by one digit each time you get it right. You will also have an extra second to memorise the longer number.
The scoreboard displays the top 10 all time scores
Because a new random number is added to the string each time, I have to ensure that the current version of it was stored in state.
The purpose of the Do While loop was to ensure that there were never two consecutive digits that are the same.
Each time the string gets longer by a character, the player gets an extra second to memorise it.
I had the issue whereby I did not want the player to be able to copy and paste the number. I therefore learnt how to use the tCtx canvas library to turn it into an image. Of course, this does not stop the player taking a screenshot, but I ran out of ideas as to how to stop that!
This part of the code simply retrieves the scoreboard and looks at the lowest current score to see whether the new attempt is good enough to feature in it.
I don't have much to say about this except I enjoyed learning how to use the key attribute when mapping over a list. I think it was also the first time I had used an HTML table for quite a long time!
Just a simple model with two fields. One of the reasons I liked this project was that there were certain elements that could be kept very simple whilst I practiced other skills such as routing and mapping the data from the database.
Again, not too much to say other than it was a thrill to see the save function work for the first time and see the data appear in the back end. I decided to apply the limit of 10 here, rather than permanently storing all of the scores and filtering out the 10 highest. I recognise that a more complex game with user accounts would likely require their game history to be fully stored. But for the purposes of this project I was happy just to store the 10 highest scores and remove any that got knocked off the bottom.
As a game, it's unlikely to take the world by storm and it looks pretty terrible... but it achieved its objective in allowing me to take what I had learnt about Node.js, Express & Mongoose and adapt them into my own project. There were some interesting unexpected challenges along the way, like turning the number into an image and working out when to enable and disable buttons, as well as working how to to detect when the enter key was pushed! These little extra tasks that appear are what make such a project more worthwhile than always sticking to tutorials.
Improve the design of the app. - Not done. Will it ever be..?
Improve the scoreboard to include the date of the score. - Done
Better messages to explain whether the user achieved a high score or didn't. - Done
Redirect the user to the scoreboard page if they achieve a high score. - Done
Ensure that the same digit is not used consecutively when generating the number. - Done