@jeremyckahn/farmhand 1.23.2 → 1.23.4

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,
@@ -394,8 +394,18 @@ export const useFarmhand = (props: FarmhandProps) => {
         boundReducersRef.current.purchaseItem(item, quantity),
       sellItem: (item: any, quantity: number) =>
         boundReducersRef.current.sellItem(item, quantity),
-      showNotification: (msg: string, sev?: string, onClick?: () => void) =>
-        boundReducersRef.current.showNotification(msg, sev, onClick),
+      showNotification: (
+        msg: string,
+        sev?: string,
+        onClick?: () => void,
+        actionLabel?: string
+      ) =>
+        boundReducersRef.current.showNotification(
+          msg,
+          sev,
+          onClick,
+          actionLabel
+        ),
       prependPendingPeerMessage: (msg: string, sev?: string) =>
         boundReducersRef.current.prependPendingPeerMessage(msg, sev),
       forRange: (
@@ -582,9 +592,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

@@ -1,5 +1,3 @@
-import ZoomInIcon from '@mui/icons-material/ZoomIn.js'
-import ZoomOutIcon from '@mui/icons-material/ZoomOut.js'
 import Fab from '@mui/material/Fab/index.js'
 import FormControl from '@mui/material/FormControl/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
@@ -10,11 +8,12 @@ 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'
 
+import { ZoomInIcon, ZoomOutIcon } from '../PixelIcon/index.js'
+
 import {
   basicLightningRod,
   superiorLightningRod,
@@ -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>
                 </>

package/src/components/ForestQuickSelect/ForestQuickSelect.tsx

@@ -2,7 +2,6 @@ import Divider from '@mui/material/Divider/index.js'
 import Grid from '@mui/material/Grid/index.js'
 import Paper from '@mui/material/Paper/index.js'
 import { Theme } from '@mui/material/styles/index.js'
-import { array, bool, func, object, string } from 'prop-types'
 
 import { quickSelectSx } from '../../styles/sx.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
@@ -64,17 +63,6 @@ const ForestQuickSelect = ({
   </Paper>
 )
 
-ForestQuickSelect.propTypes = {
-  mulchInventory: array.isRequired,
-  handleForestItemSelectClick: func,
-  handleItemSelectClick: func,
-  isMenuOpen: bool,
-  plantableTreeInventory: array.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  selectedForestItemId: string.isRequired,
-  selectedItemId: string.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof ForestQuickSelect>[0]>
 ) {

package/src/components/Home/Home.tsx

@@ -1,4 +1,3 @@
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'
 import Accordion from '@mui/material/Accordion/index.js'
 import AccordionDetails from '@mui/material/AccordionDetails/index.js'
 import AccordionSummary from '@mui/material/AccordionSummary/index.js'
@@ -7,9 +6,10 @@ import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import Divider from '@mui/material/Divider/index.js'
 import globalWindow from 'global/window.js'
-import { func, object } from 'prop-types'
 import ReactMarkdown from 'react-markdown'
 
+import { ExpandMoreIcon } from '../PixelIcon/index.js'
+
 import { items } from '../../img/index.js'
 
 import { STANDARD_LOAN_AMOUNT } from '../../constants.js'
@@ -289,11 +289,6 @@ If you're playing on a mobile device, all you need to do is [add it to your home
   </Div>
 )
 
-Home.propTypes = {
-  completedAchievements: object.isRequired,
-  handleViewChangeButtonClick: func.isRequired,
-}
-
 export default function Consumer(props: Partial<Parameters<typeof Home>[0]>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/Home/SnowBackground.tsx

@@ -10,7 +10,7 @@ const randomInt = (min: number, max: number) => {
 
 // Taken from:
 // https://github.com/alampros/react-confetti/blob/484bad0a0aaddbcfcc2fb4c1a4a7eeceaa6d4879/stories/snow.story.jsx#L7-L24
-const drawSnowflake = function(
+const drawSnowflake = function (
   this: { numPoints?: number; radius: number },
   ctx: CanvasRenderingContext2D
 ) {

package/src/components/IngredientsList/IngredientsList.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames'
-import { object, shape, string } from 'prop-types'
 
 import { itemsMap } from '../../data/maps.js'
 import { colors } from '../../styles/tokens.js'
@@ -46,9 +45,3 @@ export default function IngredientsList({
     </ul>
   )
 }
-
-IngredientsList.propTypes = {
-  playerInventoryQuantities: object.isRequired,
-  recipe: shape({ ingredients: object.isRequired, name: string.isRequired })
-    .isRequired,
-}

package/src/components/Inventory/Inventory.test.tsx

@@ -45,7 +45,7 @@ const StubInventory = ({ gameState = {}, ...overrides }) => {
 describe('Inventory Component', () => {
   describe('Displaying items', () => {
     test('displays all items when no categories are selected', () => {
-      const items = ([
+      const items = [
         testItem({ id: 'carrot', name: 'Carrot', type: 'CROP' as any }),
         testItem({ id: 'pumpkin', name: 'Pumpkin', type: 'CROP' as any }),
         testItem({
@@ -53,7 +53,7 @@ describe('Inventory Component', () => {
           name: 'Carrot Seed',
           type: 'SEEDS' as any,
         }),
-      ] as unknown) as farmhand.item[]
+      ] as unknown as farmhand.item[]
 
       render(<StubInventory items={items} selectedCategories={[]} />)
       items.forEach(item => {
@@ -62,14 +62,14 @@ describe('Inventory Component', () => {
     })
 
     test('filters items by search query', () => {
-      const items = ([
+      const items = [
         testItem({ id: 'carrot', name: 'Carrot', type: 'CROP' as any }),
         testItem({
           id: 'pumpkin-seed',
           name: 'Pumpkin Seed',
           type: 'SEEDS' as any,
         }),
-      ] as unknown) as farmhand.item[]
+      ] as unknown as farmhand.item[]
 
       render(<StubInventory items={items} selectedCategories={[]} />)
 

package/src/components/Inventory/Inventory.tsx

@@ -4,8 +4,8 @@ import AccordionSummary from '@mui/material/AccordionSummary/index.js'
 import AccordionDetails from '@mui/material/AccordionDetails/index.js'
 import Checkbox from '@mui/material/Checkbox/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'
-import { array } from 'prop-types'
+
+import { ExpandMoreIcon } from '../PixelIcon/index.js'
 
 import FarmhandContext, { ContextData } from '../Farmhand/Farmhand.context.js'
 import Item from '../Item/index.js'
@@ -109,10 +109,9 @@ const Inventory = ({
     )
   }
 
-  const filteredCategories = (Array.from(itemCategories.entries()) as [
-    string,
-    farmhand.item[]
-  ][]).reduce(
+  const filteredCategories = (
+    Array.from(itemCategories.entries()) as [string, farmhand.item[]][]
+  ).reduce(
     (
       filtered: Map<string, farmhand.item[]>,
       [category, categoryItems]: [string, farmhand.item[]]
@@ -215,12 +214,6 @@ const Inventory = ({
   )
 }
 
-Inventory.propTypes = {
-  items: array.isRequired,
-  playerInventory: array,
-  shopInventory: array,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof Inventory>[0]>
 ) {

package/src/components/Item/Item.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp.js'
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown.js'
+
 import Button from '@mui/material/Button/index.js'
 import Box from '@mui/material/Box/index.js'
 import Card from '@mui/material/Card/index.js'
@@ -9,9 +8,13 @@ import CardContent from '@mui/material/CardContent/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
-import { array, bool, func, number, object } from 'prop-types'
 import classNames from 'classnames'
 
+import {
+  KeyboardArrowUpIcon as KeyboardArrowUp,
+  KeyboardArrowDownIcon as KeyboardArrowDown,
+} from '../PixelIcon/index.js'
+
 import FarmhandContext, { ContextData } from '../Farmhand/Farmhand.context.js'
 import { items } from '../../img/index.js'
 import { itemsMap } from '../../data/maps.js'
@@ -36,18 +39,20 @@ interface ValueIndicatorProps {
   poorValue: boolean
 }
 
+// Keeps the indicator from crowding the price it follows.
+const valueIndicatorSx = { marginLeft: '0.5rem' } as const
+
 const ValueIndicator = ({ poorValue }: ValueIndicatorProps) => (
   <Tooltip
     {...{
-      arrow: true,
       placement: 'top',
       title: `${poorValue ? 'Poor' : 'Good'} opportunity`,
     }}
   >
     {poorValue ? (
-      <KeyboardArrowDown color="error" />
+      <KeyboardArrowDown color="error" sx={valueIndicatorSx} />
     ) : (
-      <KeyboardArrowUp color="primary" />
+      <KeyboardArrowUp color="primary" sx={valueIndicatorSx} />
     )}
   </Tooltip>
 )
@@ -229,7 +234,6 @@ export const Item = ({
             !isPurchaseView && description ? (
               <Tooltip
                 {...{
-                  arrow: true,
                   placement: 'top',
                   title: <Typography>{description}</Typography>,
                 }}
@@ -246,7 +250,6 @@ export const Item = ({
                 <p>
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title:
                         previousDayAdjustedValue === null
@@ -288,7 +291,6 @@ export const Item = ({
                 <p>
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title:
                         previousDayAdjustedValue === null
@@ -455,26 +457,6 @@ export const Item = ({
   )
 }
 
-Item.propTypes = {
-  adjustedValue: number,
-  completedAchievements: object.isRequired,
-  handleItemPurchaseClick: func,
-  handleItemSelectClick: func,
-  handleItemSellClick: func,
-  historicalValueAdjustments: array.isRequired,
-  inventory: array.isRequired,
-  inventoryLimit: number.isRequired,
-  isPurchaseView: bool,
-  isSelectView: bool,
-  isSelected: bool,
-  isSellView: bool,
-  item: object.isRequired,
-  money: number.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  showQuantity: bool,
-  valueAdjustments: object.isRequired,
-}
-
 export default function Consumer(props: Partial<ItemProps>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/ItemList/ItemList.tsx

@@ -2,7 +2,6 @@ import Button from '@mui/material/Button/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
-import { array, func, object, string } from 'prop-types'
 
 import { items as itemImages, pixel } from '../../img/index.js'
 import { spriteShadowSx, squareImgSx } from '../../styles/sx.js'
@@ -27,9 +26,10 @@ export const ItemList = ({
     sx={{
       display: 'flex',
       flexFlow: 'row',
-      [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]: {
-        flexFlow: 'column',
-      },
+      [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
+        {
+          flexFlow: 'column',
+        },
     }}
   >
     {sortItems(items).map((item: farmhand.item) => (
@@ -98,10 +98,3 @@ export const ItemList = ({
     ))}
   </Div>
 )
-
-ItemList.propTypes = {
-  handleItemSelectClick: func,
-  items: array.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  selectedItemId: string.isRequired,
-}