feat: add weeds and compost (#311)

* feat: add weeds and compost

    - weeds grow randomly overnight in unoccupied plots
    - weeds can be turned into compost through crafting which can be crafted into fertilizer
    - added purchaseable composter
    - added itemType 'WEED'
    - refactored harvestPlot a bit to make it easier to understand for weeds vs crops

* add field to saveDataStubFactory

* more code review feedback updates

* categorize weeds in new Foraged Items category and associated recipes into new Recycling area of workshop

* add tests for purchaseSmelter

* fix string casing in forge

* fix: update clearPlot to handle weeds

* fix: update JSDoc

* fix: prevent shoveled plot animations from replaying

* refactor: remove wasJustShoveled from farmhand.crop typedef

* refactor: rename resetWasShoveled to updatePlotShoveledState

* refactor: rename isRipe to canBeHarvested

Co-authored-by: Jeremy Kahn <[email protected]>

Author: lstebner

src/components/Farmhand/Farmhand.js

@@ -421,6 +421,7 @@ export default class Farmhand extends Component {
       redirect: '',
       room: decodeURIComponent(this.props.match.params.room || DEFAULT_ROOM),
       purchasedCombine: 0,
+      purchasedComposter: 0,
       purchasedCowPen: 0,
       purchasedField: 0,
       purchasedSmelter: 0,
@@ -539,6 +540,7 @@ export default class Farmhand extends Component {
       'plantInPlot',
       'prependPendingPeerMessage',
       'purchaseCombine',
+      'purchaseComposter',
       'purchaseCow',
       'purchaseCowPen',
       'purchaseField',

src/components/Inventory/Inventory.js

@@ -23,6 +23,7 @@ const {
   STONE,
   FUEL,
   TOOL_UPGRADE,
+  WEED,
 } = itemType
 
 export const categoryIds = enumify([
@@ -31,6 +32,7 @@ export const categoryIds = enumify([
   'CRAFTED_ITEMS',
   'CROPS',
   'FIELD_TOOLS',
+  'FORAGED_ITEMS',
   'MINED_RESOURCES',
   'SEEDS',
   'UPGRADES',
@@ -42,6 +44,7 @@ const {
   CRAFTED_ITEMS,
   CROPS,
   FIELD_TOOLS,
+  FORAGED_ITEMS,
   MINED_RESOURCES,
   SEEDS,
   UPGRADES,
@@ -61,6 +64,7 @@ const itemTypeCategoryMap = Object.freeze({
   [SPRINKLER]: FIELD_TOOLS,
   [STONE]: MINED_RESOURCES,
   [TOOL_UPGRADE]: UPGRADES,
+  [WEED]: FORAGED_ITEMS,
 })
 
 const getItemCategories = () =>
@@ -97,6 +101,7 @@ export const Inventory = ({
     {[
       [CROPS, 'Crops'],
       [SEEDS, 'Seeds'],
+      [FORAGED_ITEMS, 'Foraged Items'],
       [FIELD_TOOLS, 'Field Tools'],
       [ANIMAL_PRODUCTS, 'Animal Products'],
       [ANIMAL_SUPPLIES, 'Animal Supplies'],

src/components/Inventory/Inventory.test.js

@@ -75,6 +75,7 @@ describe('item sorting', () => {
       )
     ).toEqual({
       [categoryIds.CROPS]: [testItem({ id: 'sample-crop-1' })],
+      [categoryIds.FORAGED_ITEMS]: [],
       [categoryIds.MINED_RESOURCES]: [
         testItem({ id: 'coal' }),
         testItem({ id: 'stone' }),

src/components/Plot/Plot.js

@@ -74,11 +74,12 @@ export const Plot = ({
   x,
   y,
 
-  image = getPlotImage(plotContent),
+  image = getPlotImage(plotContent, x, y),
   lifeStage = plotContent &&
     getPlotContentType(plotContent) === itemType.CROP &&
     getCropLifeStage(plotContent),
-  isRipe = lifeStage === cropLifeStage.GROWN,
+  canBeHarvested = lifeStage === cropLifeStage.GROWN ||
+    (plotContent && getPlotContentType(plotContent) === itemType.WEED),
 }) => {
   const item = plotContent ? itemsMap[plotContent.itemId] : null
   const daysLeftToMature = getDaysLeftToMature(plotContent)
@@ -101,7 +102,10 @@ export const Plot = ({
   }, [initialIsShoveledState, plotContent])
 
   useEffect(() => {
-    if (plotContent === null) setInitialIsShoveledState(false)
+    if (plotContent === null) {
+      setInitialIsShoveledState(false)
+      setWasJustShoveled(false)
+    }
   }, [plotContent])
 
   const showPlotImage = Boolean(
@@ -120,7 +124,7 @@ export const Plot = ({
 
           // For crops
           crop: isCrop,
-          'is-ripe': isRipe,
+          'can-be-harvested': canBeHarvested,
 
           // For crops and scarecrows
           'can-be-fertilized':
@@ -145,8 +149,8 @@ export const Plot = ({
         {...{
           className: classNames('square', {
             ...(isCrop && {
-              animated: isRipe,
-              heartBeat: isRipe,
+              animated: canBeHarvested,
+              heartBeat: canBeHarvested,
             }),
             ...(wasJustShoveled && {
               animated: true,

src/components/Plot/Plot.sass

@@ -32,7 +32,7 @@
     &:hover
       cursor: pointer
 
-  .harvest-mode &.is-ripe
+  .harvest-mode &.can-be-harvested
     background-color: $colorGreenOk
 
     &:hover
@@ -52,7 +52,7 @@
     background-color: $colorYellow
     cursor: pointer
 
-  .harvest-mode.is-inventory-full &.crop.is-ripe,
+  .harvest-mode.is-inventory-full &.crop.can-be-harvested,
   .cleanup-mode.is-inventory-full &.is-replantable
     background-color: $colorRedDanger
     cursor: not-allowed
@@ -61,7 +61,7 @@
     background-color: $colorGreenOk
     cursor: pointer
 
-  .cleanup-mode &.is-ripe
+  .cleanup-mode &.can-be-harvested
     background-color: $colorGreenOk
     cursor: auto
 

src/components/Plot/Plot.test.js

@@ -49,9 +49,9 @@ test('renders is-replantable class', () => {
   expect(component.find('.Plot').hasClass('is-replantable')).toBeTruthy()
 })
 
-test('renders "is-ripe" class', () => {
+test('renders "can-be-harvested" class', () => {
   component.setProps({ lifeStage: cropLifeStage.GROWN })
-  expect(component.find('.Plot').hasClass('is-ripe')).toBeTruthy()
+  expect(component.find('.Plot').hasClass('can-be-harvested')).toBeTruthy()
 })
 
 describe('"can-be-fertilized" class', () => {

src/components/Shop/Shop.js

@@ -24,6 +24,7 @@ import { itemType, toolType } from '../../enums'
 import {
   INFINITE_STORAGE_LIMIT,
   PURCHASEABLE_COMBINES,
+  PURCHASEABLE_COMPOSTERS,
   PURCHASEABLE_COW_PENS,
   PURCHASEABLE_FIELD_SIZES,
   PURCHASEABLE_SMELTERS,
@@ -55,13 +56,15 @@ const categorizeShopInventory = memoize(shopInventory =>
 
 export const Shop = ({
   handleCombinePurchase,
+  handleComposterPurchase,
   handleCowPenPurchase,
   handleFieldPurchase,
   handleSmelterPurchase,
   handleStorageExpansionPurchase,
   inventoryLimit,
   money,
   purchasedCombine,
+  purchasedComposter,
   purchasedCowPen,
   purchasedField,
   purchasedSmelter,
@@ -211,6 +214,21 @@ export const Shop = ({
               />
             </li>
           ) : null}
+          <li>
+            <TierPurchase
+              {...{
+                description:
+                  'You can purchase a Composter to turn weeds into fertilizer.',
+                onBuyClick: handleComposterPurchase,
+                maxedOutPlaceholder: "You've already purchased the composter!",
+                purchasedTier: purchasedComposter,
+                renderTierLabel: ({ type, price }) =>
+                  `${dollarString(price)}: ${type} Composter`,
+                tiers: PURCHASEABLE_COMPOSTERS,
+                title: 'Buy composter',
+              }}
+            />
+          </li>
         </ul>
       </TabPanel>
     </div>

src/components/Workshop/ForgeTabPanel.js

@@ -59,7 +59,7 @@ export function ForgeTabPanel({
                 {...{
                   linkTarget: '_blank',
                   className: 'markdown',
-                  source: `Forge Recipes are learned by selling resources mined from the field.`,
+                  source: `Forge recipes are learned by selling resources mined from the field.`,
                 }}
               />
             </CardContent>

src/components/Workshop/RecyclingTabPanel.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import Divider from '@material-ui/core/Divider'
+import ReactMarkdown from 'react-markdown'
+
+import { recipeType } from '../../enums'
+
+import { recipeCategories } from '../../data/maps'
+
+import { TabPanel } from './TabPanel'
+import { RecipeList } from './RecipeList'
+
+export function RecyclingTabPanel({
+  currentTab,
+  index,
+  learnedRecipes,
+  setCurrentTab,
+}) {
+  return (
+    <TabPanel value={currentTab} index={index}>
+      <RecipeList
+        learnedRecipes={learnedRecipes}
+        allRecipes={recipeCategories[recipeType.RECYCLING]}
+      />
+      <Divider />
+      <ul className="card-list">
+        <li>
+          <Card>
+            <CardContent>
+              <ReactMarkdown
+                {...{
+                  linkTarget: '_blank',
+                  className: 'markdown',
+                  source: `Recyling recipes are learned by selling items foraged from the field.`,
+                }}
+              />
+            </CardContent>
+          </Card>
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+RecyclingTabPanel.propTypes = {
+  currentTab: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  learnedRecipes: PropTypes.array.isRequired,
+  setCurrentTab: PropTypes.func.isRequired,
+}

src/components/Workshop/Workshop.js

@@ -15,10 +15,16 @@ import { a11yProps } from './TabPanel'
 
 import { ForgeTabPanel } from './ForgeTabPanel'
 import { KitchenTabPanel } from './KitchenTabPanel'
+import { RecyclingTabPanel } from './RecyclingTabPanel'
 
 import './Workshop.sass'
 
-const Workshop = ({ learnedRecipes, purchasedSmelter, toolLevels }) => {
+const Workshop = ({
+  learnedRecipes,
+  purchasedComposter,
+  purchasedSmelter,
+  toolLevels,
+}) => {
   const [currentTab, setCurrentTab] = useState(0)
 
   const learnedKitchenRecipes = Object.keys(learnedRecipes).filter(
@@ -29,8 +35,14 @@ const Workshop = ({ learnedRecipes, purchasedSmelter, toolLevels }) => {
     recipeId => recipesMap[recipeId].recipeType === recipeType.FORGE
   )
 
+  const learnedRecyclingRecipes = Object.keys(learnedRecipes).filter(
+    recipeId => recipesMap[recipeId].recipeType === recipeType.RECYCLING
+  )
+
   const showForge = features.MINING && purchasedSmelter
 
+  const recyclingTabIndex = showForge ? 2 : 1
+
   return (
     <div className="Workshop">
       <AppBar position="static" color="primary">
@@ -41,6 +53,9 @@ const Workshop = ({ learnedRecipes, purchasedSmelter, toolLevels }) => {
         >
           <Tab {...{ label: 'Kitchen', ...a11yProps(0) }} />
           {showForge ? <Tab {...{ label: 'Forge', ...a11yProps(1) }} /> : null}
+          {purchasedComposter ? (
+            <Tab {...{ label: 'Recycling', ...a11yProps(recyclingTabIndex) }} />
+          ) : null}
         </Tabs>
       </AppBar>
       <KitchenTabPanel
@@ -58,12 +73,21 @@ const Workshop = ({ learnedRecipes, purchasedSmelter, toolLevels }) => {
           toolLevels={toolLevels}
         />
       ) : null}
+      {purchasedComposter ? (
+        <RecyclingTabPanel
+          currentTab={currentTab}
+          index={recyclingTabIndex}
+          learnedRecipes={learnedRecyclingRecipes}
+          setCurrentTab={setCurrentTab}
+        />
+      ) : null}
     </div>
   )
 }
 
 Workshop.propTypes = {
   learnedRecipes: object.isRequired,
+  purchasedComposter: number,
   purchasedSmelter: number,
   toolLevels: object.isRequired,
 }