🎮 Thief vs Police CAPTCHA

An interactive, game-based CAPTCHA library for React applications. Verify users through engaging gameplay instead of boring text challenges!


✨ Features

- 🎯 3 Engaging Levels: City Chase, Jungle Hunt, Temple Showdown
- 📱 Fully Responsive: Works on all devices (desktop, tablet, mobile)
- 🎨 Beautiful UI: Modern design with smooth animations
- ⚡ Lightweight: Optimized bundle size
- 🔒 Secure: Server-side verification support
- 🎮 Fun UX: Users actually enjoy completing it!

📦 Installation

``bash
npm install thief-police-captcha
`

or

`bash
yarn add thief-police-captcha
`

🚀 Quick Start

`jsx
import { ThiefPoliceGame } from 'thief-police-captcha';
import 'thief-police-captcha/dist/style.css';

function App() {
const handleSuccess = (data) => {
console.log('CAPTCHA verified!', data);
// Proceed with your logic (form submission, etc.)
};

return (



);
}
`

📖 API Reference

$3

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| onSuccess | (data: object) => void | Yes | - | Callback when all levels are completed successfully |
| onFailure | (reason: string) => void | No | - | Callback when CAPTCHA fails |

$3

`typescript
{
success: true,
level: 3,
totalScore: 460,
completedAt: "2024-01-01T12:00:00.000Z"
}
`

🎮 Game Levels

$3

- Objective: Catch the thief by aiming and throwing
- Controls: Click to place targeting circle, then throw
- Difficulty: Easy

$3

- Objective: Hit 4 real idols, avoid 3 fake ones
- Controls: Drag targeting circle, throw darts
- Difficulty: Medium

$3

- Objective: Chase and catch the thief
- Controls: Click to catch
- Difficulty: Hard

🎨 Styling

The library includes default styles. Import the CSS file:

`jsx
import 'thief-police-captcha/dist/style.css';
`

$3

You can override styles using CSS:

`css
.game-stage {
/ Your custom styles /
}

.game-btn {
/ Custom button styles /
}
`

🔧 Advanced Usage

$3

`jsx
import { ThiefPoliceGame } from 'thief-police-captcha';

function App() {
const handleSuccess = async (data) => {
try {
const response = await fetch('/api/verify-captcha', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});

if (response.ok) {
console.log('Verified!');
// Proceed with form submission
}
} catch (error) {
console.error('Verification failed:', error);
}
};

return ;
}
``

📱 Responsive Design

The CAPTCHA automatically adapts to different screen sizes:
- Desktop: Full-size experience
- Tablet: Scaled to fit
- Mobile: Touch-optimized controls

🌐 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

MIT © Mikiyas Alemayehu

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

Found a bug? Please open an issue.

💡 Examples

Check out the example directory for complete integration examples.

🔗 Links

- GitHub Repository
- npm Package

---

Made with ❤️ by Mikiyas Alemayehu