#Play Locally:
- Clone or download the game repository
- Run npm install in game directory
- Install MySQL
- Create database: hangman
- Create table: user_scores (username varchar(35), score smallint)
- Insert 6 or more values ex: insert into user_Scores values('Soumya',10)
- Run npm start from terminal in game directory (runs development server)
- Run node app.js in terminal simultaneously
- Play game at localhost:3000
#Features:
- Ability to guess a letter. Checks for already guessed characters, backspace and non alphabet characters
- Display of top 5 scores and usernames from MySQL model
- 10 varying levels of difficulty
- Display of incorrect guesses and number of guesses left
- Ability to play again
- Hangman figure display that changes for each incorrectly guessed letters
#Implementation:
As I mentioned in my application, my future goals was to learn more about React.js. I chose to implement this game using React.js to work on my goals. I was able to appreciate React's ability to automatically update and display upon state changes without reloading the entire page.
I came across the CORS issue when trying to access the API from the client. To resolve this issue, I created a backend Node server to make a server to server call.
In a lifecycle method, componentDidMount, a getRandomWord function is called. This function passes in a url (contains user selected difficulty level) to a function, which fetches the data from the API. Upon success, a random word is selected and the correct number of underscores is displayed. getScores is also called, which passes in a url to a function, which fetches the top 5 scores from a model in MySQL. Upon success, the top scores and usernames are displayed.
Users submit guesses in an input text field. The characters in the random selected word are searched for a match. If there is a match, the display at the correct position changes from an underscore to the correct character. If there isn't a match, the character is displayed in the incorrect guesses box, a body part is appended to the hangman figure, and the number of guesses decreases until 0 guesses left.
#Next Steps:
- Styles: for positioning, use relative styling, width and height percentages
- Make game responsive to different screen sizes
- Login function to keep track of real user and score (currently sample data)
- If more features are added to make a larger app, split app into components.