@jeremyckahn/farmhand 1.23.2 → 1.23.4

package/src/components/PixelIcon/icons.ts

@@ -0,0 +1,445 @@
+// Pixel art replacements for the @mui/icons-material and Font Awesome icons
+// used throughout the app. See createPixelIcon.tsx for the pixel map format.
+//
+// Every map is 12x12, so at MUI's default icon size (24px) each art pixel
+// is exactly 2 CSS pixels.
+
+import {
+  createPixelIcon,
+  flipX,
+  flipY,
+  PixelMap,
+  rotate,
+} from './createPixelIcon.js'
+
+const chevronDown: PixelMap = [
+  '............',
+  '............',
+  '............',
+  '.##......##.',
+  '.###....###.',
+  '..###..###..',
+  '...######...',
+  '....####....',
+  '.....##.....',
+  '............',
+  '............',
+  '............',
+]
+
+const arrowDown: PixelMap = [
+  '............',
+  '.....##.....',
+  '.....##.....',
+  '.....##.....',
+  '.....##.....',
+  '.....##.....',
+  '..#..##..#..',
+  '..##.##.##..',
+  '...######...',
+  '....####....',
+  '.....##.....',
+  '............',
+]
+
+const heart: PixelMap = [
+  '............',
+  '..##....##..',
+  '.####..####.',
+  '############',
+  '###+########',
+  '##+#########',
+  '.##########.',
+  '..########..',
+  '...######...',
+  '....####....',
+  '.....##.....',
+  '............',
+]
+
+const zoomLens = (symbol: 'plus' | 'minus'): PixelMap => [
+  '..#####.....',
+  '.##...##....',
+  '##..' + (symbol === 'plus' ? '#' : '.') + '..##...',
+  '#...' + (symbol === 'plus' ? '#' : '.') + '...#...',
+  '#.#####.#...',
+  '#...' + (symbol === 'plus' ? '#' : '.') + '...#...',
+  '##..' + (symbol === 'plus' ? '#' : '.') + '..##...',
+  '.##...###...',
+  '..#######...',
+  '.......###..',
+  '........###.',
+  '.........##.',
+]
+
+export const KeyboardArrowDownIcon = createPixelIcon(
+  chevronDown,
+  'KeyboardArrowDown'
+)
+export const KeyboardArrowUpIcon = createPixelIcon(
+  flipY(chevronDown),
+  'KeyboardArrowUp'
+)
+export const KeyboardArrowLeftIcon = createPixelIcon(
+  rotate(chevronDown),
+  'KeyboardArrowLeft'
+)
+export const KeyboardArrowRightIcon = createPixelIcon(
+  flipX(rotate(chevronDown)),
+  'KeyboardArrowRight'
+)
+export const ExpandMoreIcon = createPixelIcon(chevronDown, 'ExpandMore')
+
+export const ArrowDownwardIcon = createPixelIcon(arrowDown, 'ArrowDownward')
+export const ArrowUpwardIcon = createPixelIcon(flipY(arrowDown), 'ArrowUpward')
+
+export const ArrowDropDownIcon = createPixelIcon(
+  [
+    '............',
+    '............',
+    '............',
+    '............',
+    '..########..',
+    '...######...',
+    '....####....',
+    '.....##.....',
+    '............',
+    '............',
+    '............',
+    '............',
+  ],
+  'ArrowDropDown'
+)
+
+export const MenuIcon = createPixelIcon(
+  [
+    '............',
+    '............',
+    '.##########.',
+    '.##########.',
+    '............',
+    '.##########.',
+    '.##########.',
+    '............',
+    '.##########.',
+    '.##########.',
+    '............',
+    '............',
+  ],
+  'Menu'
+)
+
+export const HotelIcon = createPixelIcon(
+  [
+    '............',
+    '............',
+    '#...........',
+    '#...........',
+    '#.##........',
+    '#.##.######.',
+    '#....#######',
+    '############',
+    '############',
+    '#..........#',
+    '#..........#',
+    '............',
+  ],
+  'Hotel'
+)
+
+export const SettingsIcon = createPixelIcon(
+  [
+    '....####....',
+    '.##.####.##.',
+    '.##########.',
+    '..########..',
+    '#####..#####',
+    '####....####',
+    '####....####',
+    '#####..#####',
+    '..########..',
+    '.##########.',
+    '.##.####.##.',
+    '....####....',
+  ],
+  'Settings'
+)
+
+export const FlashOnIcon = createPixelIcon(
+  [
+    '......####..',
+    '.....####...',
+    '....####....',
+    '...####.....',
+    '..########..',
+    '..#######...',
+    '.....###....',
+    '....###.....',
+    '....##......',
+    '...##.......',
+    '...#........',
+    '............',
+  ],
+  'FlashOn'
+)
+
+export const BookIcon = createPixelIcon(
+  [
+    '............',
+    '..#########.',
+    '.#+########.',
+    '.#+##....##.',
+    '.#+########.',
+    '.#+########.',
+    '.#+########.',
+    '.#+########.',
+    '.#+########.',
+    '.##########.',
+    '.#+++++++++.',
+    '..#########.',
+  ],
+  'Book'
+)
+
+export const AssessmentIcon = createPixelIcon(
+  [
+    '.##########.',
+    '############',
+    '########..##',
+    '########..##',
+    '#####..#..##',
+    '#####..#..##',
+    '##..#..#..##',
+    '##..#..#..##',
+    '##..#..#..##',
+    '##..#..#..##',
+    '############',
+    '.##########.',
+  ],
+  'Assessment'
+)
+
+export const BeenhereIcon = createPixelIcon(
+  [
+    '.##########.',
+    '.##########.',
+    '.#######..#.',
+    '.######..##.',
+    '.#..##..###.',
+    '.##....####.',
+    '.###..#####.',
+    '.##########.',
+    '.##########.',
+    '.####..####.',
+    '.###....###.',
+    '.##......##.',
+  ],
+  'Beenhere'
+)
+
+export const AssignmentLateIcon = createPixelIcon(
+  [
+    '....####....',
+    '.##.####.##.',
+    '.##########.',
+    '.####..####.',
+    '.####..####.',
+    '.####..####.',
+    '.####..####.',
+    '.##########.',
+    '.####..####.',
+    '.##########.',
+    '.##########.',
+    '.##########.',
+  ],
+  'AssignmentLate'
+)
+
+export const AccountBalanceIcon = createPixelIcon(
+  [
+    '.....##.....',
+    '...######...',
+    '.##########.',
+    '############',
+    '............',
+    '.##..##..##.',
+    '.##..##..##.',
+    '.##..##..##.',
+    '.##..##..##.',
+    '.##########.',
+    '############',
+    '############',
+  ],
+  'AccountBalance'
+)
+
+export const ZoomInIcon = createPixelIcon(zoomLens('plus'), 'ZoomIn')
+export const ZoomOutIcon = createPixelIcon(zoomLens('minus'), 'ZoomOut')
+
+export const HeartIcon = createPixelIcon(heart, 'Heart')
+
+export const HeartOutlineIcon = createPixelIcon(
+  [
+    '............',
+    '..##....##..',
+    '.#..#..#..#.',
+    '#....##....#',
+    '#..........#',
+    '#..........#',
+    '.#........#.',
+    '..#......#..',
+    '...#....#...',
+    '....#..#....',
+    '.....##.....',
+    '............',
+  ],
+  'HeartOutline'
+)
+
+export const FemaleIcon = createPixelIcon(
+  [
+    '...######...',
+    '..##....##..',
+    '.##......##.',
+    '.##......##.',
+    '.##......##.',
+    '..##....##..',
+    '...######...',
+    '.....##.....',
+    '...######...',
+    '.....##.....',
+    '.....##.....',
+    '............',
+  ],
+  'Female'
+)
+
+export const MaleIcon = createPixelIcon(
+  [
+    '......######',
+    '......######',
+    '.........###',
+    '........####',
+    '..####.##.##',
+    '.##..###....',
+    '##....##....',
+    '##....##....',
+    '##....##....',
+    '##....##....',
+    '.##..##.....',
+    '..####......',
+  ],
+  'Male'
+)
+
+const circle = (holes: Record<number, string>): PixelMap =>
+  [
+    '...######...',
+    '.##########.',
+    '.##########.',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '.##########.',
+    '.##########.',
+    '...######...',
+  ].map((row, y) => holes[y] ?? row)
+
+export const SuccessIcon = createPixelIcon(
+  circle({
+    3: '########..##',
+    4: '#######..###',
+    5: '##..##..####',
+    6: '###....#####',
+    7: '####..######',
+  }),
+  'Success'
+)
+
+export const InfoIcon = createPixelIcon(
+  circle({
+    2: '.####..####.',
+    5: '#####..#####',
+    6: '#####..#####',
+    7: '#####..#####',
+    8: '#####..#####',
+    9: '.####..####.',
+  }),
+  'Info'
+)
+
+export const ErrorIcon = createPixelIcon(
+  circle({
+    2: '.####..####.',
+    3: '#####..#####',
+    4: '#####..#####',
+    5: '#####..#####',
+    6: '#####..#####',
+    8: '#####..#####',
+    9: '.####..####.',
+  }),
+  'Error'
+)
+
+export const WarningIcon = createPixelIcon(
+  [
+    '.....##.....',
+    '.....##.....',
+    '....####....',
+    '....#..#....',
+    '...##..##...',
+    '...##..##...',
+    '..###..###..',
+    '..########..',
+    '.####..####.',
+    '.##########.',
+    '############',
+    '............',
+  ],
+  'Warning'
+)
+
+const checkbox = (holes: Record<number, string>): PixelMap =>
+  [
+    '.##########.',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '############',
+    '.##########.',
+  ].map((row, y) => holes[y] ?? row)
+
+export const CheckBoxOutlineBlankIcon = createPixelIcon(
+  checkbox(
+    Object.fromEntries([2, 3, 4, 5, 6, 7, 8, 9].map(y => [y, '##........##']))
+  ),
+  'CheckBoxOutlineBlank'
+)
+
+export const CheckBoxIcon = createPixelIcon(
+  checkbox({
+    3: '########..##',
+    4: '#######..###',
+    5: '##..##..####',
+    6: '###....#####',
+    7: '####..######',
+  }),
+  'CheckBox'
+)
+
+export const IndeterminateCheckBoxIcon = createPixelIcon(
+  checkbox({
+    5: '###......###',
+    6: '###......###',
+  }),
+  'IndeterminateCheckBox'
+)

package/src/components/PixelIcon/index.ts

@@ -0,0 +1,3 @@
+export * from './icons.js'
+export { createPixelIcon } from './createPixelIcon.js'
+export type { PixelMap } from './createPixelIcon.js'

package/src/components/Plot/Plot.tsx

@@ -165,9 +165,9 @@ export const Plot = ({
 
   const showPlotImage = Boolean(
     image &&
-      (wasJustShoveled ||
-        plotContent?.itemId ||
-        (plotContent && getPlotContentType(plotContent) === itemType.CROP))
+    (wasJustShoveled ||
+      plotContent?.itemId ||
+      (plotContent && getPlotContentType(plotContent) === itemType.CROP))
   )
 
   let plotLabelText: string | null = null

package/src/components/PriceEventView/PriceEventView.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { object } from 'prop-types'
 import Divider from '@mui/material/Divider/index.js'
 
 import { itemsMap } from '../../data/maps.js'
@@ -44,11 +43,6 @@ const PriceEventView = ({
   </div>
 )
 
-PriceEventView.propTypes = {
-  priceCrashes: object.isRequired,
-  priceSurges: object.isRequired,
-}
-
 export { PriceEventView }
 
 export default function Consumer(

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { number } from 'prop-types'
 import { interpolate, tween } from 'shifty'
 
 import { Div, P } from '../Elements/index.js'
 import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion.js'
+import { pixelBevel, pixelFrameSx, px } from '../../styles/pixel.js'
+import { colors } from '../../styles/tokens.js'
 
 const incompleteColor = '#ff9f00'
 const completeColor = '#00e500'
@@ -92,9 +93,13 @@ const ProgressBar = ({ percent }: { percent: number }) => {
         className="progress-wrapper"
         sx={{
           flexGrow: 1,
-          height: '1em',
-          background: 'rgba(0, 0, 0, 0.15)',
-          borderRadius: '0.5em',
+          ...pixelFrameSx({ outline: colors.neutralOutline }),
+          height: `calc(1em + ${px(2)})`,
+          backgroundColor: 'rgba(0, 0, 0, 0.15)',
+          boxShadow: pixelBevel({
+            highlight: 'rgba(0, 0, 0, 0.15)',
+            lowlight: 'rgba(255, 255, 255, 0.2)',
+          }),
           overflow: 'hidden',
         }}
       >
@@ -116,8 +121,4 @@ const ProgressBar = ({ percent }: { percent: number }) => {
   )
 }
 
-ProgressBar.propTypes = {
-  percent: number.isRequired,
-}
-
 export default ProgressBar

package/src/components/QuantityInput/QuantityInput.tsx

@@ -1,11 +1,14 @@
 import React, { forwardRef } from 'react'
-import { func, number } from 'prop-types'
 import Fab from '@mui/material/Fab/index.js'
-import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp.js'
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown.js'
+
 import NumberFormat from 'react-number-format'
 import TextField from '@mui/material/TextField/index.js'
 
+import {
+  KeyboardArrowUpIcon as KeyboardArrowUp,
+  KeyboardArrowDownIcon as KeyboardArrowDown,
+} from '../PixelIcon/index.js'
+
 import { integerString } from '../../utils/integerString.js'
 import AnimatedNumber from '../AnimatedNumber/index.js'
 import { Div, Span } from '../Elements/index.js'
@@ -187,14 +190,6 @@ const QuantityInput = ({
   )
 }
 
-QuantityInput.propTypes = {
-  handleSubmit: func.isRequired,
-  handleUpdateNumber: func.isRequired,
-  maxQuantity: number.isRequired,
-  setQuantity: func.isRequired,
-  value: number,
-}
-
 QuantityInput.defaultProps = {
   value: 1,
 }

package/src/components/QuickSelect/QuickSelect.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'
@@ -61,15 +60,6 @@ const QuickSelect = ({
   </Paper>
 )
 
-QuickSelect.propTypes = {
-  fieldToolInventory: array.isRequired,
-  handleItemSelectClick: func,
-  isMenuOpen: bool,
-  plantableCropInventory: array.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  selectedItemId: string.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof QuickSelect>[0]>
 ) {

package/src/components/Recipe/Recipe.tsx

@@ -6,7 +6,6 @@ import CardHeader from '@mui/material/CardHeader/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
 import Typography from '@mui/material/Typography/index.js'
-import { array, func, number, object } from 'prop-types'
 
 import { totalIngredientsInRecipe } from '../../utils/totalIngredientsInRecipe.js'
 import { canMakeRecipe } from '../../utils/canMakeRecipe.js'
@@ -141,14 +140,6 @@ const Recipe = ({
   )
 }
 
-Recipe.propTypes = {
-  handleMakeRecipeClick: func.isRequired,
-  inventory: array.isRequired,
-  inventoryLimit: number.isRequired,
-  playerInventoryQuantities: object.isRequired,
-  recipe: object.isRequired,
-}
-
 export { Recipe }
 
 export default function Consumer(props: Partial<Parameters<typeof Recipe>[0]>) {

package/src/components/RecipeList/RecipeList.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 
 import SearchBar from '../SearchBar/index.js'
 import Recipe from '../Recipe/index.js'
@@ -48,8 +47,3 @@ export function RecipeList({
     </>
   )
 }
-
-RecipeList.propTypes = {
-  allRecipes: PropTypes.object.isRequired,
-  learnedRecipes: PropTypes.array.isRequired,
-}

package/src/components/SearchBar/SearchBar.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { useDebounceCallback } from 'usehooks-ts'
 import TextField from '@mui/material/TextField/index.js'
 
 import { Div } from '../Elements/index.js'
-import { layout } from '../../styles/tokens.js'
+import { pixelBevel, pixelFrameSx } from '../../styles/pixel.js'
+import { colors, layout } from '../../styles/tokens.js'
 
 const SearchBar = ({
   placeholder,
@@ -32,14 +32,13 @@ const SearchBar = ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        ...pixelFrameSx({ outline: colors.cardOutline, shadow: true }),
         backgroundColor: '#fff',
-        borderRadius: '1em',
-        boxShadow: '0 0.25em 0.5em rgba(0, 0, 0, 0.1)',
+        boxShadow: pixelBevel({ highlight: 'rgba(0, 0, 0, 0.06)' }),
         '& .MuiOutlinedInput-root': {
           width: '100%',
           fontSize: '1em',
           backgroundColor: 'transparent',
-          borderRadius: '0.5em',
           transition: 'all 0.3s ease',
           '&:hover .MuiOutlinedInput-notchedOutline': {
             borderColor: '#ffd24d',
@@ -81,9 +80,4 @@ const SearchBar = ({
   )
 }
 
-SearchBar.propTypes = {
-  placeholder: PropTypes.string,
-  onSearch: PropTypes.func.isRequired,
-}
-
 export default SearchBar

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

@@ -6,13 +6,11 @@ import FarmhandContext, {
   createContextData,
 } from '../Farmhand/Farmhand.context.js'
 
-import { RandomSeedInput } from './RandomSeedInput.js'
+import { RandomSeedInput, RandomSeedInputProps } from './RandomSeedInput.js'
 
 const mockHandleRNGSeedChange = vitest.fn()
 
-const MockRandomSeedInput = (
-  props: React.PropsWithChildren<Record<string, unknown>>
-) => {
+const MockRandomSeedInput = (props: RandomSeedInputProps) => {
   const contextValue = createContextData()
 
   contextValue.handlers.handleRNGSeedChange = mockHandleRNGSeedChange

package/src/components/SettingsView/RandomSeedInput.tsx

@@ -1,16 +1,17 @@
 import React, { useContext, useState } from 'react'
-import { string } from 'prop-types'
 import globalWindow from 'global/window.js'
 import TextField from '@mui/material/TextField/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Form } from '../Elements/index.js'
 
+export interface RandomSeedInputProps {
+  search?: string
+}
+
 export const RandomSeedInput = ({
   search = globalWindow.location.search,
-}: {
-  search?: string
-}) => {
+}: RandomSeedInputProps) => {
   const {
     handlers: { handleRNGSeedChange },
   } = useContext(FarmhandContext)
@@ -47,7 +48,3 @@ export const RandomSeedInput = ({
     </Form>
   )
 }
-
-RandomSeedInput.propTypes = {
-  search: string,
-}