# Visual Novel Dating Sim Editor

A web-based editor for creating and previewing Visual Novel scripts with real-time feedback.

## 🏗 Architecture

- **Frontend**: Next.js (TypeScript) + Tailwind CSS.
- **State Management**: React `useState` and `useEffect` in `app/page.tsx`.
- **Script Engine**: Custom regex-based parser in `lib/vn-parser.ts`.
- **Renderer**: Dynamic React component in `components/VNPreview.tsx` that reconstructs the scene state.
- **Persistence**: 
    - Automatic `localStorage` sync for current session.
    - Script export/import as `.vns` files.
    - Inline Base64 image embedding for portable project files.

## 📝 Script Syntax

### Basic Commands
- `say Character "Dialogue"`: Display dialogue for a character.
- `say "Dialogue"`: Narrator text.
- `sprite Char Emotion at Position`: Place a character on screen.
    - Positions: `pos1` to `pos8`.
- `wait 2s`: Pause for duration (can add `skippable`).
- `label Name`: Define a jump point.
- `choice "Text" jump:Label`: Create a branching choice.
- `define_sprite Char ID "URL"`: Register a sprite asset.

### Rich Text Modifiers
- `b"Bold"`
- `i"Italic"`
- `u"Underline"`
- `c"Red"(c:red)`
- `w"Wait"(w:1s)`

## 🚀 Production Deployment

### Docker (Recommended)
The project is optimized for Docker using Next.js standalone output.

```bash
# Build the image
docker build -t vn-editor .

# Run the container
docker run -p 3000:3000 vn-editor
```

### Manual Build
```bash
npm install
npm run build
npm run start
```