Skip to content

Commit 33a9310

Browse files
JorchCortezJorchCortez
authored
Merge pull request #19 from TheCodeRaccoons/Backwards-compatibility
Improved Backwards compatibility
2 parents 6202552 + 80c14a4 commit 33a9310

16 files changed

Lines changed: 430 additions & 209 deletions

File tree

‎src/App.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -480,6 +480,12 @@ section.sv-container{
480480
display:block
481481
}
482482

483+
.item-grid {
484+
display: flex;
485+
flex-wrap: wrap;
486+
gap: 0.75rem;
487+
}
488+
483489
/*Small Screens*/
484490
@media only screen and (max-width: 800px){
485491

‎src/Components/AchieveTabs/Cooking/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { cookingDataType } from 'types/displayDataTypes';
22
import './Cooking.css';
33
import { AchievementItem,ItemWithCounter } from '@components/common';
44

5-
const Food = ( {cookedItems, knownRecipes, alreadyCookedRecipes, totalRecipes, achievements} : cookingDataType) => {
5+
const Cooking = ( {cookedItems, knownRecipes, alreadyCookedRecipes, totalRecipes, achievements} : cookingDataType) => {
66
return (
77
<div className="progress-container">
88
<span className="a-title">
@@ -24,7 +24,7 @@ const Food = ( {cookedItems, knownRecipes, alreadyCookedRecipes, totalRecipes, a
2424
/>))}
2525
</div>
2626
<br />
27-
<div className="dishes-grid">
27+
<div className="item-grid">
2828
{ cookedItems ?
2929
cookedItems.map((d, i) =>
3030
<ItemWithCounter
@@ -46,4 +46,4 @@ const Food = ( {cookedItems, knownRecipes, alreadyCookedRecipes, totalRecipes, a
4646
);
4747
};
4848

49-
export default Food;
49+
export default Cooking;

‎src/Components/AchieveTabs/Crafting/index.tsx‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
1-
import React, { useState, useEffect } from 'react'
2-
3-
interface CraftingItem {
4-
times?: number;
5-
name: string;
6-
image: string;
7-
}
8-
9-
interface CraftingProps {
10-
itemsCrafted: CraftingItem[];
11-
}
12-
13-
const Crafting: React.FC<CraftingProps> = ({ itemsCrafted }) => {
14-
const [totalCrafted, setTotalCrafted] = useState(0);
15-
16-
const getCraftedItems = (items: CraftingItem[]) => {
17-
return items.map((num) => (num.times !== undefined && num.times > 0 && num.name !== "Wedding Ring") ? 1 : 0).reduce((n: number, next: number) => next + n, 0);
18-
};
19-
20-
useEffect(() => {
21-
setTotalCrafted(getCraftedItems(itemsCrafted));
22-
}, [itemsCrafted]);
23-
24-
const craftedCount = itemsCrafted.map((num) => (num.times !== undefined && num.times > 0) ? 1 : 0).reduce((n: number, next: number) => next + n, 0);
25-
const knownCount = itemsCrafted.map((num) => (num.times !== undefined && num.times >= 0) ? 1 : 0).reduce((n: number, next: number) => next + n, 0);
26-
1+
import { AchievementItem, ItemWithCounter } from "@components/common";
2+
import type { itemsCraftedType } from "types/displayDataTypes";
3+
4+
const Crafting = ({
5+
knownItems,
6+
alreadyCraftedItems,
7+
craftedItems,
8+
totalRecipes,
9+
achievements }: itemsCraftedType) => {
2710
return (
28-
<div className="progress-container">
29-
<span className="a-title"><h1>has crafted {craftedCount} and knows {knownCount} of {itemsCrafted.length} recipes.</h1></span>
11+
<div className="progress-container">
12+
<span className="a-title">
13+
<h2>
14+
has crafted {alreadyCraftedItems} and knows {knownItems} of {totalRecipes} recipes.
15+
</h2>
16+
</span>
3017
<br />
3118
<h2>Crafting Achievements</h2>
32-
<ul className="a-List">
33-
<li>D.I.Y.: {(totalCrafted >= 15) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to craft {15 - totalCrafted} more items to get this</span> } </li>
34-
<li>Artisan: {(totalCrafted >= 30) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to craft {30 - totalCrafted} more items to get this </span>}</li>
35-
<li>Craft Master: {(totalCrafted >= 104) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to craft {104 - totalCrafted} more items to get this </span>}</li>
36-
</ul>
19+
<div className="section-achievements">
20+
{achievements && achievements.map((ach, i) => (
21+
<AchievementItem
22+
key={i}
23+
done={ach.done}
24+
image={ach.image}
25+
achievementName={ach.name}
26+
achievementDesc={ach.description}
27+
achievementHoverDesc={ach.hoverDesc}
28+
/>))}
29+
</div>
3730
<br />
38-
{itemsCrafted.map((item, i) => (
39-
<a href={`https://stardewvalleywiki.com/${item.image}`}
40-
target="_blank"
41-
rel="noreferrer"
42-
key={i}>
43-
<img
44-
key={i}
45-
src={`https://stardew-tracker.s3.amazonaws.com/Crafting/${item.image}.png`}
46-
alt={item.name}
47-
className={(item.times !== undefined) ? ((item.times > 0) ? "done" : "known") : "" }
48-
title={(item.times !== undefined) ? ((item.times > 0) ? `You have crafted "${item.name}" ${item.times} Times` : `You haven't crafted any ${item.name} yet`) : `You don't know how to craft ${item.name} yet`}>
49-
</img>
50-
</a>))}
31+
32+
<div className="item-grid">
33+
{ craftedItems ?
34+
craftedItems.map((d, i) =>
35+
<ItemWithCounter
36+
key={i}
37+
link={`https://stardewvalleywiki.com/${d.image}`}
38+
src={`https://stardew-tracker.s3.amazonaws.com/Crafting/${d.image}.png`}
39+
name={d.name}
40+
state={ (d.known) ? ((d.times && d.times > 0) ? "done" : "known" ): "unknown" }
41+
hoverDesc={(d.known) ?
42+
(d.times && d.times > 0) ? `Crafted ${d.name} ${d.times} times`
43+
: `You haven't crafted ${d.name}`
44+
: `You don't know how to craft ${d.name}`}
45+
times={d.known ? d.times : undefined}
46+
/>)
47+
: <div>No crafting data available.</div>
48+
}
49+
</div>
5150
</div>
5251
);
5352
};

‎src/Components/AchieveTabs/Crops/index.tsx‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,66 @@
1-
import React, { useState, useEffect } from 'react'
1+
import { AchievementItem, ItemWithCounter } from '@components/common';
22
import type { cropsShippedType } from 'types/displayDataTypes';
33

4-
interface CropsShippedWrapperType {
5-
cropsShipped: cropsShippedType;
6-
}
74

8-
const Crops= (cropsShipped : CropsShippedWrapperType) => {
9-
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`;
10-
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`;
11-
5+
const Crops= ({poly_crops, mono_extras, achievements} : cropsShippedType) => {
126
return (
137
<div className="progress-container">
14-
{/* <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> */}
158
<br />
16-
<h2>Farming Achievements</h2>
17-
<ul className="a-List">
18-
<li>Monoculture: <span className={cropsShipped.cropsShipped.hasMonoculture ? "completed" : "pending"}>{_monocultureText}</span> </li>
19-
<li>Polyculture: <span className={cropsShipped.cropsShipped.hasPolyculture ? "completed" : "pending"}>{_polycultureText}</span></li>
20-
</ul>
9+
<h2>Farming Achievements</h2>
10+
<div className="section-achievements">
11+
{achievements && achievements.map((ach, i) => (
12+
<AchievementItem
13+
key={i}
14+
done={ach.done}
15+
image={ach.image}
16+
achievementName={ach.name}
17+
achievementDesc={ach.description}
18+
achievementHoverDesc={ach.hoverDesc}
19+
/>))}
20+
</div>
2121
<span className="a-title"><p>Ship 15 of the following crops to get the 'Polyculture' achievement</p></span>
22-
{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>)}
22+
<div className="item-grid">
23+
{ poly_crops ?
24+
poly_crops.map((d, i) =>
25+
<ItemWithCounter
26+
key={i}
27+
link={`https://stardewvalleywiki.com/${d.link}`}
28+
src={`https://stardew-tracker.s3.amazonaws.com/Crops/${d.image}.png`}
29+
name={d.name}
30+
state={ (d.shipped) ? "done" : "known" }
31+
hoverDesc={(d.shipped) ?
32+
(d.shipped && d.shipped > 0) ? `Cooked ${d.name} ${d.shipped} times`
33+
: `You haven't cooked ${d.name}`
34+
: `You don't know how to cook ${d.name}`}
35+
times={d.shipped ? d.shipped : 0}
36+
/>)
37+
: <div>No cooking data available.</div>
38+
}
39+
</div>
2340

2441
<span className="a-title"><p>These crops are not counted for the 'Polyculture' achievement</p></span>
25-
{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>)}
42+
<div className="item-grid">
43+
{ mono_extras ?
44+
mono_extras.map((d, i) =>
45+
<ItemWithCounter
46+
key={i}
47+
link={`https://stardewvalleywiki.com/${d.link}`}
48+
src={`https://stardew-tracker.s3.amazonaws.com/Crops/${d.image}.png`}
49+
name={d.name}
50+
state={ (d.shipped) ? "done" : "known" }
51+
hoverDesc={(d.shipped) ?
52+
(d.shipped && d.shipped > 0) ? `Cooked ${d.name} ${d.shipped} times`
53+
: `You haven't cooked ${d.name}`
54+
: `You don't know how to cook ${d.name}`}
55+
times={d.shipped ? d.shipped : 0}
56+
/>)
57+
: <div>No cooking data available.</div>
58+
}
59+
</div>
60+
{/* {cropsShipped.cropsShipped.mono_extras.map((crop, i) =>
61+
<a href={`https://stardewvalleywiki.com/${crop.image}`} target="_blank" rel="noreferrer" key={i}>
62+
<img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Crops/${crop.image}.png`}
63+
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>)} */}
2664
</div>
2765
);
2866
};

‎src/Components/AchieveTabs/Fish/index.tsx‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
1-
import React, { useState, useEffect } from 'react'
2-
import type { generalFormatedItemType } from 'types/displayDataTypes';
1+
import { AchievementItem, ItemWithCounter } from '@components/common';
2+
import type { fishCaughtType } from 'types/displayDataTypes';
33

4-
interface FishProps {
5-
fishCaught: generalFormatedItemType[];
6-
}
7-
8-
const Fish = ({ fishCaught }: FishProps) => {
9-
const [totalFished, setTotalFished] = useState(0);
10-
11-
const getCraftedItems = (items: generalFormatedItemType[]) => {
12-
return items.map((num) => (num.fished) ? 1 : 0).reduce((n: number, next: number) => next + n, 0);
13-
};
14-
15-
useEffect(() => {
16-
setTotalFished(getCraftedItems(fishCaught));
17-
}, [fishCaught]);
4+
const Fish = ({
5+
fishCaught,
6+
catchedFish,
7+
total,
8+
achievements }: fishCaughtType) => {
189

1910
return (
2011
<div className="progress-container">
21-
<span className="a-title"><h1>{ `You've fished ${totalFished} out of ${fishCaught.length}`}</h1></span>
12+
<span className="a-title">
13+
<h2>
14+
Has fished {fishCaught} out of {total}.
15+
</h2>
16+
</span>
2217
<br />
2318
<h2>Fishing Achievements</h2>
24-
<ul className="a-List">
25-
<li>Fisherman: {(totalFished >= 10) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to catch {15 - totalFished} more fish to get this</span> } </li>
26-
<li>Ol' Mariner: {(totalFished >= 24) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to catch {30 - totalFished} more fish to get this </span>}</li>
27-
<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>
28-
</ul>
19+
20+
<div className="section-achievements">
21+
{achievements && achievements.map((ach, i) => (
22+
<AchievementItem
23+
key={i}
24+
done={ach.done}
25+
image={ach.image}
26+
achievementName={ach.name}
27+
achievementDesc={ach.description}
28+
achievementHoverDesc={ach.hoverDesc}
29+
/>))}
30+
</div>
2931
<br />
30-
{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>)}
31-
32+
<div className="item-grid">
33+
{ catchedFish ?
34+
catchedFish.map((d, i) =>
35+
<ItemWithCounter
36+
key={i}
37+
link={`https://stardewvalleywiki.com/${d.link}`}
38+
src={`https://stardew-tracker.s3.amazonaws.com/Fishing/${d.image}.png`}
39+
name={d.name}
40+
state={ (d.fished) ? "done" : "unknown" }
41+
hoverDesc={(d.fished) ? `Has caught ${d.name}`
42+
: `You haven't caught ${d.name}`}
43+
times={d.fished ? null : undefined}
44+
/>)
45+
: <div>No fishing data available.</div>
46+
}
47+
</div>
3248
</div>
3349
);
3450
};

‎src/Components/Achievements/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,17 @@ const Achievements = ({
4848
{img: TabQuests, alt: "Quests"},
4949
{img: TabGrandpa, alt: "Grandpa's evaluation"}
5050
];
51-
console.log("Professions in Achievements:", professions);
51+
5252
return (
5353
<div className="file-container">
5454
<img className="star" alt="star" src={Star}></img>
5555
<Tabs>
5656
<TabList className="achievement">
57-
{TabImg.map((img, i) => <Tab key={i}> <img src={img.img} alt={img.alt} title={img.alt} className="tab-ico"></img></Tab>)}
57+
{TabImg.map((img, i) =>
58+
<Tab key={i}>
59+
<img src={img.img} alt={img.alt} title={img.alt} className="tab-ico" />
60+
</Tab>
61+
)}
5862
</TabList>
5963
<TabPanel>
6064
<section className="achievement-container">
@@ -63,17 +67,17 @@ const Achievements = ({
6367
</TabPanel>
6468
<TabPanel>
6569
<section className="achievement-container">
66-
<Crafting itemsCrafted={itemsCrafted}></Crafting>
70+
<Crafting {...itemsCrafted}></Crafting>
6771
</section>
6872
</TabPanel>
6973
<TabPanel>
7074
<section className="achievement-container">
71-
<Crops cropsShipped={cropsShipped} />
75+
<Crops {...cropsShipped} />
7276
</section>
7377
</TabPanel>
7478
<TabPanel>
7579
<section className="achievement-container">
76-
<Fish fishCaught={fishCaught} />
80+
<Fish {...fishCaught} />
7781
</section>
7882
</TabPanel>
7983
<TabPanel>

‎src/Components/common/ItemWithCounter.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ type ItemWithCounterProps = {
55
name: string;
66
state: 'done' | 'known' | 'unknown';
77
hoverDesc?: string;
8-
times?: number | undefined;
8+
times?: number | undefined | null;
99
}
1010

1111
const ItemWithCounter = ({
@@ -32,6 +32,7 @@ const ItemWithCounter = ({
3232
</img>
3333
{times === undefined ?
3434
<p className="item-unknown">?</p> :
35+
times === null ? null :
3536
<p className="item-times"> x{times}</p> }
3637
</a>
3738
);

‎src/Components/common/styles/ItemWithCounter.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11

22

33
.item-with-counter {
4-
display: block;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
57
position: relative;
8+
width: 2.5rem !important;
9+
height: 2.5rem !important;
610
}
711

812
.item-with-counter p {
@@ -13,7 +17,7 @@
1317

1418
&.item-times {
1519
position: absolute;
16-
bottom: 5px;
20+
bottom: 0rem;
1721
right: 0;
1822
}
1923
&.item-unknown {
@@ -26,8 +30,8 @@
2630
}
2731

2832
.item-with-counter img {
29-
width: 2.5rem !important;
30-
height: 2.5rem !important;
33+
width: auto !important; ;
34+
height: 100% !important; ;
3135

3236
&.done {
3337
filter: grayscale(0) brightness(1) !important;

0 commit comments

Comments
 (0)