@jeremyckahn/farmhand 1.23.2 → 1.23.4

package/src/components/KeybindingsView/KeybindingsView.tsx

@@ -63,6 +63,4 @@ const KeybindingsView = () => (
   </div>
 )
 
-KeybindingsView.propTypes = {}
-
 export default KeybindingsView

package/src/components/LogView/LogView.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { array } from 'prop-types'
 import Alert from '@mui/material/Alert/index.js'
 import { AlertColor } from '@mui/material'
 import ReactMarkdown from 'react-markdown'
@@ -7,6 +6,7 @@ import Divider from '@mui/material/Divider/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Div } from '../Elements/index.js'
+import { NotificationAlert } from '../NotificationSystem/NotificationSystem.js'
 
 export const LogView = ({
   notificationLog,
@@ -24,28 +24,11 @@ export const LogView = ({
   >
     <h3>Today</h3>
     <ul>
-      {todaysNotifications.map(
-        ({
-          message,
-          onClick,
-          severity,
-        }: farmhand.notification & { onClick?: () => void }) => (
-          <li {...{ key: message }}>
-            <Alert
-              {...{
-                elevation: 3,
-                onClick,
-                severity,
-                style: {
-                  cursor: onClick ? 'pointer' : 'default',
-                },
-              }}
-            >
-              <ReactMarkdown {...{ source: message }} />
-            </Alert>
-          </li>
-        )
-      )}
+      {todaysNotifications.map(notification => (
+        <li {...{ key: notification.message }}>
+          <NotificationAlert {...{ notification }} />
+        </li>
+      ))}
     </ul>
     <Divider />
     <ul>
@@ -88,11 +71,6 @@ export const LogView = ({
   </Div>
 )
 
-LogView.propTypes = {
-  notificationLog: array.isRequired,
-  todaysNotifications: array.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof LogView>[0]>
 ) {

package/src/components/Navigation/DayAndProgressContainer.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, object } from 'prop-types'
 
 import Box from '@mui/material/Box/index.js'
 import CircularProgress from '@mui/material/CircularProgress/index.js'
@@ -41,7 +40,6 @@ export function DayAndProgressContainer({
       <span>Day {integerString(dayCount)}, level:</span>
       <Tooltip
         {...{
-          arrow: true,
           placement: 'top',
           title: EXPERIENCE_GAUGE_TOOLTIP_LABEL`${experiencePointsToNextLevel}${nextLevel}`,
         }}
@@ -62,12 +60,6 @@ export function DayAndProgressContainer({
   )
 }
 
-DayAndProgressContainer.propTypes = {
-  dayCount: number.isRequired,
-  experience: number.isRequired,
-  itemsSold: object.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof DayAndProgressContainer>[0]>
 ) {

package/src/components/Navigation/Navigation.tsx

@@ -1,12 +1,6 @@
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 
-import AccountBalanceIcon from '@mui/icons-material/AccountBalance.js'
-import AssessmentIcon from '@mui/icons-material/Assessment.js'
-import BeenhereIcon from '@mui/icons-material/Beenhere.js'
-import BookIcon from '@mui/icons-material/Book.js'
-import FlashOnIcon from '@mui/icons-material/FlashOn.js'
-import SettingsIcon from '@mui/icons-material/Settings.js'
 import Button from '@mui/material/Button/index.js'
 import Dialog from '@mui/material/Dialog/index.js'
 import DialogActions from '@mui/material/DialogActions/index.js'
@@ -22,7 +16,15 @@ import Switch from '@mui/material/Switch/index.js'
 import TextField from '@mui/material/TextField/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
-import { array, bool, func, number, string } from 'prop-types'
+
+import {
+  AccountBalanceIcon,
+  AssessmentIcon,
+  BeenhereIcon,
+  BookIcon,
+  FlashOnIcon,
+  SettingsIcon,
+} from '../PixelIcon/index.js'
 
 import { MAX_ROOM_NAME_LENGTH } from '../../common/constants.js'
 import {
@@ -36,7 +38,7 @@ import { integerString } from '../../utils/integerString.js'
 import { inventorySpaceConsumed } from '../../utils/inventorySpaceConsumed.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 
-import { breakpoints, colors } from '../../styles/tokens.js'
+import { breakpoints, colors, fonts } from '../../styles/tokens.js'
 import AccountingView from '../AccountingView/index.js'
 import AchievementsView from '../AchievementsView/index.js'
 import { H3, Header } from '../Elements/index.js'
@@ -304,7 +306,7 @@ export const Navigation = ({
         flexShrink: 0,
         display: 'flex',
         '& .version': {
-          fontFamily: '"Francois One", sans-serif',
+          fontFamily: fonts.display,
           textAlign: 'center',
         },
         '& .farm-name': {
@@ -314,7 +316,7 @@ export const Navigation = ({
             background: 'none',
             margin: 0,
             '& input': {
-              fontFamily: '"Francois One"',
+              fontFamily: fonts.display,
               paddingLeft: '0.5em',
               paddingRight: '0.5em',
               textAlign: 'center',
@@ -440,7 +442,6 @@ export const Navigation = ({
         ].map(({ dialogView: dialogViewType, Icon }) => (
           <Tooltip
             {...{
-              arrow: true,
               key: dialogViewType,
               placement: 'top',
               title: dialogTriggerTextMap[dialogViewType],
@@ -492,28 +493,6 @@ export const Navigation = ({
   )
 }
 
-Navigation.propTypes = {
-  activePlayers: number,
-  blockInput: bool.isRequired,
-  farmName: string.isRequired,
-  handleClickDialogViewButton: func.isRequired,
-  handleChatRoomOpenStateChange: func.isRequired,
-  handleActivePlayerButtonClick: func.isRequired,
-  handleCloseDialogView: func.isRequired,
-  handleDialogViewExited: func.isRequired,
-  handleFarmNameUpdate: func.isRequired,
-  handleOnlineToggleChange: func.isRequired,
-  handleRoomChange: func.isRequired,
-  handleViewChange: func.isRequired,
-  inventory: array.isRequired,
-  inventoryLimit: number.isRequired,
-  isChatAvailable: bool.isRequired,
-  isDialogViewOpen: bool.isRequired,
-  isOnline: bool.isRequired,
-  stageFocus: string.isRequired,
-  viewList: array.isRequired,
-}
-
 export default function Consumer(
   props: Partial<Parameters<typeof Navigation>[0]>
 ) {

package/src/components/NotificationSystem/NotificationSystem.test.tsx

@@ -1,12 +1,20 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { SnackbarProvider } from 'notistack'
 
-import { NotificationSystem, getNotificationKey } from './NotificationSystem.js'
+import { NOTIFICATION_DURATION_DEFAULT } from '../../constants.js'
+
+import {
+  NotificationAlert,
+  NotificationSystem,
+  getNotificationKey,
+} from './NotificationSystem.js'
 
 const defaultProps = {
   enqueueSnackbar: vitest.fn(),
   latestNotification: null,
+  notificationDuration: NOTIFICATION_DURATION_DEFAULT,
 }
 
 const renderWithSnackbar = (component: React.ReactElement) => {
@@ -44,7 +52,7 @@ test('calls enqueueSnackbar with a content-derived key when latestNotification i
 
   expect(enqueueSnackbar).toHaveBeenCalledWith(latestNotification, {
     key: 'info:Test notification',
-    autoHideDuration: 1, // NOTIFICATION_DURATION in test mode
+    autoHideDuration: 1,
     preventDuplicate: true,
   })
 })
@@ -145,3 +153,37 @@ test('uses the same key for repeated notifications with identical message and se
     enqueueSnackbar.mock.calls[1][1].key
   )
 })
+
+describe('NotificationAlert', () => {
+  test('renders the message without an action button by default', () => {
+    render(
+      <NotificationAlert
+        notification={{ message: 'Hello', severity: 'info' }}
+      />
+    )
+
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  test('renders onClick as a labeled button rather than a clickable alert', async () => {
+    const onClick = vitest.fn()
+
+    render(
+      <NotificationAlert
+        notification={{
+          actionLabel: 'Reload',
+          message: 'Update available',
+          onClick,
+          severity: 'success',
+        }}
+      />
+    )
+
+    await userEvent.click(screen.getByText('Update available'))
+    expect(onClick).not.toHaveBeenCalled()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Reload' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/NotificationSystem/NotificationSystem.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { func, shape, string } from 'prop-types'
 import Alert from '@mui/material/Alert/index.js'
+import Button from '@mui/material/Button/index.js'
 import ReactMarkdown from 'react-markdown'
 import { withSnackbar } from 'notistack'
 
-import { NOTIFICATION_DURATION } from '../../constants.js'
+import { getNotificationDuration } from '../../constants.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 
 export const getNotificationKey = ({
@@ -12,35 +12,56 @@ export const getNotificationKey = ({
   severity,
 }: farmhand.notification): string => `${severity}:${message}`
 
+/**
+ * Renders a notification as an Alert. A notification with an onClick gets a
+ * button for it rather than making the whole Alert clickable: on Android,
+ * clickable alerts rendered with a corrupted, partially dark frame.
+ */
+export const NotificationAlert = React.forwardRef<
+  HTMLDivElement,
+  { notification: farmhand.notification }
+>(function NotificationAlert(
+  { notification: { actionLabel = 'OK', message, onClick, severity } },
+  ref
+) {
+  return (
+    <Alert
+      {...{
+        ref,
+        elevation: 3,
+        severity,
+        action: onClick ? (
+          <Button
+            {...{
+              color: 'inherit',
+              onClick,
+              size: 'small',
+              variant: 'outlined',
+            }}
+          >
+            {actionLabel}
+          </Button>
+        ) : undefined,
+      }}
+    >
+      <ReactMarkdown {...{ source: message }} />
+    </Alert>
+  )
+})
+
 export const snackbarProviderContentCallback = (
   key: string | number,
-  {
-    message,
-    onClick,
-    severity,
-  }: farmhand.notification & { onClick?: () => void }
-) => (
-  <Alert
-    {...{
-      elevation: 3,
-      key,
-      onClick,
-      severity,
-      style: {
-        cursor: onClick ? 'pointer' : 'default',
-      },
-    }}
-  >
-    <ReactMarkdown {...{ source: message }} />
-  </Alert>
-)
+  notification: farmhand.notification
+) => <NotificationAlert {...{ key, notification }} />
 
 export const NotificationSystem = ({
   enqueueSnackbar,
   latestNotification,
+  notificationDuration,
 }: {
   enqueueSnackbar: (notification: farmhand.notification, options: any) => void
   latestNotification: farmhand.notification | null
+  notificationDuration: number
 }) => {
   useEffect(() => {
     if (!latestNotification) {
@@ -55,22 +76,14 @@ export const NotificationSystem = ({
     // once autoHideDuration and a key are set - no onClose needed here.
     enqueueSnackbar(latestNotification, {
       key: getNotificationKey(latestNotification),
-      autoHideDuration: NOTIFICATION_DURATION,
+      autoHideDuration: getNotificationDuration(notificationDuration),
       preventDuplicate: true,
     })
-  }, [enqueueSnackbar, latestNotification])
+  }, [enqueueSnackbar, latestNotification, notificationDuration])
 
   return null
 }
 
-NotificationSystem.propTypes = {
-  latestNotification: shape({
-    message: string.isRequired,
-    onClick: func,
-    severity: string.isRequired,
-  }),
-}
-
 export default withSnackbar(function Consumer(props: any) {
   return (
     <FarmhandContext.Consumer>

package/src/components/OnlinePeersView/OnlinePeer/OnlinePeer.test.tsx

@@ -71,7 +71,7 @@ test('does not render CowCard when no cow is offered for trade', () => {
 test('renders CowCard when cow is offered for trade', () => {
   const peerWithCow = {
     ...defaultPeer,
-    cowOfferedForTrade: ({
+    cowOfferedForTrade: {
       id: 'test-cow',
       name: 'Test Cow',
       color: 'BROWN',
@@ -82,7 +82,7 @@ test('renders CowCard when cow is offered for trade', () => {
       gender: 'FEMALE',
       colorsInBloodline: { BROWN: true },
       originalOwnerId: 'peer-123',
-    } as unknown) as farmhand.cow,
+    } as unknown as farmhand.cow,
   }
 
   render(<OnlinePeer peer={peerWithCow} />)

package/src/components/OnlinePeersView/OnlinePeer/OnlinePeer.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { number, object, shape, string } from 'prop-types'
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import CardHeader from '@mui/material/CardHeader/index.js'
@@ -54,14 +53,4 @@ const OnlinePeer = ({
   )
 }
 
-OnlinePeer.propTypes = {
-  peer: shape({
-    cowOfferedForTrade: object,
-    dayCount: number.isRequired,
-    experience: number.isRequired,
-    playerId: string.isRequired,
-    money: number.isRequired,
-  }).isRequired,
-}
-
 export default OnlinePeer

package/src/components/OnlinePeersView/OnlinePeersView.tsx

@@ -5,7 +5,6 @@ import Divider from '@mui/material/Divider/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import sortBy from 'lodash.sortby'
-import { array, number, object, string } from 'prop-types'
 
 import BailOutErrorBoundary from '../BailOutErrorBoundary/index.js'
 
@@ -117,15 +116,6 @@ const OnlinePeersView = ({
   )
 }
 
-OnlinePeersView.propTypes = {
-  activePlayers: number.isRequired,
-  cowIdOfferedForTrade: string.isRequired,
-  cowInventory: array.isRequired,
-  playerId: string.isRequired,
-  latestPeerMessages: array.isRequired,
-  peers: object.isRequired,
-}
-
 export { OnlinePeersView }
 
 export default function Consumer(

package/src/components/PixelIcon/createPixelIcon.test.tsx

@@ -0,0 +1,59 @@
+import React, { createRef } from 'react'
+import { render, screen } from '@testing-library/react'
+import Tooltip from '@mui/material/Tooltip/index.js'
+
+import { createPixelIcon, flipX, flipY, rotate } from './createPixelIcon.js'
+
+const TestIcon = createPixelIcon(['#.', '+#'], 'Test')
+
+describe('createPixelIcon', () => {
+  test('renders an SvgIcon with a test id derived from its name', () => {
+    render(<TestIcon />)
+
+    const icon = screen.getByTestId('TestIcon')
+
+    expect(icon.tagName.toLowerCase()).toBe('svg')
+    expect(icon).toHaveAttribute('viewBox', '0 0 2 2')
+  })
+
+  test('forwards refs to the underlying svg element', () => {
+    const ref = createRef<SVGSVGElement>()
+
+    render(<TestIcon ref={ref} />)
+
+    expect(ref.current).toBe(screen.getByTestId('TestIcon'))
+  })
+
+  test('can be the direct child of a Tooltip', () => {
+    const consoleError = vitest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {})
+
+    render(
+      <Tooltip title="Tip">
+        <TestIcon />
+      </Tooltip>
+    )
+
+    // Tooltip anchors to its child via a ref; without forwardRef React warns
+    // that function components cannot be given refs.
+    expect(consoleError).not.toHaveBeenCalled()
+    consoleError.mockRestore()
+  })
+})
+
+describe('pixel map transforms', () => {
+  const map = ['ab', 'cd']
+
+  test('flipX mirrors horizontally', () => {
+    expect(flipX(map)).toEqual(['ba', 'dc'])
+  })
+
+  test('flipY mirrors vertically', () => {
+    expect(flipY(map)).toEqual(['cd', 'ab'])
+  })
+
+  test('rotate turns the map 90 degrees clockwise', () => {
+    expect(rotate(map)).toEqual(['ca', 'db'])
+  })
+})

package/src/components/PixelIcon/createPixelIcon.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon/index.js'
+
+// Pixel art icons are authored as small text pixel maps:
+//
+//   `#` is a solid pixel
+//   `+` is a half-tone pixel (the same color at reduced opacity)
+//   anything else is transparent
+//
+// Every pixel map in an icon set should be the same size so icons line up
+// with each other.
+export type PixelMap = readonly string[]
+
+const SHADE_OPACITY = 0.45
+
+/**
+ * Builds an SVG path that covers every pixel in `rows` that matches `char`.
+ * Horizontal runs of matching pixels are merged into a single rectangle to
+ * keep the path short.
+ */
+const pixelPath = (rows: PixelMap, char: string) => {
+  let d = ''
+
+  rows.forEach((row, y) => {
+    let x = 0
+
+    while (x < row.length) {
+      if (row[x] !== char) {
+        x++
+        continue
+      }
+
+      const start = x
+
+      while (row[x] === char) x++
+
+      d += `M${start} ${y}h${x - start}v1h${start - x}z`
+    }
+  })
+
+  return d
+}
+
+/**
+ * Mirrors a pixel map horizontally.
+ */
+export const flipX = (rows: PixelMap): PixelMap =>
+  rows.map(row => [...row].reverse().join(''))
+
+/**
+ * Mirrors a pixel map vertically.
+ */
+export const flipY = (rows: PixelMap): PixelMap => [...rows].reverse()
+
+/**
+ * Rotates a square pixel map 90 degrees clockwise.
+ */
+export const rotate = (rows: PixelMap): PixelMap =>
+  [...rows[0]].map((_, x) =>
+    rows
+      .map(row => row[x])
+      .reverse()
+      .join('')
+  )
+
+/**
+ * Creates an MUI SvgIcon component from a pixel map. The result is a drop-in
+ * replacement for an @mui/icons-material icon: it takes the same props,
+ * forwards refs to the underlying <svg> (which a Tooltip needs to position
+ * itself when the icon is its direct child), is colored with `currentColor`,
+ * and has a `data-testid` of `${name}Icon`.
+ */
+export const createPixelIcon = (rows: PixelMap, name: string) => {
+  const width = rows[0].length
+  const height = rows.length
+  const solid = pixelPath(rows, '#')
+  const shade = pixelPath(rows, '+')
+
+  const PixelIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
+    (props, ref) => (
+      <SvgIcon
+        ref={ref}
+        data-testid={`${name}Icon`}
+        viewBox={`0 0 ${width} ${height}`}
+        shapeRendering="crispEdges"
+        {...props}
+      >
+        {shade && <path d={shade} opacity={SHADE_OPACITY} />}
+        <path d={solid} />
+      </SvgIcon>
+    )
+  )
+
+  PixelIcon.displayName = `Pixel${name}Icon`
+
+  return PixelIcon
+}