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

Flyff Skill Simulator is an open-source project developed using Next.js and React Flow technologies. The website serves as a simulator for planning and visualizing skill builds in the Flyff Universe server, allowing players to experiment with different skill combinations and paths.
https://github.com/guysuvijak/flyff-skill-simulator

flyff-universe nextjs react-flow tailwindcss typescript

Last synced: 2 months ago
JSON representation

Flyff Skill Simulator is an open-source project developed using Next.js and React Flow technologies. The website serves as a simulator for planning and visualizing skill builds in the Flyff Universe server, allowing players to experiment with different skill combinations and paths.

• Host: GitHub
• URL: https://github.com/guysuvijak/flyff-skill-simulator
• Owner: guysuvijak
• License: mit
• Created: 2024-11-28T06:02:16.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-01-31T04:34:50.000Z (4 months ago)
• Last Synced: 2025-01-31T05:19:35.300Z (4 months ago)
• Topics: flyff-universe, nextjs, react-flow, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://flyffskillsimulator.vercel.app
• Size: 10.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flyff Universe Skill Simulator

![Project Banner](/public/metadata/manifest.png)

A skill build simulator for Flyff Universe, built with Next.js and React Flow.

Plan and visualize your character's skill build before investing in-game.

All skill data is directly retrieved from [Flyff Universe API](https://api.flyff.com).

## 🌟 Features

- **Interactive Skill Tree**: Visualize skill paths and dependencies

- **All Classes Supported**: Complete skill trees for every class in Flyff Universe

- **Build Sharing**: Share your builds via URL

- **Real-time Updates**: See skill effects and requirements instantly

- **Mobile Friendly**: Fully responsive design

- **No Backend Required**: All data stored in URL parameters

![Project Demo](/public/metadata/demo.png)

![Skill Description](/public/metadata/skill-description.png)

## 🚀 Live Demo

Visit: [Flyff Skill Simulator](https://flyff-skill-simulator.vercel.app)

![Project Demo Live](/public/metadata/demo-live.gif)

## 💻 Getting Started

1. Clone the repository:

```bash

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

```

2. Install dependencies:

```bash

npm install

# or

yarn install

# or

pnpm install

```

3. Run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

```

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

## 🛠️ Built With

-  Next.js - React Framework

-  React Flow - Node-based Visualization

-  Zustand - State Management

-  TailwindCSS - Styling

-  TypeScript - Type Safety

## 🗺️ Project Structure

```bash

flyff-skill-simulator/

├── public/              # Static assets

│   ├── data/            # Static Flyff Data

│   └── images/class/    # Static Class Image Icon

└── src/

    ├── app/             # layout & page next.js

    ├── components/      # React & React Flow components

    ├── store/           # Zustand store

    └── utils/           # Frequently used utility functions

```

## 📝 License

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

## 🙏 Acknowledgments

Flyff Universe for the amazing game. The Flyff community for support and feedback :heart: