Skip to content

Commit 9a8085e

Browse files
FracturedShaderFracturedShader
committed
Adding crafting ingredients lists
Added collapsed-by-default "Needed Ingredients" sections to cooking and crafting pages with support for filtering by recipe state and season. **Motivation and goals:** Crafting every item requires a tremendous number of ingredients, some of which can only be obtained in certain seasons. Having a full list to reference makes it easy to plan ahead. Being able to filter by season makes near term planning much more tractable. **Features:** - Support for cooking and crafting recipes - Expands recipe ingredients recursively to make planning easier - Familiar card layouts with Wiki links - Custom Wiki links for non-specific ingredients (e.g. "Any Fish") - Filtering by known/unknown (crafted/cooked excluded to avoid clutter) - Fistering by season
1 parent fa040fd commit 9a8085e

File tree

4 files changed

+536
-0
lines changed

4 files changed

+536
-0
lines changed

‎apps/stardew.app/src/components/cards/ingredient-card.tsx‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import Image from "next/image";
2+
3+
import bigCraftables from "@/data/big_craftables.json";
4+
import objects from "@/data/objects.json";
5+
6+
import { cn } from "@/lib/utils";
7+
import { Dispatch, SetStateAction, useState } from "react";
8+
9+
import { deweaponize } from "@/lib/utils";
10+
11+
import { NewItemBadge } from "@/components/new-item-badge";
12+
import { Button } from "@/components/ui/button";
13+
import {
14+
Dialog,
15+
DialogContent,
16+
DialogDescription,
17+
DialogFooter,
18+
DialogHeader,
19+
DialogTitle,
20+
DialogTrigger,
21+
} from "@/components/ui/dialog";
22+
23+
import { IconChevronRight, IconExternalLink } from "@tabler/icons-react";
24+
25+
interface Props {
26+
/**
27+
* The ID of the object/big-craftable/category to display
28+
*/
29+
itemID: string;
30+
31+
/**
32+
* Number to display as the needed count in the card
33+
*/
34+
count: number;
35+
36+
/**
37+
* Whether the user prefers to see new content
38+
*
39+
* @type {boolean}
40+
* @memberof Props
41+
*/
42+
show: boolean;
43+
44+
/**
45+
* The handler to display the new content confirmation prompt
46+
*
47+
* @type {Dispatch<SetStateAction<boolean>>}
48+
* @memberof Props
49+
*/
50+
setPromptOpen?: Dispatch<SetStateAction<boolean>>;
51+
}
52+
53+
const categoryItems: Record<string, string> = {
54+
"-4": "Any Fish",
55+
"-5": "Any Egg",
56+
"-6": "Any Milk",
57+
"-777": "Wild Seeds (Any)",
58+
};
59+
60+
const categoryWikiNames: Record<string, string> = {
61+
"-4": "Fish",
62+
"-5": "Egg",
63+
"-6": "Milk",
64+
"-777": "Wild_Seeds",
65+
};
66+
67+
export function IngredientMinVersion(itemID: string) {
68+
if (itemID.startsWith("-")) {
69+
return "1.5.0";
70+
} else if (deweaponize(itemID).key === "BC") {
71+
const item_id = deweaponize(itemID).value;
72+
return bigCraftables[item_id as keyof typeof bigCraftables].minVersion;
73+
}
74+
75+
return objects[itemID as keyof typeof objects].minVersion;
76+
}
77+
78+
export const IngredientCard = ({
79+
itemID,
80+
count,
81+
show,
82+
setPromptOpen,
83+
}: Props) => {
84+
const [open, setOpen] = useState(false);
85+
86+
let item;
87+
let isCategory = false;
88+
let isBC = false;
89+
let iconURL = "";
90+
let description = "";
91+
let wiki_name = "";
92+
93+
// if itemID is less than 0, it's a category
94+
if (itemID.startsWith("-")) {
95+
isCategory = true;
96+
item = {
97+
name: categoryItems[itemID],
98+
};
99+
iconURL = `https://cdn.stardew.app/images/(C)${itemID}.webp`;
100+
wiki_name = categoryWikiNames[itemID];
101+
} else if (deweaponize(itemID).key === "BC") {
102+
const item_id = deweaponize(itemID).value;
103+
isBC = true;
104+
item = bigCraftables[item_id as keyof typeof bigCraftables];
105+
iconURL = `https://cdn.stardew.app/images/(BC)${deweaponize(itemID).value}.webp`;
106+
description = item.description;
107+
wiki_name = item.name.replaceAll(" ", "_");
108+
} else {
109+
item = objects[itemID as keyof typeof objects];
110+
iconURL = `https://cdn.stardew.app/images/(O)${itemID}.webp`;
111+
description = item.description ?? "";
112+
wiki_name = item.name.replaceAll(" ", "_");
113+
}
114+
115+
const name = item.name;
116+
117+
return (
118+
<Dialog open={open} onOpenChange={setOpen}>
119+
<DialogTrigger asChild>
120+
<div
121+
className={cn(
122+
"relative flex select-none items-center justify-between rounded-lg border px-5 py-4 text-left text-neutral-950 shadow-sm transition-colors hover:cursor-pointer dark:text-neutral-50",
123+
"border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-800",
124+
)}
125+
onClick={(e) => {
126+
if (item.minVersion === "1.6.0" && !show) {
127+
e.preventDefault();
128+
setPromptOpen?.(true);
129+
return;
130+
}
131+
}}
132+
>
133+
{item.minVersion === "1.6.0" && (
134+
<NewItemBadge version={item.minVersion} />
135+
)}
136+
<div
137+
className={cn(
138+
"flex items-center space-x-3 truncate text-left",
139+
item.minVersion === "1.6.0" && !show && "blur-sm",
140+
)}
141+
>
142+
<Image
143+
src={iconURL}
144+
alt={name}
145+
className="rounded-sm"
146+
width={32}
147+
height={32}
148+
/>
149+
<div className="min-w-0 flex-1 pr-3">
150+
<p className="truncate font-medium">{`${name} (${count}x)`}</p>
151+
<p className="truncate text-sm text-neutral-500 dark:text-neutral-400">
152+
{description}
153+
</p>
154+
</div>
155+
</div>
156+
<IconChevronRight className="h-5 w-5 flex-shrink-0 text-neutral-500 dark:text-neutral-400" />
157+
</div>
158+
</DialogTrigger>
159+
<DialogContent>
160+
<DialogHeader>
161+
<Image
162+
src={iconURL}
163+
alt={name}
164+
className="mx-auto rounded-sm"
165+
width={42}
166+
height={42}
167+
/>
168+
<DialogTitle className="text-center">{name}</DialogTitle>
169+
<DialogDescription className="text-center">
170+
{description}
171+
</DialogDescription>
172+
</DialogHeader>
173+
<DialogFooter className="gap-3 sm:justify-between sm:gap-0">
174+
<Button variant="outline">
175+
<a
176+
className="flex items-center"
177+
target="_blank"
178+
rel="noreferrer"
179+
href={`https://stardewvalleywiki.com/${wiki_name}`}
180+
>
181+
Visit Wiki Page
182+
<IconExternalLink className="h-4"></IconExternalLink>
183+
</a>
184+
</Button>
185+
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end sm:gap-0 sm:space-x-2">
186+
<Button variant="secondary" onClick={() => setOpen(false)}>
187+
Close
188+
</Button>
189+
</div>
190+
</DialogFooter>
191+
</DialogContent>
192+
</Dialog>
193+
);
194+
};

‎apps/stardew.app/src/components/ingredient-list.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import shipping_items from "@/data/shipping.json";
2+
3+
import type { Recipe } from "@/types/recipe";
4+
5+
import { usePlayers } from "@/contexts/players-context";
6+
import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
7+
import { IngredientCard, IngredientMinVersion } from "./cards/ingredient-card";
8+
9+
const semverGte = require("semver/functions/gte");
10+
11+
interface Props<T extends Recipe> {
12+
/**
13+
* All of the recipes available within the game
14+
*/
15+
recipes: {
16+
[key: string]: T;
17+
};
18+
19+
/**
20+
* Player's recipe knowledge
21+
*/
22+
playerRecipes: {
23+
[key: string]: 0 | 1 | 2;
24+
};
25+
26+
/**
27+
* Whether to limit ingredients counts to unkown ("0"), known ("1"), or
28+
* "all" recipes.
29+
*/
30+
filterKnown?: string;
31+
32+
/**
33+
* Limit shown ingredients to those available in a particular season, or
34+
* "all" ingredients.
35+
*/
36+
filterSeason?: string;
37+
38+
/**
39+
* Whether the user prefers to see new content
40+
*
41+
* @type {boolean}
42+
* @memberof Props
43+
*/
44+
show: boolean;
45+
46+
/**
47+
* The handler to display the new content confirmation prompt
48+
*
49+
* @type {Dispatch<SetStateAction<boolean>>}
50+
* @memberof Props
51+
*/
52+
setPromptOpen?: Dispatch<SetStateAction<boolean>>;
53+
}
54+
55+
class IngredientData {
56+
counts: [number, number, number] = [0, 0, 0];
57+
seasons: string[] = [];
58+
59+
constructor(itemID: string) {
60+
if (itemID in shipping_items) {
61+
this.seasons =
62+
shipping_items[itemID as keyof typeof shipping_items].seasons;
63+
}
64+
}
65+
}
66+
67+
type IngredientsRecord = Record<string, IngredientData>;
68+
69+
export const IngredientList = <T extends Recipe>({
70+
recipes,
71+
playerRecipes,
72+
filterKnown = "",
73+
filterSeason = "all",
74+
setPromptOpen,
75+
show,
76+
}: Props<T>) => {
77+
const [gameVersion, setGameVersion] = useState("1.6.0");
78+
79+
const { activePlayer } = usePlayers();
80+
81+
useEffect(() => {
82+
if (activePlayer) {
83+
// set the minimum game version
84+
if (activePlayer.general?.gameVersion) {
85+
const version = activePlayer.general.gameVersion;
86+
setGameVersion(version);
87+
}
88+
}
89+
}, [activePlayer]);
90+
91+
const ingredientCounts: IngredientsRecord = useMemo(() => {
92+
const reduceIngredients = (
93+
acc: IngredientsRecord,
94+
[_, v]: [string, T],
95+
status: 0 | 1 | 2,
96+
): IngredientsRecord =>
97+
v.ingredients.reduce((a, i) => {
98+
if (!(i.itemID in a)) {
99+
a[i.itemID] = new IngredientData(i.itemID);
100+
}
101+
102+
a[i.itemID].counts[status] += i.quantity;
103+
104+
if (i.itemID in recipes) {
105+
a = reduceIngredients(a, [i.itemID, recipes[i.itemID]], status);
106+
}
107+
108+
return a;
109+
}, acc);
110+
111+
return Object.entries(recipes).reduce(
112+
(acc, [id, v]) =>
113+
reduceIngredients(acc, [id, v], playerRecipes[v.itemID] ?? 0),
114+
{},
115+
);
116+
}, [recipes, playerRecipes]);
117+
118+
return (
119+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
120+
{Object.entries(ingredientCounts)
121+
.filter(([id, _]) => semverGte(gameVersion, IngredientMinVersion(id)))
122+
.filter(([_, details]) => {
123+
if (filterSeason === "all") {
124+
return true;
125+
}
126+
127+
return (
128+
details.seasons.length == 0 ||
129+
details.seasons.includes(filterSeason)
130+
);
131+
})
132+
.map(([id, details]): [string, number] => {
133+
switch (filterKnown) {
134+
case "0":
135+
return [id, details.counts[0]];
136+
case "1":
137+
return [id, details.counts[1]];
138+
case "2":
139+
return [id, 0];
140+
default:
141+
return [id, details.counts[0] + details.counts[1]];
142+
}
143+
})
144+
.filter(([_, count]) => count > 0)
145+
.map(([id, count]) => (
146+
<IngredientCard
147+
key={id}
148+
itemID={id}
149+
count={count}
150+
show={show}
151+
setPromptOpen={setPromptOpen}
152+
/>
153+
))}
154+
</div>
155+
);
156+
};

0 commit comments

Comments
 (0)