feat: add support for titles, subtitle and action bar display! (#73)

Co-authored-by: gguio <nikvish150@gmail.com>
Co-authored-by: Vitaly Turovsky <vital2580@icloud.com>

patches/mineflayer@4.19.0.patch

@@ -0,0 +1,154 @@
+diff --git a/.gitignore b/.gitignore
+deleted file mode 100644
+index c76d8b46fb163dfd8c42b45c9f8b4193a3d8b2be..0000000000000000000000000000000000000000
+diff --git a/.npmignore b/.npmignore
+deleted file mode 100644
+index 0418e13233f31a47d08ef2ac62d478fb7d3afff4..0000000000000000000000000000000000000000
+diff --git a/.npmrc b/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/examples/anvil_saver/.npmrc b/examples/anvil_saver/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/examples/pathfinder/.npmrc b/examples/pathfinder/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/examples/place_end_crystal/.npmrc b/examples/place_end_crystal/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/examples/screenshot-with-node-canvas-webgl/.npmrc b/examples/screenshot-with-node-canvas-webgl/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/examples/viewer/.npmrc b/examples/viewer/.npmrc
+deleted file mode 100644
+index 4c1bf7793ac7fd7e34f4601e0afecb345105137b..0000000000000000000000000000000000000000
+diff --git a/lib/plugins/title.js b/lib/plugins/title.js
+index f8714d7577c9dcfc0a01e143f7990d5ba469e529..ad32303c3d52d61055b6bb1f7a0d2d2961802093 100644
+--- a/lib/plugins/title.js
++++ b/lib/plugins/title.js
+@@ -3,7 +3,7 @@ module.exports = inject
+ function inject (bot) {
+   bot._client.on('title', (packet) => {
+     if (packet.action === 0 || packet.action === 1) {
+-      bot.emit('title', packet.text)
++      bot.emit('title', packet)
+     }
+   })
+ }
+diff --git a/test/common/util.js b/test/common/util.js
+deleted file mode 100644
+index 928999312a708fe10530a099f4f003670dc57108..0000000000000000000000000000000000000000
+diff --git a/test/externalTest.js b/test/externalTest.js
+deleted file mode 100644
+index 91997f5b554f609c3e00c7b53a7d5b6c64e3891c..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/anvil.js b/test/externalTests/anvil.js
+deleted file mode 100644
+index 71f0512723cdbbefb2789f2612468a8427d1a35d..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/bed.js b/test/externalTests/bed.js
+deleted file mode 100644
+index 35ecf034b4f7aa4464e50083bac1c353c1b18b34..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/book.js b/test/externalTests/book.js
+deleted file mode 100644
+index f22b9e1bf00bf7505041adedfb0ec2a0fef5d803..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/breath.js b/test/externalTests/breath.js
+deleted file mode 100644
+index e1abd0942190d7ef03820dab4813b6d6ce7da464..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/chat.js b/test/externalTests/chat.js
+deleted file mode 100644
+index 0c26cf02f6afe168b7e6094da2590aaf76415e81..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/commandBlock.js b/test/externalTests/commandBlock.js
+deleted file mode 100644
+index c47234dd6244377069a1d94826ff9005f51ce679..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/complete.js b/test/externalTests/complete.js
+deleted file mode 100644
+index 8519686f651577cfbde4c36f9391d6fae7b9c586..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/consume.js b/test/externalTests/consume.js
+deleted file mode 100644
+index d45ed92fe2c805b7c837e086129ac04d645ff406..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/crafting.js b/test/externalTests/crafting.js
+deleted file mode 100644
+index 6bf7fd47ce61ce86366e492f2fe5bbda1494bfd5..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/creative.js b/test/externalTests/creative.js
+deleted file mode 100644
+index cb4c5f0e9c8fc4fe53e824ed83a581c64c42513f..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/digAndBuild.js b/test/externalTests/digAndBuild.js
+deleted file mode 100644
+index f7b244a5ee756bc7500262bfdf659c1b8fe54ce8..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/digEverything.js b/test/externalTests/digEverything.js
+deleted file mode 100644
+index b1bea30eaff8ad9a6a8efcceb4dbb04d147d4226..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/dimensionName.js b/test/externalTests/dimensionName.js
+deleted file mode 100644
+index 615cfe6d0913a1fa63bfc4a00751deedf5ae774f..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/displayName.js b/test/externalTests/displayName.js
+deleted file mode 100644
+index 0dbf94f8591737df2748b6cc93a5195f660f7e52..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/elytra.js b/test/externalTests/elytra.js
+deleted file mode 100644
+index b79cc85b6f15c23aa5d898a3de36dc9876d80161..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/enchanting.js b/test/externalTests/enchanting.js
+deleted file mode 100644
+index b319873b2ae71f4a02d7485384ee9223f46c2ddb..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/exampleBee.js b/test/externalTests/exampleBee.js
+deleted file mode 100644
+index 6509ff831d358a94d25a3d468f2488c02b9827dc..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/exampleBlockFinder.js b/test/externalTests/exampleBlockFinder.js
+deleted file mode 100644
+index 55b95e0b1a348986a306190ca05d5c414b84e1ca..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/exampleDigger.js b/test/externalTests/exampleDigger.js
+deleted file mode 100644
+index 6ac4eccf6eccc2cec1787a8c58ff2ee4cdd28614..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/exampleInventory.js b/test/externalTests/exampleInventory.js
+deleted file mode 100644
+index 6f4bac01905495cc83d0ff2d2efc05a65c2e48d4..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/fishing.js b/test/externalTests/fishing.js
+deleted file mode 100644
+index c0348c77dffe86411ffda75942ef0ba9c2655e67..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/furnace.js b/test/externalTests/furnace.js
+deleted file mode 100644
+index 37f32e6857ea5faadcd1b00bf6cb886d7e37f541..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/gamemode.js b/test/externalTests/gamemode.js
+deleted file mode 100644
+index d4cc45a041d4b54b5b35126b0f755cd645636520..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/heldItem.js b/test/externalTests/heldItem.js
+deleted file mode 100644
+index 51286db0aae5f1647005dcfd73f0929e1af4ee13..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/nether.js b/test/externalTests/nether.js
+deleted file mode 100644
+index 84c99fec6cc753d4db3863cfe8fb846134de2788..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/particles.js b/test/externalTests/particles.js
+deleted file mode 100644
+index 58fe4c939f1b66162b29d2e4d7281841dd1bbe34..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/placeEntity.js b/test/externalTests/placeEntity.js
+deleted file mode 100644
+index 48155e5544b49e4a52eb24904af320c823b125d4..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/plugins/testCommon.js b/test/externalTests/plugins/testCommon.js
+deleted file mode 100644
+index 55d4d792b885d366a28b7c9c3beec68301926bad..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/rain.js b/test/externalTests/rain.js
+deleted file mode 100644
+index be23c65029c8de7bd5aeb239514d4f9ddd4c9f3a..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/rayTrace.js b/test/externalTests/rayTrace.js
+deleted file mode 100644
+index 8d252e3c5289fb98779036a165a31da2c3883b1a..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/scoreboard.js b/test/externalTests/scoreboard.js
+deleted file mode 100644
+index cab934d0ad82f86fc5c5e6eb6b3e1746d7c583ab..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/sign.js b/test/externalTests/sign.js
+deleted file mode 100644
+index 27c35d24f12798844a23c9906a855001ce2c9f11..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/spawnEvent.js b/test/externalTests/spawnEvent.js
+deleted file mode 100644
+index 94d04ce721a8c7ce54da411a73f234d836bab57c..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/team.js b/test/externalTests/team.js
+deleted file mode 100644
+index 0eccbf9375acf5dd30d42dc67c95b6003962a3a6..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/trade.js b/test/externalTests/trade.js
+deleted file mode 100644
+index 1ad502bc842c9c2a7850b66d8b0a4678bb3cfa21..0000000000000000000000000000000000000000
+diff --git a/test/externalTests/useChests.js b/test/externalTests/useChests.js
+deleted file mode 100644
+index 7c0f216b477f406e783d2cb67249b6067f567f0e..0000000000000000000000000000000000000000
+diff --git a/test/internalTest.js b/test/internalTest.js
+deleted file mode 100644
+index 25b44e77455afc7e0753fe5e24d72a906f06855d..0000000000000000000000000000000000000000

src/generatedServerPackets.ts

@@ -1493,3 +1493,11 @@ export interface ClientOnMap {
     yaw: number;
   };
 }
+
+type ClientOnMcProtocolEvents = ClientOnMap & {
+  [x: `raw.${string}`]: any
+  packet: any
+  state: any
+}
+
+export declare const clientOn: <T extends keyof ClientOnMcProtocolEvents>(name: T, callback: (data: ClientOnMcProtocolEvents[T], packetMeta: import('minecraft-protocol').PacketMeta) => void) => void

src/globals.d.ts

@@ -4,8 +4,9 @@ declare const THREE: typeof import('three')
 // todo make optional
 declare const bot: Omit<import('mineflayer').Bot, 'world' | '_client'> & {
     world: import('prismarine-world').world.WorldSync
-    _client: import('minecraft-protocol').Client & {
+    _client: Omit<import('minecraft-protocol').Client, 'on'> & {
         write: typeof import('./generatedClientPackets').clientWrite
+        on: typeof import('./generatedServerPackets').clientOn
     }
 }
 declare const __type_bot: typeof bot

src/index.ts

@@ -546,7 +546,7 @@ async function connect (connectOptions: {
   const packetBeforePlay = (_, __, ___, fullBuffer) => {
     lastPacket = fullBuffer.toString()
   }
-  bot._client.on('packet', packetBeforePlay)
+  bot._client.on('packet', packetBeforePlay as any)
   const playStateSwitch = (newState) => {
     if (newState === 'play') {
       bot._client.removeListener('packet', packetBeforePlay)

src/react/DeathScreenProvider.tsx

@@ -14,13 +14,7 @@ export default () => {
   const isModalActive = useIsModalActive('death-screen')
 
   useEffect(() => {
-    type DeathEvent = {
-      playerId: number
-      entityId: number
-      message: string
-    }
-
-    bot._client.on('death_combat_event', (data: DeathEvent) => {
+    bot._client.on('death_combat_event', (data) => {
       try {
         if (data.playerId !== bot.entity.id) return
         const messageParsed = JSON.parse(data.message)

src/react/Title.css

@@ -0,0 +1,42 @@
+.title-container {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.message-title {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(calc(-100% - 5px));
+    right: 0;
+    color: white;
+    text-align: center;
+    font-size: 2rem;
+    margin: 0px;
+    padding-bottom: 0px;
+}
+
+.message-subtitle {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(10px);
+    right: 0;
+    text-align: center;
+    color: white;
+    font-size: 1rem;
+    margin: 0px;
+    padding: 0px;
+}
+
+.action-bar {
+    position: fixed;
+    bottom: 20%;
+    left: 0;
+    right: 0;
+    font-size: 0.7rem;
+    text-align: center;
+}

src/react/Title.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Title from './Title'
+
+const meta: Meta<typeof Title> = {
+  component: Title
+}
+
+export default meta
+type Story = StoryObj<typeof Title>;
+
+export const Primary: Story = {
+  args: {
+    title: {
+      text: 'New title',
+    },
+    subtitle: {
+      text: 'Subtitle'
+    },
+    actionBar: {
+      text: 'Action bar text'
+    },
+    openTitle: false,
+    openActionBar: false,
+    transitionTimes: {
+      fadeIn: 2500,
+      stay: 17_500,
+      fadeOut: 5000
+    }
+  }
+}

src/react/Title.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react'
+import { Transition } from 'react-transition-group'
+import MessageFormattedString from './MessageFormattedString'
+import './Title.css'
+
+export type AnimationTimes = {
+  fadeIn: number,
+  stay: number,
+  fadeOut: number
+}
+
+type TitleProps = {
+  title: string | Record<string, any>,
+  subtitle: string | Record<string, any>,
+  actionBar: string | Record<string, any>,
+  transitionTimes: AnimationTimes,
+  openTitle: boolean,
+  openActionBar: boolean
+}
+
+const Title = (
+  {
+    title,
+    subtitle,
+    actionBar,
+    transitionTimes,
+    openTitle = false,
+    openActionBar = false
+  }: TitleProps
+) => {
+  const [mounted, setMounted] = useState(false)
+  const [useEnterTransition, setUseEnterTransition] = useState(true)
+
+  const defaultDuration = 500
+  const startStyle = {
+    opacity: 1,
+    transition: `${transitionTimes.fadeIn}ms ease-in-out all` }
+  const endExitStyle = {
+    opacity: 0,
+    transition: `${transitionTimes.fadeOut}ms ease-in-out all` }
+
+  const stateStyles = {
+    entering: startStyle,
+    entered: { opacity: 1 },
+    exiting: endExitStyle,
+    exited: { opacity: 0 },
+  }
+
+  useEffect(() => {
+    if (!mounted && (openTitle || openActionBar)) {
+      setMounted(true)
+    }
+  }, [openTitle, openActionBar])
+
+  return (
+    <div className='title-container'>
+      <Transition
+        in={openTitle}
+        timeout={transitionTimes ? {
+          enter: transitionTimes.fadeIn,
+          exit: transitionTimes.fadeOut,
+        } : defaultDuration}
+        mountOnEnter
+        unmountOnExit
+        enter={useEnterTransition}
+        onExiting={() => {
+          setUseEnterTransition(prev => false)
+        }}
+        onExited={() => {
+          setUseEnterTransition(prev => true)
+        }}
+      >
+        {(state) => {
+          return (
+            <div style={{ ...stateStyles[state] }}>
+              <h1 className='message-title'>
+                <MessageFormattedString message={title} />
+              </h1>
+              <h4 className='message-subtitle'>
+                <MessageFormattedString message={subtitle} />
+              </h4>
+            </div>
+          )}}
+      </Transition>
+      <Transition
+        in={openActionBar}
+        timeout={transitionTimes ? {
+          enter: transitionTimes.fadeIn,
+          exit: transitionTimes.fadeOut,
+        } : defaultDuration}
+        mountOnEnter
+        unmountOnExit
+        // enter={useEnterTransition}
+        // onExiting={() => {
+        //   setUseEnterTransition(prev => false)
+        // }}
+        // onExited={() => {
+        //   setUseEnterTransition(prev => true)
+        // }}
+      >
+        {(state) => {
+          return (
+            <div style={{ ...stateStyles[state] }}>
+              <div className='action-bar'>
+                <MessageFormattedString message={actionBar} />
+              </div>
+            </div>
+          )
+        }}
+      </Transition>
+    </div>
+  )
+}
+
+export default Title