feat(chat): move chat trigger to navigation pane

jeremyckahn · Oct 30, 2023 · 7350d0f · 7350d0f
1 parent 6741905
commit 7350d0f
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 34 deletions.
diff --git a/src/components/ChatRoom/ChatRoom.js b/src/components/ChatRoom/ChatRoom.js
@@ -33,7 +33,7 @@ export const ChatRoom = () => {
       root-url={chitchatterDomain}
       room={`__farmhand__${room}`}
       user-id={id}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', width: '100%', border: 'none' }}
       color-mode="light"
     />
   )

diff --git a/src/components/Navigation/Navigation.js b/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,

diff --git a/src/components/Navigation/Navigation.sass b/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
diff --git a/src/components/Navigation/Navigation.test.js b/src/components/Navigation/Navigation.test.js
@@ -20,6 +20,7 @@ beforeEach(() => {
         dayCount: 0,
         farmName: '',
         handleActivePlayerButtonClick: noop,
+        handleChatRoomOpenStateChange: noop,
         handleClickDialogViewButton: noop,
         handleCloseDialogView: noop,
         handleDialogViewExited: noop,
@@ -30,6 +31,7 @@ beforeEach(() => {
         inventory: [],
         inventoryLimit: INFINITE_STORAGE_LIMIT,
         itemsSold: {},
+        isChatAvailable: false,
         isDialogViewOpen: false,
         isOnline: false,
         stageFocus: stageFocusType.FIELD,

diff --git a/src/components/OnlinePeersView/OnlinePeersView.js b/src/components/OnlinePeersView/OnlinePeersView.js
@@ -2,7 +2,6 @@ import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import Alert from '@material-ui/lab/Alert'
 import Divider from '@material-ui/core/Divider'
-import Button from '@material-ui/core/Button'
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import sortBy from 'lodash.sortby'
@@ -25,21 +24,15 @@ const OnlinePeersView = ({
   cowIdOfferedForTrade,
   cowInventory,
   id,
-  isChatAvailable,
   latestPeerMessages,
   peers,
-  handleChatRoomOpenStateChange,
 }) => {
   const peerKeys = Object.keys(peers)
 
   const cowOfferedForTrade = cowInventory.find(
     ({ id }) => id === cowIdOfferedForTrade
   )
 
-  const handleChatButtonClick = () => {
-    handleChatRoomOpenStateChange(true)
-  }
-
   // Filter out peers that may have connected but not sent data yet.
   const populatedPeers = peerKeys.filter(peerId => peers[peerId])
 
@@ -52,15 +45,6 @@ const OnlinePeersView = ({
           <strong>{getPlayerName(id)}</strong>
         </CardContent>
       </Card>
-      {isChatAvailable && (
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={handleChatButtonClick}
-        >
-          Open chat
-        </Button>
-      )}
       {cowOfferedForTrade && (
         <>
           <Divider />

diff --git a/src/components/OnlinePeersView/OnlinePeersView.sass b/src/components/OnlinePeersView/OnlinePeersView.sass
@@ -1,8 +1 @@
 .OnlinePeersView
-  display: flex
-  flex-direction: column
-
-  button
-    font-size: 1.3em
-    min-width: 56px
-    margin: 0.3em auto