Refactor cooking achievements to be data-driven

Replaces hardcoded achievement items in the Cooking tab with a dynamic, data-driven approach. Achievements are now generated from a configuration array and passed as props, improving maintainability and scalability.

Author: JorchCortez

src/Components/AchieveTabs/Cooking/index.tsx

@@ -1,46 +1,28 @@
 import type { cookingDataType } from 'types/displayDataTypes';
-import { Cook, SousChef, GourmetChef } from '@media/Achievements';
 import './Cooking.css';
 import { AchievementItem,ItemWithCounter } from '@components/common';
 
-const Food = ( {cookedItems, knownRecipes, alreadyCookedRecipes} : cookingDataType) => {
+const Food = ( {cookedItems, knownRecipes, alreadyCookedRecipes, totalRecipes, achievements} : cookingDataType) => {
+    console.log('a', achievements)
     return ( 
         <div className="progress-container">   
             <span className="a-title">
                 <h2>
-                    Has cooked {alreadyCookedRecipes}, knowing {knownRecipes} out of 81 recipes
+                    Has cooked {alreadyCookedRecipes}, knowing {knownRecipes} out of {totalRecipes} recipes
                 </h2>
             </span>
             <br />
             <h2>Cooking Achievements</h2>
             <div className="section-achievements">
-                <AchievementItem 
-                    done={alreadyCookedRecipes >= 10}
-                    image={Cook}
-                    achievementName="Cook"
-                    achievementDesc="Cook a total of 10 dishes"
-                    achievementHoverDesc={alreadyCookedRecipes >= 10 ? 
-                        'Achievement unlocked!' : 
-                        'You need to cook at least 10 dishes to unlock this achievement.'}
-                />
-                <AchievementItem 
-                    done={alreadyCookedRecipes >= 25}
-                    image={SousChef}
-                    achievementName="Sous Chef"
-                    achievementDesc="Cook a total of 25 dishes"
-                    achievementHoverDesc={alreadyCookedRecipes >= 25 ?  
-                            'Achievement unlocked!' : 
-                            `You need to cook ${25 - alreadyCookedRecipes} more dishes to unlock this achievement.`}
-                />
-                <AchievementItem 
-                    done={alreadyCookedRecipes >= 81}
-                    image={GourmetChef}
-                    achievementName="Gourmet Chef"
-                    achievementDesc="Cook a total of 81 dishes"
-                    achievementHoverDesc={alreadyCookedRecipes >= 81 ?  
-                            'Achievement unlocked!' : 
-                            `You need to cook ${81 - alreadyCookedRecipes} more dishes to unlock this achievement.`}
-                />
+                {achievements && achievements.map((ach, i) => (
+                    <AchievementItem 
+                        key={i}
+                        done={ach.done}
+                        image={ach.image}
+                        achievementName={ach.name}
+                        achievementDesc={ach.description}
+                        achievementHoverDesc={ach.hoverDesc}
+                    />))}
             </div>
             <br />
             <div className="dishes-grid">

src/Utility/Parsers/parseCookingItems.ts

@@ -1,7 +1,31 @@
 import type { itemsType, itemType } from "types/savefile";
 import { Dishes } from "../JSON";
 import { GetImages, ValidateKnown } from "./Utils";
-import type { cookingDataType, generalFormatedItemType } from "types/displayDataTypes";
+import type { achievementType, cookingDataType, generalFormatedItemType } from "types/displayDataTypes";
+import { Cook, SousChef, GourmetChef } from '@media/Achievements';
+
+
+let CookingAchievements = [{
+        goal: 10,
+        image: Cook,
+        name: 'Cook',
+        done: false,
+        description: 'Cook a total of 10 dishes',
+        hoverDesc: ''
+    },{
+        goal: 25,
+        image: SousChef,
+        name: 'Cook',
+        description: 'Cook a total of 25 dishes',
+        hoverDesc: ''
+    },{
+        goal: Dishes.Dishes.length,
+        image: GourmetChef,
+        name: 'Cook',
+        description: 'Cook All dishes',
+        hoverDesc: ''
+    }
+];
 
 export const GetCookingData = (cooked: itemType, known: itemsType[]): cookingDataType =>{
     let data: generalFormatedItemType[] = [];
@@ -23,7 +47,26 @@ export const GetCookingData = (cooked: itemType, known: itemsType[]): cookingDat
         }
         data.push(d);
     })
-    return { knownRecipes, alreadyCookedRecipes: alreadyCooked, cookedItems: data };
+    const totalRecipes = Dishes.Dishes.length;
+    return { 
+        knownRecipes, 
+        alreadyCookedRecipes: alreadyCooked, 
+        cookedItems: data, 
+        achievements: GetAchievementData(alreadyCooked), 
+        totalRecipes };
+}
+
+const GetAchievementData = (alreadyCooked: number) : achievementType[] =>  {
+    let achievements = CookingAchievements.map(ach => {
+        return {
+            ...ach,
+            done: alreadyCooked >= ach.goal,
+            hoverDesc: alreadyCooked >= ach.goal ? 
+                'Achievement unlocked!' : 
+                `You need to cook ${ach.goal - alreadyCooked} more dishes to unlock this achievement.`
+        }
+    });
+    return achievements;
 }
 
 const GetCooked = (cookedItems:itemsType[], id: number): number => {