Refactor crops achievement logic and types

JorchCortez · JorchCortez · commit 756770e7010e · 2025-12-14T10:02:46.000-08:00
Moved crop achievement logic from Utility to a dedicated parser, updated Crops component to use new props structure, and simplified cropsShippedType. Adjusted Achievements and type definitions to match the new data flow.
diff --git a/src/Components/AchieveTabs/Crops/index.tsx b/src/Components/AchieveTabs/Crops/index.tsx
@@ -1,28 +1,67 @@
-import React, { useState, useEffect } from 'react'
+import { AchievementItem, ItemWithCounter } from '@components/common';
 import type { cropsShippedType } from 'types/displayDataTypes';
 
-interface CropsShippedWrapperType {
-    cropsShipped: cropsShippedType;
-}
 
-const Crops= (cropsShipped : CropsShippedWrapperType) => {
-    let _monocultureText = cropsShipped.cropsShipped.hasMonoculture ? "You already have the 'Monoculture' Achievement" : `You've shipped ${ cropsShipped.cropsShipped.maxMono?.name } the most and you require ${300 - cropsShipped.cropsShipped.maxMono?.shipped} more of it to get the 'Monoculture' Achievement`;
-    let _polycultureText = cropsShipped.cropsShipped.hasPolyculture ? "You already have the 'Polyculture' Achievement" : `You need to ship 15 crops for each polyculture crop to get the 'Polyculture' achievement`;
-    
+const Crops= ({poly_crops, mono_extras, achievements} : cropsShippedType) => {
+    console.log(achievements)
     return ( 
         <div className="progress-container">  
-            {/* <span className="a-title"><h1>{_monocultureAchieved ? `You've shipped ${ maxShipped.name } the most and you require ${300 - maxShipped.times} more of it to get the 'Monoculture' Achievement` : <span className="completed">`You already have the 'Monoculture' Achievement`</span> }</h1></span> */}
             <br />
-            <h2>Farming Achievements</h2>
-            <ul className="a-List"> 
-                <li>Monoculture: <span className={cropsShipped.cropsShipped.hasMonoculture ? "completed" : "pending"}>{_monocultureText}</span> </li>
-                <li>Polyculture: <span className={cropsShipped.cropsShipped.hasPolyculture ? "completed" : "pending"}>{_polycultureText}</span></li>
-            </ul>
+            <h2>Farming Achievements</h2> 
+            <div className="section-achievements">
+                {achievements && achievements.map((ach, i) => (
+                    <AchievementItem 
+                        key={i}
+                        done={ach.done}
+                        image={ach.image}
+                        achievementName={ach.name}
+                        achievementDesc={ach.description}
+                        achievementHoverDesc={ach.hoverDesc}
+                    />))}
+            </div>
             <span className="a-title"><p>Ship 15 of the following crops to get the 'Polyculture' achievement</p></span>
-            {cropsShipped.cropsShipped.poly_crops.map((crop, i) =><a href={`https://stardewvalleywiki.com/${crop.image}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Crops/${crop.image}.png`} alt={crop.name} className={ (crop.shipped !== undefined) ? ((crop.shipped >= 15) ? "done" : "known" ): "" } title={(crop.shipped !== undefined) ? (crop.shipped >= 15) ? `You have shipped  ${crop.name}  ${crop.shipped} times` : `You have to ship ${ 15 - crop.shipped} more ${crop.name} ` : `You haven't shipped ${crop.name}`} ></img></a>)}
+            <div className="item-grid">
+            { poly_crops ? 
+                poly_crops.map((d, i) =>
+                    <ItemWithCounter
+                        key={i}
+                        link={`https://stardewvalleywiki.com/${d.link}`}
+                        src={`https://stardew-tracker.s3.amazonaws.com/Crops/${d.image}.png`}
+                        name={d.name}
+                        state={ (d.shipped) ? "done" : "known" }
+                        hoverDesc={(d.shipped) ? 
+                                    (d.shipped && d.shipped > 0) ? `Cooked ${d.name}  ${d.shipped} times` 
+                                    : `You haven't cooked ${d.name}` 
+                                    : `You don't know how to cook ${d.name}`}
+                        times={d.shipped ? d.shipped : 0}
+                    />)
+                    : <div>No cooking data available.</div>
+            }
+            </div>
 
             <span className="a-title"><p>These crops are not counted for the 'Polyculture' achievement</p></span>
-            {cropsShipped.cropsShipped.mono_extras.map((crop, i) =><a href={`https://stardewvalleywiki.com/${crop.image}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Crops/${crop.image}.png`} alt={crop.name} className={ (crop.shipped !== undefined) ? ((crop.shipped > 0) ? "done" : "known" ): "" } title={(crop.shipped !== undefined) ? `You have shipped  ${crop.name}  ${crop.shipped} times` : `You haven't shipped ${crop.name}`} ></img></a>)}
+                        <div className="item-grid">
+            { mono_extras ? 
+                mono_extras.map((d, i) =>
+                    <ItemWithCounter
+                        key={i}
+                        link={`https://stardewvalleywiki.com/${d.link}`}
+                        src={`https://stardew-tracker.s3.amazonaws.com/Crops/${d.image}.png`}
+                        name={d.name}
+                        state={ (d.shipped) ? "done" : "known" }
+                        hoverDesc={(d.shipped) ? 
+                                    (d.shipped && d.shipped > 0) ? `Cooked ${d.name}  ${d.shipped} times` 
+                                    : `You haven't cooked ${d.name}` 
+                                    : `You don't know how to cook ${d.name}`}
+                        times={d.shipped ? d.shipped : 0}
+                    />)
+                    : <div>No cooking data available.</div>
+            }
+            </div>
+            {/* {cropsShipped.cropsShipped.mono_extras.map((crop, i) =>
+            <a href={`https://stardewvalleywiki.com/${crop.image}`} target="_blank" rel="noreferrer" key={i}> 
+            <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Crops/${crop.image}.png`} 
+            alt={crop.name} className={ (crop.shipped !== undefined) ? ((crop.shipped > 0) ? "done" : "known" ): "" } title={(crop.shipped !== undefined) ? `You have shipped  ${crop.name}  ${crop.shipped} times` : `You haven't shipped ${crop.name}`} ></img></a>)} */}
         </div>
     );
 };
diff --git a/src/Components/Achievements/index.tsx b/src/Components/Achievements/index.tsx
@@ -54,7 +54,11 @@ const Achievements = ({
         <img className="star" alt="star" src={Star}></img>
             <Tabs>
                 <TabList className="achievement">                       
-                    {TabImg.map((img, i) => <Tab key={i}> <img src={img.img} alt={img.alt} title={img.alt} className="tab-ico"></img></Tab>)}
+                    {TabImg.map((img, i) => 
+                        <Tab key={i}>
+                            <img src={img.img} alt={img.alt} title={img.alt} className="tab-ico" />
+                        </Tab>
+                    )}
                 </TabList>
             <TabPanel> 
                 <section className="achievement-container"> 
@@ -68,7 +72,7 @@ const Achievements = ({
             </TabPanel> 
             <TabPanel> 
                 <section className="achievement-container">
-                    <Crops cropsShipped={cropsShipped} />
+                    <Crops {...cropsShipped} />
                 </section>
             </TabPanel> 
             <TabPanel> 
diff --git a/src/Utility/index.tsx b/src/Utility/index.tsx
@@ -38,6 +38,7 @@ import type {
 import type { fullPlayerDataType, museumCollectionType } from 'types/displayDataTypes';
 import { GetCookingData } from './Parsers/parseCookingItems';
 import { GetCraftingRecipes } from './Parsers/parseCraftingItems';
+import { GetCropsAchievements } from './Parsers/parseCropItems';
 
 //Gets the info from the farm hands as an array of the same type
 const GetFarmHands = (locations: gameLocationType[]): playerType[] => {
@@ -230,56 +231,6 @@ const GetShippedItems = (allShipped: itemType) :generalFormatedItemType[] => {
     return data;
 }
 
-/* Crop Related Achievements */
-const GetCropsAchievements = (allShipped: itemsType[]) : cropsShippedType => { 
-    const poly_crops: generalFormatedItemType[] = [] 
-    const mono_extras: generalFormatedItemType[] = []
-    let polycultureCount = 0;
-    let maxMono: maxMonoType = { name: "undefined", shipped: 0 };
-
-    ShipCrops.forEach(cropItem => {
-        const shippedCount = getShippedCount(allShipped, cropItem.id);
-        const cropData = createCropData(cropItem, shippedCount);
-
-        if (!maxMono || shippedCount > maxMono.shipped) {
-            maxMono = {
-                name: cropItem.name,
-                shipped: shippedCount
-            };
-        }
-
-        if (cropItem.isPolyCrop) {
-            if (shippedCount >= 15) polycultureCount++;
-            poly_crops.push(cropData);
-        } else {
-            mono_extras.push(cropData);
-        }
-    });
-
-    const cropsAchievements = {
-        hasPolyculture: polycultureCount === 28,
-        hasMonoculture: maxMono ? maxMono?.shipped >= 300 : false,
-        maxMono,
-        poly_crops,
-        mono_extras 
-    };
-
-    return cropsAchievements;
-}
-
-const getShippedCount = (allShipped: itemsType[], cropId: number): number => {
-    if (!allShipped?.length) return 0;
-    const shippedItem = allShipped.find(item => item.key.int === cropId);
-    return shippedItem?.value?.int || 0;
-};
-
-const createCropData = (cropItem: any, shippedCount: number): generalFormatedItemType => ({
-        name: cropItem.name,
-        image: GetImages(cropItem.name),
-        id: cropItem.id,
-        shipped: shippedCount
-    });
-
 /* End of Crop Related Achievements */
 
 const GetFishes = (allFished: itemsType[]) => { 
diff --git a/src/types/displayDataTypes.ts b/src/types/displayDataTypes.ts
@@ -41,6 +41,12 @@ export type cookingDataType = {
     achievements?: achievementType[];
 }
 
+export type cropsShippedType = {
+    achievements?: achievementType[];
+    mono_extras: generalFormatedItemType[];
+    poly_crops: generalFormatedItemType[];
+};
+
 export type achievementType = {
         done: boolean,
         goal: number,
@@ -78,14 +84,6 @@ export type museumCollectionType = {
     minerals: generalFormatedItemType[];
 }
 
-export type cropsShippedType = {
-    hasMonoculture: boolean;
-    hasPolyculture: boolean;
-    mono_extras: generalFormatedItemType[];
-    poly_crops: generalFormatedItemType[];
-    maxMono: null | maxMonoType;
-};
-
 export type maxMonoType = {
     name: string;
     shipped: number;
