@jeremyckahn/farmhand 1.23.2 → 1.23.4

package/src/components/SettingsView/SettingsView.test.tsx

@@ -17,10 +17,12 @@ const defaultProps = {
   handleExportDataClick: noop,
   handleImportDataClick: noop,
   handleSaveButtonClick: noop,
+  handleNotificationDurationChange: noop,
   handleShowNotificationsChange: noop,
   handleUseAlternateEndDayButtonPositionChange: noop,
   handleShowHomeScreenChange: noop,
   showNotifications: true,
+  notificationDuration: 6000,
   useAlternateEndDayButtonPosition: false,
   showHomeScreen: false,
 }
@@ -144,6 +146,25 @@ test('handles switch toggling', async () => {
   expect(handleAllowCustomPeerCowNamesChange).toHaveBeenCalledTimes(1)
 })
 
+test('handles notification duration changes', async () => {
+  const user = userEvent.setup()
+  const handleNotificationDurationChange = vitest.fn()
+
+  render(
+    <SettingsView
+      {...defaultProps}
+      handleNotificationDurationChange={handleNotificationDurationChange}
+    />
+  )
+
+  const slider = screen.getByRole('slider')
+
+  await user.click(slider)
+  await user.keyboard('{ArrowRight}')
+
+  expect(handleNotificationDurationChange).toHaveBeenCalled()
+})
+
 test('opens delete confirmation dialog when delete button is clicked', async () => {
   const user = userEvent.setup()
 

package/src/components/SettingsView/SettingsView.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { bool, func } from 'prop-types'
 import Button from '@mui/material/Button/index.js'
 import Dialog from '@mui/material/Dialog/index.js'
 import DialogActions from '@mui/material/DialogActions/index.js'
@@ -11,11 +10,16 @@ import FormControlLabel from '@mui/material/FormControlLabel/index.js'
 import FormGroup from '@mui/material/FormGroup/index.js'
 import FormLabel from '@mui/material/FormLabel/index.js'
 import Switch from '@mui/material/Switch/index.js'
+import Slider from '@mui/material/Slider/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import FileReaderInput from 'react-file-reader-input'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Div } from '../Elements/index.js'
+import {
+  NOTIFICATION_DURATION_MAX,
+  NOTIFICATION_DURATION_MIN,
+} from '../../constants.js'
 
 import { RandomSeedInput } from './RandomSeedInput.js'
 
@@ -26,10 +30,12 @@ const SettingsView = ({
   handleExportDataClick,
   handleImportDataClick,
   handleSaveButtonClick,
+  handleNotificationDurationChange,
   handleShowNotificationsChange,
   handleUseAlternateEndDayButtonPositionChange,
   handleShowHomeScreenChange,
   showNotifications,
+  notificationDuration,
   useAlternateEndDayButtonPosition,
   showHomeScreen,
 }: {
@@ -41,6 +47,10 @@ const SettingsView = ({
   handleExportDataClick: () => void
   handleImportDataClick: (results: any) => void
   handleSaveButtonClick: () => void
+  handleNotificationDurationChange: (
+    event: React.SyntheticEvent | Event,
+    value: number | number[]
+  ) => void
   handleShowNotificationsChange: (
     event: React.ChangeEvent<HTMLInputElement>
   ) => void
@@ -51,6 +61,7 @@ const SettingsView = ({
     event: React.ChangeEvent<HTMLInputElement>
   ) => void
   showNotifications: boolean
+  notificationDuration: number
   useAlternateEndDayButtonPosition: boolean
   showHomeScreen: boolean
 }) => {
@@ -110,6 +121,18 @@ const SettingsView = ({
             }
             label="Show new notifications"
           />
+          <FormLabel component="legend">Notification display time</FormLabel>
+          <Slider
+            aria-label="Notification display time"
+            marks
+            min={NOTIFICATION_DURATION_MIN / 1000}
+            max={NOTIFICATION_DURATION_MAX / 1000}
+            onChange={handleNotificationDurationChange}
+            sx={{ margin: '0 auto', width: '90%' }}
+            value={notificationDuration / 1000}
+            valueLabelDisplay="auto"
+            valueLabelFormat={value => `${value} seconds`}
+          />
           <FormControlLabel
             control={
               <Switch
@@ -139,7 +162,6 @@ const SettingsView = ({
       <div className="button-row">
         <Tooltip
           {...{
-            arrow: true,
             placement: 'top',
             title: 'Save your game data as a file on your device',
           }}
@@ -164,7 +186,6 @@ const SettingsView = ({
         >
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: 'Load game data that was previously saved',
             }}
@@ -230,21 +251,6 @@ const SettingsView = ({
   )
 }
 
-SettingsView.propTypes = {
-  allowCustomPeerCowNames: bool.isRequired,
-  handleAllowCustomPeerCowNamesChange: func.isRequired,
-  handleClearPersistedDataClick: func.isRequired,
-  handleExportDataClick: func.isRequired,
-  handleImportDataClick: func.isRequired,
-  handleSaveButtonClick: func.isRequired,
-  handleShowHomeScreenChange: func.isRequired,
-  handleShowNotificationsChange: func.isRequired,
-  handleUseAlternateEndDayButtonPositionChange: func.isRequired,
-  showHomeScreen: bool.isRequired,
-  showNotifications: bool.isRequired,
-  useAlternateEndDayButtonPosition: bool.isRequired,
-}
-
 export { SettingsView }
 
 export default function Consumer(

package/src/components/Shop/Shop.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { array, func, number, object } from 'prop-types'
 import Button from '@mui/material/Button/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
@@ -395,25 +394,6 @@ export const Shop = ({
   )
 }
 
-Shop.propTypes = {
-  handleCombinePurchase: func.isRequired,
-  handleCowPenPurchase: func.isRequired,
-  handleCellarPurchase: func.isRequired,
-  handleFieldPurchase: func.isRequired,
-  handleStorageExpansionPurchase: func.isRequired,
-  inventoryLimit: number.isRequired,
-  money: number.isRequired,
-  purchasedCowPen: number.isRequired,
-  purchasedCellar: number.isRequired,
-  purchasedField: number.isRequired,
-  purchasedSmelter: number.isRequired,
-  purchasedWoodChipper: number.isRequired,
-  purchasedCombine: number.isRequired,
-  shopInventory: array.isRequired,
-  toolLevels: object.isRequired,
-  valueAdjustments: object.isRequired,
-}
-
 export default function Consumer(props: Partial<Parameters<typeof Shop>[0]>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/Shop/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: `shop-tab-${index}`,
   'aria-controls': `shop-tabpanel-${index}`,

package/src/components/Stage/Stage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react'
 import classNames from 'classnames'
-import { array, arrayOf, bool, number, string } from 'prop-types'
 import { Theme } from '@mui/material/styles/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
@@ -45,9 +44,8 @@ export const Stage = ({
   useAlternateEndDayButtonPosition = false,
   viewTitle,
 }: StageProps) => {
-  const ref = /** @type {React.MutableRefObject<HTMLDivElement | null>} */ useRef(
-    null
-  )
+  const ref =
+    /** @type {React.MutableRefObject<HTMLDivElement | null>} */ useRef(null)
 
   useEffect(() => {
     if (ref.current) {
@@ -67,8 +65,8 @@ export const Stage = ({
     [stageFocusType.HOME]: isOctober()
       ? jackOLanternBg
       : isDecember()
-      ? winterBg
-      : brownDotBg,
+        ? winterBg
+        : brownDotBg,
     [stageFocusType.SHOP]: yellowDotBg,
     [stageFocusType.WORKSHOP]: lavenderDotBg,
     [stageFocusType.CELLAR]: floorboardBg,
@@ -81,11 +79,13 @@ export const Stage = ({
   // filter (see seasonFilterMap) applied via the `.stage-background` layer
   // below - scoped to just the background, not the crop/cow/tree sprites
   // rendered on top of it.
-  const hasSeasonalColorShift = ([
-    stageFocusType.FIELD,
-    stageFocusType.COW_PEN,
-    stageFocusType.FOREST,
-  ] as string[]).includes(stageFocus)
+  const hasSeasonalColorShift = (
+    [
+      stageFocusType.FIELD,
+      stageFocusType.COW_PEN,
+      stageFocusType.FOREST,
+    ] as string[]
+  ).includes(stageFocus)
 
   return (
     <Div
@@ -230,15 +230,6 @@ export const Stage = ({
   )
 }
 
-Stage.propTypes = {
-  dayCount: number.isRequired,
-  field: arrayOf(array).isRequired,
-  isMenuOpen: bool,
-  stageFocus: string.isRequired,
-  useAlternateEndDayButtonPosition: bool,
-  viewTitle: string.isRequired,
-}
-
 export default function Consumer(props: Partial<Parameters<typeof Stage>[0]>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/StatsView/StatsView.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { array, object, number, string } from 'prop-types'
 import classNames from 'classnames'
 import Table from '@mui/material/Table/index.js'
 import TableBody from '@mui/material/TableBody/index.js'
@@ -83,7 +82,6 @@ export const StatsView = ({
           </TableRow>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: FARM_PRODUCTS_TOOLTIP_TEXT,
             }}
@@ -99,7 +97,6 @@ export const StatsView = ({
           </Tooltip>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: FARM_PRODUCTS_TOOLTIP_TEXT,
             }}
@@ -123,7 +120,6 @@ export const StatsView = ({
           </TableRow>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: COW_SOLD_TOOLTIP_TEXT,
             }}
@@ -262,20 +258,6 @@ export const StatsView = ({
   </Div>
 )
 
-StatsView.propTypes = {
-  cowsTraded: number.isRequired,
-  farmName: string.isRequired,
-  historicalDailyLosses: array.isRequired,
-  historicalDailyRevenue: array.isRequired,
-  itemsSold: object.isRequired,
-  profitabilityStreak: number.isRequired,
-  record7dayProfitAverage: number.isRequired,
-  recordProfitabilityStreak: number.isRequired,
-  revenue: number.isRequired,
-  todaysLosses: number.isRequired,
-  todaysRevenue: number.isRequired,
-}
-
 export default function Consumer(props: Partial<StatsViewProps>) {
   return (
     <FarmhandContext.Consumer>

package/src/components/TierPurchase/TierPurchase.tsx

@@ -7,7 +7,6 @@ import CardContent from '@mui/material/CardContent/index.js'
 import CardHeader from '@mui/material/CardHeader/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
 import Typography from '@mui/material/Typography/index.js'
-import { func, instanceOf, node, number, string } from 'prop-types'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 
@@ -130,17 +129,6 @@ export function TierPurchase({
   )
 }
 
-TierPurchase.propTypes = {
-  description: string,
-  onBuyClick: func.isRequired,
-  maxedOutPlaceholder: node,
-  money: number.isRequired,
-  purchasedTier: number.isRequired,
-  renderTierLabel: func.isRequired,
-  tiers: instanceOf(Map),
-  title: string.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof TierPurchase>[0]>
 ) {

package/src/components/Toolbelt/Toolbelt.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import ReactMarkdown from 'react-markdown'
 
@@ -20,7 +19,7 @@ import { breakpoints } from '../../styles/tokens.js'
 
 const getTools = memoize(
   (toolLevels: Record<toolType, toolLevel>, stageFocus?: stageFocusType) => {
-    const tools: typeof toolsData[keyof typeof toolsData][] = []
+    const tools: (typeof toolsData)[keyof typeof toolsData][] = []
 
     for (let tool of Object.values(toolsData)) {
       if (toolLevels[tool.type] === toolLevel.UNAVAILABLE) continue
@@ -66,9 +65,10 @@ export const Toolbelt = ({
         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',
+            },
           '& button': { flexGrow: 1, margin: '0 0.5em' },
         }}
       >
@@ -146,11 +146,6 @@ export const Toolbelt = ({
   )
 }
 
-Toolbelt.propTypes = {
-  fieldMode: PropTypes.string.isRequired,
-  handleFieldModeSelect: PropTypes.func,
-}
-
 Toolbelt.defaultProps = {
   handleFieldModeSelect: noop,
   toolLevels: {},

package/src/components/UpdateNotifier/UpdateNotifier.tsx

@@ -1,11 +1,16 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 // eslint-disable-next-line import/extensions
 import { useRegisterSW } from 'virtual:pwa-register/react'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 
+// How long to wait for the new service worker to take over and reload the
+// page before reloading it directly.
+const RELOAD_FALLBACK_DELAY = 1000
+
 const UpdateNotifier = () => {
   const {
+    gameState: { hasBooted },
     handlers: { handleGameUpdateAvailable },
   } = useContext(FarmhandContext)
 
@@ -14,18 +19,41 @@ const UpdateNotifier = () => {
     updateServiceWorker,
   } = useRegisterSW()
 
+  const hasNotifiedRef = useRef(false)
+
   useEffect(() => {
-    if (!appNeedsUpdate) {
+    // Wait for the saved game to load: restoring it replaces
+    // todaysNotifications, which would drop this notification from the
+    // Farmer's Log.
+    if (!appNeedsUpdate || !hasBooted || hasNotifiedRef.current) {
       return
     }
 
-    handleGameUpdateAvailable(updateServiceWorker)
+    // handleGameUpdateAvailable isn't referentially stable, so without this
+    // guard every re-render would show the notification again (and the
+    // resulting state update would re-render, looping forever).
+    hasNotifiedRef.current = true
+
+    handleGameUpdateAvailable(async () => {
+      await updateServiceWorker(true)
 
-    // NOTE: This ensures the game is updated when the user next opensit.
+      // updateServiceWorker only reloads the page once a waiting service
+      // worker takes control, which might never happen (e.g. if it was
+      // already activated by another tab). Reload anyway so the button
+      // always does something.
+      setTimeout(() => window.location.reload(), RELOAD_FALLBACK_DELAY)
+    })
+
+    // NOTE: This ensures the game is updated when the user next opens it.
     window.addEventListener('beforeunload', () => {
       updateServiceWorker(true)
     })
-  }, [appNeedsUpdate, handleGameUpdateAvailable, updateServiceWorker])
+  }, [
+    appNeedsUpdate,
+    hasBooted,
+    handleGameUpdateAvailable,
+    updateServiceWorker,
+  ])
 
   return null
 }

package/src/components/UpgradePurchase/UpgradePurchase.tsx

@@ -4,7 +4,6 @@ import Button from '@mui/material/Button/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardHeader from '@mui/material/CardHeader/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
-import { array, func, number, object } from 'prop-types'
 
 import IngredientsList from '../IngredientsList/index.js'
 
@@ -85,15 +84,6 @@ export function UpgradePurchase({
   )
 }
 
-UpgradePurchase.propTypes = {
-  handleUpgradeTool: func.isRequired,
-  inventory: array.isRequired,
-  inventoryLimit: number.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  toolLevels: object,
-  upgrade: object,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof UpgradePurchase>[0]>
 ) {

package/src/components/WineRecipeList/WineRecipe.test.tsx

@@ -56,14 +56,14 @@ const WineRecipeStub = (
   return (
     <FarmhandContext.Provider
       value={
-        ({
+        {
           gameState: { ...stubGameState, ...state },
           handlers: {
             ...stubHandlers,
             ...handlers,
             debounced: { ...stubHandlers, ...handlers },
           },
-        } as unknown) as React.ContextType<typeof FarmhandContext>
+        } as unknown as React.ContextType<typeof FarmhandContext>
       }
     >
       <WineRecipe

package/src/components/WineRecipeList/WineRecipe.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { oneOf } 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'
@@ -142,7 +141,3 @@ export const WineRecipe = ({ wineVariety }: { wineVariety: grapeVariety }) => {
     </Card>
   )
 }
-
-WineRecipe.propTypes = {
-  wineVariety: oneOf(Object.keys(grapeVariety)),
-}

package/src/components/WineRecipeList/WineRecipeList.tsx

@@ -15,9 +15,8 @@ export const WineRecipeList = () => {
     gameState: { itemsSold },
   } = useContext(FarmhandContext)
 
-  const wineVarietiesAvailableToMake = getWineVarietiesAvailableToMake(
-    itemsSold
-  )
+  const wineVarietiesAvailableToMake =
+    getWineVarietiesAvailableToMake(itemsSold)
 
   const [searchQuery, setSearchQuery] = useState('')
 

package/src/components/Workshop/ForgeTabPanel.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, array, object } from 'prop-types'
 
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
@@ -73,10 +72,3 @@ export function ForgeTabPanel({
     </TabPanel>
   )
 }
-
-ForgeTabPanel.propTypes = {
-  currentTab: number.isRequired,
-  index: number.isRequired,
-  learnedForgeRecipes: array.isRequired,
-  toolLevels: object.isRequired,
-}

package/src/components/Workshop/KitchenTabPanel.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, array } from 'prop-types'
 
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
@@ -48,9 +47,3 @@ export function KitchenTabPanel({
     </TabPanel>
   )
 }
-
-KitchenTabPanel.propTypes = {
-  currentTab: number.isRequired,
-  index: number.isRequired,
-  learnedKitchenRecipes: array.isRequired,
-}

package/src/components/Workshop/RecyclingTabPanel.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, array } from 'prop-types'
 
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
@@ -48,9 +47,3 @@ export function RecyclingTabPanel({
     </TabPanel>
   )
 }
-
-RecyclingTabPanel.propTypes = {
-  currentTab: number.isRequired,
-  index: number.isRequired,
-  learnedRecipes: array.isRequired,
-}

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import { node, number } from 'prop-types'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -24,12 +23,6 @@ export const TabPanel = (props: TabPanelProps) => {
   )
 }
 
-TabPanel.propTypes = {
-  children: node,
-  index: number.isRequired,
-  value: number.isRequired,
-}
-
 export const a11yProps = (index: number) => ({
   id: `workshop-tab-${index}`,
   'aria-controls': `workshop-tabpanel-${index}`,

package/src/components/Workshop/WoodChipperTabPanel.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, array } from 'prop-types'
 
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
@@ -48,9 +47,3 @@ export function WoodChipperTabPanel({
     </TabPanel>
   )
 }
-
-WoodChipperTabPanel.propTypes = {
-  currentTab: number.isRequired,
-  index: number.isRequired,
-  learnedRecipes: array.isRequired,
-}

package/src/components/Workshop/Workshop.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, object } from 'prop-types'
 import Tab from '@mui/material/Tab/index.js'
 import Tabs from '@mui/material/Tabs/index.js'
 
@@ -115,14 +114,6 @@ const Workshop = ({
   )
 }
 
-Workshop.propTypes = {
-  learnedRecipes: object.isRequired,
-  purchasedComposter: number,
-  purchasedSmelter: number,
-  purchasedWoodChipper: number,
-  toolLevels: object.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof Workshop>[0]>
 ) {

package/src/components/Workshop/getUpgradesAvailable.ts

@@ -17,7 +17,7 @@ export function getUpgradesAvailable({
 }: GetUpgradesAvailableArgs): farmhand.upgradesMetadatum[] {
   let upgradesAvailable: farmhand.upgradesMetadatum[] = []
 
-  const typedToolUpgrades = (toolUpgrades as unknown) as Record<
+  const typedToolUpgrades = toolUpgrades as unknown as Record<
     string,
     Record<string, farmhand.upgradesMetadatum>
   >