Merge pull request #18 from TheCodeRaccoons/Backwards-compatibility

Backwards compatibility

Author: JorchCortez

src/App.css

@@ -387,8 +387,9 @@ section.sv-container{
 .done{
   filter: grayscale(0) brightness(1) !important;
 }
+
 .known{ 
-  filter: grayscale(1) brightness(0.5) !important;
+  filter: grayscale(1) brightness(0.5) opacity(0.3) !important;
 }
 
 .title-center{
@@ -527,4 +528,4 @@ section.sv-container{
     margin: 0 0.125rem;
   } 
 
-} 
+} 

src/Components/AchieveTabs/Collection/index.tsx

@@ -7,7 +7,8 @@ interface CollectionProps {
 const Collection = ({ museumCollection: mc }: CollectionProps) => {
     const createCollectionItem = (item: any, i: number, type: string) => {
         return (
-            <a href={`https://stardewvalleywiki.com/${item.image}`} target="blank" key={i}>
+            <a href={`https://stardewvalleywiki.com/${item.image}`} 
+            target="_blank" rel="noreferrer" key={i}>
                 <img 
                     key={i} 
                     src={`https://stardew-tracker.s3.amazonaws.com/${type}/${item.image}.png`} 

src/Components/AchieveTabs/Cooking/Cooking.css

@@ -24,25 +24,4 @@
     position: absolute;
     bottom: 5px;
     right: 0;
-}
-
-.achievement-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-weight: bold;
-    max-width: 30%;
-}
-
-.section-achievements img {
-    width: 3rem !important;
-    height: 3rem !important;
-}
-
-.section-achievements img.achieved {
-    filter: grayscale(0) brightness(1) !important;
-}
-
-.section-achievements img.pending {
-    filter: grayscale(1) brightness(0.5) !important;
 }

src/Components/AchieveTabs/Cooking/index.tsx

@@ -1,77 +1,45 @@
 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) => {
     return ( 
         <div className="progress-container">   
             <span className="a-title">
                 <h2>
-                    Has cooked {alreadyCookedRecipes}, knowing {knownRecipes} out of 74 recipes
+                    Has cooked {alreadyCookedRecipes}, knowing {knownRecipes} out of {totalRecipes} recipes
                 </h2>
             </span>
             <br />
             <h2>Cooking Achievements</h2>
             <div className="section-achievements">
-                <div className="achievement-item">
-                    <img 
-                        className={`${(alreadyCookedRecipes >= 10) ? 
-                        "achieved" : "pending"}`} 
-                        src={Cook}
-                        alt="Cook Achievement"
-                    />
-                    <div>
-                        <h3>Cook:</h3> 
-                        <p>Cook a total of 10 dishes</p>
-                    </div>
-                </div>
-                <div className="achievement-item">
-                    <img 
-                        className={`${(alreadyCookedRecipes >= 25) ? 
-                        "achieved" : "pending"}`} 
-                        src={SousChef}
-                        alt="Sous Chef Achievement"
-                    />
-                    <div>
-                        <h3>Sous Chef:</h3> 
-                        <p>Cook a total of 25 dishes</p>
-                    </div>
-                </div>
-                <div className="achievement-item">
-                    <img 
-                        className={`${(alreadyCookedRecipes >= 74) ? 
-                        "achieved" : "pending"}`} 
-                        src={GourmetChef}
-                        alt="Gourmet Chef Achievement"
-                    />
-                    <div>
-                        <h3>Gourmet Chef:</h3> 
-                        <p>Cook a total of 74 dishes</p>
-                    </div>
-                </div>
+                {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">
             { cookedItems ? 
-                cookedItems.map((d, i) => 
-                    <a 
-                    href={`https://stardewvalleywiki.com/${d.link}`} 
-                    target="blank" 
-                    key={i}
-                    className="dish-item">
-                        <img 
-                            src={`https://stardew-tracker.s3.amazonaws.com/Cooking/${d.image}.png`} 
-                            alt={d.name} 
-                            className={ (d.times !== undefined) ? ((d.times > 0) ? "done" : "known" ): "" } 
-                            title={(d.times !== undefined) ? 
-                                (d.times > 0) ? `Cooked ${d.name}  ${d.times} times` 
-                                : `You haven't cooked ${d.name}` 
-                                : `You don't know how to cook ${d.name}`
-                            } >
-                        </img>
-                        <p className="times-cooked">x{d.times}</p>
-                    </a>) 
-                : <div>No cooking data available.</div>
+                cookedItems.map((d, i) =>
+                    <ItemWithCounter
+                        key={i}
+                        link={`https://stardewvalleywiki.com/${d.link}`}
+                        src={`https://stardew-tracker.s3.amazonaws.com/Cooking/${d.image}.png`}
+                        name={d.name}
+                        state={ (d.knownDish) ? ((d.times && d.times > 0) ? "done" : "known" ): "unknown" }
+                        hoverDesc={(d.knownDish) ? 
+                                    (d.times && d.times > 0) ? `Cooked ${d.name}  ${d.times} times` 
+                                    : `You haven't cooked ${d.name}` 
+                                    : `You don't know how to cook ${d.name}`}
+                        times={d.knownDish ? d.times : undefined}
+                    />)
+                    : <div>No cooking data available.</div>
             }
             </div>
         </div>

src/Components/AchieveTabs/Crafting/index.tsx

@@ -36,7 +36,10 @@ const Crafting: React.FC<CraftingProps> = ({ itemsCrafted }) => {
             </ul>
             <br />
             {itemsCrafted.map((item, i) => (
-            <a href={`https://stardewvalleywiki.com/${item.image}`} target="blank" key={i}>
+            <a href={`https://stardewvalleywiki.com/${item.image}`} 
+                target="_blank" 
+                rel="noreferrer" 
+                key={i}>
                 <img 
                 key={i} 
                 src={`https://stardew-tracker.s3.amazonaws.com/Crafting/${item.image}.png`} 

src/Components/AchieveTabs/Crops/index.tsx

@@ -19,10 +19,10 @@ const Crops= (cropsShipped : CropsShippedWrapperType) => {
                 <li>Polyculture: <span className={cropsShipped.cropsShipped.hasPolyculture ? "completed" : "pending"}>{_polycultureText}</span></li>
             </ul>
             <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" 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>)}
+            {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>)}
 
             <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" 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>)}
+            {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>
     );
 };

src/Components/AchieveTabs/Fish/index.tsx

@@ -27,7 +27,7 @@ const Fish = ({ fishCaught }: FishProps) => {
                 <li>Master Angler : {(totalFished >= fishCaught.length) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to catch {fishCaught.length - totalFished} more fish to get this </span>}</li>
             </ul>
             <br />
-            {fishCaught.map((fish, i) => <a href={`https://stardewvalleywiki.com/${fish.image}`} target="blank" key={i}><img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Fishing/${fish.image}.png`} alt={fish.name} className={ (fish.fished) ? "done" : ""} title={(fish.fished) ? `You've caught  ${fish.name}` :  `You haven't fished ${fish.name}`} ></img></a>)}
+            {fishCaught.map((fish, i) => <a href={`https://stardewvalleywiki.com/${fish.image}`} target="_blank" rel="noreferrer" key={i}><img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Fishing/${fish.image}.png`} alt={fish.name} className={ (fish.fished) ? "done" : ""} title={(fish.fished) ? `You've caught  ${fish.name}` :  `You haven't fished ${fish.name}`} ></img></a>)}
 
         </div>
     );

src/Components/AchieveTabs/Monsters/index.tsx

@@ -20,7 +20,7 @@ const Monsters: React.FC<MonstersProps> = ({ monstersKilled }) => {
     const getQuestData = (monsters: MonsterData) => {
         return(
                 <li key={monsters.goal}>
-                    <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="blank" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
+                    <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
         {monsters.category}: {(monsters.timesKilled >= monsters.goal) ?  <span className="completed"> {monsters.timesKilled} / {monsters.goal}</span> : <span className="pending"> {monsters.timesKilled} / {monsters.goal}</span> } 
                 </li>    
         );

src/Components/AchieveTabs/Quests/index.tsx

@@ -27,7 +27,7 @@ const Quests: React.FC<QuestsProps> = ({ questsDone, specialReq, pendingSpecialR
     const getQuestData = (monsters: QuestData) => {
         return(
             <li key={monsters.goal}>
-                    <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="blank" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
+                    <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
         {monsters.category}: {(monsters.timesKilled >= monsters.goal) ?  <span className="completed"> {monsters.timesKilled} / {monsters.goal}</span> : <span className="pending"> {monsters.timesKilled} / {monsters.goal}</span> } 
                 </li>    
         );

src/Components/AchieveTabs/Shipping/index.tsx

@@ -37,7 +37,7 @@ const Shipping: React.FC<ShippingProps> = ({ shippedItems }) => {
                 <li>Full Shipment: {(totalShipped === shippedItems.length) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to ship {shippedItems.length - totalShipped} more item to get this achievement.</span> } </li>
             </ul>
             <br />
-            {shippedItems.map((d, i) => <a href={`https://stardewvalleywiki.com/${d.image}`} target="blank" key={i}><img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Shipment/${d.image}.png`} alt={d.name} className={ (d.shipped !== undefined) ?  "done" : "" } title={(d.shipped !== undefined) ? `You have shipped ${d.name}` : `You haven't shipped ${d.name}`} ></img></a>)}
+            {shippedItems.map((d, i) => <a href={`https://stardewvalleywiki.com/${d.image}`} target="_blank" rel="noreferrer" key={i}><img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Shipment/${d.image}.png`} alt={d.name} className={ (d.shipped !== undefined) ?  "done" : "" } title={(d.shipped !== undefined) ? `You have shipped ${d.name}` : `You haven't shipped ${d.name}`} ></img></a>)}
         </div>
     );
 };