feat(Cellar): [closes #380] Fermentation (#413)

* feat(Cellar): stand up inventory tab
* docs(types): define keg data
* feat(fermentation): add support for daysToFerment item property
* feat(FermentationRecipeList): add FermentationRecipe card list
* feat(FermentationRecipe): show fermented recipe name
* feat(FermentationRecipe): add avatar drop shadow
* feat(FermentationRecipe): show days to ferment
* feat(fermentation): implement maxYieldOfFermentationRecipe
* refactor(crops): change fromSeed to accept config object
* refactor(utils): move memoize to its own file
* refactor(utils): move getCropLifecycleDuration to its own file
* feat(fermentation): make daysToFerment a computed value
* feat(fermentation): implement doesCellarSpaceRemain
* feat(fermentation): show recipe instance in cellar count
* feat(fermentation): implement makeFermentationRecipe reducer
* feat(fermentation): implement processCellar reducer
* feat(Cellar): stand up sellKeg logic
* feat(Cellar): remove keg from cellarInventory when sold
* refactor(Cellar): make sellKeg support only one keg
* feat(Cellar): calculate keg value
* feat(Cellar): animate keg value
* feat(Cellar): add button to throw away keg
* feat(Cellar): track cellarItemsSold
* feat(Cellar): show peer notification when a fermented item is sold
* feat(Cellar): show salt inventory in fermentation recipe cards
* feat(Cellar): show cellar capacity
* feat(Fermentation): enable feature
* test(FermentationRecipeList): validate header display
* fix(test): update getLevelEntitlements test
* test(maxYieldOfFermentationRecipe): validate functionality
* test(makeFermentationRecipe): validate functionality
* test(processCellar): validate implementation
* test(getCropsAvailableToFerment): validate functionality
* feat(fermentation): make more crops ferment-able
* chore(todos): add TODO links
* test(sellKeg): test behavior

.env

@@ -3,6 +3,8 @@ REACT_APP_API_ROOT=https://farmhand.vercel.app/
 REACT_APP_NAME=$npm_package_name
 REACT_APP_VERSION=$npm_package_version
 
+REACT_APP_ENABLE_KEGS=true
+
 # Silence warnings from dev server
 # https://stackoverflow.com/a/70834076
 GENERATE_SOURCEMAP=false

src/components/AchievementsView/AchievementsView.js

@@ -9,7 +9,7 @@ import FarmhandContext from '../Farmhand/Farmhand.context'
 import ProgressBar from '../ProgressBar'
 import Achievement from '../Achievement'
 import achievements from '../../data/achievements'
-import { memoize } from '../../utils'
+import { memoize } from '../../utils/memoize'
 
 import './AchievementsView.sass'
 

src/components/Cellar/Cellar.js

@@ -1,29 +1,17 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import AppBar from '@material-ui/core/AppBar'
 import Tab from '@material-ui/core/Tab'
 import Tabs from '@material-ui/core/Tabs'
 
-import { recipesMap } from '../../data/maps'
-import { recipeType } from '../../enums'
-
-import FarmhandContext from '../Farmhand/Farmhand.context'
-
+import { CellarInventoryTabPanel } from './CellarInventoryTabPanel'
 import { FermentationTabPanel } from './FermentationTabPanel'
 import { a11yProps } from './TabPanel'
 
 import './Cellar.sass'
 
 export const Cellar = () => {
-  const {
-    gameState: { learnedRecipes },
-  } = useContext(FarmhandContext)
-
   const [currentTab, setCurrentTab] = useState(0)
 
-  const learnedFermentationRecipes = Object.keys(learnedRecipes).filter(
-    recipeId => recipesMap[recipeId].recipeType === recipeType.FERMENTATION
-  )
-
   return (
     <div className="Cellar">
       <AppBar position="static" color="primary">
@@ -32,14 +20,12 @@ export const Cellar = () => {
           onChange={(_e, newTab) => setCurrentTab(newTab)}
           aria-label="Cellar tabs"
         >
-          <Tab {...{ label: 'Fermentation', ...a11yProps(0) }} />
+          <Tab {...{ label: 'Cellar Inventory', ...a11yProps(0) }} />
+          <Tab {...{ label: 'Fermentation', ...a11yProps(1) }} />
         </Tabs>
       </AppBar>
-      <FermentationTabPanel
-        index={0}
-        currentTab={currentTab}
-        learnedFermentationRecipes={learnedFermentationRecipes}
-      />
+      <CellarInventoryTabPanel index={0} currentTab={currentTab} />
+      <FermentationTabPanel index={1} currentTab={currentTab} />
     </div>
   )
 }

src/components/Cellar/CellarInventoryTabPanel.js

@@ -0,0 +1,71 @@
+/** @typedef {import("../../index").farmhand.keg} keg */
+import React, { useContext } from 'react'
+import { number } from 'prop-types'
+import Divider from '@material-ui/core/Divider'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import ReactMarkdown from 'react-markdown'
+
+import FarmhandContext from '../Farmhand/Farmhand.context'
+import { KEG_INTEREST_RATE, PURCHASEABLE_CELLARS } from '../../constants'
+
+import { integerString } from '../../utils'
+
+import { TabPanel } from './TabPanel'
+import { Keg } from './Keg'
+
+/**
+ * @param {Object} props
+ * @param {number} props.index
+ * @param {number} props.currentTab
+ */
+export const CellarInventoryTabPanel = ({ index, currentTab }) => {
+  /**
+   * @type {{
+   *   gameState: {
+   *     cellarInventory:Array.<keg>,
+   *     purchasedCellar: number
+   *   }
+   * }}
+   */
+  const {
+    gameState: { cellarInventory, purchasedCellar },
+  } = useContext(FarmhandContext)
+
+  return (
+    <TabPanel value={currentTab} index={index}>
+      <h3>
+        Capacity: {integerString(cellarInventory.length)} /{' '}
+        {integerString(PURCHASEABLE_CELLARS.get(purchasedCellar).space)}
+      </h3>
+      <ul className="card-list">
+        {cellarInventory.map(keg => (
+          <li key={keg.id}>
+            <Keg keg={keg} />
+          </li>
+        ))}
+      </ul>
+      <Divider />
+      <ul className="card-list">
+        <li>
+          <Card>
+            <CardContent>
+              <ReactMarkdown
+                {...{
+                  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.`,
+                }}
+              />
+            </CardContent>
+          </Card>
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+CellarInventoryTabPanel.propTypes = {
+  currentTab: number.isRequired,
+  index: number.isRequired,
+}

src/components/Cellar/FermentationTabPanel.js

@@ -1,26 +1,17 @@
 import React from 'react'
-import { number, array } from 'prop-types'
+import { number } from 'prop-types'
 import Divider from '@material-ui/core/Divider'
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import ReactMarkdown from 'react-markdown'
 
-import { recipeType } from '../../enums'
-import { recipeCategories } from '../../data/maps'
-import { RecipeList } from '../RecipeList/RecipeList'
+import { FermentationRecipeList } from '../FermentationRecipeList/FermentationRecipeList'
 
 import { TabPanel } from './TabPanel'
 
-export const FermentationTabPanel = ({
-  index,
-  currentTab,
-  learnedFermentationRecipes,
-}) => (
+export const FermentationTabPanel = ({ index, currentTab }) => (
   <TabPanel value={currentTab} index={index}>
-    <RecipeList
-      learnedRecipes={learnedFermentationRecipes}
-      allRecipes={recipeCategories[recipeType.FERMENTATION]}
-    />
+    <FermentationRecipeList />
     <Divider />
     <ul className="card-list">
       <li>
@@ -30,7 +21,8 @@ export const FermentationTabPanel = ({
               {...{
                 linkTarget: '_blank',
                 className: 'markdown',
-                source: `Fermentation recipes are learned by selling crops. Sell as much as you can of a wide variety of items!`,
+                source:
+                  'Some items can be fermented. Fermented items become much more valuable over time!',
               }}
             />
           </CardContent>
@@ -43,5 +35,4 @@ export const FermentationTabPanel = ({
 FermentationTabPanel.propTypes = {
   currentTab: number.isRequired,
   index: number.isRequired,
-  learnedFermentationRecipes: array.isRequired,
 }

src/components/Cellar/Keg.js

@@ -0,0 +1,118 @@
+/** @typedef {import("../../index").farmhand.keg} keg */
+import React, { useContext } from 'react'
+import { object } from 'prop-types'
+import Card from '@material-ui/core/Card'
+import CardHeader from '@material-ui/core/CardHeader'
+import CardActions from '@material-ui/core/CardActions'
+import Button from '@material-ui/core/Button'
+
+import { itemsMap } from '../../data/maps'
+import { items } from '../../img'
+
+import FarmhandContext from '../Farmhand/Farmhand.context'
+import { getKegValue } from '../../utils/getKegValue'
+import { moneyString } from '../../utils/moneyString'
+import { getSalePriceMultiplier } from '../../utils'
+import { FERMENTED_CROP_NAME } from '../../templates'
+import AnimatedNumber from '../AnimatedNumber'
+
+import './Keg.sass'
+
+/**
+ * @param {Object} props
+ * @param {keg} props.keg
+ */
+export function Keg({ keg }) {
+  /**
+   * @type {{
+   *   handlers: {
+   *     handleSellKegClick: function(keg): void,
+   *     handleThrowAwayKegClick: function(keg): void
+   *   },
+   *   gameState: {
+   *     completedAchievements: Object.<string, boolean>
+   *   }
+   * }}
+   */
+  const {
+    handlers: { handleSellKegClick, handleThrowAwayKegClick },
+    gameState: { completedAchievements },
+  } = useContext(FarmhandContext)
+
+  const item = itemsMap[keg.itemId]
+  const fermentationRecipeName = FERMENTED_CROP_NAME`${item}`
+
+  const handleSellClick = () => {
+    handleSellKegClick(keg)
+  }
+
+  const handleThrowAwayClick = () => {
+    handleThrowAwayKegClick(keg)
+  }
+
+  const canBeSold = keg.daysUntilMature <= 0
+  const kegValue =
+    getKegValue(keg) * getSalePriceMultiplier(completedAchievements)
+
+  return (
+    <Card className="Keg">
+      <CardHeader
+        title={fermentationRecipeName}
+        avatar={
+          <img
+            {...{
+              src: items[item.id],
+            }}
+            alt={fermentationRecipeName}
+          />
+        }
+        subheader={
+          <>
+            {canBeSold ? (
+              <p>Days since ready: {Math.abs(keg.daysUntilMature)}</p>
+            ) : (
+              <p>Days until ready: {keg.daysUntilMature}</p>
+            )}
+            {canBeSold ? (
+              <p>
+                Current value:{' '}
+                <AnimatedNumber
+                  {...{ number: kegValue, formatter: moneyString }}
+                />
+              </p>
+            ) : null}
+          </>
+        }
+      ></CardHeader>
+      <CardActions>
+        <Button
+          {...{
+            className: 'sell-keg',
+            color: 'secondary',
+            onClick: handleSellClick,
+            variant: 'contained',
+            disabled: !canBeSold,
+          }}
+        >
+          Sell
+        </Button>
+        {!canBeSold ? (
+          <Button
+            {...{
+              className: 'throw-away-keg',
+              color: 'secondary',
+              onClick: handleThrowAwayClick,
+              variant: 'contained',
+            }}
+          >
+            Throw away
+          </Button>
+        ) : null}
+      </CardActions>
+    </Card>
+  )
+}
+
+Keg.propTypes = {
+  keg: object.isRequired,
+}

src/components/Cellar/Keg.sass

@@ -0,0 +1,7 @@
+.Keg
+  position: relative
+
+  .MuiCardHeader-avatar
+    img
+      width: 3em
+      filter: drop-shadow(1px 1px 2px rgba(255, 0, 131, 0.63))

src/components/CowCard/Subheader/Subheader.js

@@ -16,9 +16,9 @@ import {
   getPlayerName,
   integerString,
   isCowInBreedingPen,
-  memoize,
   nullArray,
 } from '../../../utils'
+import { memoize } from '../../../utils/memoize'
 import { huggingMachine } from '../../../data/items'
 import Bloodline from '../Bloodline'