From b65dff08adadbb6b4f74a4525f2ee38620e99347 Mon Sep 17 00:00:00 2001
From: Matthias Luger <malua007@live.de>
Date: Wed, 14 Feb 2024 22:03:54 +0100
Subject: [PATCH] show count per slot in recipe

---
 .../CraftingRecipe/CraftingRecipe.tsx         | 29 ++++++++----
 global.d.ts                                   | 23 ++++++----
 utils/Parser/APIResponseParser.tsx            | 45 +++++++++++++++----
 3 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/components/CraftsList/CraftingRecipe/CraftingRecipe.tsx b/components/CraftsList/CraftingRecipe/CraftingRecipe.tsx
index 7b6aa692..32109776 100644
--- a/components/CraftsList/CraftingRecipe/CraftingRecipe.tsx
+++ b/components/CraftsList/CraftingRecipe/CraftingRecipe.tsx
@@ -30,28 +30,41 @@ export function CraftingRecipe(props: Props) {
         cursor: props.onIngredientClick ? 'pointer' : 'default'
     } as React.CSSProperties
 
-    function getGridElement(tag?: string) {
+    function getGridElement(craftingRecipeSlot: CraftingRecipeSlot | undefined) {
+        if (!craftingRecipeSlot) {
+            return <div style={{ height: '36px', width: '36px' }} />
+        }
         return (
             <div
                 onClick={() => {
-                    onIngredientClick(tag)
+                    onIngredientClick(craftingRecipeSlot.tag)
                 }}
                 style={style}
                 className={styles.gridCell}
             >
-                {tag ? (
+                <div style={{ position: 'relative' }}>
                     <Image
-                        title={convertTagToName(tag)}
+                        title={convertTagToName(craftingRecipeSlot.tag)}
                         className={styles.ingredienceImage}
-                        src={api.getItemImageUrl({ tag: tag })}
+                        src={api.getItemImageUrl({ tag: craftingRecipeSlot.tag })}
                         alt=""
                         crossOrigin="anonymous"
                         height={36}
                         width={36}
                     />
-                ) : (
-                    <div style={{ height: '36px', width: '36px' }} />
-                )}
+                    <div
+                        style={{
+                            position: 'absolute',
+                            bottom: 0,
+                            right: 0,
+                            color: 'white',
+                            fontSize: '16px',
+                            fontWeight: 'bold'
+                        }}
+                    >
+                        {craftingRecipeSlot.count}
+                    </div>
+                </div>
             </div>
         )
     }
diff --git a/global.d.ts b/global.d.ts
index 1ff73772..aa69ff33 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -389,15 +389,20 @@ interface SkyblockProfile {
     id: string
 }
 interface CraftingRecipe {
-    A1: string
-    A2: string
-    A3: string
-    B1: string
-    B2: string
-    B3: string
-    C1: string
-    C2: string
-    C3: string
+    A1: CraftingRecipeSlot
+    A2: CraftingRecipeSlot
+    A3: CraftingRecipeSlot
+    B1: CraftingRecipeSlot
+    B2: CraftingRecipeSlot
+    B3: CraftingRecipeSlot
+    C1: CraftingRecipeSlot
+    C2: CraftingRecipeSlot
+    C3: CraftingRecipeSlot
+}
+
+interface CraftingRecipeSlot {
+    tag: string,
+    count: number
 }
 
 interface LowestBin {
diff --git a/utils/Parser/APIResponseParser.tsx b/utils/Parser/APIResponseParser.tsx
index 0fa2f7e3..655c64aa 100644
--- a/utils/Parser/APIResponseParser.tsx
+++ b/utils/Parser/APIResponseParser.tsx
@@ -415,15 +415,42 @@ export function parseSkyblockProfile(profile): SkyblockProfile {
 
 export function parseCraftingRecipe(recipe): CraftingRecipe {
     return {
-        A1: recipe.A1.split(':')[0],
-        A2: recipe.A2.split(':')[0],
-        A3: recipe.A3.split(':')[0],
-        B1: recipe.B1.split(':')[0],
-        B2: recipe.B2.split(':')[0],
-        B3: recipe.B3.split(':')[0],
-        C1: recipe.C1.split(':')[0],
-        C2: recipe.C2.split(':')[0],
-        C3: recipe.C3.split(':')[0]
+        A1: {
+            tag: recipe.A1.split(':')[0],
+            count: recipe.A1.split(':')[1]
+        },
+        A2: {
+            tag: recipe.A2.split(':')[0],
+            count: recipe.A2.split(':')[1]
+        },
+        A3: {
+            tag: recipe.A3.split(':')[0],
+            count: recipe.A3.split(':')[1]
+        },
+        B1: {
+            tag: recipe.B1.split(':')[0],
+            count: recipe.B1.split(':')[1]
+        },
+        B2: {
+            tag: recipe.B2.split(':')[0],
+            count: recipe.B2.split(':')[1]
+        },
+        B3: {
+            tag: recipe.B3.split(':')[0],
+            count: recipe.B3.split(':')[1]
+        },
+        C1: {
+            tag: recipe.C1.split(':')[0],
+            count: recipe.C1.split(':')[1]
+        },
+        C2: {
+            tag: recipe.C2.split(':')[0],
+            count: recipe.C2.split(':')[1]
+        },
+        C3: {
+            tag: recipe.C3.split(':')[0],
+            count: recipe.C3.split(':')[1]
+        }
     }
 }