react-achievements 1.3.2 → 1.3.4

package/demo/package.json

@@ -1,6 +1,5 @@
 {
   "name": "demo",
-  "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -36,6 +35,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.9.0",
     "prop-types": "^15.8.1",
+    "react-achievements": "^1.3.3",
     "storybook": "^8.2.8",
     "vite": "^5.4.0"
   },

package/demo/src/AchievementConfig.ts

@@ -0,0 +1,37 @@
+import explorer from "./assets/achievements/explorer.webp";
+import warrior from "./assets/achievements/warrior.webp";
+import seasoned_warrior from "./assets/achievements/seaoned_warrior.webp";
+
+const achievementConfig = {
+  level: [
+    {
+      check: (value: number) => value >= 5,
+      data: {
+        id: "level_5",
+        title: "Novice Adventurer",
+        description: "Reached level 5",
+        icon: explorer,
+      },
+    },
+    {
+      check: (value: number) => value >= 10,
+      data: {
+        id: "level_10",
+        title: "Warrior",
+        description: "Reached level 10",
+        icon: warrior,
+      },
+    },
+    {
+      check: (value: number) => value >= 15,
+      data: {
+        id: "level_15",
+        title: "Seasoned Warrior",
+        description: "Reached level 15",
+        icon: seasoned_warrior,
+      },
+    }
+  ],
+};
+
+export default achievementConfig;

package/demo/src/App.jsx

@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
+import reactLogo from "./assets/react.svg";
+import viteLogo from "/vite.svg";
+import "./App.css";
+import { AchievementProvider, useAchievement } from "react-achievements";
+import achievementConfig from "./AchievementConfig";
 
+const AppContents = () => {
+  const { setMetrics, metrics } = useAchievement();
   return (
     <>
       <div>
@@ -18,8 +18,17 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
+        <button
+          onClick={() => {
+            setMetrics((prevMetrics) => {
+              return {
+                ...prevMetrics,
+                level: prevMetrics.level + 1,
+              };
+            });
+          }}
+        >
+          level is {metrics.level}
         </button>
         <p>
           Edit <code>src/App.jsx</code> and save to test HMR
@@ -29,7 +38,52 @@ function App() {
         Click on the Vite and React logos to learn more
       </p>
     </>
-  )
+  );
+};
+
+const initialState = {
+  level: 1,
+};
+
+/**
+ * @see node_modules/react-achievements/dist/defaultStyles.d.ts
+ */
+const customStyles = {
+  achievementModal: {
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+    },
+    content: {
+      color: "#000000",
+    },
+    title: {
+      // color: "#ffd700",
+    },
+    button: {
+      // backgroundColor: "#4CAF50",
+    },
+  },
+  badgesModal: {
+    content: {
+      color: "#000000",
+    },
+  },
+  badgesButton: {
+    // Custom styles for the badges button
+  },
+};
+
+function App() {
+  return (
+    <AchievementProvider
+      config={achievementConfig}
+      initialState={initialState}
+      badgesButtonPosition="top-right"
+      styles={customStyles}
+    >
+      <AppContents />
+    </AchievementProvider>
+  );
 }
 
-export default App
+export default App;

package/package.json

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