Your typical hangman game. However, the list of guessable words is currently limited to 50 different words. Words will range from having four to six letter words.
I wanted to create a simple game using TypeScript, SCSS, and React for the frontend, aiming for a clean and interactive user interface. For the backend, I used JavaScript along with Redux for managing state, Sequelize for database interactions with PostgreSQL, and Bcryptjs for secure password handling. The main goal of this project was to improve my TypeScript skills and learn how to handle user authentication and database operations effectively. Users can register and log in using their username and password, and once logged in, they can track their wins and losses, which are stored in a PostgreSQL database.
Frontend:
- TypeScript
- React.js
- SCSS (Syntactically Awesome Style Sheets)
- Vite
Backend:
- JavaScript
- Node.js
- Express.js
- Sequelize (ORM for PostgreSQL)
- Bcryptjs (Password hashing)
Database:
- PostgreSQL
git clone https://github.com/your-username/hangman-game.git
cd hangman-gamenpm install- Duplicate .env.example and rename it to .env
cp .env.example .env- Replace the placeholders in the .env with values for your development environment
DB_HOST=localhost
DB_USER=myusername
DB_PASSWORD=mypassword
DB_DATABASE=mydatabase
cd server
npm run devcd hangman-game
npm run devRegister User
- Endpoint:
POST api/users/register - Registers a new user
Login User
- Endpoint:
POST api/users/login - Logs in a user
Win and Loss Record
- Endpoint:
GET api/users/matches/:id - Allows user to view how many wins and losses they have
- Route:
/game - Users can visit this route to start playing the Hangman game. No API endpoints required for gameplay.
- There is a bug where wins and losses are sometimes not recorded onto the matches page after the user completes a game. It commonly happens when a user first logs in to their account. Currently, to bypass this issue, users have to refresh the page after logging in, before starting a game.
- When the game page is first rendered, the gallows for the hangman appears. However, after the user's first wrong guess, the gallows and keyboard shift downwards. Not game breaking, but a bit unpleasant to gameplay. This could possibly be due to how divs are set up around the game page and relative positioning of components.
- Issue where deployment version will be able to add new users to PostgreSQL database after they use the sign up form, but new wins is not updated when logged in users complete a game, or view their wins and losses page. Believe this is due to API fetch error on the frontend from inspecting the dev tools. Currently working on a fix.
- Planning to implement a feature in the navbar that displays a user's win and loss record. It should automatically update once a user finishes a game and starts a new one. This is just so that users who are interested in their record won't have to visit a separate page.
- Instead of a fixed list of words, it would be better to have a feature that randomly generates any English word. It prevent players from memorizing the 50 words that make up the list so far. This feature would also allow the words to be guessed range anywhere from 3 letter words to 8 letter words.
- Improve the styling for the game and each page.
https://hangman-game-6dpflz13x-anthony-san-antonios-projects.vercel.app/
WebDevSimplified (2022). HangmanWord component.
<span
style={{ visibility: usedLetters.includes(letter) ? "visible" : "hidden" }}
>
{letter}
</span>I referenced this source to implement a keyboard feature in the game. This feature makes used keys unclickable to enhance the quality of life for the user, preventing them from guessing the same letter multiple times.