react-achievements 1.0.3 → 1.0.4

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,15 @@
 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) => void;
+    achievedAchievements: string[];
+    checkAchievements: () => void;
     showBadgesModal: () => void;
 }
 interface AchievementProviderProps {
     children: ReactNode;
-    initialBadges?: BadgeConfig[];
-    initialLevels?: LevelConfig[];
+    config: AchievementConfig;
     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,149 @@ const BadgesButton = ({ onClick, position }) => {
 };
 var BadgesButton$1 = React.memo(BadgesButton);
 
-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;
+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);
     });
-    const [achievedLevels, setAchievedLevels] = React.useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-levels`);
+    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, config, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
+    const [metrics, setMetrics] = React.useState({});
+    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);
+    const checkAchievements = () => {
+        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(() => {
+    };
+    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(newMetrics);
+            checkAchievements();
         },
-        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 +243,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 };

package/dist/index.esm.js

@@ -1,29 +1,7 @@
-import React, { createContext, useState, useCallback, useMemo, useContext, useEffect } from '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)
+import React, { useEffect, useRef, useState, useCallback, createContext, useContext } from 'react';
+
+const AchievementModal = ({ show, achievement, onClose }) => {
+    if (!show || !achievement)
         return null;
     const modalStyle = {
         position: 'fixed',
@@ -49,12 +27,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 = {
@@ -84,10 +64,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);
@@ -109,52 +89,149 @@ const BadgesButton = ({ onClick, position }) => {
 };
 var BadgesButton$1 = React.memo(BadgesButton);
 
-const AchievementContext = createContext(undefined);
-const AchievementProvider = ({ children, initialBadges = defaultBadges, initialLevels = defaultLevels, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
-    const [metric, setMetric] = useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-metric`);
-        return saved ? parseInt(saved, 10) : 0;
+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) {
+    useEffect(effect, []);
+};
+
+var useUnmount = function (fn) {
+    var fnRef = 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 = useRef(0);
+    var _a = useState(initialState), state = _a[0], setState = _a[1];
+    var setRafState = useCallback(function (value) {
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(function () {
+            setState(value);
+        });
+    }, []);
+    useUnmount(function () {
+        cancelAnimationFrame(frame.current);
     });
-    const [achievedLevels, setAchievedLevels] = useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-levels`);
+    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];
+    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 = createContext(undefined);
+const AchievementProvider = ({ children, config, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
+    const [metrics, setMetrics] = useState({});
+    const [achievedAchievements, setAchievedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
-    const [badges] = useState(initialBadges);
-    const [levels] = useState(initialLevels);
-    const [achievementModalMessage, setAchievementModalMessage] = useState('');
+    const [newAchievement, setNewAchievement] = useState(null);
     const [showBadges, setShowBadges] = useState(false);
-    const handleAchieve = 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] = useState(false);
+    const checkAchievements = () => {
+        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 = useCallback((message) => {
-        setAchievementModalMessage(message);
-    }, []);
-    const showBadgesModal = useCallback(() => {
+    };
+    const showBadgesModal = () => {
         setShowBadges(true);
-    }, []);
-    const contextValue = useMemo(() => ({
-        metric,
-        setMetric: (value) => {
-            setMetric(value);
-            localStorage.setItem(`${storageKey}-metric`, value.toString());
+    };
+    const contextValue = {
+        metrics,
+        setMetrics: (newMetrics) => {
+            setMetrics(newMetrics);
+            checkAchievements();
         },
-        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 = useContext(AchievementContext);
@@ -164,20 +241,4 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-    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);
-
-export { Achievement$1 as Achievement, AchievementProvider, useAchievement };
+export { AchievementProvider, ConfettiWrapper, useAchievement };

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+export type MetricValue = number | boolean | string | any;
+export interface Metrics {
+    [key: string]: MetricValue;
+}
+export interface AchievementData {
+    id: string;
+    title: string;
+    description: string;
+    icon: string;
+}
+export interface AchievementCondition {
+    check: (metricValue: MetricValue) => boolean;
+    data: AchievementData;
+}
+export interface AchievementConfig {
+    [metricKey: string]: AchievementCondition[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",

package/public/badges/icon1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>

package/src/components/AchievementModal.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import { AchievementData } from '../types';
 
 interface AchievementModalProps {
     show: boolean;
-    message: string;
+    achievement: AchievementData | null;
     onClose: () => void;
 }
 
-const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onClose }) => {
-    if (!show) return null;
+const AchievementModal: React.FC<AchievementModalProps> = ({ show, achievement, onClose }) => {
+    if (!show || !achievement) return null;
 
     const modalStyle: React.CSSProperties = {
         position: 'fixed',
@@ -36,7 +37,9 @@ const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onCl
             <div style={overlayStyle} onClick={onClose} />
             <div style={modalStyle} role="dialog" aria-modal="true" aria-labelledby="achievement-title">
                 <h2 id="achievement-title">Achievement Unlocked!</h2>
-                <p>{message}</p>
+                <img src={achievement.icon} alt={achievement.title} style={{ width: '50px', height: '50px' }} />
+                <h3>{achievement.title}</h3>
+                <p>{achievement.description}</p>
                 <button onClick={onClose}>Okay</button>
             </div>
         </>

package/src/components/BadgesModal.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { BadgeConfig } from '../badges';
+import { AchievementData } from '../types';
 
 interface BadgesModalProps {
     show: boolean;
-    badges: BadgeConfig[];
+    achievements: AchievementData[];
     onClose: () => void;
 }
 
-const BadgesModal: React.FC<BadgesModalProps> = ({ show, badges, onClose }) => {
+const BadgesModal: React.FC<BadgesModalProps> = ({ show, achievements, onClose }) => {
     if (!show) return null;
 
     const modalStyle: React.CSSProperties = {
@@ -41,11 +41,11 @@ const BadgesModal: React.FC<BadgesModalProps> = ({ show, badges, onClose }) => {
             <div style={modalStyle} role="dialog" aria-modal="true" aria-labelledby="badges-title">
                 <h2 id="badges-title">Your Achievements</h2>
                 <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
-                    {badges.map(badge => (
-                        <div key={badge.id} style={{ margin: '10px', textAlign: 'center' }}>
-                            <img src={badge.icon} alt={badge.title} style={{ width: '50px', height: '50px' }} />
-                            <h4>{badge.title}</h4>
-                            <p>{badge.description}</p>
+                    {achievements.map(achievement => (
+                        <div key={achievement.id} style={{ margin: '10px', textAlign: 'center' }}>
+                            <img src={achievement.icon} alt={achievement.title} style={{ width: '50px', height: '50px' }} />
+                            <h4>{achievement.title}</h4>
+                            <p>{achievement.description}</p>
                         </div>
                     ))}
                 </div>

package/src/components/ConfettiWrapper.tsx

@@ -1,15 +1,25 @@
 import React from 'react';
 import Confetti from 'react-confetti';
 import { useWindowSize } from 'react-use';
+import { ConfettiProps } from 'react-confetti';
 
 interface ConfettiWrapperProps {
     show: boolean;
+    confettiProps?: Partial<ConfettiProps>;
 }
 
-const ConfettiWrapper: React.FC<ConfettiWrapperProps> = ({ show }) => {
+const ConfettiWrapper: React.FC<ConfettiWrapperProps> = ({ show, confettiProps }) => {
     const { width, height } = useWindowSize();
 
-    return show ? <Confetti width={width} height={height} /> : null;
+    if (!show) return null;
+
+    return (
+        <Confetti
+            width={width}
+            height={height}
+            {...confettiProps}
+        />
+    );
 };
 
-export default ConfettiWrapper;
+export default ConfettiWrapper;

package/src/context/AchievementContext.tsx

@@ -1,25 +1,21 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback, useMemo } from 'react';
-import { defaultBadges, BadgeConfig } from '../badges';
-import { defaultLevels, LevelConfig } from '../levels';
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { Metrics, AchievementConfig, AchievementData } from '../types';
 import AchievementModal from '../components/AchievementModal';
 import BadgesModal from '../components/BadgesModal';
 import BadgesButton from '../components/BadgesButton';
+import ConfettiWrapper from '../components/ConfettiWrapper';
 
 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) => void;
+    achievedAchievements: string[];
+    checkAchievements: () => void;
     showBadgesModal: () => void;
 }
 
 interface AchievementProviderProps {
     children: ReactNode;
-    initialBadges?: BadgeConfig[];
-    initialLevels?: LevelConfig[];
+    config: AchievementConfig;
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
@@ -28,69 +24,75 @@ const AchievementContext = createContext<AchievementContextProps | undefined>(un
 
 export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                                                                             children,
-                                                                            initialBadges = defaultBadges,
-                                                                            initialLevels = defaultLevels,
+                                                                            config,
                                                                             storageKey = 'react-achievements',
                                                                             badgesButtonPosition = 'top-right'
                                                                         }) => {
-    const [metric, setMetric] = useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-metric`);
-        return saved ? parseInt(saved, 10) : 0;
-    });
-    const [achievedLevels, setAchievedLevels] = useState<number[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-levels`);
+    const [metrics, setMetrics] = useState<Metrics>({});
+    const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
-    const [badges] = useState<BadgeConfig[]>(initialBadges);
-    const [levels] = useState<LevelConfig[]>(initialLevels);
-    const [achievementModalMessage, setAchievementModalMessage] = useState('');
+    const [newAchievement, setNewAchievement] = useState<AchievementData | null>(null);
     const [showBadges, setShowBadges] = useState(false);
+    const [showConfetti, setShowConfetti] = useState(false);
 
-    const handleAchieve = useCallback((level: number, message: string) => {
-        if (!achievedLevels.includes(level)) {
-            const newAchievedLevels = [...achievedLevels, level];
-            setAchievedLevels(newAchievedLevels);
-            localStorage.setItem(`${storageKey}-levels`, JSON.stringify(newAchievedLevels));
-            setAchievementModalMessage(message);
-        }
-    }, [achievedLevels, storageKey]);
+    const checkAchievements = () => {
+        const newAchievements: AchievementData[] = [];
 
-    const showAchievementModal = useCallback((message: string) => {
-        setAchievementModalMessage(message);
-    }, []);
+        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);
+        }
+    };
 
-    const showBadgesModal = useCallback(() => {
+    const showBadgesModal = () => {
         setShowBadges(true);
-    }, []);
+    };
 
-    const contextValue = useMemo(() => ({
-        metric,
-        setMetric: (value: number) => {
-            setMetric(value);
-            localStorage.setItem(`${storageKey}-metric`, value.toString());
+    const contextValue: AchievementContextProps = {
+        metrics,
+        setMetrics: (newMetrics: Metrics) => {
+            setMetrics(newMetrics);
+            checkAchievements();
         },
-        badges,
-        levels,
-        achievedLevels,
-        handleAchieve,
-        showAchievementModal,
+        achievedAchievements,
+        checkAchievements,
         showBadgesModal
-    }), [metric, badges, levels, achievedLevels, handleAchieve, showAchievementModal, showBadgesModal, storageKey]);
+    };
 
     return (
         <AchievementContext.Provider value={contextValue}>
             {children}
             <AchievementModal
-                show={!!achievementModalMessage}
-                message={achievementModalMessage}
-                onClose={() => setAchievementModalMessage('')}
+                show={!!newAchievement}
+                achievement={newAchievement}
+                onClose={() => {
+                    setNewAchievement(null);
+                    setShowConfetti(false);
+                }}
             />
             <BadgesModal
                 show={showBadges}
-                badges={badges.filter(badge => achievedLevels.includes(levels.find(level => level.badgeId === badge.id)?.level || -1))}
+                achievements={Object.values(config).flatMap(conditions =>
+                    conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
+                )}
                 onClose={() => setShowBadges(false)}
             />
             <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
+            <ConfettiWrapper show={showConfetti} />
         </AchievementContext.Provider>
     );
 };

package/src/index.ts

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

package/src/{custom.d.ts → react-confetti.d.ts}

@@ -1,7 +1,7 @@
 declare module 'react-confetti' {
     import { ComponentType } from 'react';
 
-    interface ConfettiProps {
+    export interface ConfettiProps {
         width?: number;
         height?: number;
         numberOfPieces?: number;
@@ -16,6 +16,4 @@ declare module 'react-confetti' {
 
     const Confetti: ComponentType<ConfettiProps>;
     export default Confetti;
-}
-
-declare module 'react-use'
+}

package/src/react-use.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-use' {
+    export function useWindowSize(): { width: number; height: number };
+    // Add other functions from react-use that you're using
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+export type MetricValue = number | boolean | string | any;
+
+export interface Metrics {
+    [key: string]: MetricValue;
+}
+
+export interface AchievementData {
+    id: string;
+    title: string;
+    description: string;
+    icon: string;
+}
+
+export interface AchievementCondition {
+    check: (metricValue: MetricValue) => boolean;
+    data: AchievementData;
+}
+
+export interface AchievementConfig {
+    [metricKey: string]: AchievementCondition[];
+}

package/tsconfig.json

@@ -105,5 +105,7 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "react-confetti.d.ts"]
 }

package/src/badges.ts

@@ -1,24 +0,0 @@
-export interface BadgeConfig {
-    id: string;
-    icon: string;
-    title: string;
-    description: string;
-}
-
-const defaultBadges: BadgeConfig[] = [
-    {
-        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
-];
-
-export { defaultBadges };

package/src/components/Achievement.tsx

@@ -1,29 +0,0 @@
-import React, { useEffect } from 'react';
-import { useAchievement } from '../context/AchievementContext';
-
-interface AchievementProps {
-    metric: number;
-    threshold: number;
-    onAchieve: () => void;
-    message: string;
-    children: React.ReactNode;
-}
-
-const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-
-    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 <>{children}</>;
-};
-
-export default React.memo(Achievement);

package/src/components/Progress.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { useAchievement } from '../context/AchievementContext';
-
-interface ProgressProps {
-    style?: React.CSSProperties;
-}
-
-const Progress: React.FC<ProgressProps> = ({ style }) => {
-    const { metric, levels, achievedLevels } = useAchievement();
-    const maxLevel = levels[levels.length - 1];
-    const progress = (metric / maxLevel.threshold) * 100;
-
-    const containerStyle: React.CSSProperties = {
-        width: '100%',
-        backgroundColor: '#e0e0e0',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        ...style,
-    };
-
-    const barStyle: React.CSSProperties = {
-        width: `${progress}%`,
-        height: '20px',
-        backgroundColor: '#4caf50',
-        transition: 'width 0.5s ease-in-out',
-    };
-
-    return (
-        <div style={containerStyle}>
-            <div style={barStyle} role="progressbar" aria-valuenow={metric} aria-valuemin={0} aria-valuemax={maxLevel.threshold} />
-            <p>Level: {achievedLevels.length} / {levels.length}</p>
-            <p>Progress: {metric} / {maxLevel.threshold}</p>
-        </div>
-    );
-};
-
-export default React.memo(Progress);

package/src/levels.ts

@@ -1,13 +0,0 @@
-export interface LevelConfig {
-    level: number;
-    threshold: number;
-    badgeId: string;
-}
-
-const defaultLevels: LevelConfig[] = [
-    { level: 1, threshold: 10, badgeId: 'beginner' },
-    { level: 2, threshold: 50, badgeId: 'intermediate' },
-    // Add more levels as needed
-];
-
-export { defaultLevels };