@quantabit/achievement-sdk

QuantaBit 成就系统 SDK - 提供成就徽章、里程碑、解锁动画功能

📦 安装

npm install @quantabit/achievement-sdk
# 或
yarn add @quantabit/achievement-sdk

🚀 快速开始

1. 引入 Provider

import {
  AchievementProvider,
  UnlockAnimation,
} from "@quantabit/achievement-sdk";
import "@quantabit/achievement-sdk/styles.css";

function App() {
  return (
    <AchievementProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
      onUnlock={(achievement) => console.log("解锁成就:", achievement)}
    >
      <YourComponent />
      <UnlockAnimation /> {/* 全局解锁动画 */}
    </AchievementProvider>
  );
}

2. 使用组件

import { AchievementBadge } from "@quantabit/achievement-sdk";

// 成就徽章
<AchievementBadge
  achievement={achievementData}
  size="medium"
  showProgress
  onClick={(a) => viewDetail(a)}
/>;

3. 使用 Hooks

import { useAchievement } from "@quantabit/achievement-sdk";

function MyComponent() {
  const {
    achievements, // 所有成就
    myAchievements, // 我的成就
    stats, // 统计数据
    loadAchievements, // 加载成就
    claimReward, // 领取奖励
    showUnlockAnimation, // 显示解锁动画
  } = useAchievement();

  return <div>...</div>;
}

4. 触发解锁动画

const { showUnlockAnimation } = useAchievement();

// 当检测到新成就解锁时
showUnlockAnimation({
  id: "first_login",
  name: "初次登录",
  icon: "🎉",
  rarity: "common",
  reward: { name: "积分", amount: 100, icon: "⭐" },
});

🏆 稀有度等级

import { Rarity } from "@quantabit/achievement-sdk";

Rarity.COMMON; // ⚪ 普通
Rarity.RARE; // 🔵 稀有
Rarity.EPIC; // 🟣 史诗
Rarity.LEGENDARY; // 🟠 传说

📄 许可证

MIT License