react-achievements 1.2.0 → 1.3.1

package/dist/index.cjs.js

@@ -2,91 +2,149 @@
 
 var React = require('react');
 
-const AchievementModal = ({ show, achievement, onClose }) => {
-    if (!show || !achievement)
-        return null;
-    const modalStyle = {
+const defaultStyles = {
+    achievementModal: {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: {
+            backgroundColor: '#ffffff',
+            borderRadius: '8px',
+            padding: '20px',
+            maxWidth: '400px',
+            width: '100%',
+        },
+        title: {
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '10px',
+        },
+        icon: {
+            width: '50px',
+            height: '50px',
+            marginBottom: '10px',
+        },
+        description: {
+            fontSize: '16px',
+            marginBottom: '20px',
+        },
+        button: {
+            backgroundColor: '#007bff',
+            color: '#ffffff',
+            padding: '10px 20px',
+            borderRadius: '4px',
+            border: 'none',
+            cursor: 'pointer',
+        },
+    },
+    badgesModal: {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: {
+            backgroundColor: '#ffffff',
+            borderRadius: '8px',
+            padding: '20px',
+            maxWidth: '600px',
+            width: '100%',
+            maxHeight: '80vh',
+            overflowY: 'auto',
+        },
+        title: {
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '20px',
+        },
+        badgeContainer: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+        },
+        badge: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            margin: '10px',
+        },
+        badgeIcon: {
+            width: '50px',
+            height: '50px',
+            marginBottom: '5px',
+        },
+        badgeTitle: {
+            fontSize: '14px',
+            textAlign: 'center',
+        },
+        button: {
+            backgroundColor: '#007bff',
+            color: '#ffffff',
+            padding: '10px 20px',
+            borderRadius: '4px',
+            border: 'none',
+            cursor: 'pointer',
+            marginTop: '20px',
+        },
+    },
+    badgesButton: {
         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)',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
         zIndex: 1000,
-    };
-    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": "achievement-title" },
-            React.createElement("h2", { id: "achievement-title" }, "Achievement Unlocked!"),
-            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"))));
+    },
+};
+
+const AchievementModal = ({ isOpen, achievement, onClose, styles }) => {
+    if (!isOpen || !achievement)
+        return null;
+    return (React.createElement("div", { style: styles.overlay },
+        React.createElement("div", { style: styles.content },
+            React.createElement("h2", { style: styles.title }, "Achievement Unlocked!"),
+            React.createElement("img", { src: achievement.icon, alt: achievement.title, style: styles.icon }),
+            React.createElement("h3", { style: styles.title }, achievement.title),
+            React.createElement("p", { style: styles.description }, achievement.description),
+            React.createElement("button", { onClick: onClose, style: styles.button }, "Okay"))));
 };
 var AchievementModal$1 = React.memo(AchievementModal);
 
-const BadgesModal = ({ show, achievements, onClose }) => {
-    if (!show)
+const BadgesModal = ({ isOpen, achievements, onClose, styles }) => {
+    if (!isOpen)
         return null;
-    const modalStyle = {
-        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 = {
-        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' } }, 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("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+    return (React.createElement("div", { style: styles.overlay },
+        React.createElement("div", { style: styles.content },
+            React.createElement("h2", { style: styles.title }, "Your Achievements"),
+            React.createElement("div", { style: styles.badgeContainer }, achievements.map((achievement) => (React.createElement("div", { key: achievement.id, style: styles.badge },
+                React.createElement("img", { src: achievement.icon, alt: achievement.title, style: styles.badgeIcon }),
+                React.createElement("span", { style: styles.badgeTitle }, achievement.title))))),
+            React.createElement("button", { onClick: onClose, style: styles.button }, "Close"))));
 };
 var BadgesModal$1 = React.memo(BadgesModal);
 
-const BadgesButton = ({ onClick, position }) => {
-    const buttonStyle = {
-        position: 'fixed',
+const BadgesButton = ({ onClick, position, styles }) => {
+    const positionStyle = {
         [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("button", { style: buttonStyle, onClick: onClick }, "View Achievements"));
+    return (React.createElement("button", { onClick: onClick, style: Object.assign(Object.assign({}, styles), positionStyle) }, "View Achievements"));
 };
 var BadgesButton$1 = React.memo(BadgesButton);
 
@@ -176,35 +234,26 @@ var useWindowSize = function (initialWidth, initialHeight) {
     return state;
 };
 
-const ConfettiWrapper = ({ show, confettiProps }) => {
+const ConfettiWrapper = ({ show }) => {
     const { width, height } = useWindowSize();
     if (!show)
         return null;
-    return (React.createElement(Confetti, Object.assign({ width: width, height: height }, confettiProps)));
+    return React.createElement(Confetti, { width: width, height: height, recycle: false });
 };
 
 const AchievementContext = React.createContext(undefined);
-const AchievementProvider = ({ children, config, initialState = {}, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
-    const extractMetrics = (state) => {
-        return Object.keys(config).reduce((acc, key) => {
-            if (key in state) {
-                acc[key] = state[key];
-            }
-            else {
-                acc[key] = [];
-            }
-            return acc;
-        }, {});
-    };
+const AchievementProvider = ({ children, config, initialState = {}, storageKey = 'react-achievements', badgesButtonPosition = 'top-right', styles = {}, }) => {
+    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
     const [metrics, setMetrics] = React.useState(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
-        if (savedMetrics) {
-            return JSON.parse(savedMetrics);
-        }
-        return extractMetrics(initialState);
+        return savedMetrics ? JSON.parse(savedMetrics) : initialState;
     });
-    const [achievedAchievements, setAchievedAchievements] = React.useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
     const [achievementQueue, setAchievementQueue] = React.useState([]);
@@ -216,31 +265,43 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         Object.entries(config).forEach(([metricKey, conditions]) => {
             const metricValue = metrics[metricKey];
             conditions.forEach(condition => {
-                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                if (condition.check(metricValue) && !unlockedAchievements.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));
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => {
+                const updated = [...prev, ...newlyUnlockedIds];
+                localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
+            setNewlyUnlockedAchievements(prev => {
+                const updated = [...prev, ...newlyUnlockedIds];
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
             setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, storageKey]);
     React.useEffect(() => {
         checkAchievements();
     }, [metrics, checkAchievements]);
     React.useEffect(() => {
         if (achievementQueue.length > 0 && !currentAchievement) {
-            setCurrentAchievement(achievementQueue[0]);
+            const nextAchievement = achievementQueue[0];
+            setCurrentAchievement(nextAchievement);
             setAchievementQueue(prevQueue => prevQueue.slice(1));
+            setNewlyUnlockedAchievements(prev => {
+                const updated = prev.filter(id => id !== nextAchievement.id);
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
         }
-    }, [achievementQueue, currentAchievement]);
-    const showBadgesModal = () => {
-        setShowBadges(true);
-    };
+    }, [achievementQueue, currentAchievement, storageKey]);
+    const showBadgesModal = () => setShowBadges(true);
     const getAchievements = (achievedIds) => {
         return Object.values(config).flatMap(conditions => conditions.filter(c => achievedIds.includes(c.data.id)).map(c => c.data));
     };
@@ -253,20 +314,20 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
     return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        React.createElement(AchievementModal$1, { show: !!currentAchievement, achievement: currentAchievement, onClose: () => {
+        React.createElement(AchievementModal$1, { isOpen: !!currentAchievement, achievement: currentAchievement, onClose: () => {
                 setCurrentAchievement(null);
-                if (achievementQueue.length === 0) {
+                if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                     setShowConfetti(false);
                 }
-            } }),
-        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(achievedAchievements), onClose: () => setShowBadges(false) }),
-        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
+            }, styles: mergedStyles.achievementModal }),
+        React.createElement(BadgesModal$1, { isOpen: showBadges, achievements: getAchievements(unlockedAchievements), onClose: () => setShowBadges(false), styles: mergedStyles.badgesModal }),
+        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition, styles: mergedStyles.badgesButton }),
         React.createElement(ConfettiWrapper, { show: showConfetti || achievementQueue.length > 0 })));
 };
 const useAchievement = () => {
@@ -276,6 +337,27 @@ const useAchievement = () => {
     }
     return context;
 };
+// Helper function to deep merge objects
+function mergeDeep(target, source) {
+    const output = Object.assign({}, target);
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target))
+                    Object.assign(output, { [key]: source[key] });
+                else
+                    output[key] = mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+    return output;
+}
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
 
 exports.AchievementProvider = AchievementProvider;
 exports.ConfettiWrapper = ConfettiWrapper;