Merge patch commit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeremyckahn/farmhand",
-  "version": "1.18.4",
+  "version": "1.18.5",
   "publishConfig": {
     "access": "public"
   },
@@ -121,6 +121,7 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^17.0.2",
     "react-file-reader-input": "^2.0.0",
+    "react-helmet": "^6.1.0",
     "react-hotkeys": "^2.0.0",
     "react-markdown": "^4.3.1",
     "react-number-format": "^4.4.1",

src/components/ChatRoom/ChatRoom.js

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react'
+import { Helmet } from 'react-helmet'
+import classNames from 'classnames'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogActions from '@material-ui/core/DialogActions'
+import Typography from '@material-ui/core/Typography'
+
+import FarmhandContext from '../Farmhand/Farmhand.context'
+
+import './ChatRoom.sass'
+
+const chitchatterDomain = 'https://chitchatter.im'
+
+export const ChatRoom = () => {
+  const dialogTitleId = 'chat-title'
+  const dialogContentId = 'chat-content'
+
+  const {
+    handlers: { handleChatRoomOpenStateChange },
+    gameState: { id, isChatOpen, room },
+  } = useContext(FarmhandContext)
+
+  const handleChatRoomClose = () => {
+    handleChatRoomOpenStateChange(false)
+  }
+
+  const chatRoomComponent = (
+    // @ts-ignore
+    <chat-room
+      root-url={chitchatterDomain}
+      room={`__farmhand__${room}`}
+      user-id={id}
+      style={{ height: '100%', width: '100%', border: 'none' }}
+      color-mode="light"
+    />
+  )
+
+  return (
+    <>
+      <Helmet>
+        <script src={`${chitchatterDomain}/sdk.js`} />
+      </Helmet>
+      <Dialog
+        {...{
+          className: classNames('Farmhand', 'ChatRoom'),
+          fullWidth: true,
+          keepMounted: true,
+          fullScreen: true,
+          open: isChatOpen,
+          onClose: handleChatRoomClose,
+        }}
+        aria-describedby={dialogTitleId}
+        aria-labelledby={dialogContentId}
+      >
+        <DialogTitle {...{ disableTypography: true }}>
+          <Typography
+            {...{ id: dialogTitleId, component: 'h2', variant: 'h6' }}
+          >
+            Chat room
+          </Typography>
+        </DialogTitle>
+        <DialogContent {...{ id: dialogContentId }}>
+          {chatRoomComponent}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleChatRoomClose} color="primary" autoFocus>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/components/ChatRoom/ChatRoom.sass

@@ -0,0 +1,4 @@
+.ChatRoom
+  .MuiDialog-container
+    padding: 1em
+    height: calc(100% - 2em)

src/components/ChatRoom/index.js

@@ -0,0 +1 @@
+export * from './ChatRoom'

src/components/Farmhand/Farmhand.js

@@ -118,6 +118,8 @@ import { endpoints, rtcConfig, trackerUrls } from '../../config'
 
 import { scarecrow } from '../../data/items'
 
+import { ChatRoom } from '../ChatRoom'
+
 import { getInventoryQuantities } from './helpers/getInventoryQuantities'
 import FarmhandContext from './Farmhand.context'
 import { FarmhandReducers } from './FarmhandReducers'
@@ -238,6 +240,7 @@ const applyPriceEvents = (valueAdjustments, priceCrashes, priceSurges) => {
  * of that cellar item sold. The numbers in this map represent a subset of the
  * corresponding ones in itemsSold. cellarItemsSold is intended to be used for
  * internal bookkeeping.
+ * @property {boolean} isChatOpen Whether the chat modal is open.
  * @property {boolean} isDialogViewOpen
  * @property {boolean} isOnline Whether the player is playing online.
  * @property {boolean} isWaitingForDayToCompleteIncrementing
@@ -399,6 +402,11 @@ export default class Farmhand extends FarmhandReducers {
     )
   }
 
+  get isChatAvailable() {
+    const { isOnline, room } = this.state
+    return isOnline && room !== DEFAULT_ROOM
+  }
+
   /**
    * @returns {farmhand.state}
    */
@@ -446,6 +454,7 @@ export default class Farmhand extends FarmhandReducers {
       isMenuOpen: !doesMenuObstructStage(),
       itemsSold: {},
       cellarItemsSold: {},
+      isChatOpen: false,
       isDialogViewOpen: false,
       isOnline: this.props.match.path.startsWith('/online'),
       isWaitingForDayToCompleteIncrementing: false,
@@ -1268,6 +1277,7 @@ export default class Farmhand extends FarmhandReducers {
       state: { redirect },
       fieldToolInventory,
       handlers,
+      isChatAvailable,
       keyHandlers,
       keyMap,
       levelEntitlements,
@@ -1287,6 +1297,7 @@ export default class Farmhand extends FarmhandReducers {
       blockInput,
       features,
       fieldToolInventory,
+      isChatAvailable,
       levelEntitlements,
       plantableCropInventory,
       playerInventory,
@@ -1424,6 +1435,7 @@ export default class Farmhand extends FarmhandReducers {
                   </Fab>
                 </Tooltip>
               </div>
+              {isChatAvailable ? <ChatRoom /> : null}
               <NotificationSystem />
             </FarmhandContext.Provider>
           </SnackbarProvider>

src/components/Navigation/Navigation.js

@@ -31,7 +31,11 @@ import {
   inventorySpaceConsumed,
 } from '../../utils'
 import { dialogView } from '../../enums'
-import { INFINITE_STORAGE_LIMIT, STAGE_TITLE_MAP } from '../../constants'
+import {
+  DEFAULT_ROOM,
+  INFINITE_STORAGE_LIMIT,
+  STAGE_TITLE_MAP,
+} from '../../constants'
 import { MAX_ROOM_NAME_LENGTH } from '../../common/constants'
 
 import AccountingView from '../AccountingView'
@@ -79,8 +83,10 @@ const FarmNameDisplay = ({ farmName, handleFarmNameUpdate }) => {
 const OnlineControls = ({
   activePlayers,
   handleActivePlayerButtonClick,
+  handleChatRoomOpenStateChange,
   handleOnlineToggleChange,
   handleRoomChange,
+  isChatAvailable,
   isOnline,
   room,
 }) => {
@@ -90,6 +96,10 @@ const OnlineControls = ({
     setDisplayedRoom(room)
   }, [room, setDisplayedRoom])
 
+  const handleChatButtonClick = () => {
+    handleChatRoomOpenStateChange(true)
+  }
+
   return (
     <>
       <FormControl
@@ -133,15 +143,30 @@ const OnlineControls = ({
         />
       </FormControl>
       {activePlayers && (
-        <Button
-          {...{
-            color: 'primary',
-            onClick: handleActivePlayerButtonClick,
-            variant: 'contained',
-          }}
-        >
-          Active players: {integerString(activePlayers)}
-        </Button>
+        <>
+          <Button
+            {...{
+              color: 'primary',
+              onClick: handleActivePlayerButtonClick,
+              variant: 'contained',
+            }}
+          >
+            Active players: {integerString(activePlayers)}
+          </Button>
+          {isChatAvailable ? (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleChatButtonClick}
+            >
+              Open chat
+            </Button>
+          ) : (
+            <Typography className="chat-placeholder">
+              Chat is available for online rooms other than "{DEFAULT_ROOM}"
+            </Typography>
+          )}
+        </>
       )}
     </>
   )
@@ -203,6 +228,7 @@ export const Navigation = ({
   currentDialogView,
   farmName,
   handleActivePlayerButtonClick,
+  handleChatRoomOpenStateChange,
   handleClickDialogViewButton,
   handleCloseDialogView,
   handleDialogViewExited,
@@ -212,6 +238,7 @@ export const Navigation = ({
   handleViewChange,
   inventory,
   inventoryLimit,
+  isChatAvailable,
   isDialogViewOpen,
   isOnline,
   room,
@@ -231,8 +258,10 @@ export const Navigation = ({
       {...{
         activePlayers,
         handleActivePlayerButtonClick,
+        handleChatRoomOpenStateChange,
         handleOnlineToggleChange,
         handleRoomChange,
+        isChatAvailable,
         isOnline,
         room,
       }}
@@ -335,6 +364,7 @@ Navigation.propTypes = {
   blockInput: bool.isRequired,
   farmName: string.isRequired,
   handleClickDialogViewButton: func.isRequired,
+  handleChatRoomOpenStateChange: func.isRequired,
   handleActivePlayerButtonClick: func.isRequired,
   handleCloseDialogView: func.isRequired,
   handleDialogViewExited: func.isRequired,
@@ -344,6 +374,7 @@ Navigation.propTypes = {
   handleViewChange: func.isRequired,
   inventory: array.isRequired,
   inventoryLimit: number.isRequired,
+  isChatAvailable: bool.isRequired,
   isDialogViewOpen: bool.isRequired,
   isOnline: bool.isRequired,
   stageFocus: string.isRequired,

src/components/Navigation/Navigation.sass

@@ -87,3 +87,8 @@
 
   .MuiSelect-select.MuiSelect-select
     padding: 1em
+
+  .chat-placeholder
+    font-size: .75em
+    padding: .5em 0
+    text-align: center