Just a little update to the app. Here it is now:
In this version, I’ve focused mainly on the design – making subtle changes here and there.
- Firstly I made the background color lighter
- Shadow for the ‘board’
- Placed the message area below the input field
I’ve also used a table to keep the input field and the button aligned
Leaderboard: The Plan
I’m going to use a table here too, with “Username” and “Score” as headers. Then in each table data goes the corresponding…well…data. And the flow is as follows:
- User is forced to input a username blurring all the game area
- User inputs a username, thanked and the blur is removed.
- After all the ships have been sunk, these things should happen:
- User is offered to play the game again, initiating a page refresh
- The input field gets disabled
- The user’s username and score is displayed in the leaderboard
How to make the leaderboard
The same goes with the score. It should be wrapped in a span, get posted in the database and gets displayed on the leaderboard.