react-achievements 1.0.1 → 1.0.2

package/dist/components/Achievement.d.ts

@@ -3,6 +3,7 @@ interface AchievementProps {
     metric: number;
     threshold: number;
     onAchieve: () => void;
+    message: string;
     children: React.ReactNode;
 }
 declare const Achievement: React.FC<AchievementProps>;

package/dist/components/AchievementModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AchievementModalProps {
+    show: boolean;
+    message: string;
+    onClose: () => void;
+}
+declare const AchievementModal: React.FC<AchievementModalProps>;
+export default AchievementModal;

package/dist/context/AchievementContext.d.ts

@@ -7,6 +7,7 @@ interface AchievementContextProps {
     badges: BadgeConfig[];
     levels: LevelConfig[];
     achievedLevels: number[];
+    handleAchieve: (level: number, message: string) => void;
 }
 declare const AchievementProvider: React.FC<{
     children: ReactNode;

package/dist/index.cjs.js

@@ -115,6 +115,37 @@ const ConfettiWrapper = ({ show }) => {
     return show ? React.createElement(Confetti, { width: width, height: height }) : null;
 };
 
+const AchievementModal = ({ show, message, onClose }) => {
+    if (!show)
+        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,
+    };
+    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 },
+            React.createElement("h2", null, "Achievement Unlocked!"),
+            React.createElement("p", null, message),
+            React.createElement("button", { onClick: onClose }, "Okay"))));
+};
+
 const Badge = ({ icon, title, description, position = 'top-right' }) => {
     const badgeStyle = {
         position: 'fixed',
@@ -140,13 +171,26 @@ const AchievementProvider = ({ children }) => {
     const [metric, setMetric] = React.useState(0);
     const [achievedLevels, setAchievedLevels] = React.useState([]);
     const [showConfetti, setShowConfetti] = React.useState(false);
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels } },
+    const [modalMessage, setModalMessage] = React.useState('');
+    const handleAchieve = (level, message) => {
+        if (!achievedLevels.includes(level)) {
+            setAchievedLevels([...achievedLevels, level]);
+            setShowConfetti(true);
+            setModalMessage(message);
+        }
+    };
+    const handleCloseModal = () => {
+        setShowConfetti(false);
+        setModalMessage('');
+    };
+    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
         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(ConfettiWrapper, { show: showConfetti }),
+        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
 };
 const useAchievement = () => {
     const context = React.useContext(AchievementContext);
@@ -156,17 +200,18 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, children }) => {
-    const { setMetric, achievedLevels, levels } = useAchievement();
+const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
+    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
     React.useEffect(() => {
         if (metric >= threshold && !achievedLevels.includes(threshold)) {
             onAchieve();
             const levelConfig = levels.find(level => level.threshold === threshold);
             if (levelConfig) {
-                setMetric(metric); // Update the metric in the context
+                setMetric(metric);
+                handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels]);
+    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
     return React.createElement("div", null, children);
 };
 

package/dist/index.esm.js

@@ -113,6 +113,37 @@ const ConfettiWrapper = ({ show }) => {
     return show ? React.createElement(Confetti, { width: width, height: height }) : null;
 };
 
+const AchievementModal = ({ show, message, onClose }) => {
+    if (!show)
+        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,
+    };
+    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 },
+            React.createElement("h2", null, "Achievement Unlocked!"),
+            React.createElement("p", null, message),
+            React.createElement("button", { onClick: onClose }, "Okay"))));
+};
+
 const Badge = ({ icon, title, description, position = 'top-right' }) => {
     const badgeStyle = {
         position: 'fixed',
@@ -138,13 +169,26 @@ const AchievementProvider = ({ children }) => {
     const [metric, setMetric] = useState(0);
     const [achievedLevels, setAchievedLevels] = useState([]);
     const [showConfetti, setShowConfetti] = useState(false);
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels } },
+    const [modalMessage, setModalMessage] = useState('');
+    const handleAchieve = (level, message) => {
+        if (!achievedLevels.includes(level)) {
+            setAchievedLevels([...achievedLevels, level]);
+            setShowConfetti(true);
+            setModalMessage(message);
+        }
+    };
+    const handleCloseModal = () => {
+        setShowConfetti(false);
+        setModalMessage('');
+    };
+    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
         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(ConfettiWrapper, { show: showConfetti }),
+        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
 };
 const useAchievement = () => {
     const context = useContext(AchievementContext);
@@ -154,17 +198,18 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, children }) => {
-    const { setMetric, achievedLevels, levels } = useAchievement();
+const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
+    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
     React.useEffect(() => {
         if (metric >= threshold && !achievedLevels.includes(threshold)) {
             onAchieve();
             const levelConfig = levels.find(level => level.threshold === threshold);
             if (levelConfig) {
-                setMetric(metric); // Update the metric in the context
+                setMetric(metric);
+                handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels]);
+    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
     return React.createElement("div", null, children);
 };
 

package/package.json

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

package/src/components/Achievement.tsx

@@ -5,21 +5,23 @@ interface AchievementProps {
     metric: number;
     threshold: number;
     onAchieve: () => void;
+    message: string;
     children: React.ReactNode;
 }
 
-const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve, children }) => {
-    const { setMetric, achievedLevels, levels } = useAchievement();
+const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve, message, children }) => {
+    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
 
     React.useEffect(() => {
         if (metric >= threshold && !achievedLevels.includes(threshold)) {
             onAchieve();
             const levelConfig = levels.find(level => level.threshold === threshold);
             if (levelConfig) {
-                setMetric(metric); // Update the metric in the context
+                setMetric(metric);
+                handleAchieve(levelConfig.level, message);
             }
         }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels]);
+    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
 
     return <div>{children}</div>;
 };

package/src/components/AchievementModal.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface AchievementModalProps {
+    show: boolean;
+    message: string;
+    onClose: () => void;
+}
+
+const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, 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,
+    };
+
+    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}>
+                <h2>Achievement Unlocked!</h2>
+                <p>{message}</p>
+                <button onClick={onClose}>Okay</button>
+            </div>
+        </>
+    );
+};
+
+export default AchievementModal;

package/src/context/AchievementContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, ReactNode } from 'react';
 import { defaultBadges, BadgeConfig } from '../badges';
 import { levels, LevelConfig } from '../levels';
 import ConfettiWrapper from '../components/ConfettiWrapper';
+import AchievementModal from '../components/AchievementModal';
 import Badge from '../components/Badge';
 
 interface AchievementContextProps {
@@ -10,6 +11,7 @@ interface AchievementContextProps {
     badges: BadgeConfig[];
     levels: LevelConfig[];
     achievedLevels: number[];
+    handleAchieve: (level: number, message: string) => void;
 }
 
 const AchievementContext = createContext<AchievementContextProps | undefined>(undefined);
@@ -18,17 +20,23 @@ 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('');
 
-    const handleAchieve = (level: number) => {
+    const handleAchieve = (level: number, message: string) => {
         if (!achievedLevels.includes(level)) {
             setAchievedLevels([...achievedLevels, level]);
             setShowConfetti(true);
-            setTimeout(() => setShowConfetti(false), 5000); // Confetti for 5 seconds
+            setModalMessage(message);
         }
     };
 
+    const handleCloseModal = () => {
+        setShowConfetti(false);
+        setModalMessage('');
+    };
+
     return (
-        <AchievementContext.Provider value={{ metric, setMetric, badges: defaultBadges, levels, achievedLevels }}>
+        <AchievementContext.Provider value={{ metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve }}>
             {children}
             {levels.map(levelConfig =>
                 achievedLevels.includes(levelConfig.level) ? (
@@ -41,6 +49,7 @@ const AchievementProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
                 ) : null
             )}
             <ConfettiWrapper show={showConfetti} />
+            <AchievementModal show={!!modalMessage} message={modalMessage} onClose={handleCloseModal} />
         </AchievementContext.Provider>
     );
 };