May 1, 2021
React Project
For the fifth project for Flatiron, I had to make a project using React.js. I have decided to create a project called Sinking Squids. The project is a game where users will have to find squids hidden on a grid.
One of the things I thought was interesting with React was working with forms. On the site, here is what the form looks like:
The form here is made up of 4 separate parts. The first 2 parts are labels. The first label shows information important to the player. How many squids are left on the board and how many shots the player has fired. Shots fired is important as that is what will be submitted when the user has finished their game. The second label has an input with it. These 2 parts ask the user for their initials. When the game is over, they can submit 3 characters to identify themselves, then submit their score to see if it is one of the best 20 scores.
We then use a handleChange and handleSubmit. HandleChange will setState to what the user put their initials, how many clicks have happened, if the game is over, and how many squids are left. The last three come from props as boardInfo, so we can keep the user updated with info that they need.
handleSubmit will take what the user entered as their initials, along with how many clicks it took for them to finish their game, and then submit it to the backend. We also check to see if the game is over before we save the score so users can’t submit a score of a ongoing game.
Finally we take that entry, then mapDispatchToProps to sendScore out to the backend.
Overall, I enjoyed this project. It was very enjoyable. I loved seeing the game come together and I love how it turned out. If you want to see more about this project, you can find it here: https://github.com/JakeKViti/Sinking-Squids
