Merge minor commit

.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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeremyckahn/farmhand",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "publishConfig": {
     "access": "public"
   },

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'