feat(closes #491): Winemaking

src/components/Cellar/Cellar.js

@@ -4,6 +4,7 @@ import Tabs from '@mui/material/Tabs'
 
 import { CellarInventoryTabPanel } from './CellarInventoryTabPanel'
 import { FermentationTabPanel } from './FermentationTabPanel'
+import { WinemakingTabPanel } from './WinemakingTabPanel'
 import { a11yProps } from './TabPanel'
 
 import './Cellar.sass'
@@ -20,9 +21,11 @@ export const Cellar = () => {
       >
         <Tab {...{ label: 'Cellar Inventory', ...a11yProps(0) }} />
         <Tab {...{ label: 'Fermentation', ...a11yProps(1) }} />
+        <Tab {...{ label: 'Winemaking', ...a11yProps(2) }} />
       </Tabs>
       <CellarInventoryTabPanel index={0} currentTab={currentTab} />
       <FermentationTabPanel index={1} currentTab={currentTab} />
+      <WinemakingTabPanel index={2} currentTab={currentTab} />
     </div>
   )
 }

src/components/Cellar/CellarInventoryTabPanel.js

@@ -7,7 +7,12 @@ import CardContent from '@mui/material/CardContent'
 import ReactMarkdown from 'react-markdown'
 
 import FarmhandContext from '../Farmhand/Farmhand.context'
-import { KEG_INTEREST_RATE, PURCHASEABLE_CELLARS } from '../../constants'
+import {
+  KEG_INTEREST_RATE,
+  PURCHASEABLE_CELLARS,
+  WINE_GROWTH_TIMELINE_CAP,
+  WINE_INTEREST_RATE,
+} from '../../constants'
 
 import { integerString } from '../../utils'
 
@@ -54,7 +59,15 @@ export const CellarInventoryTabPanel = ({ index, currentTab }) => {
                 {...{
                   linkTarget: '_blank',
                   className: 'markdown',
-                  source: `This is your inventory of cellar kegs. Keg contents take time to reach maturity before they can be sold. Once they reach maturity, keg contents become higher in quality and their value compounds at a rate of ${KEG_INTEREST_RATE}% a day.`,
+                  source: `This is your inventory of Cellar kegs.
+
+Keg contents take time to reach maturity before they can be sold. After they reach maturity, keg contents become higher in quality over time and their value grows.
+
+Kegs that contain fermented crops compound in value at a rate of ${KEG_INTEREST_RATE}% a day but have an increasing chance of spoiling.
+
+Kegs that contain wine compound in value at a rate of ${WINE_INTEREST_RATE}% for up to ${integerString(
+                    WINE_GROWTH_TIMELINE_CAP
+                  )} days and never spoil.`,
                 }}
               />
             </CardContent>

src/components/Cellar/FermentationTabPanel.js

@@ -22,7 +22,7 @@ export const FermentationTabPanel = ({ index, currentTab }) => (
                 linkTarget: '_blank',
                 className: 'markdown',
                 source:
-                  'Some items can be fermented. Fermented items become much more valuable over time!',
+                  'Some items can be fermented and become much more valuable over time.',
               }}
             />
           </CardContent>

src/components/Cellar/Keg.js

@@ -7,7 +7,7 @@ import CardActions from '@mui/material/CardActions'
 import Button from '@mui/material/Button'
 
 import { itemsMap } from '../../data/maps'
-import { items } from '../../img'
+import { items, wines } from '../../img'
 
 import FarmhandContext from '../Farmhand/Farmhand.context'
 import { getKegValue } from '../../utils/getKegValue'
@@ -18,6 +18,7 @@ import AnimatedNumber from '../AnimatedNumber'
 
 import './Keg.sass'
 import { getKegSpoilageRate } from '../../utils/getKegSpoilageRate'
+import { wineService } from '../../services/wine'
 
 /**
  * @param {Object} props
@@ -41,7 +42,11 @@ export function Keg({ keg }) {
   } = useContext(FarmhandContext)
 
   const item = itemsMap[keg.itemId]
-  const fermentationRecipeName = FERMENTED_CROP_NAME`${item}`
+
+  let imageSrc = items[item.id]
+
+  // @ts-expect-error
+  let recipeName = FERMENTED_CROP_NAME`${item}`
 
   const handleSellClick = () => {
     handleSellKegClick(keg)
@@ -55,19 +60,24 @@ export function Keg({ keg }) {
   const kegValue =
     getKegValue(keg) * getSalePriceMultiplier(completedAchievements)
 
+  if (wineService.isWineRecipe(item)) {
+    imageSrc = wines[item.variety]
+    recipeName = item.name
+  }
+
   const spoilageRate = getKegSpoilageRate(keg)
   const spoilageRateDisplayValue = Number((spoilageRate * 100).toPrecision(2))
 
   return (
     <Card className="Keg">
       <CardHeader
-        title={fermentationRecipeName}
+        title={recipeName}
         avatar={
           <img
             {...{
-              src: items[item.id],
+              src: imageSrc,
             }}
-            alt={fermentationRecipeName}
+            alt={recipeName}
           />
         }
         subheader={
@@ -81,7 +91,9 @@ export function Keg({ keg }) {
                     {...{ number: kegValue, formatter: moneyString }}
                   />
                 </p>
-                <p>Potential for spoilage: {spoilageRateDisplayValue}%</p>
+                {!wineService.isWineRecipe(item) && (
+                  <p>Potential for spoilage: {spoilageRateDisplayValue}%</p>
+                )}
               </>
             ) : (
               <p>Days until ready: {keg.daysUntilMature}</p>

src/components/Cellar/WinemakingTabPanel.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { number } from 'prop-types'
+import Divider from '@mui/material/Divider'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import ReactMarkdown from 'react-markdown'
+
+import { WineRecipeList } from '../WineRecipeList/WineRecipeList'
+
+import { TabPanel } from './TabPanel'
+
+export const WinemakingTabPanel = ({ index, currentTab }) => (
+  <TabPanel value={currentTab} index={index}>
+    <WineRecipeList />
+    <Divider />
+    <ul className="card-list">
+      <li>
+        <Card>
+          <CardContent>
+            <ReactMarkdown
+              {...{
+                linkTarget: '_blank',
+                className: 'markdown',
+                source:
+                  'Grapes can be made into wine. Wine becomes very valuable in time and never spoils.',
+              }}
+            />
+          </CardContent>
+        </Card>
+      </li>
+    </ul>
+  </TabPanel>
+)
+
+WinemakingTabPanel.propTypes = {
+  currentTab: number.isRequired,
+  index: number.isRequired,
+}

src/components/Farmhand/Farmhand.context.js

@@ -1,5 +1,35 @@
+/**
+ * @typedef {import('../../').farmhand.item} farmhand.item
+ * @typedef {import('../../').farmhand.levelEntitlements} farmhand.levelEntitlements
+ * @typedef {import('./Farmhand').farmhand.state} farmhand.state
+ */
 import { createContext } from 'react'
 
-const FarmhandContext = createContext()
+// eslint-disable-next-line no-unused-vars
+import uiEventHandlers from '../../handlers/ui-events'
+
+/**
+ * @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,
+ *   }
+ *   handlers: uiEventHandlers & { debounced: uiEventHandlers }
+ * }>}
+ */
+// @ts-expect-error
+const FarmhandContext = createContext({
+  gameState: {},
+  handlers: {},
+})
 
 export default FarmhandContext

src/components/Farmhand/Farmhand.js

@@ -131,11 +131,14 @@ const { CLEANUP, HARVEST, MINE, OBSERVE, WATER, PLANT } = fieldMode
 const emptyObject = Object.freeze({})
 
 /*!
- * @param {Array.<{ id: farmhand.item, quantity: number }>} inventory
- * @param {Object.<number>} valueAdjustments
- * @returns {Array.<farmhand.item>}
+ * @param {{ id: farmhand.item['id'], quantity: number }} inventory
+ * @param {Record<string, number>} valueAdjustments
+ * @returns {farmhand.item[]}
  */
-export const computePlayerInventory = memoize((inventory, valueAdjustments) =>
+export const computePlayerInventory = memoize((
+  /** @type {{ id: farmhand.item['id'], quantity: number }[]}  */ inventory,
+  /** @type {Record<string, number>} */ valueAdjustments
+) =>
   inventory.map(({ quantity, id }) => ({
     quantity,
     ...itemsMap[id],
@@ -144,10 +147,12 @@ export const computePlayerInventory = memoize((inventory, valueAdjustments) =>
 )
 
 /*!
- * @param {Array.<{ id: farmhand.item }>} inventory
- * @returns {Array.<{ id: farmhand.item }>}
+ * @param {farmhand.item[]} inventory
+ * @returns {{ id: farmhand.item }[]}
  */
-export const getFieldToolInventory = memoize(inventory =>
+export const getFieldToolInventory = memoize((
+  /** @type {Array.<farmhand.item>} */ inventory
+) =>
   inventory
     .filter(({ id }) => {
       const { enablesFieldMode } = itemsMap[id]
@@ -158,10 +163,12 @@ export const getFieldToolInventory = memoize(inventory =>
 )
 
 /*!
- * @param {Array.<{ id: farmhand.item }>} inventory
+ * @param {farmhand.item[]} inventory
  * @returns {Array.<{ id: farmhand.item }>}
  */
-export const getPlantableCropInventory = memoize(inventory =>
+export const getPlantableCropInventory = memoize((
+  /** @type {farmhand.item[]} */ inventory
+) =>
   inventory
     .filter(({ id }) => itemsMap[id].isPlantableCrop)
     .map(({ id }) => itemsMap[id])
@@ -235,9 +242,10 @@ const applyPriceEvents = (valueAdjustments, priceCrashes, priceSurges) => {
  * @property {boolean} isAwaitingNetworkRequest
  * @property {boolean} isCombineEnabled
  * @property {boolean} isMenuOpen
- * @property {Object} itemsSold Keys are items IDs, values are the number of
- * that item sold. The numbers in this map are inclusive of the corresponding
- * ones in cellarItemsSold and represent the grand total of each item sold.
+ * @property {Record<farmhand.item['id'], number>} itemsSold Keys are items
+ * IDs, values are the number of that item sold. The numbers in this map are
+ * inclusive of the corresponding ones in cellarItemsSold and represent the
+ * grand total of each item sold.
  * @property {Object} cellarItemsSold Keys are items IDs, values are the number
  * of that cellar item sold. The numbers in this map represent a subset of the
  * corresponding ones in itemsSold. cellarItemsSold is intended to be used for

src/components/Farmhand/Farmhand.sass

@@ -9,6 +9,9 @@ body
 
 @mixin markdown-styles
   .markdown
+    p
+      margin: 1em 0
+
     ul li
       list-style: disc
       margin-left: 1em

src/components/Farmhand/FarmhandReducers.js

@@ -78,6 +78,10 @@ export class FarmhandReducers extends Component {
     throw new Error('Unimplemented')
   }
   /** @type BoundReducer */
+  makeWine() {
+    throw new Error('Unimplemented')
+  }
+  /** @type BoundReducer */
   modifyCow() {
     throw new Error('Unimplemented')
   }

src/components/Farmhand/helpers/getInventoryQuantities.js

@@ -1,12 +1,15 @@
+/**
+ * @typedef {import('../../../').farmhand.item} farmhand.item
+ */
 import { itemsMap } from '../../../data/maps'
 
 const itemIds = Object.keys(itemsMap)
 
 /**
- * @param {Array.<{ id: farmhand.item, quantity: number }>} inventory
- * @returns {Object.<string, number>}
+ * @param {Array.<{ id: farmhand.item['id'], quantity: number }>} inventory
  */
 export const getInventoryQuantities = inventory => {
+  /** @type {Record<string, number>} */
   const quantities = {}
 
   for (const itemId of itemIds) {

src/components/FermentationRecipeList/FermentationRecipe.js

@@ -12,52 +12,24 @@ import Button from '@mui/material/Button'
 
 import { PURCHASEABLE_CELLARS } from '../../constants'
 import { items } from '../../img'
-import { doesCellarSpaceRemain } from '../../utils/doesCellarSpaceRemain'
 import { getMaxYieldOfFermentationRecipe } from '../../utils/getMaxYieldOfFermentationRecipe'
 import { getSaltRequirementsForFermentationRecipe } from '../../utils/getSaltRequirementsForFermentationRecipe'
 import { FERMENTED_CROP_NAME } from '../../templates'
 import QuantityInput from '../QuantityInput'
 import FarmhandContext from '../Farmhand/Farmhand.context'
-import { fermentableItemsMap, itemsMap } from '../../data/maps'
-
-import './FermentationRecipe.sass'
+import { itemsMap } from '../../data/maps'
+import { cellarService } from '../../services/cellar'
 import { getInventoryQuantityMap } from '../../utils/getInventoryQuantityMap'
 import { integerString } from '../../utils'
 import AnimatedNumber from '../AnimatedNumber'
-import { memoize } from '../../utils/memoize'
 
-/**
- * @type {function(keg[], item):number}
- */
-const getRecipesInstancesInCellar = memoize(
-  /**
-   * @param {keg[]} cellarInventory
-   * @param {item} item
-   * @returns number
-   */
-  (cellarInventory, item) => {
-    return cellarInventory.filter(keg => keg.itemId === item.id).length
-  },
-  { cacheSize: Object.keys(fermentableItemsMap).length }
-)
+import './FermentationRecipe.sass'
 
 /**
  * @param {Object} props
  * @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 },
@@ -66,8 +38,11 @@ export const FermentationRecipe = ({ item }) => {
   const [quantity, setQuantity] = useState(1)
 
   const inventoryQuantityMap = getInventoryQuantityMap(inventory)
+  // @ts-expect-error
   const fermentationRecipeName = FERMENTED_CROP_NAME`${item}`
-  const { space: cellarSize } = PURCHASEABLE_CELLARS.get(purchasedCellar)
+  const { space: cellarSize } = PURCHASEABLE_CELLARS.get(purchasedCellar) ?? {
+    space: 0,
+  }
 
   useEffect(() => {
     setQuantity(
@@ -84,7 +59,8 @@ export const FermentationRecipe = ({ item }) => {
   }, [cellarInventory, cellarSize, inventory, item, quantity])
 
   const canBeMade =
-    quantity > 0 && doesCellarSpaceRemain(cellarInventory, purchasedCellar)
+    quantity > 0 &&
+    cellarService.doesCellarSpaceRemain(cellarInventory, purchasedCellar)
 
   const handleMakeFermentationRecipe = () => {
     if (canBeMade) {
@@ -99,7 +75,7 @@ export const FermentationRecipe = ({ item }) => {
     cellarSize
   )
 
-  const recipeInstancesInCellar = getRecipesInstancesInCellar(
+  const recipeInstancesInCellar = cellarService.getItemInstancesInCellar(
     cellarInventory,
     item
   )