feat(#491): show number of required grapes in inventory

jeremyckahn · Apr 23, 2024 · e1d28ad · e1d28ad
1 parent c42d2aa
commit e1d28ad
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 35 deletions.
diff --git a/src/components/Farmhand/Farmhand.context.js b/src/components/Farmhand/Farmhand.context.js
@@ -8,19 +8,19 @@ import { createContext } from 'react'
 /**
  * @type {import('react').Context<{
  *   gameState: farmhand.state & {
- *    blockInput: boolean,
- *    features: Record<string, boolean>,
- *    fieldToolInventory: farmhand.item[],
- *    isChatAvailable: boolean,
- *    levelEntitlements: farmhand.levelEntitlements,
- *    plantableCropInventory: farmhand.item[],
- *    playerInventory: farmhand.item[],
- *    playerInventoryQuantities: Record<string, number>,
- *    shopInventory: farmhand.item[],
- *    viewList: string[],
- *    viewTitle: string,
+ *     blockInput: boolean,
+ *     features: Record<string, boolean>,
+ *     fieldToolInventory: farmhand.item[],
+ *     isChatAvailable: boolean,
+ *     levelEntitlements: farmhand.levelEntitlements,
+ *     plantableCropInventory: farmhand.item[],
+ *     playerInventory: farmhand.item[],
+ *     playerInventoryQuantities: Record<string, number>,
+ *     shopInventory: farmhand.item[],
+ *     viewList: string[],
+ *     viewTitle: string,
  *   }
- *   handlers: {}
+ *   handlers: Record<string, (...any) => void>
  * }>}
  */
 // @ts-expect-error

diff --git a/src/components/FermentationRecipeList/FermentationRecipe.js b/src/components/FermentationRecipeList/FermentationRecipe.js
@@ -46,21 +46,11 @@ const getRecipesInstancesInCellar = memoize(
  * @param {item} props.item
  */
 export const FermentationRecipe = ({ item }) => {
-  /**
-   * @type {{
-   *   gameState: {
-   *     inventory: Array.<item>,
-   *     cellarInventory: Array.<keg>,
-   *     purchasedCellar: number
-   *   },
-   *   handlers: {
-   *     handleMakeFermentationRecipeClick: function(item, number)
-   *   }
-   * }}
-   */
   const {
     gameState: { inventory, cellarInventory, purchasedCellar },
-    handlers: { handleMakeFermentationRecipeClick },
+    handlers: {
+      /** @type {function(item, number)} */ handleMakeFermentationRecipeClick,
+    },
   } = useContext(FarmhandContext)
 
   const [quantity, setQuantity] = useState(1)

diff --git a/src/components/WineRecipeList/WineRecipe.js b/src/components/WineRecipeList/WineRecipe.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { oneOf } from 'prop-types'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -13,16 +13,23 @@ import { wineService } from '../../services/wine'
 import { grapeVariety } from '../../enums'
 import { wines } from '../../img'
 import { integerString } from '../../utils'
+import { getInventoryQuantityMap } from '../../utils/getInventoryQuantityMap'
+import FarmhandContext from '../Farmhand/Farmhand.context'
 
 /**
  * @param {{
  *   wineVariety: grapeVariety
  * }} props
  */
 export const WineRecipe = ({ wineVariety }) => {
+  const {
+    gameState: { inventory },
+  } = useContext(FarmhandContext)
   const wineName = grapeVarietyNameMap[wineVariety]
   const grape = grapeVarietyVarietyGrapeMap[wineVariety]
 
+  const inventoryQuantityMap = getInventoryQuantityMap(inventory)
+
   return (
     <Card className="WineRecipe">
       <CardHeader
@@ -42,12 +49,12 @@ export const WineRecipe = ({ wineVariety }) => {
               {integerString(wineService.getDaysToMature(wineVariety))}
             </p>
             <p>
-              Ingredients:{' '}
+              Required:{' '}
               {integerString(wineService.getGrapesRequiredForWine(wineVariety))}{' '}
-              x {grape.name}
+              x {grape.name} (available:{' '}
+              {integerString(inventoryQuantityMap[grape.id])})
             </p>
             {
-              // FIXME: Show number of required grapes in inventory
               // FIXME: Show amount in cellar
             }
           </>

diff --git a/src/utils/getInventoryQuantityMap.js b/src/utils/getInventoryQuantityMap.js
@@ -3,18 +3,15 @@
  */
 import { memoize } from './memoize'
 
-/**
- * @param {item[]} inventory
- * @returns {Object}
- */
 export const getInventoryQuantityMap = memoize(
   /**
-   * @param {item[]} inventory
-   * @returns {Object}
+   * @param {{ id: item['id'], quantity: number }[]} inventory
+   * @returns {Record<item['id'], number>}
    */
   inventory =>
     inventory.reduce((acc, { id, quantity }) => {
       acc[id] = quantity
+
       return acc
     }, {})
 )