Frontend Mentor - Hangman game solution

This is a solution to the Hangman game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Learn how to play Hangman from the main menu.
• Start a game and choose a category.
• Play Hangman with a random word selected from that category.
• See their current health decrease based on incorrect letter guesses.
• Win the game if they complete the whole word.
• Lose the game if they make eight wrong guesses.
• Pause the game and choose to continue, pick a new category, or quit.
• View the optimal layout for the interface depending on their device's screen size.
• See hover and focus states for all interactive elements on the page.
• Navigate the entire game only using their keyboard.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: https://hangman-game-fem.pages.dev

My process

Built with

• React
• TypeScript
• Mantine - React component library
• Valtio - Proxy state management
• Valtio FSM - Reactive finite state machine library
• Motion (formerly Framer Motion) - For animations
• Howler.js - For sound effects
• CSShake - For shake effects
• Stately - For simulating the game logic in a state machine diagram

What I learned

This is by far the prettiest game I've developed. Here are some of the things I've learned along the way:

• how to use Motion's AnimatePresence to add exit animations to components
• thinking in terms of "game UX" (vs. general website UX)
• using the finite state machine pattern for the game logic
• implementing a conditional polyfill for Set.prototype.isSubsetOf
• vibe coding pair coding with ChatGPT

Regarding that last point, I'm generally against the idea of letting AI do your coding for you, but it's actually pretty helpful for generating initial ideas and building off of those.

In my case, I didn't know where to start coding the game logic, so I asked ChatGPT about the best way to organize the logic and app state for a hangman game. It gave me a general folder structure with a useHangman custom hook - good enough. But then I remembered reading about state machines and thought it might be a good fit since the game moves through explicitly defined states (main_menu → category_pick → playing → game_over). And so this back and forth with ChatGPT helped me refine my idea into something that I could easily implement in code.

For the list of words, I initially planned to implement an API that returns a random word based on a given category. But I decided not to do it when I realized that one could simply check the Network tab in the browser devtools to cheat. 😈

Useful resources

• What is a state machine?
• Text Stroke: Stuck In The Middle With You - This article helped me when I was struggling to implement the outside text stroke in some of the headings. I couldn't make both gradient text and text stroke work, so I just chose a white solid fill and added the stroke for emphasis using the paint-order trick.
• Outline effect to text - This StackOverflow thread has some interesting alternatives to implementing the text outline effect. Might try them for other projects if the need arises.
• Announcing “use-sound”, a React Hook for Sound Effects - Stumbled upon this article while searching how to add sound effects. This is where I discovered Howler.
• 3 UNIQUE Health Bar Damage Taken Effects (Unity Tutorial) - This is where I got the inspiration for the health bar animation.
• Converting WAV to MP3 in the terminal - How to use ffmpeg to convert WAV, in my case to MP3 and WEBM formats.
• Loading Polyfills Only When Needed - I'm using Set.prototype.isSubsetOf to check if all letters have been guessed. Unfortunately, this is not yet supported in some older browsers, like Safari 15 in my iPhone SE. So I use a conditional polyfill to shim the feature when necessary.
• How to Create CSS Button Shine Effect on Hover
• Framer Motion Visualizer - For testing spring transitions

Author

• Website - Josh Javier
• Frontend Mentor - @joshjavier
• Twitter - @joshjavierr
• LinkedIn - Josh Javier

Acknowledgments

I got the sound effects which are all licensed under CC0 1.0 from Freesound:

• yay.wav by Higgs01
• Error by BloodPixelHero
• negative_beeps.wav by themusicalnomad
• Correct Choice by unadamlar

I'd also like to give some credit to Hangaroo for inspiring the sound and animation choices I've made for this project. I used to play it a lot when I was a kid, and it's still what comes to mind when I think of a good hangman game.