feat: Entity interaction button for mobile (#346)

Author: mgDentist

src/react/TouchInteractionHint.module.css

@@ -1,8 +1,8 @@
 .hint_container {
   position: fixed;
-  top: 20%;
   left: 0;
   right: 0;
+  bottom: calc(var(--safe-area-inset-bottom) + 55px); 
   margin: 0 auto;
   width: fit-content;
   display: flex;
@@ -13,6 +13,11 @@
   text-shadow: 1px 1px 8px rgba(0, 0, 0, 1);
 }
 
+.hint_container > button {
+  width: auto;
+  padding: 0 10px;
+}
+
 .hint_text {
   color: white;
   font-size: 10px;

src/react/TouchInteractionHint.tsx

@@ -3,28 +3,33 @@ import { useSnapshot } from 'valtio'
 import { options } from '../optionsStorage'
 import { activeModalStack } from '../globalState'
 import { videoCursorInteraction } from '../customChannels'
-import PixelartIcon, { pixelartIcons } from './PixelartIcon'
+// import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 import styles from './TouchInteractionHint.module.css'
 import { useUsingTouch } from './utilsApp'
+import Button from './Button'
 
 export default () => {
   const usingTouch = useUsingTouch()
   const modalStack = useSnapshot(activeModalStack)
   const { touchInteractionType } = useSnapshot(options)
   const [hintText, setHintText] = useState<string | null>(null)
+  const [entityName, setEntityName] = useState<string | null>(null)
 
   useEffect(() => {
     const update = () => {
       const videoInteraction = videoCursorInteraction()
       if (videoInteraction) {
         setHintText(`Interact with video`)
+        setEntityName(null)
       } else {
         const cursorState = bot.mouse.getCursorState()
         if (cursorState.entity) {
-          const entityName = cursorState.entity.displayName ?? cursorState.entity.name
-          setHintText(`Attack ${entityName}`)
+          const name = cursorState.entity.displayName ?? cursorState.entity.name ?? 'Entity'
+          setHintText(`Attack ${name}`)
+          setEntityName(name)
         } else {
           setHintText(null)
+          setEntityName(null)
         }
       }
     }
@@ -40,13 +45,30 @@ export default () => {
     }
   }, [])
 
+  const handleUseButtonClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    document.dispatchEvent(new MouseEvent('mousedown', { button: 2 }))
+    bot.mouse.update()
+    document.dispatchEvent(new MouseEvent('mouseup', { button: 2 }))
+  }
+
   if (!usingTouch || touchInteractionType !== 'classic' || modalStack.length > 0) return null
-  if (!hintText) return null
+  if (!hintText && !entityName) return null
 
   return (
-    <div className={`${styles.hint_container} interaction-hint`}>
-      <PixelartIcon iconName={pixelartIcons['sun-alt']} width={14} />
-      <span className={styles.hint_text}>{hintText}</span>
+    <div
+      className={`${styles.hint_container} interaction-hint`}
+    >
+      {/* temporary hide hint indicator and text */}
+      {/* <PixelartIcon iconName={pixelartIcons['sun-alt']} width={14} />
+      <span className={styles.hint_text}>{hintText || 'Attack entity'}</span> */}
+      <Button
+        onClick={handleUseButtonClick}
+      >
+        {`Use ${entityName}`}
+      </Button>
     </div>
   )
 }