@jeremyckahn/farmhand 1.19.19 → 1.19.21

package/src/components/Field/{Field.js → Field.tsx}

@@ -49,12 +49,13 @@ const fieldKeyMap = {
 }
 
 if (tools.shovel) {
+  // @ts-expect-error
   fieldKeyMap.selectShovel = tools.shovel.fieldKey
 }
 
 export const isInHoverRange = ({
   experience,
-  fieldMode,
+  fieldMode: propsFieldMode,
   hoveredPlotRangeSize,
   hoveredPlot: { x: hoveredPlotX, y: hoveredPlotY },
   x,
@@ -62,13 +63,13 @@ export const isInHoverRange = ({
 }) => {
   // If hoveredPlotX is null, assume that hoveredPlotY is as well.
   // If fieldMode === OBSERVE, nothing is in hover range.
-  if (hoveredPlotX == null || fieldMode === OBSERVE) {
+  if (hoveredPlotX == null || propsFieldMode === OBSERVE) {
     return false
   }
 
   let hoveredPlotRangeSizeToRender = hoveredPlotRangeSize
 
-  switch (fieldMode) {
+  switch (propsFieldMode) {
     case SET_SPRINKLER:
       hoveredPlotRangeSizeToRender = getLevelEntitlements(
         levelAchieved(experience)
@@ -111,12 +112,14 @@ export const MemoPlot = memo(
    * @param {number} props.y
    */
   props => {
+    // @ts-expect-error
     const { hoveredPlot, plotContent, setHoveredPlot, x, y } = props
 
     return (
       <Plot
         {...{
           hoveredPlot,
+          // @ts-expect-error
           isInHoverRange: isInHoverRange(props),
           plotContent,
           setHoveredPlot,
@@ -127,12 +130,15 @@ export const MemoPlot = memo(
     )
   },
   (prev, next) => {
+    // @ts-expect-error
     if (isInHoverRange(prev) !== isInHoverRange(next)) {
       return false
     }
 
     return (
+      // @ts-expect-error
       prev.plotContent === next.plotContent &&
+      // @ts-expect-error
       prev.hoveredPlotRangeSize === next.hoveredPlotRangeSize
     )
   }
@@ -225,7 +231,7 @@ export const FieldContent = ({
   columns,
   experience,
   field,
-  fieldMode,
+  fieldMode: propsFieldMode,
   handleCombineEnabledChange,
   hoveredPlot,
   hoveredPlotRangeSize,
@@ -241,15 +247,15 @@ export const FieldContent = ({
         onMouseLeave: () => setHoveredPlot({ x: null, y: null }),
       }}
     >
-      {nullArray(rows).map((_null, y) => (
+      {nullArray(rows).map((_rowIndex, y) => (
         <div className="row" key={y}>
           {nullArray(columns).map(
-            (_null, x, arr, plotContent = field[y][x]) => (
+            (_colIndex, x, arr, plotContent = field[y][x]) => (
               <MemoPlot
                 key={x}
                 {...{
                   experience,
-                  fieldMode,
+                  fieldMode: propsFieldMode,
                   hoveredPlot,
                   hoveredPlotRangeSize,
                   plotContent,
@@ -325,7 +331,7 @@ const RangeSliderValueLabelComponent = ({ children, open, value }) => (
 export const Field = props => {
   const {
     field,
-    fieldMode,
+    fieldMode: propsFieldMode,
     handleFieldActionRangeChange,
     hoveredPlotRangeSize,
     inventory,
@@ -357,19 +363,18 @@ export const Field = props => {
       <div
         {...{
           className: classNames('Field', {
-            'cleanup-mode': fieldMode === CLEANUP,
-            'fertilize-mode': fieldMode === FERTILIZE,
-            'harvest-mode': fieldMode === HARVEST,
-            'mine-mode': fieldMode === MINE,
-            // @ts-expect-error - Unnecessary properties are omitted out of convenience
+            'cleanup-mode': propsFieldMode === CLEANUP,
+            'fertilize-mode': propsFieldMode === FERTILIZE,
+            'harvest-mode': propsFieldMode === HARVEST,
+            'mine-mode': propsFieldMode === MINE,
             'is-inventory-full': !doesInventorySpaceRemain({
               inventory,
               inventoryLimit,
             }),
-            'plant-mode': fieldMode === PLANT,
-            'set-scarecrow-mode': fieldMode === SET_SCARECROW,
-            'set-sprinkler-mode': fieldMode === SET_SPRINKLER,
-            'water-mode': fieldMode === WATER,
+            'plant-mode': propsFieldMode === PLANT,
+            'set-scarecrow-mode': propsFieldMode === SET_SCARECROW,
+            'set-sprinkler-mode': propsFieldMode === SET_SPRINKLER,
+            'water-mode': propsFieldMode === WATER,
           }),
           'data-purchased-field': purchasedField,
           'data-testid': 'field',
@@ -420,7 +425,7 @@ export const Field = props => {
             />
           )}
         </TransformWrapper>
-        {adjustableRangeFieldModes.has(fieldMode) && (
+        {adjustableRangeFieldModes.has(propsFieldMode) && (
           <div className="slider-wrapper">
             <Slider
               {...{

package/src/components/Home/{Home.js → Home.tsx}

@@ -32,6 +32,7 @@ const onboardingAchievements = [
   achievementsMap['purchase-cow-pen'],
 ]
 
+// @ts-expect-error
 const getRemainingOnboardingAchievements = memoize(completedAchievements =>
   onboardingAchievements.filter(
     achievement => achievement && !completedAchievements[achievement.id]

package/src/components/Home/{SnowBackground.js → SnowBackground.tsx}

@@ -11,7 +11,9 @@ const randomInt = (min, max) => {
 // Taken from:
 // https://github.com/alampros/react-confetti/blob/484bad0a0aaddbcfcc2fb4c1a4a7eeceaa6d4879/stories/snow.story.jsx#L7-L24
 const drawSnowflake = function(ctx) {
+  // @ts-expect-error
   const numPoints = this.numPoints || randomInt(3, 4) * 2
+  // @ts-expect-error
   this.numPoints = numPoints
   // @ts-expect-error
   const innerRadius = this.radius * 0.2

package/src/components/Inventory/{Inventory.js → Inventory.tsx}

@@ -87,10 +87,12 @@ const Inventory = ({
 }) => {
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedCategories, setSelectedCategories] = useState(
-    /** @type {string[]} */ ([])
+    /** @type {string[]} */ []
   )
   const toggleCategory = category => {
+    // @ts-expect-error
     setSelectedCategories(prev =>
+      // @ts-expect-error
       prev.includes(category)
         ? prev.filter(c => c !== category)
         : [...prev, category]
@@ -98,8 +100,9 @@ const Inventory = ({
   }
 
   const filteredCategories = Array.from(itemCategories.entries()).reduce(
-    (filtered, [category, items]) => {
-      const matchingItems = items.filter(item => {
+    // @ts-expect-error
+    (filtered, [category, categoryItems]) => {
+      const matchingItems = categoryItems.filter(item => {
         const mappedItem = itemsMap[item.id]
         return (
           mappedItem &&
@@ -110,8 +113,10 @@ const Inventory = ({
 
       if (
         matchingItems.length &&
+        // @ts-expect-error
         (!selectedCategories.length || selectedCategories.includes(category))
       ) {
+        // @ts-expect-error
         filtered.set(category, matchingItems)
       }
       return filtered
@@ -142,6 +147,7 @@ const Inventory = ({
                   control={
                     <Checkbox
                       disabled={isPurchaseView}
+                      // @ts-expect-error
                       checked={selectedCategories.includes(key)}
                       onChange={() => toggleCategory(key)}
                     />
@@ -153,28 +159,30 @@ const Inventory = ({
           </AccordionDetails>
         </Accordion>
       )}
-      {Array.from(filteredCategories.entries()).map(([category, items]) =>
-        items.length ? (
-          <Fragment key={category}>
-            <section>
-              <h3>{formatCategoryName(category)}</h3>
-              <ul className="card-list">
-                {items.map(item => (
-                  <li key={item.id}>
-                    <Item
-                      {...{
-                        isPurchaseView,
-                        isSellView,
-                        item,
-                        showQuantity: isPurchaseView,
-                      }}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </section>
-          </Fragment>
-        ) : null
+      {Array.from((filteredCategories as any).entries()).map(
+        // @ts-expect-error
+        ([category, categoryItems]) =>
+          categoryItems.length ? (
+            <Fragment key={category}>
+              <section>
+                <h3>{formatCategoryName(category)}</h3>
+                <ul className="card-list">
+                  {categoryItems.map(item => (
+                    <li key={item.id}>
+                      <Item
+                        {...{
+                          isPurchaseView,
+                          isSellView,
+                          item,
+                          showQuantity: isPurchaseView,
+                        }}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            </Fragment>
+          ) : null
       )}
     </div>
   )

package/src/components/Item/{Item.js → Item.tsx}

@@ -289,7 +289,8 @@ export const Item = ({
                 </p>
               )}
               {isPurchaseView &&
-                /** @type {globalThis.farmhand.item} */ (item).growsInto && (
+                // @ts-expect-error
+                /** @type {globalThis.farmhand.item} */ item.growsInto && (
                   <p>
                     Days to mature:{' '}
                     {getCropLifecycleDuration(

package/src/components/LogView/{LogView.js → LogView.tsx}

@@ -31,25 +31,30 @@ export const LogView = ({ notificationLog, todaysNotifications }) => (
     </ul>
     <Divider />
     <ul>
-      {notificationLog.map(({ day, notifications }, i) => (
-        <li key={`${i}_${notifications.info.join()}`}>
+      {notificationLog.map(({ day, notifications }, dayIndex) => (
+        <li key={`${dayIndex}_${notifications.info.join()}`}>
           <h3>Day {day}</h3>
-          {['success', 'info', 'warning', 'error'].map((severity, i) =>
-            notifications[severity].length ? (
-              <Alert
-                {...{
-                  elevation: 3,
-                  key: `${severity}_${i}`,
-                  severity: /** @type {'success' | 'info' | 'warning' | 'error'} */ (severity),
-                }}
-              >
-                {notifications[severity].map((message, j) => (
-                  <ReactMarkdown
-                    {...{ key: `${j}_${message}`, source: message }}
-                  />
-                ))}
-              </Alert>
-            ) : null
+          {['success', 'info', 'warning', 'error'].map(
+            (severityLevel, severityIndex) =>
+              notifications[severityLevel].length ? (
+                // @ts-expect-error
+                <Alert
+                  {...{
+                    elevation: 3,
+                    key: `${severityLevel}_${severityIndex}`,
+                    severity: /** @type {'success' | 'info' | 'warning' | 'error'} */ severityLevel,
+                  }}
+                >
+                  {notifications[severityLevel].map((message, messageIndex) => (
+                    <ReactMarkdown
+                      {...{
+                        key: `${messageIndex}_${message}`,
+                        source: message,
+                      }}
+                    />
+                  ))}
+                </Alert>
+              ) : null
           )}
         </li>
       ))}

package/src/components/Navigation/{Navigation.js → Navigation.tsx}

@@ -285,7 +285,6 @@ export const Navigation = ({
         <h3
           {...{
             className: classNames('inventory-info', {
-              // @ts-expect-error
               'is-inventory-full': !doesInventorySpaceRemain({
                 inventory,
                 inventoryLimit,
@@ -320,20 +319,20 @@ export const Navigation = ({
           { dialogView: ACHIEVEMENTS, Icon: BeenhereIcon },
           { dialogView: ACCOUNTING, Icon: AccountBalanceIcon },
           { dialogView: SETTINGS, Icon: SettingsIcon },
-        ].map(({ dialogView, Icon }) => (
+        ].map(({ dialogView: dialogViewType, Icon }) => (
           <Tooltip
             {...{
               arrow: true,
-              key: dialogView,
+              key: dialogViewType,
               placement: 'top',
-              title: dialogTriggerTextMap[dialogView],
+              title: dialogTriggerTextMap[dialogViewType],
             }}
           >
             <Fab
               {...{
-                'aria-label': dialogTriggerTextMap[dialogView],
+                'aria-label': dialogTriggerTextMap[dialogViewType],
                 color: 'primary',
-                onClick: () => handleClickDialogViewButton(dialogView),
+                onClick: () => handleClickDialogViewButton(dialogViewType),
               }}
             >
               <Icon />

package/src/components/NotificationSystem/{NotificationSystem.js → NotificationSystem.tsx}

@@ -58,7 +58,6 @@ export default withSnackbar(function Consumer(props) {
     <FarmhandContext.Consumer>
       {({ gameState, handlers }) => {
         return (
-          // @ts-expect-error - Complex prop spreading creates type mismatch with PropTypes
           <NotificationSystem {...{ ...gameState, ...handlers, ...props }} />
         )
       }}

package/src/components/OnlinePeersView/{OnlinePeersView.js → OnlinePeersView.tsx}

@@ -79,17 +79,20 @@ const OnlinePeersView = ({
           <Divider />
           <ul>
             {latestPeerMessages.map(
-              ({ playerId, message, severity = 'info' }, i) => (
-                <li {...{ key: i }}>
+              (
+                { playerId: peerPlayerId, message, severity = 'info' },
+                messageIndex
+              ) => (
+                <li {...{ key: messageIndex }}>
                   <Alert
                     {...{
                       elevation: 3,
-                      severity: /** @type {'success' | 'info' | 'warning' | 'error'} */ (severity),
+                      severity: severity as any,
                     }}
                   >
                     <ReactMarkdown
                       {...{
-                        source: `**${getPlayerName(playerId)}** ${message}`,
+                        source: `**${getPlayerName(peerPlayerId)}** ${message}`,
                       }}
                     />
                   </Alert>

package/src/components/Plot/{Plot.test.js → Plot.test.tsx}

@@ -363,9 +363,9 @@ describe('getBackgroundStyles', () => {
   test('constructs style for fertilizerType === fertilizerType.STANDARD', () => {
     expect(
       getBackgroundStyles(
-        /** @type {globalThis.farmhand.plotContent} */ (testCrop({
+        /** @type {globalThis.farmhand.plotContent} */ testCrop({
           fertilizerType: fertilizerType.STANDARD,
-        }))
+        })
       )
     ).toBe(`url(${plotStates['fertilized-plot']})`)
   })
@@ -373,9 +373,9 @@ describe('getBackgroundStyles', () => {
   test('constructs style for fertilizerType === fertilizerType.RAINBOW', () => {
     expect(
       getBackgroundStyles(
-        /** @type {globalThis.farmhand.plotContent} */ (testCrop({
+        /** @type {globalThis.farmhand.plotContent} */ testCrop({
           fertilizerType: fertilizerType.RAINBOW,
-        }))
+        })
       )
     ).toBe(`url(${plotStates['rianbow-fertilized-plot']})`)
   })
@@ -383,9 +383,9 @@ describe('getBackgroundStyles', () => {
   test('constructs style for wasWateredToday', () => {
     expect(
       getBackgroundStyles(
-        /** @type {globalThis.farmhand.plotContent} */ (testCrop({
+        /** @type {globalThis.farmhand.plotContent} */ testCrop({
           wasWateredToday: true,
-        }))
+        })
       )
     ).toBe(`url(${plotStates['watered-plot']})`)
   })
@@ -393,10 +393,10 @@ describe('getBackgroundStyles', () => {
   test('constructs style for fertilizerType === fertilizerType.STANDARD and wasWateredToday', () => {
     expect(
       getBackgroundStyles(
-        /** @type {globalThis.farmhand.plotContent} */ (testCrop({
+        /** @type {globalThis.farmhand.plotContent} */ testCrop({
           fertilizerType: fertilizerType.STANDARD,
           wasWateredToday: true,
-        }))
+        })
       )
     ).toBe(
       `url(${plotStates['fertilized-plot']}), url(${plotStates['watered-plot']})`

package/src/components/Plot/{Plot.js → Plot.tsx}

@@ -33,14 +33,18 @@ export const getBackgroundStyles = plotContent => {
   const backgroundImages = []
 
   if (plotContent.fertilizerType === fertilizerType.STANDARD) {
+    // @ts-expect-error
     backgroundImages.push(`url(${plotStates['fertilized-plot']})`)
   } else if (plotContent.fertilizerType === fertilizerType.RAINBOW) {
+    // @ts-expect-error
     backgroundImages.push(`url(${plotStates['rainbow-fertilized-plot']})`)
   }
 
   if ('wasWateredToday' in plotContent && plotContent.wasWateredToday) {
+    // @ts-expect-error
     backgroundImages.push(`url(${plotStates['watered-plot']})`)
   } else if ('isShoveled' in plotContent && plotContent.isShoveled) {
+    // @ts-expect-error
     backgroundImages.push(`url(${plotStates['shoveled-plot']})`)
   }
 
@@ -133,6 +137,7 @@ export const Plot = ({
   } else if (wasJustShoveled || plotContent?.isShoveled) {
     const oreItem = itemsMap[plotContent?.oreId]
 
+    // @ts-expect-error
     plotLabelText = oreItem ? SHOVELED_PLOT('', oreItem) : SHOVELED
   }
 

package/src/components/PriceEventView/{PriceEventView.test.js → PriceEventView.test.tsx}

@@ -23,6 +23,7 @@ const defaultProps = {
 
 const renderWithContext = (props = {}, gameState = {}, handlers = {}) => {
   const contextValue = createContextData()
+  // @ts-expect-error
   contextValue.gameState = {
     ...contextValue.gameState,
     ...testState(gameState),

package/src/components/ProgressBar/{ProgressBar.js → ProgressBar.tsx}

@@ -35,11 +35,13 @@ const ProgressBar = ({ percent }) => {
         },
       })
 
+      // @ts-expect-error
       setCurrentTweenable(tweenable)
     }
 
     return () => {
       if (currentTweenable) {
+        // @ts-expect-error
         currentTweenable.cancel()
       }
     }

package/src/components/QuantityInput/{QuantityInput.js → QuantityInput.tsx}

@@ -22,6 +22,7 @@ const QuantityNumberFormat = forwardRef(
    * @param {(value: number) => void} props.onChange
    * @param {React.ForwardedRef<any>} ref
    */
+  // @ts-expect-error
   ({ min, max, onChange, ...rest }, ref) => (
     <NumberFormat
       isNumericString

package/src/components/Recipe/{Recipe.js → Recipe.tsx}

@@ -57,7 +57,6 @@ const Recipe = ({
   const canBeMade =
     quantity > 0 &&
     canMakeRecipe(recipe, inventory, quantity) &&
-    // @ts-expect-error
     doesInventorySpaceRemain({
       inventory,
       // Without the Infinity coercion, this would break recipes for unlimited
@@ -95,7 +94,7 @@ const Recipe = ({
               <IngredientsList
                 {...{
                   playerInventoryQuantities,
-                  recipe: /** @type {globalThis.farmhand.recipe} */ (recipe),
+                  recipe: recipe as any,
                 }}
               />
             </>

package/src/components/SettingsView/{RandomSeedInput.js → RandomSeedInput.tsx}

@@ -20,7 +20,7 @@ export const RandomSeedInput = ({ search = globalWindow.location.search }) => {
    * @param {React.ChangeEvent<HTMLInputElement>} e
    */
   const handleChange = e => {
-    setSeed(/** @type {HTMLInputElement} */ (e.target).value)
+    setSeed(/** @type {HTMLInputElement} */ e.target.value)
   }
 
   /**

package/src/components/Shop/{Shop.js → Shop.tsx}

@@ -42,6 +42,7 @@ import './Shop.sass'
  * @param {Array.<farmhand.item>} shopInventory
  * @returns {Object.<'seeds' | 'fieldTools', Array.<farmhand.item>>}
  */
+// @ts-expect-error
 const categorizeShopInventory = memoize(shopInventory =>
   shopInventory.reduce(
     (acc, inventoryItem) => {
@@ -204,7 +205,7 @@ export const Shop = ({
               }}
             />
           </li>
-          {features.FOREST && isForestUnlocked ? (
+          {(features as any).FOREST && isForestUnlocked ? (
             <li>
               <TierPurchase
                 {...{

package/src/components/Stage/{Stage.test.js → Stage.test.tsx}

@@ -47,6 +47,7 @@ const defaultProps = {
 
 const renderWithContext = (props = {}, gameState = {}, handlers = {}) => {
   const contextValue = createContextData()
+  // @ts-expect-error
   contextValue.gameState = {
     ...contextValue.gameState,
     ...testState(gameState),

package/src/components/Stage/{Stage.js → Stage.tsx}

@@ -16,19 +16,22 @@ import { isOctober, isDecember } from '../../utils/index.js'
 import './Stage.sass'
 
 export const Stage = ({ field, stageFocus, viewTitle }) => {
-  const ref = /** @type {React.MutableRefObject<HTMLDivElement | null>} */ (useRef(
+  const ref = /** @type {React.MutableRefObject<HTMLDivElement | null>} */ useRef(
     null
-  ))
+  )
 
   useEffect(() => {
     if (ref.current) {
-      const current = /** @type {HTMLElement} */ (ref.current)
+      const current = /** @type {HTMLElement} */ ref.current
       const { style } = current
       // Set scroll position to the top
+      // @ts-expect-error
       current.scrollTop = 0
 
       // Stop any intertial scrolling
+      // @ts-expect-error
       style.overflow = 'hidden'
+      // @ts-expect-error
       setTimeout(() => (style.overflow = ''), 0)
     }
   }, [stageFocus])

package/src/components/TierPurchase/{TierPurchase.js → TierPurchase.tsx}

@@ -40,12 +40,12 @@ export function TierPurchase({
   }
 
   const canPlayerBuySelectedTier = () => {
-    const selectedTier = tiers.get(selectedTierNumber)
+    const tierToBuy = tiers.get(selectedTierNumber)
 
     return (
-      !!selectedTier &&
+      !!tierToBuy &&
       !hasPurchasedTier(selectedTierNumber) &&
-      money >= selectedTier.price
+      money >= tierToBuy.price
     )
   }
 

package/src/components/Toolbelt/{Toolbelt.js → Toolbelt.tsx}

@@ -17,15 +17,18 @@ import { tools as toolImages, craftedItems, pixel } from '../../img/index.js'
 
 import './Toolbelt.sass'
 
+// @ts-expect-error
 const getTools = memoize(toolLevels => {
   const tools = []
 
   for (let tool of Object.values(toolsData)) {
     if (toolLevels[tool.type] !== toolLevel.UNAVAILABLE) {
+      // @ts-expect-error
       tools.push(tool)
     }
   }
 
+  // @ts-expect-error
   return tools.sort((a, b) => a.order - b.order)
 })
 

package/src/components/UpgradePurchase/{UpgradePurchase.js → UpgradePurchase.tsx}

@@ -30,7 +30,6 @@ export function UpgradePurchase({
 
   const canBeMade =
     canMakeRecipe(upgrade, inventory, 1) &&
-    // @ts-expect-error
     doesInventorySpaceRemain({
       inventory,
       // Without the Infinity coercion, this would break recipes for unlimited