react-achievements 1.0.2 → 1.0.3

package/dist/badges.d.ts

@@ -1,8 +1,8 @@
-interface BadgeConfig {
+export interface BadgeConfig {
     id: string;
     icon: string;
     title: string;
     description: string;
 }
 declare const defaultBadges: BadgeConfig[];
-export { defaultBadges, BadgeConfig };
+export { defaultBadges };

package/dist/components/Achievement.d.ts

@@ -6,5 +6,5 @@ interface AchievementProps {
     message: string;
     children: React.ReactNode;
 }
-declare const Achievement: React.FC<AchievementProps>;
-export default Achievement;
+declare const _default: React.NamedExoticComponent<AchievementProps>;
+export default _default;

package/dist/components/AchievementModal.d.ts

@@ -4,5 +4,5 @@ interface AchievementModalProps {
     message: string;
     onClose: () => void;
 }
-declare const AchievementModal: React.FC<AchievementModalProps>;
-export default AchievementModal;
+declare const _default: React.NamedExoticComponent<AchievementModalProps>;
+export default _default;

package/dist/components/BadgesButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BadgesButtonProps {
+    onClick: () => void;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const _default: React.NamedExoticComponent<BadgesButtonProps>;
+export default _default;

package/dist/components/BadgesModal.d.ts

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

package/dist/components/Progress.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ProgressProps {
+    style?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<ProgressProps>;
+export default _default;

package/dist/context/AchievementContext.d.ts

@@ -8,9 +8,16 @@ interface AchievementContextProps {
     levels: LevelConfig[];
     achievedLevels: number[];
     handleAchieve: (level: number, message: string) => void;
+    showAchievementModal: (message: string) => void;
+    showBadgesModal: () => void;
 }
-declare const AchievementProvider: React.FC<{
+interface AchievementProviderProps {
     children: ReactNode;
-}>;
-declare const useAchievement: () => AchievementContextProps;
-export { AchievementProvider, useAchievement };
+    initialBadges?: BadgeConfig[];
+    initialLevels?: LevelConfig[];
+    storageKey?: string;
+    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+export declare const AchievementProvider: React.FC<AchievementProviderProps>;
+export declare const useAchievement: () => AchievementContextProps;
+export {};

package/dist/index.cjs.js

@@ -18,103 +18,12 @@ const defaultBadges = [
     // Add more badges as needed
 ];
 
-const levels = [
+const defaultLevels = [
     { level: 1, threshold: 10, badgeId: 'beginner' },
     { level: 2, threshold: 50, badgeId: 'intermediate' },
     // Add more levels as needed
 ];
 
-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 }) => {
-    const { width, height } = useWindowSize();
-    return show ? React.createElement(Confetti, { width: width, height: height }) : null;
-};
-
 const AchievementModal = ({ show, message, onClose }) => {
     if (!show)
         return null;
@@ -140,57 +49,114 @@ const AchievementModal = ({ show, message, onClose }) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: overlayStyle, onClick: onClose }),
-        React.createElement("div", { style: modalStyle },
-            React.createElement("h2", null, "Achievement Unlocked!"),
+        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("button", { onClick: onClose }, "Okay"))));
 };
+var AchievementModal$1 = React.memo(AchievementModal);
 
-const Badge = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle = {
+const BadgesModal = ({ show, badges, onClose }) => {
+    if (!show)
+        return null;
+    const modalStyle = {
         position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
         backgroundColor: '#fff',
-        border: '1px solid #ccc',
+        padding: '20px',
         borderRadius: '8px',
-        padding: '10px',
         boxShadow: '0 0 10px rgba(0,0,0,0.1)',
+        zIndex: 1000,
+        maxWidth: '80%',
+        maxHeight: '80%',
+        overflow: 'auto',
+    };
+    const overlayStyle = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        zIndex: 999,
+    };
+    return (React.createElement(React.Fragment, null,
+        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("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+};
+var BadgesModal$1 = React.memo(BadgesModal);
+
+const BadgesButton = ({ onClick, position }) => {
+    const buttonStyle = {
+        position: 'fixed',
+        [position.split('-')[0]]: '20px',
+        [position.split('-')[1]]: '20px',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        zIndex: 998,
     };
-    return (React.createElement("div", { style: badgeStyle },
-        React.createElement("img", { src: icon, alt: title, style: { width: '50px', height: '50px' } }),
-        React.createElement("h4", null, title),
-        React.createElement("p", null, description)));
+    return (React.createElement("button", { style: buttonStyle, onClick: onClick }, "View Achievements"));
 };
+var BadgesButton$1 = React.memo(BadgesButton);
 
 const AchievementContext = React.createContext(undefined);
-const AchievementProvider = ({ children }) => {
-    const [metric, setMetric] = React.useState(0);
-    const [achievedLevels, setAchievedLevels] = React.useState([]);
-    const [showConfetti, setShowConfetti] = React.useState(false);
-    const [modalMessage, setModalMessage] = React.useState('');
-    const handleAchieve = (level, message) => {
+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 [achievedLevels, setAchievedLevels] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-levels`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [badges] = React.useState(initialBadges);
+    const [levels] = React.useState(initialLevels);
+    const [achievementModalMessage, setAchievementModalMessage] = React.useState('');
+    const [showBadges, setShowBadges] = React.useState(false);
+    const handleAchieve = React.useCallback((level, message) => {
         if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
-            setShowConfetti(true);
-            setModalMessage(message);
+            const newAchievedLevels = [...achievedLevels, level];
+            setAchievedLevels(newAchievedLevels);
+            localStorage.setItem(`${storageKey}-levels`, JSON.stringify(newAchievedLevels));
+            setAchievementModalMessage(message);
         }
-    };
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
-    };
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
+    }, [achievedLevels, storageKey]);
+    const showAchievementModal = React.useCallback((message) => {
+        setAchievementModalMessage(message);
+    }, []);
+    const showBadgesModal = React.useCallback(() => {
+        setShowBadges(true);
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        metric,
+        setMetric: (value) => {
+            setMetric(value);
+            localStorage.setItem(`${storageKey}-metric`, value.toString());
+        },
+        badges,
+        levels,
+        achievedLevels,
+        handleAchieve,
+        showAchievementModal,
+        showBadgesModal
+    }), [metric, badges, levels, achievedLevels, handleAchieve, showAchievementModal, showBadgesModal, storageKey]);
+    return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        levels.map(levelConfig => {
-            var _a, _b, _c;
-            return achievedLevels.includes(levelConfig.level) ? (React.createElement(Badge, { key: levelConfig.level, icon: ((_a = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _a === void 0 ? void 0 : _a.icon) || '', title: ((_b = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _b === void 0 ? void 0 : _b.title) || '', description: ((_c = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _c === void 0 ? void 0 : _c.description) || '' })) : null;
-        }),
-        React.createElement(ConfettiWrapper, { show: showConfetti }),
-        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
+        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 })));
 };
 const useAchievement = () => {
     const context = React.useContext(AchievementContext);
@@ -211,10 +177,11 @@ const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
                 handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
-    return React.createElement("div", null, children);
+    }, [metric, threshold, onAchieve, achievedLevels, levels, message, setMetric, handleAchieve]);
+    return React.createElement(React.Fragment, null, children);
 };
+var Achievement$1 = React.memo(Achievement);
 
-exports.Achievement = Achievement;
+exports.Achievement = Achievement$1;
 exports.AchievementProvider = AchievementProvider;
 exports.useAchievement = useAchievement;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 import { AchievementProvider, useAchievement } from './context/AchievementContext';
 import Achievement from './components/Achievement';
-export { AchievementProvider, useAchievement, Achievement };
+import { BadgeConfig } from './badges';
+import { LevelConfig } from './levels';
+export { AchievementProvider, useAchievement, Achievement, BadgeConfig, LevelConfig };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback, createContext, useContext } from 'react';
+import React, { createContext, useState, useCallback, useMemo, useContext, useEffect } from 'react';
 
 const defaultBadges = [
     {
@@ -16,103 +16,12 @@ const defaultBadges = [
     // Add more badges as needed
 ];
 
-const levels = [
+const defaultLevels = [
     { level: 1, threshold: 10, badgeId: 'beginner' },
     { level: 2, threshold: 50, badgeId: 'intermediate' },
     // Add more levels as needed
 ];
 
-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);
-    });
-    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 }) => {
-    const { width, height } = useWindowSize();
-    return show ? React.createElement(Confetti, { width: width, height: height }) : null;
-};
-
 const AchievementModal = ({ show, message, onClose }) => {
     if (!show)
         return null;
@@ -138,57 +47,114 @@ const AchievementModal = ({ show, message, onClose }) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: overlayStyle, onClick: onClose }),
-        React.createElement("div", { style: modalStyle },
-            React.createElement("h2", null, "Achievement Unlocked!"),
+        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("button", { onClick: onClose }, "Okay"))));
 };
+var AchievementModal$1 = React.memo(AchievementModal);
 
-const Badge = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle = {
+const BadgesModal = ({ show, badges, onClose }) => {
+    if (!show)
+        return null;
+    const modalStyle = {
         position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
         backgroundColor: '#fff',
-        border: '1px solid #ccc',
+        padding: '20px',
         borderRadius: '8px',
-        padding: '10px',
         boxShadow: '0 0 10px rgba(0,0,0,0.1)',
+        zIndex: 1000,
+        maxWidth: '80%',
+        maxHeight: '80%',
+        overflow: 'auto',
+    };
+    const overlayStyle = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        zIndex: 999,
+    };
+    return (React.createElement(React.Fragment, null,
+        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("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+};
+var BadgesModal$1 = React.memo(BadgesModal);
+
+const BadgesButton = ({ onClick, position }) => {
+    const buttonStyle = {
+        position: 'fixed',
+        [position.split('-')[0]]: '20px',
+        [position.split('-')[1]]: '20px',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        zIndex: 998,
     };
-    return (React.createElement("div", { style: badgeStyle },
-        React.createElement("img", { src: icon, alt: title, style: { width: '50px', height: '50px' } }),
-        React.createElement("h4", null, title),
-        React.createElement("p", null, description)));
+    return (React.createElement("button", { style: buttonStyle, onClick: onClick }, "View Achievements"));
 };
+var BadgesButton$1 = React.memo(BadgesButton);
 
 const AchievementContext = createContext(undefined);
-const AchievementProvider = ({ children }) => {
-    const [metric, setMetric] = useState(0);
-    const [achievedLevels, setAchievedLevels] = useState([]);
-    const [showConfetti, setShowConfetti] = useState(false);
-    const [modalMessage, setModalMessage] = useState('');
-    const handleAchieve = (level, message) => {
+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;
+    });
+    const [achievedLevels, setAchievedLevels] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-levels`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [badges] = useState(initialBadges);
+    const [levels] = useState(initialLevels);
+    const [achievementModalMessage, setAchievementModalMessage] = useState('');
+    const [showBadges, setShowBadges] = useState(false);
+    const handleAchieve = useCallback((level, message) => {
         if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
-            setShowConfetti(true);
-            setModalMessage(message);
+            const newAchievedLevels = [...achievedLevels, level];
+            setAchievedLevels(newAchievedLevels);
+            localStorage.setItem(`${storageKey}-levels`, JSON.stringify(newAchievedLevels));
+            setAchievementModalMessage(message);
         }
-    };
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
-    };
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
+    }, [achievedLevels, storageKey]);
+    const showAchievementModal = useCallback((message) => {
+        setAchievementModalMessage(message);
+    }, []);
+    const showBadgesModal = useCallback(() => {
+        setShowBadges(true);
+    }, []);
+    const contextValue = useMemo(() => ({
+        metric,
+        setMetric: (value) => {
+            setMetric(value);
+            localStorage.setItem(`${storageKey}-metric`, value.toString());
+        },
+        badges,
+        levels,
+        achievedLevels,
+        handleAchieve,
+        showAchievementModal,
+        showBadgesModal
+    }), [metric, badges, levels, achievedLevels, handleAchieve, showAchievementModal, showBadgesModal, storageKey]);
+    return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        levels.map(levelConfig => {
-            var _a, _b, _c;
-            return achievedLevels.includes(levelConfig.level) ? (React.createElement(Badge, { key: levelConfig.level, icon: ((_a = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _a === void 0 ? void 0 : _a.icon) || '', title: ((_b = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _b === void 0 ? void 0 : _b.title) || '', description: ((_c = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _c === void 0 ? void 0 : _c.description) || '' })) : null;
-        }),
-        React.createElement(ConfettiWrapper, { show: showConfetti }),
-        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
+        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 })));
 };
 const useAchievement = () => {
     const context = useContext(AchievementContext);
@@ -200,7 +166,7 @@ const useAchievement = () => {
 
 const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
     const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-    React.useEffect(() => {
+    useEffect(() => {
         if (metric >= threshold && !achievedLevels.includes(threshold)) {
             onAchieve();
             const levelConfig = levels.find(level => level.threshold === threshold);
@@ -209,8 +175,9 @@ const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
                 handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
-    return React.createElement("div", null, children);
+    }, [metric, threshold, onAchieve, achievedLevels, levels, message, setMetric, handleAchieve]);
+    return React.createElement(React.Fragment, null, children);
 };
+var Achievement$1 = React.memo(Achievement);
 
-export { Achievement, AchievementProvider, useAchievement };
+export { Achievement$1 as Achievement, AchievementProvider, useAchievement };

package/dist/levels.d.ts

@@ -1,7 +1,7 @@
-interface LevelConfig {
+export interface LevelConfig {
     level: number;
     threshold: number;
     badgeId: string;
 }
-declare const levels: LevelConfig[];
-export { levels, LevelConfig };
+declare const defaultLevels: LevelConfig[];
+export { defaultLevels };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "deploy": "npm run build && npm publish"
   },
   "author": "David Brown",
   "license": "ISC",

package/src/badges.ts

@@ -1,4 +1,4 @@
-interface BadgeConfig {
+export interface BadgeConfig {
     id: string;
     icon: string;
     title: string;
@@ -21,4 +21,4 @@ const defaultBadges: BadgeConfig[] = [
     // Add more badges as needed
 ];
 
-export { defaultBadges, BadgeConfig };
+export { defaultBadges };

package/src/components/Achievement.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useAchievement } from '../context/AchievementContext';
 
 interface AchievementProps {
@@ -12,7 +12,7 @@ interface AchievementProps {
 const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve, message, children }) => {
     const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (metric >= threshold && !achievedLevels.includes(threshold)) {
             onAchieve();
             const levelConfig = levels.find(level => level.threshold === threshold);
@@ -21,9 +21,9 @@ const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve,
                 handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
+    }, [metric, threshold, onAchieve, achievedLevels, levels, message, setMetric, handleAchieve]);
 
-    return <div>{children}</div>;
+    return <>{children}</>;
 };
 
-export default Achievement;
+export default React.memo(Achievement);

package/src/components/AchievementModal.tsx

@@ -34,8 +34,8 @@ const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onCl
     return (
         <>
             <div style={overlayStyle} onClick={onClose} />
-            <div style={modalStyle}>
-                <h2>Achievement Unlocked!</h2>
+            <div style={modalStyle} role="dialog" aria-modal="true" aria-labelledby="achievement-title">
+                <h2 id="achievement-title">Achievement Unlocked!</h2>
                 <p>{message}</p>
                 <button onClick={onClose}>Okay</button>
             </div>
@@ -43,4 +43,4 @@ const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onCl
     );
 };
 
-export default AchievementModal;
+export default React.memo(AchievementModal);

package/src/components/BadgesButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface BadgesButtonProps {
+    onClick: () => void;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+
+const BadgesButton: React.FC<BadgesButtonProps> = ({ onClick, position }) => {
+    const buttonStyle: React.CSSProperties = {
+        position: 'fixed',
+        [position.split('-')[0]]: '20px',
+        [position.split('-')[1]]: '20px',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        zIndex: 998,
+    };
+
+    return (
+        <button style={buttonStyle} onClick={onClick}>
+            View Achievements
+        </button>
+    );
+};
+
+export default React.memo(BadgesButton);

package/src/components/BadgesModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BadgeConfig } from '../badges';
+
+interface BadgesModalProps {
+    show: boolean;
+    badges: BadgeConfig[];
+    onClose: () => void;
+}
+
+const BadgesModal: React.FC<BadgesModalProps> = ({ show, badges, onClose }) => {
+    if (!show) return null;
+
+    const modalStyle: React.CSSProperties = {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: '#fff',
+        padding: '20px',
+        borderRadius: '8px',
+        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
+        zIndex: 1000,
+        maxWidth: '80%',
+        maxHeight: '80%',
+        overflow: 'auto',
+    };
+
+    const overlayStyle: React.CSSProperties = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        zIndex: 999,
+    };
+
+    return (
+        <>
+            <div style={overlayStyle} onClick={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>
+                        </div>
+                    ))}
+                </div>
+                <button onClick={onClose} style={{ marginTop: '20px' }}>Close</button>
+            </div>
+        </>
+    );
+};
+
+export default React.memo(BadgesModal);

package/src/components/Progress.tsx

@@ -0,0 +1,37 @@
+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/context/AchievementContext.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+import React, { createContext, useContext, useState, ReactNode, useCallback, useMemo } from 'react';
 import { defaultBadges, BadgeConfig } from '../badges';
-import { levels, LevelConfig } from '../levels';
-import ConfettiWrapper from '../components/ConfettiWrapper';
+import { defaultLevels, LevelConfig } from '../levels';
 import AchievementModal from '../components/AchievementModal';
-import Badge from '../components/Badge';
+import BadgesModal from '../components/BadgesModal';
+import BadgesButton from '../components/BadgesButton';
 
 interface AchievementContextProps {
     metric: number;
@@ -12,54 +12,93 @@ interface AchievementContextProps {
     levels: LevelConfig[];
     achievedLevels: number[];
     handleAchieve: (level: number, message: string) => void;
+    showAchievementModal: (message: string) => void;
+    showBadgesModal: () => void;
+}
+
+interface AchievementProviderProps {
+    children: ReactNode;
+    initialBadges?: BadgeConfig[];
+    initialLevels?: LevelConfig[];
+    storageKey?: string;
+    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 
 const AchievementContext = createContext<AchievementContextProps | undefined>(undefined);
 
-const AchievementProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [metric, setMetric] = useState(0);
-    const [achievedLevels, setAchievedLevels] = useState<number[]>([]);
-    const [showConfetti, setShowConfetti] = useState(false);
-    const [modalMessage, setModalMessage] = useState('');
+export const AchievementProvider: React.FC<AchievementProviderProps> = ({
+                                                                            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;
+    });
+    const [achievedLevels, setAchievedLevels] = useState<number[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-levels`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [badges] = useState<BadgeConfig[]>(initialBadges);
+    const [levels] = useState<LevelConfig[]>(initialLevels);
+    const [achievementModalMessage, setAchievementModalMessage] = useState('');
+    const [showBadges, setShowBadges] = useState(false);
 
-    const handleAchieve = (level: number, message: string) => {
+    const handleAchieve = useCallback((level: number, message: string) => {
         if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
-            setShowConfetti(true);
-            setModalMessage(message);
+            const newAchievedLevels = [...achievedLevels, level];
+            setAchievedLevels(newAchievedLevels);
+            localStorage.setItem(`${storageKey}-levels`, JSON.stringify(newAchievedLevels));
+            setAchievementModalMessage(message);
         }
-    };
+    }, [achievedLevels, storageKey]);
+
+    const showAchievementModal = useCallback((message: string) => {
+        setAchievementModalMessage(message);
+    }, []);
 
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
-    };
+    const showBadgesModal = useCallback(() => {
+        setShowBadges(true);
+    }, []);
+
+    const contextValue = useMemo(() => ({
+        metric,
+        setMetric: (value: number) => {
+            setMetric(value);
+            localStorage.setItem(`${storageKey}-metric`, value.toString());
+        },
+        badges,
+        levels,
+        achievedLevels,
+        handleAchieve,
+        showAchievementModal,
+        showBadgesModal
+    }), [metric, badges, levels, achievedLevels, handleAchieve, showAchievementModal, showBadgesModal, storageKey]);
 
     return (
-        <AchievementContext.Provider value={{ metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve }}>
+        <AchievementContext.Provider value={contextValue}>
             {children}
-            {levels.map(levelConfig =>
-                achievedLevels.includes(levelConfig.level) ? (
-                    <Badge
-                        key={levelConfig.level}
-                        icon={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.icon || ''}
-                        title={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.title || ''}
-                        description={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.description || ''}
-                    />
-                ) : null
-            )}
-            <ConfettiWrapper show={showConfetti} />
-            <AchievementModal show={!!modalMessage} message={modalMessage} onClose={handleCloseModal} />
+            <AchievementModal
+                show={!!achievementModalMessage}
+                message={achievementModalMessage}
+                onClose={() => setAchievementModalMessage('')}
+            />
+            <BadgesModal
+                show={showBadges}
+                badges={badges.filter(badge => achievedLevels.includes(levels.find(level => level.badgeId === badge.id)?.level || -1))}
+                onClose={() => setShowBadges(false)}
+            />
+            <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
         </AchievementContext.Provider>
     );
 };
 
-const useAchievement = () => {
+export const useAchievement = () => {
     const context = useContext(AchievementContext);
     if (context === undefined) {
         throw new Error('useAchievement must be used within an AchievementProvider');
     }
     return context;
-};
-
-export { AchievementProvider, useAchievement };
+};

package/src/index.ts

@@ -1,4 +1,6 @@
 import { AchievementProvider, useAchievement } from './context/AchievementContext';
 import Achievement from './components/Achievement';
+import { BadgeConfig } from './badges';
+import { LevelConfig } from './levels';
 
-export { AchievementProvider, useAchievement, Achievement };
+export { AchievementProvider, useAchievement, Achievement, BadgeConfig, LevelConfig };

package/src/levels.ts

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

package/src/components/Badge.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface BadgeProps {
-    icon: string;
-    title: string;
-    description: string;
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}
-
-const Badge: React.FC<BadgeProps> = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle: React.CSSProperties = {
-        position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        border: '1px solid #ccc',
-        borderRadius: '8px',
-        padding: '10px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    };
-
-    return (
-        <div style={badgeStyle}>
-            <img src={icon} alt={title} style={{ width: '50px', height: '50px' }} />
-            <h4>{title}</h4>
-            <p>{description}</p>
-        </div>
-    );
-};
-
-export default Badge;