# Smart Captcha - Smart Verification Code Library

A powerful and easy-to-use front-end captcha library that supports multiple captcha types, including graphic captcha, slider captcha, and puzzle captcha.

## Features

- 🎨 **Graphic Captcha**: Support custom character set, interference lines, interference points, fonts, etc.
- 🎯 **Slider Captcha**: Simple and intuitive sliding verification, support custom styles and thresholds.
- 🧩 **Puzzle Captcha**: Multiple shapes of puzzle verification, support custom background images.
- 📱 **Responsive Design**: Adapt to different screen sizes.
- 🎨 **Highly Customizable**: Support custom colors, sizes, texts, etc.
- 🔧 **Easy to Integrate**: Simple API, quickly integrate into existing projects.
- 📦 **Lightweight**: No external dependencies, small size.

## Installation

```bash
npm install smart-captcha
```

## Quick Start

### Import Library

```javascript
import { createCaptcha } from 'smart-captcha';
```

### 1. Graphic Captcha

Create a graphic captcha instance, supporting custom character length, interference lines, interference points, etc. Verify user input by calling the `verify()` method, and refresh the captcha using the `refresh()` method.

### 2. Slider Captcha

Create a slider captcha instance, where users complete verification by sliding the slider. Supports custom slider styles, track colors, and hint text.

### 3. Puzzle Captcha

Create a puzzle captcha instance, where users need to drag the slider to move the puzzle piece to the correct position. Supports custom background images, puzzle shapes, and sizes.

## API Documentation

### createCaptcha(options)

Factory function to create captcha instances.

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| options | CaptchaOptions | Captcha configuration options |

#### Returns

Captcha instance.

### CaptchaOptions

Unified interface for captcha configuration options, specific options vary depending on `mode`.

#### Common Events

| Event | Type | Description |
|-------|------|-------------|
| onSuccess | Function | Verification success callback |
| onFail | Function | Verification failure callback |
| onRefresh | Function | Captcha refresh callback |
| onTimeout | Function | Captcha timeout callback |

#### Graphic Captcha Options (GraphicCaptchaOptions)

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| container | HTMLElement | - | Captcha container element |
| length | number | 4 | Captcha character length |
| lineCount | number | 6 | Number of interference lines |
| dotCount | number | 20 | Number of interference points |
| fontSize | number | 20 | Font size |
| chars | string | 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' | Optional character set |
| strictCase | boolean | false | Whether to strictly check case |
| refreshOnFail | boolean | false | Whether to refresh when verification fails |
| fonts | string[] | - | Optional font list |
| timeout | number | 60000 | Captcha expiration time (milliseconds) |

#### Slider Captcha Options (SliderCaptchaOptions)

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| container | HTMLElement | - | Captcha container element |
| threshold | number | 0.95 | Success threshold (percentage) |
| resetOnFail | boolean | true | Whether to reset after verification failure |
| timeout | number | 60000 | Timeout time (milliseconds) |
| sliderColor | string | '#409eff' | Slider color |
| trackColor | string | '#f5f7fa' | Track color |
| textColor | string | '#606266' | Text color |
| hintText | string | 'Slide to the right to complete verification' | Default hint text |
| successColor | string | '#67c23a' | Success color |
| failColor | string | '#f35445' | Failure color |
| successText | string | 'Verification passed' | Success text |
| failText | string | 'Verification failed, please try again' | Failure text |

#### Puzzle Captcha Options (PuzzleCaptchaOptions)

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| container | HTMLElement | - | Captcha container element |
| width | number | 300 | Container width |
| height | number | 200 | Container height |
| puzzleWidth | number | 50 | Puzzle block width |
| puzzleHeight | number | 50 | Puzzle block height |
| backgroundImage | string | string[] | - | Background image (single or array) |
| shape | 'triangle' | 'square' | 'hexagon' | 'pentagon' | 'star' | 'triangle' | Puzzle shape |
| threshold | number | 5 | Success threshold |
| resetOnFail | boolean | true | Whether to reset after failure |
| showAsPopup | boolean | false | Whether to show as popup |
| textColor | string | '#606266' | Text color |
| successColor | string | '#67c23a' | Success color |
| sliderColor | string | '#409eff' | Slider initial color |
| mismatchColor | string | '#f35248' | Slider mismatch color |
| hintText | string | 'Drag the slider to complete the puzzle' | Default hint text |
| failText | string | 'Verification failed, please try again' | Failure text |
| successText | string | 'Verification passed' | Success text |

### Captcha Instance Methods

#### Graphic Captcha Instance

| Method | Description |
|--------|-------------|
| verify(input: string | number): Promise<boolean> | Verify user input |
| refresh(): Promise<void> | Refresh captcha |
| destroy(): void | Destroy captcha instance |

#### Slider Captcha Instance

| Method | Description |
|--------|-------------|
| refresh(): void | Refresh captcha |
| destroy(): void | Destroy captcha instance |
| getVerified(): boolean | Get verification status |

#### Puzzle Captcha Instance

| Method | Description |
|--------|-------------|
| refresh(): void | Refresh captcha |
| destroy(): void | Destroy captcha instance |

## Browser Compatibility

- Chrome (Recommended)
- Firefox
- Safari
- Edge

## Development

### Install Dependencies

```bash
npm install
```

### Build

```bash
npm run build
```

### Run Examples

```bash
npm start
```

This will open the test page in the browser, showing usage examples of various captchas.

## Examples

Check the example files in the `test` directory:

- `graphic.html` - Graphic captcha example
- `slider.html` - Slider captcha example
- `puzzle.html` - Puzzle captcha example

## License

MIT License

## Changelog

### 1.0.0

- Initial release
- Support graphic captcha, slider captcha and puzzle captcha
- Support responsive design
- Support high customization

## Contribution

Welcome to submit Issues and Pull Requests!