react-achievements 1.0.3 → 1.0.5

package/README.md

@@ -0,0 +1,143 @@
+# Welcome to React-Achievements!
+
+A flexible and customizable achievement system for React applications.
+
+## Installation
+
+The first thing you need to do is install react-achievements:
+
+`npm install react-achievements`
+
+or if you're using yarn:
+`yarn add react-achievements`
+
+## Usage
+
+### Set up the AchievementProvider
+
+Wrap your app or a part of your app with the AchievementProvider:
+
+```
+import { AchievementProvider } from 'react-achievements';
+import achievementConfig from './achievementConfig';
+
+function App() {
+  return (
+    <AchievementProvider config={achievementConfig} initialState={<your_object>}>
+      {/* Your app components */}
+    </AchievementProvider>
+  );
+}
+```
+
+The object that you pass to the initialState prop should have keys that match the metrics defined in your achievement configuration. For example, if your achievement configuration defines a 'transactions' metric, your initialState object should look like this:
+```typescript
+const user = {
+    transactions: [
+        {
+            id: 1,
+            amount: 100
+        }, 
+      {
+          id: 2,
+          amount: 200
+      }
+    ]
+}
+```
+
+### Create an achievement configuration
+Create a file (e.g., achievementConfig.js) to define your achievements:
+```javascript
+const achievementConfig = {
+  transactions: [
+    {
+      check: (value) => value.length >= 1,
+      data: {
+        id: 'first_transaction',
+        title: 'First Transaction',
+        description: 'Completed your first transaction',
+        icon: '/path/to/icon.png'
+      }
+    },
+    {
+      check: (value) => value.length >= 10,
+      data: {
+        id: 'ten_transactions',
+        title: 'Ten Transactions',
+        description: 'Completed ten transactions',
+        icon: '/path/to/icon.png'
+      }
+    },
+  ],
+  // Add more metrics and achievements as needed
+};
+
+export default achievementConfig;
+```
+
+###  Use the useAchievement hook
+In your components, use the useAchievement hook to update metrics and trigger achievement checks:
+```javascript
+import { useAchievement } from 'react-achievements';
+
+function TransactionComponent() {
+  const { setMetrics } = useAchievement();
+
+  const handleNewTransaction = () => {
+    // Your transaction logic here
+    setMetrics(prevMetrics => ({
+      ...prevMetrics,
+      transactions: (prevMetrics.transactions || 0) + 1
+    }));
+  };
+
+  return (
+    <button onClick={handleNewTransaction}>New Transaction</button>
+  );
+}
+```
+
+## Features
+
+### Flexible Achievement System: 
+Define custom metrics and achievement conditions.
+
+### Automatic Achievement Tracking: 
+Achievements are automatically checked and unlocked when metrics change.
+
+### Achievement Notifications: 
+A modal pops up when an achievement is unlocked.
+
+### Persistent Achievements: 
+Achieved achievements are stored in local storage.
+
+### Achievement Gallery: 
+Users can view all their unlocked achievements.
+
+### Customizable UI: 
+The achievement modal and badges button can be styled to fit your app's design.
+Confetti Effect: A celebratory confetti effect is displayed when an achievement is unlocked.
+
+## API
+### AchievementProvider
+#### Props:
+
+1. config: An object defining your metrics and achievements.
+storageKey (optional): A string to use as the key for localStorage. Default: 'react-achievements'
+badgesButtonPosition (optional): Position of the badges button. Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'. Default: 'top-right'
+
+2. useAchievement Hook Returns an object with:
+
+3. setMetrics: Function to update the metrics.
+
+4. metrics: Current metrics object. 
+5. achievedAchievements: Array of achieved achievement IDs. 
+6. showBadgesModal: Function to manually show the badges modal.
+
+Customization
+You can customize the appearance of the achievement modal, badges modal, and badges button by modifying their respective components in the package.
+License
+MIT
+Copy
+This README provides a comprehensive overview of how to use the react-achievements package, including setup, usage examples, features, and API details. You may want to adjust or expand certain sections based on the specific implementation details or additional features of your package.

package/dist/components/AchievementModal.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { AchievementData } from '../types';
 interface AchievementModalProps {
     show: boolean;
-    message: string;
+    achievement: AchievementData | null;
     onClose: () => void;
 }
 declare const _default: React.NamedExoticComponent<AchievementModalProps>;

package/dist/components/BadgesModal.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BadgeConfig } from '../badges';
+import { AchievementData } from '../types';
 interface BadgesModalProps {
     show: boolean;
-    badges: BadgeConfig[];
+    achievements: AchievementData[];
     onClose: () => void;
 }
 declare const _default: React.NamedExoticComponent<BadgesModalProps>;

package/dist/components/ConfettiWrapper.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ConfettiProps } from 'react-confetti';
 interface ConfettiWrapperProps {
     show: boolean;
+    confettiProps?: Partial<ConfettiProps>;
 }
 declare const ConfettiWrapper: React.FC<ConfettiWrapperProps>;
 export default ConfettiWrapper;

package/dist/context/AchievementContext.d.ts

@@ -1,20 +1,16 @@
 import React, { ReactNode } from 'react';
-import { BadgeConfig } from '../badges';
-import { LevelConfig } from '../levels';
+import { Metrics, AchievementConfig } from '../types';
 interface AchievementContextProps {
-    metric: number;
-    setMetric: (value: number) => void;
-    badges: BadgeConfig[];
-    levels: LevelConfig[];
-    achievedLevels: number[];
-    handleAchieve: (level: number, message: string) => void;
-    showAchievementModal: (message: string) => void;
+    metrics: Metrics;
+    setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
+    achievedAchievements: string[];
+    checkAchievements: () => void;
     showBadgesModal: () => void;
 }
 interface AchievementProviderProps {
     children: ReactNode;
-    initialBadges?: BadgeConfig[];
-    initialLevels?: LevelConfig[];
+    config: AchievementConfig;
+    initialState?: Record<string, any>;
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }

package/dist/index.cjs.js

@@ -2,30 +2,8 @@
 
 var React = require('react');
 
-const defaultBadges = [
-    {
-        id: 'beginner',
-        icon: '/path/to/beginner-icon.png',
-        title: 'Beginner',
-        description: 'Achieved beginner level',
-    },
-    {
-        id: 'intermediate',
-        icon: '/path/to/intermediate-icon.png',
-        title: 'Intermediate',
-        description: 'Achieved intermediate level',
-    },
-    // Add more badges as needed
-];
-
-const defaultLevels = [
-    { level: 1, threshold: 10, badgeId: 'beginner' },
-    { level: 2, threshold: 50, badgeId: 'intermediate' },
-    // Add more levels as needed
-];
-
-const AchievementModal = ({ show, message, onClose }) => {
-    if (!show)
+const AchievementModal = ({ show, achievement, onClose }) => {
+    if (!show || !achievement)
         return null;
     const modalStyle = {
         position: 'fixed',
@@ -51,12 +29,14 @@ const AchievementModal = ({ show, message, onClose }) => {
         React.createElement("div", { style: overlayStyle, onClick: onClose }),
         React.createElement("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "achievement-title" },
             React.createElement("h2", { id: "achievement-title" }, "Achievement Unlocked!"),
-            React.createElement("p", null, message),
+            React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
+            React.createElement("h3", null, achievement.title),
+            React.createElement("p", null, achievement.description),
             React.createElement("button", { onClick: onClose }, "Okay"))));
 };
 var AchievementModal$1 = React.memo(AchievementModal);
 
-const BadgesModal = ({ show, badges, onClose }) => {
+const BadgesModal = ({ show, achievements, onClose }) => {
     if (!show)
         return null;
     const modalStyle = {
@@ -86,10 +66,10 @@ const BadgesModal = ({ show, badges, onClose }) => {
         React.createElement("div", { style: overlayStyle, onClick: onClose }),
         React.createElement("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "badges-title" },
             React.createElement("h2", { id: "badges-title" }, "Your Achievements"),
-            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' } }, badges.map(badge => (React.createElement("div", { key: badge.id, style: { margin: '10px', textAlign: 'center' } },
-                React.createElement("img", { src: badge.icon, alt: badge.title, style: { width: '50px', height: '50px' } }),
-                React.createElement("h4", null, badge.title),
-                React.createElement("p", null, badge.description))))),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' } }, achievements.map(achievement => (React.createElement("div", { key: achievement.id, style: { margin: '10px', textAlign: 'center' } },
+                React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
+                React.createElement("h4", null, achievement.title),
+                React.createElement("p", null, achievement.description))))),
             React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
 };
 var BadgesModal$1 = React.memo(BadgesModal);
@@ -111,52 +91,171 @@ const BadgesButton = ({ onClick, position }) => {
 };
 var BadgesButton$1 = React.memo(BadgesButton);
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var reactConfetti_min = {exports: {}};
+
+(function (module, exports) {
+	!function(t,e){module.exports=e(React);}("undefined"!=typeof self?self:commonjsGlobal,(function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r});},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0});},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(e,n){e.exports=t;},function(t,e,n){var r={linear:function(t,e,n,r){return (n-e)*t/r+e},easeInQuad:function(t,e,n,r){return (n-e)*(t/=r)*t+e},easeOutQuad:function(t,e,n,r){return -(n-e)*(t/=r)*(t-2)+e},easeInOutQuad:function(t,e,n,r){var i=n-e;return (t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,n,r){return (n-e)*(t/=r)*t*t+e},easeOutCubic:function(t,e,n,r){return (n-e)*((t=t/r-1)*t*t+1)+e},easeInOutCubic:function(t,e,n,r){var i=n-e;return (t/=r/2)<1?i/2*t*t*t+e:i/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,n,r){return (n-e)*(t/=r)*t*t*t+e},easeOutQuart:function(t,e,n,r){return -(n-e)*((t=t/r-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,n,r){var i=n-e;return (t/=r/2)<1?i/2*t*t*t*t+e:-i/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,n,r){return (n-e)*(t/=r)*t*t*t*t+e},easeOutQuint:function(t,e,n,r){return (n-e)*((t=t/r-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,n,r){var i=n-e;return (t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,n,r){var i=n-e;return -i*Math.cos(t/r*(Math.PI/2))+i+e},easeOutSine:function(t,e,n,r){return (n-e)*Math.sin(t/r*(Math.PI/2))+e},easeInOutSine:function(t,e,n,r){return -(n-e)/2*(Math.cos(Math.PI*t/r)-1)+e},easeInExpo:function(t,e,n,r){return 0==t?e:(n-e)*Math.pow(2,10*(t/r-1))+e},easeOutExpo:function(t,e,n,r){var i=n-e;return t==r?e+i:i*(1-Math.pow(2,-10*t/r))+e},easeInOutExpo:function(t,e,n,r){var i=n-e;return 0===t?e:t===r?e+i:(t/=r/2)<1?i/2*Math.pow(2,10*(t-1))+e:i/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,n,r){return -(n-e)*(Math.sqrt(1-(t/=r)*t)-1)+e},easeOutCirc:function(t,e,n,r){return (n-e)*Math.sqrt(1-(t=t/r-1)*t)+e},easeInOutCirc:function(t,e,n,r){var i=n-e;return (t/=r/2)<1?-i/2*(Math.sqrt(1-t*t)-1)+e:i/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(t,e,n,r){var i,o,a,c=n-e;return a=1.70158,0===t?e:1==(t/=r)?e+c:((o=0)||(o=.3*r),(i=c)<Math.abs(c)?(i=c,a=o/4):a=o/(2*Math.PI)*Math.asin(c/i),-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)+e)},easeOutElastic:function(t,e,n,r){var i,o,a,c=n-e;return a=1.70158,0===t?e:1==(t/=r)?e+c:((o=0)||(o=.3*r),(i=c)<Math.abs(c)?(i=c,a=o/4):a=o/(2*Math.PI)*Math.asin(c/i),i*Math.pow(2,-10*t)*Math.sin((t*r-a)*(2*Math.PI)/o)+c+e)},easeInOutElastic:function(t,e,n,r){var i,o,a,c=n-e;return a=1.70158,0===t?e:2==(t/=r/2)?e+c:((o=0)||(o=r*(.3*1.5)),(i=c)<Math.abs(c)?(i=c,a=o/4):a=o/(2*Math.PI)*Math.asin(c/i),t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)*-.5+e:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)*.5+c+e)},easeInBack:function(t,e,n,r,i){return void 0===i&&(i=1.70158),(n-e)*(t/=r)*t*((i+1)*t-i)+e},easeOutBack:function(t,e,n,r,i){return void 0===i&&(i=1.70158),(n-e)*((t=t/r-1)*t*((i+1)*t+i)+1)+e},easeInOutBack:function(t,e,n,r,i){var o=n-e;return void 0===i&&(i=1.70158),(t/=r/2)<1?o/2*(t*t*((1+(i*=1.525))*t-i))+e:o/2*((t-=2)*t*((1+(i*=1.525))*t+i)+2)+e},easeInBounce:function(t,e,n,i){var o=n-e;return o-r.easeOutBounce(i-t,0,o,i)+e},easeOutBounce:function(t,e,n,r){var i=n-e;return (t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e},easeInOutBounce:function(t,e,n,i){var o=n-e;return t<i/2?.5*r.easeInBounce(2*t,0,o,i)+e:.5*r.easeOutBounce(2*t-i,0,o,i)+.5*o+e}};t.exports=r;},function(t,e,n){t.exports=n(3);},function(t,e,n){n.r(e),n.d(e,"ReactConfetti",(function(){return Q}));var r,i,o=n(0),a=n.n(o),c=n(1),s=n.n(c);function u(t,e){return t+Math.random()*(e-t)}function f(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function h(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}!function(t){t[t.Circle=0]="Circle",t[t.Square=1]="Square",t[t.Strip=2]="Strip";}(r||(r={})),function(t){t[t.Positive=1]="Positive",t[t.Negative=-1]="Negative";}(i||(i={}));var l=function(){function t(e,n,r,o){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),h(this,"context",void 0),h(this,"radius",void 0),h(this,"x",void 0),h(this,"y",void 0),h(this,"w",void 0),h(this,"h",void 0),h(this,"vx",void 0),h(this,"vy",void 0),h(this,"shape",void 0),h(this,"angle",void 0),h(this,"angularSpin",void 0),h(this,"color",void 0),h(this,"rotateY",void 0),h(this,"rotationDirection",void 0),h(this,"getOptions",void 0),this.getOptions=n;var a,c,s=this.getOptions(),f=s.colors,l=s.initialVelocityX,p=s.initialVelocityY;this.context=e,this.x=r,this.y=o,this.w=u(5,20),this.h=u(5,20),this.radius=u(5,10),this.vx="number"==typeof l?u(-l,l):u(l.min,l.max),this.vy="number"==typeof p?u(-p,0):u(p.min,p.max),this.shape=(a=0,c=2,Math.floor(a+Math.random()*(c-a+1))),this.angle=u(0,360)*Math.PI/180,this.angularSpin=u(-.2,.2),this.color=f[Math.floor(Math.random()*f.length)],this.rotateY=u(0,1),this.rotationDirection=u(0,1)?i.Positive:i.Negative;}var e,n;return e=t,(n=[{key:"update",value:function(){var t=this.getOptions(),e=t.gravity,n=t.wind,o=t.friction,a=t.opacity,c=t.drawShape;this.x+=this.vx,this.y+=this.vy,this.vy+=e,this.vx+=n,this.vx*=o,this.vy*=o,this.rotateY>=1&&this.rotationDirection===i.Positive?this.rotationDirection=i.Negative:this.rotateY<=-1&&this.rotationDirection===i.Negative&&(this.rotationDirection=i.Positive);var s=.1*this.rotationDirection;if(this.rotateY+=s,this.angle+=this.angularSpin,this.context.save(),this.context.translate(this.x,this.y),this.context.rotate(this.angle),this.context.scale(1,this.rotateY),this.context.rotate(this.angle),this.context.beginPath(),this.context.fillStyle=this.color,this.context.strokeStyle=this.color,this.context.globalAlpha=a,this.context.lineCap="round",this.context.lineWidth=2,c&&"function"==typeof c)c.call(this,this.context);else switch(this.shape){case r.Circle:this.context.beginPath(),this.context.arc(0,0,this.radius,0,2*Math.PI),this.context.fill();break;case r.Square:this.context.fillRect(-this.w/2,-this.h/2,this.w,this.h);break;case r.Strip:this.context.fillRect(-this.w/6,-this.h/2,this.w/3,this.h);}this.context.closePath(),this.context.restore();}}])&&f(e.prototype,n),t}();function p(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var v=function t(e,n){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),p(this,"canvas",void 0),p(this,"context",void 0),p(this,"getOptions",void 0),p(this,"x",0),p(this,"y",0),p(this,"w",0),p(this,"h",0),p(this,"lastNumberOfPieces",0),p(this,"tweenInitTime",Date.now()),p(this,"particles",[]),p(this,"particlesGenerated",0),p(this,"removeParticleAt",(function(t){r.particles.splice(t,1);})),p(this,"getParticle",(function(){var t=u(r.x,r.w+r.x),e=u(r.y,r.h+r.y);return new l(r.context,r.getOptions,t,e)})),p(this,"animate",(function(){var t=r.canvas,e=r.context,n=r.particlesGenerated,i=r.lastNumberOfPieces,o=r.getOptions(),a=o.run,c=o.recycle,s=o.numberOfPieces,u=o.debug,f=o.tweenFunction,h=o.tweenDuration;if(!a)return !1;var l=r.particles.length,p=c?l:n,v=Date.now();if(p<s){i!==s&&(r.tweenInitTime=v,r.lastNumberOfPieces=s);for(var y=r.tweenInitTime,d=f(v-y>h?h:Math.max(0,v-y),p,s,h),b=Math.round(d-p),g=0;g<b;g++)r.particles.push(r.getParticle());r.particlesGenerated+=b;}return u&&(e.font="12px sans-serif",e.fillStyle="#333",e.textAlign="right",e.fillText("Particles: ".concat(l),t.width-10,t.height-20)),r.particles.forEach((function(e,n){e.update(),(e.y>t.height||e.y<-100||e.x>t.width+100||e.x<-100)&&(c&&p<=s?r.particles[n]=r.getParticle():r.removeParticleAt(n));})),l>0||p<s})),this.canvas=e;var i=this.canvas.getContext("2d");if(!i)throw new Error("Could not get canvas context");this.context=i,this.getOptions=n;};function y(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r);}return n}function d(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?y(Object(n),!0).forEach((function(e){g(t,e,n[e]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e));}));}return t}function b(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function g(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var O={width:"undefined"!=typeof window?window.innerWidth:300,height:"undefined"!=typeof window?window.innerHeight:200,numberOfPieces:200,friction:.99,wind:0,gravity:.1,initialVelocityX:4,initialVelocityY:10,colors:["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548"],opacity:1,debug:!1,tweenFunction:s.a.easeInOutQuad,tweenDuration:5e3,recycle:!0,run:!0},w=function(){function t(e,n){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),g(this,"canvas",void 0),g(this,"context",void 0),g(this,"_options",void 0),g(this,"generator",void 0),g(this,"rafId",void 0),g(this,"setOptionsWithDefaults",(function(t){var e={confettiSource:{x:0,y:0,w:r.canvas.width,h:0}};r._options=d(d(d({},e),O),t),Object.assign(r,t.confettiSource);})),g(this,"update",(function(){var t=r.options,e=t.run,n=t.onConfettiComplete,i=r.canvas,o=r.context;e&&(o.fillStyle="white",o.clearRect(0,0,i.width,i.height)),r.generator.animate()?r.rafId=requestAnimationFrame(r.update):(n&&"function"==typeof n&&r.generator.particlesGenerated>0&&n.call(r,r),r._options.run=!1);})),g(this,"reset",(function(){r.generator&&r.generator.particlesGenerated>0&&(r.generator.particlesGenerated=0,r.generator.particles=[],r.generator.lastNumberOfPieces=0);})),g(this,"stop",(function(){r.options={run:!1},r.rafId&&(cancelAnimationFrame(r.rafId),r.rafId=void 0);})),this.canvas=e;var i=this.canvas.getContext("2d");if(!i)throw new Error("Could not get canvas context");this.context=i,this.generator=new v(this.canvas,(function(){return r.options})),this.options=n,this.update();}var e,n;return e=t,(n=[{key:"options",get:function(){return this._options},set:function(t){var e=this._options&&this._options.run,n=this._options&&this._options.recycle;this.setOptionsWithDefaults(t),this.generator&&(Object.assign(this.generator,this.options.confettiSource),"boolean"==typeof t.recycle&&t.recycle&&!1===n&&(this.generator.lastNumberOfPieces=this.generator.particles.length)),"boolean"==typeof t.run&&t.run&&!1===e&&this.update();}}])&&b(e.prototype,n),t}();function m(t){return function(t){if(Array.isArray(t))return C(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||S(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(t){return (x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function P(){return (P=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);}return t}).apply(this,arguments)}function j(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r);}return n}function M(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?j(Object(n),!0).forEach((function(e){T(t,e,n[e]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e));}));}return t}function I(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],r=!0,i=!1,o=void 0;try{for(var a,c=t[Symbol.iterator]();!(r=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(t){i=!0,o=t;}finally{try{r||null==c.return||c.return();}finally{if(i)throw o}}return n}(t,e)||S(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(t,e){if(t){if("string"==typeof t)return C(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return "Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?C(t,e):void 0}}function C(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function D(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function E(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function _(t,e){return (_=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function R(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return !1}}();return function(){var n,r=F(t);if(e){var i=F(this).constructor;n=Reflect.construct(r,arguments,i);}else n=r.apply(this,arguments);return k(this,n)}}function k(t,e){return !e||"object"!==x(e)&&"function"!=typeof e?A(t):e}function A(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function F(t){return (F=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function T(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var B=a.a.createRef(),N=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&_(t,e);}(o,t);var e,n,i=R(o);function o(t){var e;D(this,o);for(var n=arguments.length,r=new Array(n>1?n-1:0),c=1;c<n;c++)r[c-1]=arguments[c];return T(A(e=i.call.apply(i,[this,t].concat(r))),"canvas",a.a.createRef()),T(A(e),"confetti",void 0),e.canvas=t.canvasRef||B,e}return e=o,(n=[{key:"componentDidMount",value:function(){if(this.canvas.current){var t=q(this.props)[0];this.confetti=new w(this.canvas.current,t);}}},{key:"componentDidUpdate",value:function(){var t=q(this.props)[0];this.confetti&&(this.confetti.options=t);}},{key:"componentWillUnmount",value:function(){this.confetti&&this.confetti.stop(),this.confetti=void 0;}},{key:"render",value:function(){var t=I(q(this.props),2),e=t[0],n=t[1],r=M({zIndex:2,position:"absolute",pointerEvents:"none",top:0,left:0,bottom:0,right:0},n.style);return a.a.createElement("canvas",P({width:e.width,height:e.height,ref:this.canvas},n,{style:r}))}}])&&E(e.prototype,n),o}(o.Component);function q(t){var e={},n={},r=[].concat(m(Object.keys(O)),["confettiSource","drawShape","onConfettiComplete"]),i=["canvasRef"];for(var o in t){var a=t[o];r.includes(o)?e[o]=a:i.includes(o)?i[o]=a:n[o]=a;}return [e,n,{}]}T(N,"defaultProps",M({},O)),T(N,"displayName","ReactConfetti");var Q=a.a.forwardRef((function(t,e){return a.a.createElement(N,P({canvasRef:e},t))}));e.default=Q;}]).default}));
+	
+} (reactConfetti_min));
+
+var reactConfetti_minExports = reactConfetti_min.exports;
+var Confetti = /*@__PURE__*/getDefaultExportFromCjs(reactConfetti_minExports);
+
+function on(obj) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
+    }
+    if (obj && obj.addEventListener) {
+        obj.addEventListener.apply(obj, args);
+    }
+}
+function off(obj) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
+    }
+    if (obj && obj.removeEventListener) {
+        obj.removeEventListener.apply(obj, args);
+    }
+}
+var isBrowser = typeof window !== 'undefined';
+
+var useEffectOnce = function (effect) {
+    React.useEffect(effect, []);
+};
+
+var useUnmount = function (fn) {
+    var fnRef = React.useRef(fn);
+    // update the ref each render so if it change the newest callback will be invoked
+    fnRef.current = fn;
+    useEffectOnce(function () { return function () { return fnRef.current(); }; });
+};
+
+var useRafState = function (initialState) {
+    var frame = React.useRef(0);
+    var _a = React.useState(initialState), state = _a[0], setState = _a[1];
+    var setRafState = React.useCallback(function (value) {
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(function () {
+            setState(value);
+        });
+    }, []);
+    useUnmount(function () {
+        cancelAnimationFrame(frame.current);
+    });
+    return [state, setRafState];
+};
+
+var useWindowSize = function (initialWidth, initialHeight) {
+    if (initialWidth === void 0) { initialWidth = Infinity; }
+    if (initialHeight === void 0) { initialHeight = Infinity; }
+    var _a = useRafState({
+        width: isBrowser ? window.innerWidth : initialWidth,
+        height: isBrowser ? window.innerHeight : initialHeight,
+    }), state = _a[0], setState = _a[1];
+    React.useEffect(function () {
+        if (isBrowser) {
+            var handler_1 = function () {
+                setState({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            };
+            on(window, 'resize', handler_1);
+            return function () {
+                off(window, 'resize', handler_1);
+            };
+        }
+    }, []);
+    return state;
+};
+
+const ConfettiWrapper = ({ show, confettiProps }) => {
+    const { width, height } = useWindowSize();
+    if (!show)
+        return null;
+    return (React.createElement(Confetti, Object.assign({ width: width, height: height }, confettiProps)));
+};
+
 const AchievementContext = React.createContext(undefined);
-const AchievementProvider = ({ children, initialBadges = defaultBadges, initialLevels = defaultLevels, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
-    const [metric, setMetric] = React.useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-metric`);
-        return saved ? parseInt(saved, 10) : 0;
+const AchievementProvider = ({ children, config, initialState = {}, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
+    const extractMetrics = (state) => {
+        return Object.keys(config).reduce((acc, key) => {
+            if (key in state) {
+                acc[key] = state[key];
+            }
+            return acc;
+        }, {});
+    };
+    const [metrics, setMetrics] = React.useState(() => {
+        const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
+        if (savedMetrics) {
+            return JSON.parse(savedMetrics);
+        }
+        return extractMetrics(initialState);
     });
-    const [achievedLevels, setAchievedLevels] = React.useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-levels`);
+    const [achievedAchievements, setAchievedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
-    const [badges] = React.useState(initialBadges);
-    const [levels] = React.useState(initialLevels);
-    const [achievementModalMessage, setAchievementModalMessage] = React.useState('');
+    const [newAchievement, setNewAchievement] = React.useState(null);
     const [showBadges, setShowBadges] = React.useState(false);
-    const handleAchieve = React.useCallback((level, message) => {
-        if (!achievedLevels.includes(level)) {
-            const newAchievedLevels = [...achievedLevels, level];
-            setAchievedLevels(newAchievedLevels);
-            localStorage.setItem(`${storageKey}-levels`, JSON.stringify(newAchievedLevels));
-            setAchievementModalMessage(message);
+    const [showConfetti, setShowConfetti] = React.useState(false);
+    React.useEffect(() => {
+        localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(metrics));
+    }, [metrics, storageKey]);
+    const checkAchievements = React.useCallback(() => {
+        const newAchievements = [];
+        Object.entries(config).forEach(([metricKey, conditions]) => {
+            const metricValue = metrics[metricKey];
+            conditions.forEach(condition => {
+                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                    newAchievements.push(condition.data);
+                }
+            });
+        });
+        if (newAchievements.length > 0) {
+            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
+            setAchievedAchievements(updatedAchievements);
+            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
+            setNewAchievement(newAchievements[0]);
+            setShowConfetti(true);
         }
-    }, [achievedLevels, storageKey]);
-    const showAchievementModal = React.useCallback((message) => {
-        setAchievementModalMessage(message);
-    }, []);
-    const showBadgesModal = React.useCallback(() => {
+    }, [config, metrics, achievedAchievements, storageKey]);
+    React.useEffect(() => {
+        checkAchievements();
+    }, [checkAchievements]);
+    const showBadgesModal = () => {
         setShowBadges(true);
-    }, []);
-    const contextValue = React.useMemo(() => ({
-        metric,
-        setMetric: (value) => {
-            setMetric(value);
-            localStorage.setItem(`${storageKey}-metric`, value.toString());
+    };
+    const contextValue = {
+        metrics,
+        setMetrics: (newMetrics) => {
+            setMetrics(prevMetrics => {
+                const updatedMetrics = typeof newMetrics === 'function' ? newMetrics(prevMetrics) : newMetrics;
+                return updatedMetrics;
+            });
         },
-        badges,
-        levels,
-        achievedLevels,
-        handleAchieve,
-        showAchievementModal,
+        achievedAchievements,
+        checkAchievements,
         showBadgesModal
-    }), [metric, badges, levels, achievedLevels, handleAchieve, showAchievementModal, showBadgesModal, storageKey]);
+    };
     return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        React.createElement(AchievementModal$1, { show: !!achievementModalMessage, message: achievementModalMessage, onClose: () => setAchievementModalMessage('') }),
-        React.createElement(BadgesModal$1, { show: showBadges, badges: badges.filter(badge => { var _a; return achievedLevels.includes(((_a = levels.find(level => level.badgeId === badge.id)) === null || _a === void 0 ? void 0 : _a.level) || -1); }), onClose: () => setShowBadges(false) }),
-        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition })));
+        React.createElement(AchievementModal$1, { show: !!newAchievement, achievement: newAchievement, onClose: () => {
+                setNewAchievement(null);
+                setShowConfetti(false);
+            } }),
+        React.createElement(BadgesModal$1, { show: showBadges, achievements: Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)), onClose: () => setShowBadges(false) }),
+        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
+        React.createElement(ConfettiWrapper, { show: showConfetti })));
 };
 const useAchievement = () => {
     const context = React.useContext(AchievementContext);
@@ -166,22 +265,6 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-    React.useEffect(() => {
-        if (metric >= threshold && !achievedLevels.includes(threshold)) {
-            onAchieve();
-            const levelConfig = levels.find(level => level.threshold === threshold);
-            if (levelConfig) {
-                setMetric(metric);
-                handleAchieve(levelConfig.level, message);
-            }
-        }
-    }, [metric, threshold, onAchieve, achievedLevels, levels, message, setMetric, handleAchieve]);
-    return React.createElement(React.Fragment, null, children);
-};
-var Achievement$1 = React.memo(Achievement);
-
-exports.Achievement = Achievement$1;
 exports.AchievementProvider = AchievementProvider;
+exports.ConfettiWrapper = ConfettiWrapper;
 exports.useAchievement = useAchievement;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { AchievementProvider, useAchievement } from './context/AchievementContext';
-import Achievement from './components/Achievement';
-import { BadgeConfig } from './badges';
-import { LevelConfig } from './levels';
-export { AchievementProvider, useAchievement, Achievement, BadgeConfig, LevelConfig };
+import { Metrics, AchievementConfig, AchievementData, AchievementCondition } from './types';
+import ConfettiWrapper from './components/ConfettiWrapper';
+export { AchievementProvider, useAchievement, Metrics, AchievementConfig, AchievementData, AchievementCondition, ConfettiWrapper };