datingsim-visual-editor/GEMINI.md

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.

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

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

Manual Build

npm install
npm run build
npm run start