@jeremyckahn/farmhand 1.23.2 → 1.23.3

package/src/components/CowPenContextMenu/CowPenContextMenu.tsx

@@ -6,7 +6,6 @@ import Select from '@mui/material/Select/index.js'
 import Tab from '@mui/material/Tab/index.js'
 import Tabs from '@mui/material/Tabs/index.js'
 import sortBy from 'lodash.sortby'
-import { array, func, number, object, string } from 'prop-types'
 import { useEffect, useState } from 'react'
 
 import { PURCHASEABLE_COW_PENS } from '../../constants.js'
@@ -327,21 +326,6 @@ export const CowPenContextMenu = ({
   )
 }
 
-CowPenContextMenu.propTypes = {
-  cowForSale: object.isRequired,
-  cowInventory: array.isRequired,
-  handleCowAutomaticHugChange: func.isRequired,
-  handleCowBreedChange: func.isRequired,
-  handleCowHugClick: func.isRequired,
-  handleCowNameInputChange: func.isRequired,
-  handleCowOfferClick: func.isRequired,
-  handleCowSelect: func.isRequired,
-  handleCowSellClick: func.isRequired,
-  handleCowWithdrawClick: func.isRequired,
-  purchasedCowPen: number.isRequired,
-  selectedCowId: string.isRequired,
-}
-
 export default function Consumer() {
   return (
     <FarmhandContext.Consumer>

package/src/components/CowPenContextMenu/TabPanel/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { node, number } from 'prop-types'
 
 export const TabPanel = (
   props: React.PropsWithChildren<
@@ -21,12 +20,6 @@ export const TabPanel = (
   )
 }
 
-TabPanel.propTypes = {
-  children: node,
-  index: number.isRequired,
-  value: number.isRequired,
-}
-
 export const a11yProps = (index: number) => ({
   id: `cow-context-tab-${index}`,
   'aria-controls': `cow-context-tabpanel-${index}`,

package/src/components/Farmhand/Farmhand.context.tsx

@@ -12,6 +12,7 @@ import {
 import uiEventHandlers from '../../handlers/ui-events.js'
 import { generateCow } from '../../utils/generateCow.js'
 import { scarecrow } from '../../data/items.js'
+import { NOTIFICATION_DURATION_DEFAULT } from '../../constants.js'
 
 /**
  * A utility type that transforms a type containing functions with an explicit `this` parameter
@@ -159,6 +160,7 @@ export const createContextData = (): ContextData => {
       latestNotification: null,
       newDayNotifications: [],
       notificationLog: [],
+      notificationDuration: NOTIFICATION_DURATION_DEFAULT,
       peers: {}, // empty object for now
       peerRoom: null,
       pendingPeerMessages: [],
@@ -217,8 +219,7 @@ export const createContextData = (): ContextData => {
   }
 }
 
-const FarmhandContext: import('react').Context<ContextData> = createContext<
-  ContextData
->(createContextData())
+const FarmhandContext: import('react').Context<ContextData> =
+  createContext<ContextData>(createContextData())
 
 export default FarmhandContext

package/src/components/Farmhand/Farmhand.tsx

@@ -11,7 +11,6 @@ import Tooltip from '@mui/material/Tooltip/index.js'
 import classNames from 'classnames'
 import localforage from 'localforage'
 import { SnackbarProvider } from 'notistack'
-import { object } from 'prop-types'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { Redirect } from 'react-router-dom'
 
@@ -103,9 +102,10 @@ const Farmhand = (props: FarmhandProps) => {
                     pointerEvents: 'none',
                   },
                 }),
-                [`@media (min-width: ${breakpoints.smallPhone}px) and (orientation: landscape)`]: {
-                  paddingTop: '3em',
-                },
+                [`@media (min-width: ${breakpoints.smallPhone}px) and (orientation: landscape)`]:
+                  {
+                    paddingTop: '3em',
+                  },
                 [`@media (min-width: ${breakpoints.sm}px)`]: {
                   paddingTop: '4em',
                 },
@@ -282,11 +282,4 @@ Farmhand.defaultProps = {
   match: { path: '', params: {} },
 }
 
-Farmhand.propTypes = {
-  features: object,
-  history: object,
-  location: object,
-  match: object.isRequired,
-}
-
 export default Farmhand

package/src/components/Farmhand/FarmhandReducers.tsx

@@ -193,8 +193,7 @@ export class FarmhandReducers extends Component<FarmhandProps, FarmhandState> {
 
     for (const reducerName of reducerNames) {
       const reducer = reducers[reducerName as keyof typeof reducers] as
-        | ((state: farmhand.state, ...args: any[]) => farmhand.state)
-        | undefined
+        ((state: farmhand.state, ...args: any[]) => farmhand.state) | undefined
 
       if (!reducer) {
         if (import.meta.env?.MODE === 'development') {

package/src/components/Farmhand/FarmhandService.test.ts

@@ -50,9 +50,8 @@ describe('FarmhandService', () => {
         { id: 'carrot-seed', quantity: 1 },
         { id: 'weed', quantity: 1 },
       ]
-      const plantableCropInventory = FarmhandService.getPlantableCropInventory(
-        inventory
-      )
+      const plantableCropInventory =
+        FarmhandService.getPlantableCropInventory(inventory)
 
       expect(plantableCropInventory).toEqual([{ ...carrotSeed, quantity: 1 }])
     })
@@ -64,9 +63,8 @@ describe('FarmhandService', () => {
         { id: 'apple-sapling', quantity: 1 },
         { id: 'weed', quantity: 1 },
       ]
-      const plantableTreeInventory = FarmhandService.getPlantableTreeInventory(
-        inventory
-      )
+      const plantableTreeInventory =
+        FarmhandService.getPlantableTreeInventory(inventory)
 
       expect(plantableTreeInventory).toEqual([{ ...appleSapling, quantity: 1 }])
     })
@@ -76,9 +74,8 @@ describe('FarmhandService', () => {
         { id: 'apple-sapling', quantity: 1 },
         { id: 'not-a-real-item-id', quantity: 1 },
       ]
-      const plantableTreeInventory = FarmhandService.getPlantableTreeInventory(
-        inventory
-      )
+      const plantableTreeInventory =
+        FarmhandService.getPlantableTreeInventory(inventory)
 
       expect(plantableTreeInventory).toEqual([{ ...appleSapling, quantity: 1 }])
     })

package/src/components/Farmhand/hooks/useFarmhandDayAdvancement.ts

@@ -50,12 +50,8 @@ export const useFarmhandDayAdvancement = (
     let serverValueAdjustments: Record<string, number> | undefined
 
     if (stateRef.current.isOnline) {
-      const {
-        inventory,
-        room,
-        todaysPurchases,
-        todaysStartingInventory,
-      } = stateRef.current
+      const { inventory, room, todaysPurchases, todaysStartingInventory } =
+        stateRef.current
 
       const positions = computeMarketPositions(
         todaysStartingInventory,

package/src/components/Farmhand/hooks/useFarmhandNetwork.test.ts

@@ -58,14 +58,14 @@ const setup = () => {
   const sendCowTradeRequest = vitest.fn()
   const showNotification = vitest.fn()
 
-  const fakeState = ({
+  const fakeState = {
     peers: {
       [peerId]: { playerId: ownerId } as farmhand.peerMetadata,
     },
     sendCowTradeRequest,
     cowInventory: [cowOfferedForTrade],
     cowIdOfferedForTrade: cowOfferedForTrade.id,
-  } as unknown) as farmhand.state
+  } as unknown as farmhand.state
 
   const instanceProxyRef: React.MutableRefObject<any> = {
     current: { state: { ...fakeState } },

package/src/components/Farmhand/hooks/useFarmhandNetwork.ts

@@ -83,12 +83,8 @@ export const useFarmhandNetwork = (
   const tradeForPeerCow = useCallback(
     (peerPlayerCow: farmhand.cow) => {
       const latestState = instanceProxyRef.current?.state ?? state
-      const {
-        cowIdOfferedForTrade,
-        cowInventory,
-        peers,
-        sendCowTradeRequest,
-      } = latestState
+      const { cowIdOfferedForTrade, cowInventory, peers, sendCowTradeRequest } =
+        latestState
 
       if (!sendCowTradeRequest) return
 
@@ -139,7 +135,7 @@ export const useFarmhandNetwork = (
 
       setState(previous => ({
         ...previous,
-        cowTradeTimeoutId: (cowTradeTimeoutId as unknown) as number,
+        cowTradeTimeoutId: cowTradeTimeoutId as unknown as number,
         isAwaitingCowTradeRequest: true,
       }))
     },
@@ -153,26 +149,20 @@ export const useFarmhandNetwork = (
       return previous
     })
 
-    const timeoutId = (window.setTimeout(() => {
+    const timeoutId = window.setTimeout(() => {
       setState((previous: farmhand.state) => ({
         ...previous,
         money: moneyTotal(previous.money, previous.activePlayers ?? 0),
       }))
       scheduleHeartbeat()
-    }, HEARTBEAT_INTERVAL_PERIOD) as unknown) as number
+    }, HEARTBEAT_INTERVAL_PERIOD) as unknown as number
 
     setState(previous => ({ ...previous, heartbeatTimeoutId: timeoutId }))
   }, [setState])
 
   const syncToRoom = useCallback(async () => {
-    const {
-      isOnline,
-      priceCrashes,
-      priceSurges,
-      room,
-      playerId,
-      peerRoom,
-    } = instanceProxyRef.current.state
+    const { isOnline, priceCrashes, priceSurges, room, playerId, peerRoom } =
+      instanceProxyRef.current.state
 
     if (!isOnline) return
 
@@ -308,27 +298,22 @@ export const useFarmhandNetwork = (
           boundReducersRef.current.removePeer(id)
         )
 
-        const [
-          sendPeerMetadata,
-          getPeerMetadataFunc,
-        ] = statePeerRoom.makeAction('peerMetadata')
+        const [sendPeerMetadata, getPeerMetadataFunc] =
+          statePeerRoom.makeAction('peerMetadata')
 
         getPeerMetadataFunc((...args: any[]) =>
           handlePeerMetadataRequest(instanceProxyRef.current, args[0], args[1])
         )
 
-        const [
-          sendCowTradeRequest,
-          getCowTradeRequest,
-        ] = statePeerRoom.makeAction('cowTrade')
+        const [sendCowTradeRequest, getCowTradeRequest] =
+          statePeerRoom.makeAction('cowTrade')
 
         getCowTradeRequest((...args: any[]) =>
           handleCowTradeRequest(instanceProxyRef.current, args[0], args[1])
         )
 
-        const [sendCowAccept, getCowAccept] = statePeerRoom.makeAction(
-          'cowAccept'
-        )
+        const [sendCowAccept, getCowAccept] =
+          statePeerRoom.makeAction('cowAccept')
 
         getCowAccept((...args: any[]) =>
           handleCowTradeRequestAccept(
@@ -338,9 +323,8 @@ export const useFarmhandNetwork = (
           )
         )
 
-        const [sendCowReject, getCowReject] = statePeerRoom.makeAction(
-          'cowReject'
-        )
+        const [sendCowReject, getCowReject] =
+          statePeerRoom.makeAction('cowReject')
 
         getCowReject((...args: any[]) =>
           handleCowTradeRequestReject(instanceProxyRef.current, args[0])

package/src/components/Farmhand/useFarmhand.test.ts

@@ -21,13 +21,15 @@ const setWindowHeight = (height: number) => {
 }
 
 const getIsMenuOpen = () =>
-  ((window as unknown) as { farmhand: { state: farmhand.state } }).farmhand
-    .state.isMenuOpen
+  (window as unknown as { farmhand: { state: farmhand.state } }).farmhand.state
+    .isMenuOpen
 
 const setIsMenuOpen = (isMenuOpen: boolean) =>
-  ((window as unknown) as {
-    farmhand: { setState: (state: Partial<farmhand.state>) => void }
-  }).farmhand.setState({ isMenuOpen })
+  (
+    window as unknown as {
+      farmhand: { setState: (state: Partial<farmhand.state>) => void }
+    }
+  ).farmhand.setState({ isMenuOpen })
 
 // Simulates a sidebar input having focus, e.g. mid-typing, without depending
 // on any particular Farmhand-rendered input existing in the current view.

package/src/components/Farmhand/useFarmhand.ts

@@ -5,10 +5,12 @@ import { v4 as uuid } from 'uuid'
 
 import * as reducers from '../../game-logic/reducers/index.js'
 import eventHandlers from '../../handlers/ui-events.js'
+import { randomNumberService } from '../../common/services/randomNumber.js'
 
 import {
   DEFAULT_ROOM,
   INITIAL_STORAGE_LIMIT,
+  NOTIFICATION_DURATION_DEFAULT,
   STAGE_TITLE_MAP,
   STANDARD_LOAN_AMOUNT,
 } from '../../constants.js'
@@ -16,6 +18,7 @@ import { scarecrow } from '../../data/items.js'
 import {
   dialogView,
   fieldMode,
+  randomStream,
   stageFocusType,
   toolLevel,
   toolType,
@@ -125,6 +128,7 @@ export const useFarmhand = (props: FarmhandProps) => {
       latestNotification: null,
       newDayNotifications: [],
       notificationLog: [],
+      notificationDuration: NOTIFICATION_DURATION_DEFAULT,
       peers: {},
       peerRoom: null,
       pendingPeerMessages: [],
@@ -252,12 +256,8 @@ export const useFarmhand = (props: FarmhandProps) => {
   const instanceProxyRef = useRef<any>(null)
 
   // Call sub-hooks
-  const {
-    openDialogView,
-    closeDialogView,
-    focusNextView,
-    focusPreviousView,
-  } = useFarmhandNavigation(setState, viewList)
+  const { openDialogView, closeDialogView, focusNextView, focusPreviousView } =
+    useFarmhandNavigation(setState, viewList)
 
   // Mirrors the current view into the URL hash's `view` query param, using
   // pushState (not replaceState) so each in-app view change is a real,
@@ -351,15 +351,15 @@ export const useFarmhand = (props: FarmhandProps) => {
     nextDayStateRef
   )
 
-  const {
-    showInventoryFullNotifications,
-    showRecipeLearnedNotifications,
-  } = useFarmhandNotifications(state, boundReducersRef)
+  const { showInventoryFullNotifications, showRecipeLearnedNotifications } =
+    useFarmhandNotifications(state, boundReducersRef)
 
   // Instance proxy to mimic the legacy class "this" so ui-events.tsx can run unmodified
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const instanceProxy = useMemo(
     () => ({
+      queueRandomNumbers: (stream: randomStream, numbers: number[]) =>
+        randomNumberService.queueRandomNumbers(stream, numbers),
       state,
       props,
       viewTitle,
@@ -582,9 +582,8 @@ export const useFarmhand = (props: FarmhandProps) => {
           ...persistedState,
         })
         const { isCombineEnabled, newDayNotifications } = sanitizedState
-        const restoredStageFocus = getValidatedStageFocusFromHash(
-          sanitizedState
-        )
+        const restoredStageFocus =
+          getValidatedStageFocusFromHash(sanitizedState)
 
         setState(previous => ({
           ...previous,

package/src/components/FermentationRecipeList/FermentationRecipe.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { object } from 'prop-types'
 import Card from '@mui/material/Card/index.js'
 import CardHeader from '@mui/material/CardHeader/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
@@ -141,7 +140,3 @@ export const FermentationRecipe = ({ item }: { item: farmhand.item }) => {
     </Card>
   )
 }
-
-FermentationRecipe.propTypes = {
-  item: object.isRequired,
-}

package/src/components/FermentationRecipeList/FermentationRecipeList.test.tsx

@@ -30,7 +30,8 @@ const FermentationRecipeListStub = ({
 } = {}) => {
   const contextValue = createContextData()
 
-  contextValue.gameState.levelEntitlements = levelEntitlements as farmhand.levelEntitlements
+  contextValue.gameState.levelEntitlements =
+    levelEntitlements as farmhand.levelEntitlements
   return (
     <FarmhandContext.Provider value={contextValue}>
       <FermentationRecipeList />
@@ -55,9 +56,8 @@ describe('FermentationRecipeList', () => {
 
     render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
 
-    const cropsAvailableToFerment = getCropsAvailableToFerment(
-      levelEntitlements
-    )
+    const cropsAvailableToFerment =
+      getCropsAvailableToFerment(levelEntitlements)
 
     const header = screen.getByText(
       `Available Fermentation Recipes (${cropsAvailableToFerment.length} / ${totalFermentableItems})`
@@ -68,9 +68,8 @@ describe('FermentationRecipeList', () => {
 
   test('filters recipes based on search query', async () => {
     const levelEntitlements = getLevelEntitlements(100)
-    const cropsAvailableToFerment = getCropsAvailableToFerment(
-      levelEntitlements
-    )
+    const cropsAvailableToFerment =
+      getCropsAvailableToFerment(levelEntitlements)
 
     render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
 
@@ -84,7 +83,8 @@ describe('FermentationRecipeList', () => {
 
     const filteredCrops = cropsAvailableToFerment.filter(item => {
       const itemWithName = item as farmhand.item & { name: string }
-      const fermentationRecipeName = `Fermented ${itemWithName.name}`.toLowerCase()
+      const fermentationRecipeName =
+        `Fermented ${itemWithName.name}`.toLowerCase()
 
       return (
         fermentationRecipeName.includes('apple') ||
@@ -113,9 +113,8 @@ describe('FermentationRecipeList', () => {
 
   test('handles empty search query', async () => {
     const levelEntitlements = getLevelEntitlements(100)
-    const cropsAvailableToFerment = getCropsAvailableToFerment(
-      levelEntitlements
-    )
+    const cropsAvailableToFerment =
+      getCropsAvailableToFerment(levelEntitlements)
 
     render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
 

package/src/components/FermentationRecipeList/FermentationRecipeList.tsx

@@ -28,7 +28,8 @@ export const FermentationRecipeList = () => {
 
   const filteredCrops = cropsAvailableToFerment.filter(item => {
     const itemWithName = item as farmhand.item & { name: string }
-    const fermentationRecipeName = `${FERMENTED_CROP_NAME}${itemWithName.name}`.toLowerCase()
+    const fermentationRecipeName =
+      `${FERMENTED_CROP_NAME}${itemWithName.name}`.toLowerCase()
 
     return searchTerms.every(
       term =>
@@ -63,5 +64,3 @@ export const FermentationRecipeList = () => {
     </>
   )
 }
-
-FermentationRecipeList.propTypes = {}

package/src/components/Field/Field.tsx

@@ -10,7 +10,6 @@ import Switch from '@mui/material/Switch/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
-import { array, bool, element, func, number, object, string } from 'prop-types'
 import React, { memo, useEffect, useState } from 'react'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
@@ -271,10 +270,6 @@ export const FieldContentWrapper = ({
   )
 }
 
-FieldContentWrapper.propTypes = {
-  fieldContent: element.isRequired,
-}
-
 export const FieldContent = ({
   columns = 0,
   experience,
@@ -339,20 +334,6 @@ export const FieldContent = ({
   </>
 )
 
-FieldContent.propTypes = {
-  columns: number.isRequired,
-  experience: number.isRequired,
-  field: array.isRequired,
-  fieldMode: string.isRequired,
-  handleCombineEnabledChange: func.isRequired,
-  hoveredPlot: object.isRequired,
-  hoveredPlotRangeSize: number.isRequired,
-  isCombineEnabled: bool.isRequired,
-  purchasedCombine: number.isRequired,
-  rows: number.isRequired,
-  setHoveredPlot: func.isRequired,
-}
-
 const adjustableRangeFieldModes = new Set<string>([
   CLEANUP,
   FERTILIZE,
@@ -597,10 +578,11 @@ export const Field = (props: FieldProps) => {
             backgroundColor: colorYellow,
             cursor: 'pointer',
           },
-          '&.harvest-mode.is-inventory-full .Plot.crop.can-be-harvested, &.cleanup-mode.is-inventory-full .Plot.is-replantable': {
-            backgroundColor: colorRedDanger,
-            cursor: 'not-allowed',
-          },
+          '&.harvest-mode.is-inventory-full .Plot.crop.can-be-harvested, &.cleanup-mode.is-inventory-full .Plot.is-replantable':
+            {
+              backgroundColor: colorRedDanger,
+              cursor: 'not-allowed',
+            },
           '&.cleanup-mode .Plot.is-replantable': {
             backgroundColor: colorGreenOk,
             cursor: 'pointer',
@@ -609,14 +591,15 @@ export const Field = (props: FieldProps) => {
             backgroundColor: colorGreenOk,
             cursor: 'auto',
           },
-          '&.set-sprinkler-mode:hover .Plot:hover, &.set-scarecrow-mode:hover .Plot:hover, &.set-lightning-rod-mode:hover .Plot:hover': {
-            '&.is-empty img': { cursor: 'pointer', opacity: 0.5 },
-            '&:not(.is-empty)': {
-              backgroundColor: colorRedDanger,
-              backgroundImage: 'none',
-              cursor: 'not-allowed',
+          '&.set-sprinkler-mode:hover .Plot:hover, &.set-scarecrow-mode:hover .Plot:hover, &.set-lightning-rod-mode:hover .Plot:hover':
+            {
+              '&.is-empty img': { cursor: 'pointer', opacity: 0.5 },
+              '&:not(.is-empty)': {
+                backgroundColor: colorRedDanger,
+                backgroundImage: 'none',
+                cursor: 'not-allowed',
+              },
             },
-          },
           '&.set-sprinkler-mode:hover .Plot:hover.is-empty img': {
             backgroundImage: `url(${sprinklerImg})`,
           },
@@ -699,24 +682,6 @@ export const Field = (props: FieldProps) => {
   )
 }
 
-Field.propTypes = {
-  columns: number.isRequired,
-  experience: number.isRequired,
-  field: array.isRequired,
-  fieldMode: string.isRequired,
-  handleCombineEnabledChange: func.isRequired,
-  handleFieldActionRangeChange: func.isRequired,
-  hoveredPlotRangeSize: number.isRequired,
-  inventory: array.isRequired,
-  inventoryLimit: number.isRequired,
-  isCombineEnabled: bool.isRequired,
-  isMenuOpen: bool,
-  purchasedCombine: number.isRequired,
-  purchasedField: number.isRequired,
-  rows: number.isRequired,
-  selectedItemId: string.isRequired,
-}
-
 export default function Consumer(props: Partial<FieldProps>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/Forest/Forest.tsx

@@ -41,8 +41,9 @@ export const Forest = () => {
   // Also caps by available width (2 * columns "slots": each column, each
   // gap, and one slot split across the two side paddings) so columnGap and
   // padding below - set to this same value - shrink along with the columns.
-  const maxPlotSize = `max(${MIN_PLOT_SIZE}, min(160px, calc((100vh - ${CHROME_HEIGHT_PX}px) / ${rows +
-    OVERHANG_ROW_MULTIPLE}), calc(100% / ${2 * Math.max(columns, 1)})))`
+  const maxPlotSize = `max(${MIN_PLOT_SIZE}, min(160px, calc((100vh - ${CHROME_HEIGHT_PX}px) / ${
+    rows + OVERHANG_ROW_MULTIPLE
+  }), calc(100% / ${2 * Math.max(columns, 1)})))`
 
   // The reserve itself, in the same unit as a plot. Applying this as
   // one-sided paddingTop on .Forest (below) shifts the flexbox
@@ -80,17 +81,19 @@ export const Forest = () => {
           // Paired with ForestPlot.tsx's translateX to give staggered rows a
           // symmetric FOREST_ROW_STAGGER_OVERLAP_PX overlap on both sides -
           // see that file's comment for the shared derivation.
-          columnGap: `calc(${maxPlotSize} - ${2 *
-            FOREST_ROW_STAGGER_OVERLAP_PX}px)`,
+          columnGap: `calc(${maxPlotSize} - ${
+            2 * FOREST_ROW_STAGGER_OVERLAP_PX
+          }px)`,
           justifyContent: 'center',
           width: '100%',
           // ForestQuickSelect switches to a fixed right-side sidebar at this
           // breakpoint (see quickSelectSx) - reserve its width so centering
           // doesn't run the grid into it. Below this breakpoint the toolbelt
           // is a bottom bar instead, so no reservation is needed there.
-          [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]: {
-            width: `calc(100% - ${layout.fieldSpaceForRightSideControls})`,
-          },
+          [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
+            {
+              width: `calc(100% - ${layout.fieldSpaceForRightSideControls})`,
+            },
           // Lower bound must be MIN_PLOT_SIZE, not 0, or columns shrink past
           // it to still fit the container.
           gridTemplateColumns: `repeat(${columns}, minmax(${MIN_PLOT_SIZE}, ${maxPlotSize}))`,

package/src/components/ForestPlot/ForestPlot.tsx

@@ -42,8 +42,8 @@ const getForestPlotBackgroundImage = (
     fertilizerType === STANDARD
       ? plotStates['mulched-plot']
       : fertilizerType === RAINBOW
-      ? plotStates['rainbow-mulched-plot']
-      : null
+        ? plotStates['rainbow-mulched-plot']
+        : null
 
   return [
     ...(overlay ? [`url(${overlay})`] : []),
@@ -70,8 +70,8 @@ const getTreeTooltipText = (
     treeLifeStage !== GROWN
       ? 'Growing...'
       : fruitLifeStage === GROWN
-      ? `Ready to pick! (${fruitYield} ${fruitItemName ?? 'fruit'})`
-      : 'Fruiting...'
+        ? `Ready to pick! (${fruitYield} ${fruitItemName ?? 'fruit'})`
+        : 'Fruiting...'
 
   if (!fertilizerType || fertilizerType === NONE) {
     return growthText
@@ -310,7 +310,7 @@ export const ForestPlot = ({
                   <Typography>
                     {getChopYieldText(
                       chopWoodRange,
-                      isFruitRipe ? item?.name ?? null : null
+                      isFruitRipe ? (item?.name ?? null) : null
                     )}
                   </Typography>
                 </>