Flyff Universe Skill Simulator

A comprehensive skill build simulator for Flyff Universe, built with Next.js 15 and React Flow.
Plan and visualize your character's skill build before investing in-game with our interactive skill tree.
All skill data is directly retrieved from Flyff Universe API.

🌟 Features

• Interactive Skill Tree: Visualize skill paths and dependencies with React Flow
• All Classes Supported: Complete skill trees for every class in Flyff Universe (Knight, Blade, Elementor, Ranger, Billposter, Ringmaster, Jester, Acrobat, Assist, Mercenary, Psychikeeper, Vagrant, Magician)
• Build Sharing & Loading: Share your builds via URL or import/export JSON files
• Multi-Language Support: Available in 12 languages (English, Thai, Japanese, Vietnamese, Chinese, Brazilian Portuguese, German, French, Indonesian, Korean, Spanish)
• Real-time Updates: See skill effects, requirements, and character stats instantly
• Mobile Friendly: Fully responsive design with PWA support
• Theme Customization: Multiple theme colors and dark/light mode
• No Backend Required: All data stored in URL parameters with LZ-string compression
• Screenshot Feature: Capture and save your skill builds as images
• Character Level Management: Dynamic skill point calculation based on character level

🚀 Live Demo

Visit: Flyff Skill Simulator

💻 Getting Started

1. Clone the repository:

git clone https://github.com/guysuvijak/flyff-skill-simulator.git

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

🛠️ Built With

• Next.js 15 - React Framework with App Router
• React Flow - Interactive node-based skill tree visualization
• Zustand - Lightweight state management
• TailwindCSS - Utility-first CSS framework
• TypeScript - Type safety and better development experience
• Shadcn UI - Accessible UI components (Dialog, Dropdown, Select, Tooltip, etc.)
• Framer Motion - Smooth animations and transitions
• Lucide React - Beautiful icon library
• LZ-string - Data compression for URL sharing

🗺️ Project Structure

flyff-skill-simulator/
├── public/                    # Static assets
│   ├── data/                  # Static Flyff data (classes, skills)
│   ├── images/class/          # Class icons and images
│   ├── cursors/               # Custom cursor assets
│   └── metadata/              # Demo images and screenshots
├── src/
│   ├── app/                   # Next.js App Router (layout, page)
│   ├── components/            # React components
│   │   ├── ui/                # shadcn/ui components
│   │   ├── SkillNode.tsx      # Interactive skill nodes
│   │   ├── Navbar.tsx         # Main navigation
│   │   └── EdgeLabel.tsx      # Skill tree edge labels
│   ├── stores/                # Zustand state management
│   │   ├── classStore.ts      # Class selection state
│   │   ├── skillStore.ts      # Skill data and levels
│   │   ├── characterStore.ts  # Character stats
│   │   └── websiteStore.ts    # UI settings and theme
│   ├── hooks/                 # Custom React hooks
│   ├── locales/               # Multi-language support (12 languages)
│   ├── providers/             # Context providers
│   ├── types/                 # TypeScript type definitions
│   └── utils/                 # Utility functions
│       ├── shareBuild.ts      # Build sharing and loading
│       ├── skillUtils.ts      # Skill calculations
│       └── classUtils.ts      # Class data handling

🌍 Supported Languages

• 🇺🇸 English (en)
• 🇹🇭 Thai (th)
• 🇯🇵 Japanese (jp)
• 🇻🇳 Vietnamese (vi)
• 🇨🇳 Chinese Simplified (cns)
• 🇧🇷 Brazilian Portuguese (br)
• 🇩🇪 German (de)
• 🇫🇷 French (fr)
• 🇮🇩 Indonesian (id)
• 🇰🇷 Korean (kr)
• 🇪🇸 Spanish (sp)

📱 PWA Features

• Offline Support - Works without internet connection
• Installable - Add to home screen on mobile devices
• Fast Loading - Optimized with Next.js and caching
• Responsive Design - Works perfectly on all screen sizes

🔧 Development Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint
npm run format   # Format code with Prettier
npm run check    # Run lint and format check

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📈 Version History

Current version: 1.5.5f (2025-07-20)

See CHANGELOG.md for detailed version history and updates.

🙏 Acknowledgments

• ☕ Support the project: Buy me a coffee
• ☎️ Contact: Facebook or Discord
• 🌟 Star the repository if you find this project helpful!

---

Made with ❤️ for the Flyff Universe community