Tower of Hanoi - 8-Bit Retro Edition

A nostalgic 8-bit pixel-art Tower of Hanoi game built with Next.js, TypeScript, and Tailwind CSS. Experience the classic puzzle with retro GameBoy/NES aesthetics!

🎮 Features

• Classic Tower of Hanoi Gameplay - Move all disks from the left peg to the right peg
• 8-Bit Pixel Art UI - Authentic retro gaming aesthetic
• Multiple Difficulty Levels - From 3 to 10 disks
• Retro Color Palettes - GameBoy, NES, and Apple II themes
• CRT Scanline Effects - Optional vintage monitor simulation
• Retro Sound Effects - 8-bit beep sounds for all actions
• Move Validation - Follows classic Tower of Hanoi rules
• Undo/Redo System - Perfect your solution
• Performance Tracking - Move counter, timer, and efficiency rating
• Keyboard & Mouse Controls - Full accessibility support
• Mobile Responsive - Play on any device

🕹️ Game Rules

1. Move all disks from the leftmost peg to the rightmost peg
2. Only one disk can be moved at a time
3. A disk can only be placed on top of a larger disk or on an empty peg
4. The goal is to complete the puzzle in the minimum number of moves (2^n - 1)

🎮 Controls

Mouse/Touch

• Click a disk to select it
• Click a destination peg to move the selected disk
• Use the on-screen buttons for game controls

Keyboard

• Arrow Keys - Navigate between pegs
• Enter/Space - Select/move disks
• U - Undo last move
• R - Reset current game
• Escape - Return to menu

🚀 Quick Start

Prerequisites

• Node.js (18+ recommended)
• pnpm package manager

Installation

1. Clone the repository:

git clone <your-repo-url>
cd tower-of-hanoi

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open your browser and navigate to http://localhost:3000

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm type-check - Run TypeScript type checking

🎨 Color Palettes

GameBoy Classic

• Authentic green monochrome palette
• Perfect for that handheld console nostalgia

NES

• Classic Nintendo color scheme
• Warm, nostalgic gaming colors

Apple II

• Monochrome green terminal aesthetic
• Vintage computer feel

🏆 Performance Scoring

• Perfect: Minimum moves (2^n - 1)
• Excellent: 80-99% efficiency
• Good: 60-79% efficiency
• Fair: 40-59% efficiency
• Needs Work: Below 40% efficiency

🛠️ Tech Stack

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Zustand - Lightweight state management
• Web Audio API - Retro sound generation
• Press Start 2P - Authentic pixel font

📁 Project Structure

src/
├── app/                    # Next.js app router
│   ├── globals.css        # Global styles & retro CSS
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main game component
├── components/
│   ├── game/              # Game-specific components
│   │   ├── Disk.tsx       # Disk component
│   │   ├── GameScreen.tsx # Main game view
│   │   ├── HUD.tsx        # Heads-up display
│   │   └── Peg.tsx        # Peg component
│   ├── retro/             # Retro UI components
│   │   ├── CreditsScreen.tsx
│   │   ├── MenuScreen.tsx
│   │   ├── RetroLayout.tsx
│   │   ├── SettingsScreen.tsx
│   │   ├── SplashScreen.tsx
│   │   └── VictoryScreen.tsx
│   └── ui/                # Reusable UI components
└── lib/
    ├── game/              # Game logic
    │   ├── logic.ts       # Game rules & algorithms
    │   ├── store.ts       # Zustand state management
    │   └── types.ts       # TypeScript definitions
    ├── audio/
    │   └── sounds.ts      # Retro sound effects
    └── utils.ts           # Utility functions

🎯 Game Features in Detail

Difficulty Levels

• Easy: 3 disks (7 moves optimal)
• Medium: 4 disks (15 moves optimal)
• Hard: 5 disks (31 moves optimal)
• Expert: 7 disks (127 moves optimal)
• Master: 10 disks (1023 moves optimal)

Visual Effects

• CRT Filter: Simulates old monitor scanlines
• Pixel Perfect: Sharp pixelated rendering
• Retro Animations: 8-bit style transitions
• Glow Effects: Authentic CRT glow

Sound Design

• Move Sound: Satisfying click sound
• Error Sound: Buzz for invalid moves
• Victory Jingle: 8-bit fanfare
• Menu Navigation: Beepy interface sounds

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Press Start 2P Font - By CodeMan38
• Tower of Hanoi - Classic mathematical puzzle
• 8-bit Gaming Era - The inspiration behind this project

🐛 Troubleshooting

Common Issues

1. Sound not working: Ensure you've interacted with the page first (browser autoplay policy)
2. CRT effect performance: Disable CRT filter on lower-end devices
3. Mobile responsiveness: Use landscape orientation for best experience

Getting Help

If you encounter any issues or have suggestions, please:

1. Check existing issues
2. Create a new issue with detailed information
3. Include your browser and device information

---

Made with ❤️ and pixel-perfect attention to detail

Enjoy your journey back to the golden age of gaming! 🎮✨

Tower-of-Hanoi