🎭 Hangman Game

A fully-featured Hangman word guessing game built with Svelte and TypeScript. Features beautiful dark-mode UI, animations, multiple difficulty levels, word categories, and a GitHub Pages deployment workflow.

✨ Features

• Multiple Difficulty Levels — Easy (8 wrong), Medium (6 wrong), Hard (4 wrong)
• Word Categories — Animals, Countries, Movies, Food, Science, or random
• SVG Hangman Figure — Animated body parts that appear with each wrong guess
• On-screen Keyboard — Click letters or use your physical keyboard
• Letter Animations — Pop animations for correct guesses, shake for wrong ones
• Word Display — Animated letter slots with flip effects
• Win/Lose Detection — With celebratory confetti on winning
• Score Tracking — Persistent stats during the session
• Responsive Design — Works on desktop and mobile
• Dark Theme — Modern dark UI with accent colors
• Reusable Components — LetterTile, WordDisplay, Keyboard, HangmanFigure, GameStatus, GameSettings

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm

Install

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Output goes to dist/.

Preview Production Build

npm run preview

📦 Deployment

GitHub Pages (via GitHub Actions)

The included workflow (.github/workflows/deploy.yml) automatically builds and deploys to GitHub Pages whenever you push to main or master.

1. Push your repo to GitHub
2. Go to Settings > Pages and set the source to GitHub Actions
3. Push to main — the action will deploy to gh-pages automatically

Manual Deploy (gh-pages branch)

npm run deploy

This builds the project and pushes the dist/ folder to the gh-pages branch using gh-pages.

🧩 Project Structure

hangman/
├── src/
│   ├── main.ts              # Entry point
│   ├── App.svelte            # Main application component
│   └── lib/
│       ├── types.ts          # TypeScript types and word data
│       ├── gameLogic.ts      # Game state management
│       ├── HangmanFigure.svelte  # SVG hangman figure
│       ├── LetterTile.svelte     # Reusable letter button
│       ├── WordDisplay.svelte    # Word letter display
│       ├── Keyboard.svelte       # On-screen keyboard
│       ├── GameStatus.svelte     # Win/lose status card
│       └── GameSettings.svelte   # Difficulty/category controls
├── public/
│   └── index.html
├── .github/workflows/
│   └── deploy.yml            # GitHub Pages deploy workflow
├── package.json
├── vite.config.ts
├── svelte.config.js
├── tsconfig.json
└── README.md

🛠️ Built With

• Svelte — Reactive UI framework
• TypeScript — Type-safe JavaScript
• Vite — Fast build tool
• gh-pages — Deploy to GitHub Pages

📄 License

MIT