From b7356efbcefb9a34f0c857015ea20274f575abf6 Mon Sep 17 00:00:00 2001
From: qqq <76906216+soulless-ai@users.noreply.github.com>
Date: Wed, 17 Jul 2024 04:53:26 +0500
Subject: [PATCH] feat: Add a way to view / sign books (#158)

---------

Co-authored-by: soulless-ai <mr.chupak@gmail.com>
Co-authored-by: Vitaly Turovsky <vital2580@icloud.com>
---
 .eslintrc.json                               |   1 +
 esbuild.mjs                                  |   1 +
 scripts/buildNpmReact.ts                     |   4 +
 src/globals.d.ts                             |   1 +
 src/localServerMultiplayer.ts                |   2 +-
 src/react/AddServerOrConnect.tsx             |   1 -
 src/react/Book.module.css                    | 605 +++++++++++++++++++
 src/react/Book.stories.tsx                   |  25 +
 src/react/Book.tsx                           | 322 ++++++++++
 src/react/BookProvider.tsx                   | 110 ++++
 src/react/MessageFormatted.tsx               |   4 +-
 src/react/MessageFormattedString.stories.tsx |   5 +-
 src/react/MessageFormattedString.tsx         |  16 +-
 src/react/PlayerListOverlayProvider.tsx      |   8 +-
 src/react/XPBar.tsx                          |   7 +-
 src/react/book_icons/book-half.webp          | Bin 0 -> 5110 bytes
 src/react/book_icons/book.webp               | Bin 0 -> 10158 bytes
 src/react/book_icons/next-click.webp         | Bin 0 -> 1800 bytes
 src/react/book_icons/next.webp               | Bin 0 -> 1268 bytes
 src/react/book_icons/notebook.webp           | Bin 0 -> 5956 bytes
 src/react/book_icons/prev-click.webp         | Bin 0 -> 1866 bytes
 src/react/book_icons/prev.webp               | Bin 0 -> 1298 bytes
 src/react/book_icons/title.webp              | Bin 0 -> 3392 bytes
 src/react/globals.d.ts                       |   4 +
 src/react/singleplayer.module.css            |   4 +-
 src/reactUi.tsx                              |   2 +
 src/worldInteractions.ts                     |   1 +
 27 files changed, 1104 insertions(+), 19 deletions(-)
 create mode 100644 src/react/Book.module.css
 create mode 100644 src/react/Book.stories.tsx
 create mode 100644 src/react/Book.tsx
 create mode 100644 src/react/BookProvider.tsx
 create mode 100644 src/react/book_icons/book-half.webp
 create mode 100644 src/react/book_icons/book.webp
 create mode 100644 src/react/book_icons/next-click.webp
 create mode 100644 src/react/book_icons/next.webp
 create mode 100644 src/react/book_icons/notebook.webp
 create mode 100644 src/react/book_icons/prev-click.webp
 create mode 100644 src/react/book_icons/prev.webp
 create mode 100644 src/react/book_icons/title.webp

diff --git a/.eslintrc.json b/.eslintrc.json
index a91015d2..c9fa60e2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -7,6 +7,7 @@
     "rules": {
         "space-infix-ops": "error",
         "no-multi-spaces": "error",
+        "no-trailing-spaces": "error",
         "space-before-function-paren": "error",
         "space-in-parens": [
             "error",
diff --git a/esbuild.mjs b/esbuild.mjs
index 1f075a62..3dfe9939 100644
--- a/esbuild.mjs
+++ b/esbuild.mjs
@@ -88,6 +88,7 @@ const buildOptions = {
     '.woff': 'dataurl',
     '.woff2': 'dataurl',
     '.ttf': 'dataurl',
+    '.webp': 'dataurl',
   },
   write: false,
   // todo would be better to enable?
diff --git a/scripts/buildNpmReact.ts b/scripts/buildNpmReact.ts
index 4516f1b7..bc0fc192 100644
--- a/scripts/buildNpmReact.ts
+++ b/scripts/buildNpmReact.ts
@@ -53,6 +53,10 @@ fs.promises.readdir(path.resolve(__dirname, '../src/react')).then(async (files)
         write: false, // todo
         loader: {
             '.png': 'dataurl',
+            '.jpg': 'dataurl',
+            '.jpeg': 'dataurl',
+            '.webp': 'dataurl',
+            '.css': 'text',
         },
         plugins: [
             // on external module resolve
diff --git a/src/globals.d.ts b/src/globals.d.ts
index f8699f21..4abc0822 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -25,6 +25,7 @@ declare const customEvents: import('typed-emitter').default<{
     gameLoaded (): void
     mineflayerBotCreated (): void
     search (q: string): void
+    activateItem (item: Item, slot: number, offhand: boolean): void
 }>
 declare const beforeRenderFrame: Array<() => void>
 
diff --git a/src/localServerMultiplayer.ts b/src/localServerMultiplayer.ts
index ca85c126..c8e4bc5e 100644
--- a/src/localServerMultiplayer.ts
+++ b/src/localServerMultiplayer.ts
@@ -52,7 +52,7 @@ export const openToWanAndCopyJoinLink = async (writeText: (text) => void, doCopy
   peerInstance = peer
   peer.on('connection', (connection) => {
     console.log('connection')
-    const serverDuplex = new CustomDuplex({}, (data) => connection.send(data))
+    const serverDuplex = new CustomDuplex({}, async (data) => connection.send(data))
     const client = new Client(true, localServer.options.version, undefined)
     client.setSocket(serverDuplex)
     localServer._server.emit('connection', client)
diff --git a/src/react/AddServerOrConnect.tsx b/src/react/AddServerOrConnect.tsx
index 535e3ee9..2c38a894 100644
--- a/src/react/AddServerOrConnect.tsx
+++ b/src/react/AddServerOrConnect.tsx
@@ -101,7 +101,6 @@ export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQ
         }}>
           <span style={{ fontSize: 12, marginBottom: 1, color: 'lightgray' }}>Account Override</span>
           <select
-            placeholder='Account'
             onChange={({ target: { value } }) => setAccountIndex(Number(value))}
             style={{
               background: 'gray',
diff --git a/src/react/Book.module.css b/src/react/Book.module.css
new file mode 100644
index 00000000..d672baf6
--- /dev/null
+++ b/src/react/Book.module.css
@@ -0,0 +1,605 @@
+.bookWrapper * {
+  box-sizing: border-box;
+}
+.bookWrapper {
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5vh;
+}
+.bookContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+  padding: 0;
+}
+
+.bookImages {
+  position: relative;
+}
+
+.outSide {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  height: 100%;
+  margin: 0 auto;
+}
+.titleIcon {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50%;
+  height: 100%;
+  margin: 0 auto;
+  z-index: 2;
+}
+.titleContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.titleContent span {
+  font-size: 10px;
+}
+.titleContent input {
+  text-align: center;
+  width: 100%;
+  height: 10%;
+  font-size: 10px;
+  margin: 4% 0%;
+  padding: 2% 4%;
+  background-color: transparent;
+  color: white;
+  caret-color: greenyellow;
+  font-family: inherit;
+  border: 1px solid black;
+  padding: 8px 15px;
+}
+
+.insideIcon {
+  width: 100%;
+  height: 20vh;
+}
+.insideHalfIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
+}
+
+.inside {
+  position: absolute;
+  top: 0%;
+  width: 90%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 5%;
+  background-color: transparent;
+  box-shadow: none;
+  padding: 3% 0%;
+}
+.inside.uneditable {
+  height: 90%;
+}
+
+.page {
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.messageFormattedString {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  white-space: pre-wrap;
+  font-family: minecraft;
+  font-size: 10px;
+  padding: 10px;
+}
+
+.messageFormattedString > span {
+  text-shadow: none !important;
+}
+
+.textArea {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: minecraft;
+  font-size: 10px;
+  background-color: transparent;
+  box-shadow: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.textArea > span {
+  animation: blink 1s step-end infinite;
+  border-bottom: 2px solid white;
+}
+
+@keyframes blink {
+  from,
+  to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #fff;
+  }
+}
+
+.controlPrev, .controlNext,
+.controlPrev::before, .controlNext::before,
+.controlPrev::after, .controlNext::after {
+  border: none !important;
+  background-color: transparent !important;
+  text-shadow: none !important;
+  width: auto !important;
+}
+
+.inside Button.controlPrev {
+  position: absolute !important;
+  background-image: url('./book_icons/prev.webp');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  left: 2%;
+  bottom: 6%;
+  margin: 0;
+  padding: 4%;
+}
+.inside Button.controlPrev:active {
+  background-image: url('./book_icons/prev-click.webp') !important;
+}
+.inside Button.controlNext {
+  position: absolute !important;
+  background-image: url('./book_icons/next.webp') !important;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  right: 2%;
+  bottom: 6%;
+  margin: 0;
+  padding: 4%;
+}
+.inside Button.controlNext:active {
+  background-image: url('./book_icons/next-click.webp') !important;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  width: 50%;
+  gap: 0.5vw;
+  row-gap: 0.5vw;
+  align-items: center;
+  justify-content: center;
+}
+
+.actions button {
+  cursor: pointer;
+  font-family: minecraft;
+  width: 45%;
+}
+
+/* Animations */
+
+@keyframes titleAnimation {
+  0% {
+    transform: translateX(-50%) rotateY(85deg);
+  }
+  100% {
+    transform: translateX(-50%) rotateY(0);
+  }
+}
+
+@keyframes titleContentAnimation {
+  0% {
+    transform: translateX(-50%) rotateY(85deg);
+  }
+  100% {
+    transform: translateX(-50%) rotateY(0);
+  }
+}
+
+@keyframes insideAnimation {
+  0% {
+    clip-path: inset(0% 0% 0% 0%);
+    transform: translateX(0%);
+  }
+  25% {
+    transform: translateX(5%);
+  }
+  50% {
+    clip-path: inset(0% 0% 0% 50%);
+    transform: translateX(0%);
+  }
+  99% {
+    opacity: 1;
+  }
+  100% {
+    clip-path: inset(0% 0% 0% 75%);
+    transform: translateX(-25%);
+    opacity: 0;
+  }
+}
+
+@keyframes pageAnimation {
+  0% {
+    transform: translateX(0) rotateY(0);
+  }
+  99% {
+    display: flex;
+  }
+  100% {
+    transform: translateX(55%) rotateY(90deg);
+    padding: 0%;
+    display: none;
+  }
+}
+@keyframes pageTextAnimation {
+  0% {
+    transform: translateX(0) rotateY(0);
+  }
+  100% {
+    transform: translateX(65%) rotateY(88deg);
+    display: none;
+  }
+}
+@keyframes pageSecondTextAnimation {
+  0% {
+    transform: translateX(0%);
+  }
+  25% {
+    transform: translateX(10%);
+  }
+  50% {
+    transform: translateX(0%);
+    display: flex;
+  }
+  100% {
+    transform: translateX(-50%);
+    display: none;
+  }
+}
+
+.pageAnimation {
+  animation: pageAnimation .15s forwards;
+}
+
+.titleAnimation {
+  display: flex;
+  animation: titleAnimation .3s forwards;
+}
+
+.titleContentAnimation {
+  display: flex;
+  animation: titleContentAnimation .3s forwards;
+}
+
+.insideAnimation {
+  animation: insideAnimation .3s forwards;
+}
+
+.pageTextAnimation {
+  animation: pageTextAnimation .15s forwards;
+}
+
+.pageSecondTextAnimation {
+  animation: pageSecondTextAnimation .3s forwards;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Animation Reverse  */
+
+@keyframes titleAnimationReverse {
+  0% {
+    transform: translateX(-50%) rotateY(0);
+  }
+  50% {
+    transform: translateX(0%)
+  }
+  100% {
+    transform: translateX(-50%) rotateY(-90deg);
+    display: none;
+  }
+}
+
+@keyframes titleContentAnimationReverse {
+  0% {
+    transform: translateX(-50%) rotateY(0);
+  }
+  50% {
+    transform: translateX(10%)
+  }
+  100% {
+    transform: translateX(-50%) rotateY(-90deg);
+    display: none;
+  }
+}
+
+@keyframes insideAnimationReverse {
+  0% {
+    clip-path: inset(0% 0% 0% 50%);
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  50% {
+    clip-path: inset(0% 0% 0% 50%);
+  }
+  100% {
+    clip-path: inset(0% 0% 0% 0%);
+    transform: translateX(0%);
+  }
+}
+
+@keyframes pageAnimationReverse {
+  0% {
+    transform: translateX(55%) rotateY(-90deg);
+    padding: 0%;
+    display: none;
+  }
+  1% {
+    display: flex;
+  }
+  100% {
+    transform: translateX(0) rotateY(0);
+  }
+}
+
+@keyframes pageTextAnimationReverse {
+  0% {
+    transform: translateX(65%) rotateY(88deg);
+    display: none;
+  }
+  100% {
+    transform: translateX(0) rotateY(0);
+  }
+}
+
+@keyframes pageSecondTextAnimationReverse {
+  0% {
+    transform: translateX(-50%);
+    display: none;
+  }
+  50% {
+    transform: translateX(0%);
+    display: flex;
+  }
+  75% {
+    transform: translateX(10%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes pageButtonAnimationReverse {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.titleAnimationReverse {
+  display: flex;
+  animation: titleAnimationReverse .3s forwards;
+}
+
+.titleContentAnimationReverse {
+  display: flex;
+  animation: titleContentAnimationReverse .3s forwards;
+}
+
+.insideAnimationReverse {
+  animation: insideAnimationReverse .3s forwards;
+}
+
+.pageAnimationReverse {
+  animation: pageAnimationReverse .15s forwards;
+}
+
+.pageTextAnimationReverse {
+  animation: pageTextAnimationReverse .15s forwards;
+}
+
+.pageSecondTextAnimationReverse {
+  animation: pageSecondTextAnimationReverse .3s forwards;
+}
+
+.pageButtonAnimationReverse {
+  animation: pageButtonAnimationReverse .3s forwards
+}
+
+@media screen and (min-width: 972px) and (max-width: 1024px) {
+  .textArea, .text {
+    font-size: 10px;
+  }
+}
+
+@media screen and (max-width: 972px) {
+  .outSide {
+    width: 80%;
+    padding: 4% 0%;
+  }
+  .titleIcon {
+    width: 100%;
+  }
+  .titleContent span {
+    font-size: 10px;
+  }
+  .titleContent input {
+    font-size: 10px;
+  }
+
+  .insideIcon {
+    width: 100%;
+    height: 40vh;
+  }
+  .inside {
+    padding: 9% 8%;
+  }
+  .insideHalfIcon {
+    display: none;
+  }
+
+  .page {
+    width: 100%;
+    height: 100%;
+  }
+  .inside Button.controlPrev {
+    left: 10%;
+    bottom: 6%;
+    padding: 6%;
+  }
+  .inside Button.controlNext {
+    right: 15%;
+    bottom: 6%;
+    padding: 6%;
+  }
+
+  .textArea, .text {
+    font-size: 10px;
+  }
+  /* Animations width < 768px */
+  @keyframes titleAnimation {
+    0% {
+      transform: translateX(-0%) rotateY(90deg);
+    }
+    100% {
+      transform: translateX(-50%) rotateY(0);
+    }
+  }
+  @keyframes titleContentAnimation {
+    0% {
+      transform: translateX(-0%) rotateY(90deg);
+    }
+    100% {
+      transform: translateX(-50%) rotateY(0);
+    }
+  }
+  @keyframes insideAnimation {
+    0% {
+      transform: translateX(0) rotateY(0);
+    }
+    100% {
+      transform: translateX(50%) rotateY(-90deg);
+    }
+  }
+
+  @keyframes pageTextAnimation {
+    0% {
+      transform: translateX(0) rotateY(0);
+    }
+    100% {
+      transform: translateX(50%) rotateY(-90deg);
+      display: none;
+    }
+  }
+
+  /* Animations Reverse width < 768px */
+  @keyframes titleAnimationReverse {
+    0% {
+      transform: translateX(-60%) rotateY(0);
+    }
+    75% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(0%) rotateY(90deg);
+    }
+  }
+  @keyframes titleContentAnimationReverse {
+    0% {
+      transform: translateX(-60%) rotateY(0);
+    }
+    100% {
+      transform: translateX(0%) rotateY(90deg);
+    }
+  }
+  @keyframes insideAnimationReverse {
+    0% {
+      z-index: 5;
+      transform: translateX(50%) rotateY(-90deg);
+    }
+    100% {
+      transform: translateX(0) rotateY(0);
+    }
+  }
+
+  @keyframes pageTextAnimationReverse {
+    0% {
+      transform: translateX(25%) rotateY(-20deg);
+    }
+    100% {
+      transform: translateX(0) rotateY(0);
+      display: flex;
+    }
+  }
+}
+
+@media screen and (max-width: 591px) {
+  .textArea .text {
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-height: 768px) {
+  .textArea, .text {
+    font-size: 5px;
+  }
+  .outSide {
+    padding: 4% 0%;
+  }
+  .titleContent span {
+    font-size: 5px;
+  }
+}
+@media screen and (max-height: 632px) {
+  .titleContent span {
+    font-size: 5px;
+  }
+}
+@media screen and (max-height: 392px) {
+  .insideIcon {
+    height: 40vh;
+  }
+}
diff --git a/src/react/Book.stories.tsx b/src/react/Book.stories.tsx
new file mode 100644
index 00000000..a90762c2
--- /dev/null
+++ b/src/react/Book.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/react'
+import Book, { BookProps } from './Book'
+
+export default {
+  title: 'Components/Book',
+  component: Book,
+} as Meta
+
+const Template: Story<BookProps> = (args) => <Book {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  textPages: [
+    'Page 1: This is some text for page 1.',
+    'Page 2: This is some text for page 2.',
+    'Page 3: This is some text for page 3.',
+    'Page 4: This is some text for page 4.',
+    'Page 5: This is some text for page 5.',
+  ],
+  editable: true,
+  onSign: (pages, title) => console.log('Signed with pages:', pages, 'Title:', title),
+  onEdit: (pages) => console.log('Edit with pages:', pages),
+  onClose: () => console.log('Closed book'),
+  author: 'Author'
+}
diff --git a/src/react/Book.tsx b/src/react/Book.tsx
new file mode 100644
index 00000000..5093b76b
--- /dev/null
+++ b/src/react/Book.tsx
@@ -0,0 +1,322 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import insideIcon from './book_icons/book.webp'
+import insideHalfIcon from './book_icons/book-half.webp'
+import singlePageInsideIcon from './book_icons/notebook.webp'
+import titleIcon from './book_icons/title.webp'
+import styles from './Book.module.css'
+import Button from './Button'
+import MessageFormattedString from './MessageFormattedString'
+
+export interface BookProps {
+  textPages: string[]
+  editable: boolean
+  onSign: (textPages: string[], title: string) => void
+  onEdit: (textPages: string[]) => void
+  onClose: () => void
+  author: string
+}
+
+const Book: React.FC<BookProps> = ({ textPages, editable, onSign, onEdit, onClose, author }) => {
+  const [pages, setPages] = useState<string[]>(textPages)
+  const [currentPage, setCurrentPage] = useState(0)
+  const [isSinglePage, setIsSinglePage] = useState(window.innerWidth < 972)
+  const [insideImage, setInsideImage] = useState(window.innerWidth < 972 ? singlePageInsideIcon : insideIcon)
+  const [animateInsideIcon, setAnimateInsideIcon] = useState(0)
+  const [animatePageIcon, setAnimatePageIcon] = useState(0)
+  const [animateTitleIcon, setAnimateTitleIcon] = useState(0)
+  const [signClickedOnce, setSignClickedOnce] = useState(false)
+  const textAreaRefs = useRef<HTMLTextAreaElement[]>([])
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleResize = useCallback(() => {
+    const isSingle = window.innerWidth < 972
+    setIsSinglePage(isSingle)
+    setInsideImage(isSingle ? singlePageInsideIcon : insideIcon)
+  }, [])
+
+  useEffect(() => {
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [handleResize])
+
+  useEffect(() => {
+    const index = currentPage * (isSinglePage ? 1 : 2)
+    if (textAreaRefs.current[index]) textAreaRefs.current[index].focus()
+  }, [currentPage, isSinglePage])
+
+  useEffect(() => {
+    if (signClickedOnce) {
+      setTimeout(() => {
+        inputRef.current!.focus()
+      }, 300) // wait for animation
+    }
+  }, [signClickedOnce])
+
+  const handlePageChange = (direction: number) => {
+    setCurrentPage((prevPage) =>
+      Math.min(Math.max(prevPage + direction, 0), Math.ceil(pages.length / (isSinglePage ? 1 : 2)) - 1)
+    )
+  }
+
+  const updatePage = (index, text) => {
+    setPages((prevPages) => {
+      const updatedPages = [...prevPages]
+      updatedPages[index] = text
+      return updatedPages
+    })
+  }
+
+  const handleTextChange = (e, pageIndex) => {
+    const text = e.target.value
+    updatePage(pageIndex, text)
+
+    const nextPageIndex = pageIndex + 1
+    const isMaxLengthReached = text.length >= e.target.maxLength
+
+    if (isMaxLengthReached) {
+      if (nextPageIndex < pages.length) {
+        setCurrentPage(Math.floor(nextPageIndex / (isSinglePage ? 1 : 2)))
+      } else {
+        setPages((prevPages) => [...prevPages, ''])
+        setCurrentPage(Math.floor(nextPageIndex / (isSinglePage ? 1 : 2)))
+      }
+      textAreaRefs.current[nextPageIndex]?.focus()
+    } else if (text === '' && pageIndex > 0 && e.nativeEvent.inputType === 'deleteContentBackward') {
+      setCurrentPage(Math.floor((pageIndex - 1) / (isSinglePage ? 1 : 2)))
+      textAreaRefs.current[pageIndex - 1]?.focus()
+    }
+  }
+
+  useEffect(() => {
+    const index = currentPage * (isSinglePage ? 1 : 2)
+    textAreaRefs.current[index]?.focus()
+  }, [currentPage, isSinglePage])
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>, pageIndex: number) => {
+    const pasteText = e.clipboardData.getData('text')
+    const updatedPages = [...pages]
+    const currentText = updatedPages[pageIndex]
+    const selectionStart = e.currentTarget.selectionStart || 0
+    const selectionEnd = e.currentTarget.selectionEnd || 0
+
+    const newText = currentText.slice(0, selectionStart) + pasteText + currentText.slice(selectionEnd)
+    updatedPages[pageIndex] = newText
+    setPages(updatedPages)
+
+    if (newText.length > e.currentTarget.maxLength) {
+      const remainingText = newText.slice(e.currentTarget.maxLength)
+      updatedPages[pageIndex] = newText.slice(0, e.currentTarget.maxLength)
+      setPages(updatedPages)
+
+      const nextPageIndex = pageIndex + 1
+
+      if (nextPageIndex < pages.length) {
+        handlePasteRemainingText(remainingText, nextPageIndex)
+      } else {
+        setPages((prevPages) => [...prevPages, remainingText])
+        setCurrentPage(Math.floor(nextPageIndex / (isSinglePage ? 1 : 2)))
+        focusOnTextArea(nextPageIndex)
+      }
+    }
+  }
+
+  const handlePasteRemainingText = (remainingText: string, nextPageIndex: number) => {
+    const updatedPages = [...pages]
+    updatedPages[nextPageIndex] = remainingText
+    setPages(updatedPages)
+    focusOnTextArea(nextPageIndex)
+  }
+
+  const focusOnTextArea = (index: number) => {
+    setTimeout(() => {
+      textAreaRefs.current[index]?.focus()
+    }, 0)
+  }
+
+  const handleSign = useCallback(() => {
+    if (editable && signClickedOnce) {
+      const title = inputRef.current?.value || ''
+      onSign(pages, title)
+    }
+    setSignClickedOnce(true)
+    setAnimatePageIcon(1)
+    setAnimateInsideIcon(1)
+    setTimeout(() => {
+      setAnimateTitleIcon(1)
+    }, 150)
+  }, [pages, onSign, editable, signClickedOnce])
+
+  const handleEdit = useCallback(() => {
+    setSignClickedOnce(false)
+    onEdit(pages)
+  }, [pages, onEdit])
+
+  const handleCancel = useCallback(() => {
+    if (signClickedOnce) {
+      setSignClickedOnce(false)
+      setAnimateTitleIcon(2)
+      setTimeout(() => {
+        setAnimateInsideIcon(2)
+        setTimeout(() => {
+          setAnimatePageIcon(2)
+        }, 150)
+      }, 150)
+    } else {
+      onClose()
+    }
+  }, [signClickedOnce, onClose])
+
+  const setRef = (index: number) => (el: HTMLTextAreaElement | null) => {
+    textAreaRefs.current[index] = el!
+  }
+
+  const getAnimationClass = (animationState, baseClass) => {
+    switch (animationState) {
+      case 1:
+        return `${baseClass} ${styles.pageAnimation}`
+      case 2:
+        return `${baseClass} ${styles.pageAnimationReverse}`
+      default:
+        return baseClass
+    }
+  }
+
+  const renderPage = (index) => (
+    <div className={styles.page} key={index}>
+      {editable ? (
+        <textarea
+          onContextMenu={(e) => {
+            e.stopPropagation() // allow to open system context menu on text area for better UX
+          }}
+          ref={setRef(index)}
+          value={pages[index]}
+          onChange={(e) => handleTextChange(e, index)}
+          onPaste={(e) => handlePaste(e, index)}
+          className={getAnimationClass(animatePageIcon, styles.textArea)}
+          maxLength={500}
+        />
+      ) : (
+        <div className={getAnimationClass(animatePageIcon, styles.pageText)}>
+          <MessageFormattedString message={pages[index]} fallbackColor='black' className={styles.messageFormattedString} />
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className={styles.bookWrapper}>
+      <div className={styles.bookContainer}>
+        <img
+          src={insideImage}
+          className={`${styles.insideIcon} ${
+            animateInsideIcon === 1
+              ? styles.insideAnimation
+              : animateTitleIcon === 2
+                ? styles.insideAnimationReverse
+                : ''
+          }`}
+          alt="inside Icon"
+        />
+        <img
+          src={insideHalfIcon}
+          className={`${styles.insideHalfIcon} ${
+            animatePageIcon === 1
+              ? styles.pageAnimation
+              : animatePageIcon === 2
+                ? styles.pageAnimationReverse
+                : ''
+          }`}
+          alt="inside Page Icon"
+        />
+        <img
+          src={titleIcon}
+          className={`${styles.titleIcon} ${
+            animateTitleIcon === 1
+              ? styles.titleAnimation
+              : animateTitleIcon === 2
+                ? styles.titleAnimationReverse
+                : ''
+          }`}
+          alt="Title Icon" />
+        <div className={`${styles.inside}`}>
+          {renderPage(currentPage * (isSinglePage ? 1 : 2))}
+          {!isSinglePage && (currentPage * 2 + 1) < pages.length && renderPage(currentPage * 2 + 1)}
+          <Button
+            className={`${styles.controlPrev} ${
+              animateInsideIcon === 1
+                ? styles.hidden
+                : animateInsideIcon === 2
+                  ? styles.pageButtonAnimationReverse
+                  : ''
+            }`}
+            onClick={() => handlePageChange(-1)}
+            disabled={currentPage === 0}
+          >
+            {' '}
+          </Button>
+          <Button
+            className={`${styles.controlNext} ${
+              animateInsideIcon === 1
+                ? styles.hidden
+                : animateInsideIcon === 2
+                  ? styles.pageButtonAnimationReverse
+                  : ''
+            }`}
+            onClick={() => handlePageChange(1)}
+            disabled={(currentPage + 1) * (isSinglePage ? 1 : 2) >= pages.length}
+          >
+            {' '}
+          </Button>
+        </div>
+        <div
+          className={`${styles.outSide} ${
+            animateTitleIcon === 1
+              ? styles.titleContentAnimation
+              : animateTitleIcon === 2
+                ? styles.titleContentAnimationReverse
+                : ''
+          }`}>
+          {editable ? (
+            <div className={`${styles.titleContent}`} >
+              <MessageFormattedString message="Enter Book Title: " />
+              <form onSubmit={(e) => {
+                e.preventDefault()
+                handleSign()
+              }}>
+                <input
+                  ref={inputRef}
+                  className={`${styles.inputTitle}`}
+                />
+                {/* for some reason this is needed to make Enter work on android chrome */}
+                <button type='submit' style={{ visibility: 'hidden', height: 0, width: 0 }} />
+              </form>
+              <MessageFormattedString message={`by ${author}`} />
+              <br />
+              <MessageFormattedString message="Note! When you sign the book, it will no longer be editable." />
+            </div>
+          ) : (
+            <div className={`${styles.titleContent}`} >
+              <MessageFormattedString message="Book Name Here" />
+              <br />
+              <MessageFormattedString message="by: Author" />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={styles.actions}>
+        {editable && (
+          <Button onClick={handleSign}>
+            {signClickedOnce ? 'Sign and Save' : 'Sign'}
+          </Button>
+        )}
+
+        {editable && !signClickedOnce && <Button onClick={handleSign}>Sign</Button>}
+        {editable && !signClickedOnce && <Button onClick={handleEdit}>Edit</Button>}
+        <Button onClick={handleCancel}>{signClickedOnce ? 'Cancel' : 'Close'}</Button>
+      </div>
+    </div>
+  )
+}
+
+export default Book
diff --git a/src/react/BookProvider.tsx b/src/react/BookProvider.tsx
new file mode 100644
index 00000000..db68d95a
--- /dev/null
+++ b/src/react/BookProvider.tsx
@@ -0,0 +1,110 @@
+import { versionToNumber } from 'prismarine-viewer/viewer/prepare/utils'
+import nbt from 'prismarine-nbt'
+import { useEffect, useState } from 'react'
+import { useSnapshot } from 'valtio'
+import mojangson from 'mojangson'
+import { activeModalStack, hideCurrentModal, showModal } from '../globalState'
+import Book from './Book'
+import { useIsModalActive } from './utilsApp'
+
+interface OpenedBook {
+  pages: string[]
+  title: string
+  author: string
+  isEditable: boolean
+}
+
+export default () => {
+  const modalActive = useIsModalActive('book')
+  // const modalStack = useSnapshot(activeModalStack)
+  const [openedBook, setOpenedBook] = useState<OpenedBook | null>(null)
+
+  const signEditBook = (pages: string[], title: string | undefined) => {
+    if (versionToNumber(bot.version) < versionToNumber('1.17.2')) {
+      if (title === undefined) {
+        void bot.writeBook(bot.inventory.hotbarStart + bot.quickBarSlot, pages)
+      } else {
+        //@ts-expect-error
+        // slot, pages, author, title
+        bot.signBook(bot.inventory.hotbarStart + bot.quickBarSlot, pages, title, bot.username)
+      }
+      hideCurrentModal()
+      return
+    }
+    const currentSlot = bot.quickBarSlot
+    // mineflayer has wrong implementation of this action after 1.17.2
+    if (title === undefined) {
+      bot._client.write('edit_book', {
+        hand: currentSlot,
+        pages
+      })
+    } else {
+      bot._client.write('edit_book', {
+        hand: currentSlot,
+        pages,
+        title
+      })
+    }
+    hideCurrentModal()
+  }
+
+  // test: /give @p minecraft:written_book{pages:['{"text":"§4This is red text. §lThis is bold text."}'],title:"Book",author:"Author"}
+  useEffect(() => {
+    const openBookWithNbt = () => {
+      if (activeModalStack.at(-1)?.reactType === 'book') {
+        hideCurrentModal()
+      }
+      const book = bot.inventory.slots[bot.inventory.hotbarStart + bot.quickBarSlot]
+      if (!book?.nbt) return
+      // {"type":"compound","name":"","value":{"title":{"type":"string","value":"yes"},"author":{"type":"string","value":"bot"},"pages":{"type":"list","value":{"type":"string","value":["{\"text\":\"1\"}","{\"text\":\"4\"}","{\"text\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}"]}
+      const parsedData = nbt.simplify(book.nbt as any)
+      if (!parsedData.pages) return
+      const pages = parsedData.pages.map((page) => {
+        if (book.name !== 'written_book') return page
+        const parsedPage = mojangson.simplify(mojangson.parse(page))
+        return parsedPage.text ?? page
+      })
+      // const {title, author} = parsedData
+      setOpenedBook({
+        pages,
+        title: parsedData.title ?? '',
+        author: parsedData.author ?? '',
+        isEditable: book.name === 'writable_book',
+      })
+      showModal({ reactType: 'book' })
+    }
+    customEvents.on('activateItem', (item) => {
+      if (item.name === 'writable_book') {
+        if (item.nbt?.value.pages) {
+          openBookWithNbt()
+        } else {
+          setOpenedBook({
+            pages: [],
+            title: '',
+            author: '',
+            isEditable: true,
+          })
+          showModal({ reactType: 'book' })
+        }
+      }
+    })
+    bot._client.on('open_book', openBookWithNbt)
+  }, [])
+
+  useEffect(() => {
+    if (modalActive) return
+    setOpenedBook(null)
+  }, [modalActive])
+
+  if (!openedBook) return null
+  return <Book
+    textPages={openedBook.pages}
+    editable={openedBook.isEditable}
+    onSign={(pages, title) => signEditBook(pages, title)}
+    onEdit={(pages) => signEditBook(pages, undefined)}
+    onClose={() => {
+      hideCurrentModal()
+    }}
+    author={bot.username}
+  />
+}
diff --git a/src/react/MessageFormatted.tsx b/src/react/MessageFormatted.tsx
index 6b9620ca..ebfaf2ed 100644
--- a/src/react/MessageFormatted.tsx
+++ b/src/react/MessageFormatted.tsx
@@ -83,9 +83,9 @@ export const MessagePart = ({ part, ...props }: { part: MessageFormatPart } & Co
   return <span title={hoverItemText} style={parseInlineStyle(applyStyles.join(' '))} {...clickProps} {...props}>{text}</span>
 }
 
-export default ({ parts }: { parts: readonly MessageFormatPart[] }) => {
+export default ({ parts, className }: { parts: readonly MessageFormatPart[], className?: string }) => {
   return (
-    <span className='formatted-message'>
+    <span className={`formatted-message ${className ?? ''}`}>
       {parts.map((part, i) => <MessagePart key={i} part={part} />)}
     </span>
   )
diff --git a/src/react/MessageFormattedString.stories.tsx b/src/react/MessageFormattedString.stories.tsx
index 91c87346..f644e2c4 100644
--- a/src/react/MessageFormattedString.stories.tsx
+++ b/src/react/MessageFormattedString.stories.tsx
@@ -7,11 +7,12 @@ const meta: Meta<typeof MessageFormattedString> = {
 }
 
 export default meta
-type Story = StoryObj<typeof MessageFormattedString>;
+type Story = StoryObj<typeof MessageFormattedString>
 
 export const Primary: Story = {
   args: {
     // red text using minecraft styling symbol
-    message: '\u00A7cYou died!'
+    message: '\u00A7cYou died!',
+    fallbackColor: 'white'
   },
 }
diff --git a/src/react/MessageFormattedString.tsx b/src/react/MessageFormattedString.tsx
index d1f8a10f..32b8fad6 100644
--- a/src/react/MessageFormattedString.tsx
+++ b/src/react/MessageFormattedString.tsx
@@ -4,16 +4,26 @@ import { formatMessage } from '../botUtils'
 import MessageFormatted from './MessageFormatted'
 
 /** like MessageFormatted, but receives raw string or json instead, uses window.loadedData */
-export default ({ message }: { message: string | Record<string, any> | null }) => {
+export default ({ message, fallbackColor, className }: {
+  message: string | Record<string, any> | null,
+  fallbackColor?: string,
+  className?: string
+}) => {
   const messageJson = useMemo(() => {
     if (!message) return null
     try {
-      return formatMessage(typeof message === 'string' ? fromFormattedString(message) : message)
+      const texts = formatMessage(typeof message === 'string' ? fromFormattedString(message) : message)
+      return texts.map(text => {
+        return {
+          ...text,
+          color: text.color ?? fallbackColor,
+        }
+      })
     } catch (err) {
       console.error(err) // todo ensure its being logged
       return null
     }
   }, [message])
 
-  return messageJson ? <MessageFormatted parts={messageJson} /> : null
+  return messageJson ? <MessageFormatted parts={messageJson} className={className} /> : null
 }
diff --git a/src/react/PlayerListOverlayProvider.tsx b/src/react/PlayerListOverlayProvider.tsx
index 42e8c735..b97befa6 100644
--- a/src/react/PlayerListOverlayProvider.tsx
+++ b/src/react/PlayerListOverlayProvider.tsx
@@ -81,10 +81,10 @@ export default () => {
 
   if (!isOpen) return null
 
-  return <PlayerListOverlay 
-    playersLists={lists} 
-    clientId={clientId} 
-    tablistHeader={bot.tablist.header} 
+  return <PlayerListOverlay
+    playersLists={lists}
+    clientId={clientId}
+    tablistHeader={bot.tablist.header}
     tablistFooter={bot.tablist.footer}
     serverIP={serverIp ?? ''}
   />
diff --git a/src/react/XPBar.tsx b/src/react/XPBar.tsx
index 1b3a7a85..5de4c61a 100644
--- a/src/react/XPBar.tsx
+++ b/src/react/XPBar.tsx
@@ -3,9 +3,9 @@ import styles from './XPBar.module.css'
 
 export default ({ progress, level, gamemode }: { progress: number; level: number, gamemode: string }) => (
   <SharedHudVars>
-    <div 
-      id="xp-bar-bg" 
-      className={styles['xp-bar-bg']} 
+    <div
+      id="xp-bar-bg"
+      className={styles['xp-bar-bg']}
       style={{ display: gamemode === 'creative' || gamemode === 'spectator' ? 'none' : 'block' }}
     >
       <div className={styles['xp-bar']} style={{ width: `${182 * progress}px` }}></div>
@@ -13,4 +13,3 @@ export default ({ progress, level, gamemode }: { progress: number; level: number
     </div>
   </SharedHudVars>
 )
-
diff --git a/src/react/book_icons/book-half.webp b/src/react/book_icons/book-half.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8a9065861bb6229cd88bdc1ea0ff8c548bb37aae
GIT binary patch
literal 5110
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

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/book.webp b/src/react/book_icons/book.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d3701652c52f7dddb25f609065b163b579dab204
GIT binary patch
literal 10158
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
WQpg?d)Qqj-Wn^%%X1zHA0PsJE#o9&y

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/next-click.webp b/src/react/book_icons/next-click.webp
new file mode 100644
index 0000000000000000000000000000000000000000..065ee0d328dc09fe4e35586d52f46fe4b1430376
GIT binary patch
literal 1800
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

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/next.webp b/src/react/book_icons/next.webp
new file mode 100644
index 0000000000000000000000000000000000000000..06f5ab1a26829dfaed78469a9fb12db49f9aad4c
GIT binary patch
literal 1268
zcmV<Q1Pl98Nk&HO1ONb6MM6+kP&il$0000G000300058x06|PpNbmpv00DqvZF?#w
z1D49ZikaI5+|vb&8dZua?}IF>s@o-0v0_%t3hhAL_YeF@IX5CEK>S(iDDFK;#3elQ
z8M{|n^<+@KgU1=FYleqRq)Oov3=thmxQb>tMwn{G1N?OC;4j+RRyiBuhw6H0=$^%&
zb7yH5mMm1w;ujj}R~))5IEs6#uplm3SP632qmu-lVj-R2FsT#uIkyU%#n(P##D32o
z#m)Gk2`x9{7x_osHlay@pW3D^?Z79-klew?3GNPjPPpE|bA?!C3?CwAI|=<F@9qBz
zB)+PbSqb;%PMO3j@{c;HmzXe6`@cV90aj2rAl3r_0I((iodGHU0g(VckwBYBC8Q#u
zE_CWZuo4MnZs5QHgD3C<^aJ<;EE4zVpIN1M{$}rPcX!f19)Aq~P(I9v8~6>}Vy782
z4Vt)^h%9YUz7Gk)oyjEKZ+aMf&`fEqZ?-y=ZTiY&6H5FO%E!BJ`l-}@^}d-U#IWIQ
zl&*Hx{y!V|#3_@CS*-bc@d_}d4VG2Ey>nonw036xP%z04H`#mtOJvcyKatc;>h`JK
zCqpKVekU8{X6(Y<q^ZwFUu35^#=N8fnq-hhn3aI&bp__`1ozxYV6pq(56S_Mq%d^p
zNMGrXZbS@a_*ThrDcz5@ci>-qLJ%M`y@EqZc;6{LBZD(9^jW|(ZI_W(FsFahBrTU+
zhHYeAv+!5290`{j;nCoFUrw`)-?Lco0l-uK?8=Tw`IQOJ5CMPy{mg~{15a;`)%$;q
z^|5U%_kchoQUU$|(&lTbLa`WnbFzZtxla&obF7~I@UGfqJxYuTEmFVVkMeTA`8j$x
ze4myrsKumC)nV^D;{;9%;@X-8SQb%B(4bYAO30cON}|nWon%DWgTdOF+>jLTA)3GK
zr@A_+@~ydSR^%x=D*Se>2!r6`ABH7EPGxdUOhTA;a_2oycZwR-3em>30Ia`7#I_}e
zpeRn?{7iUX%q2=hhE@f8G?+>6sa_}BsKKNNAv7Rg_P@T=_8bWDb_CABu+Y;v9}>II
zC*jw^?T6OvkgmEMUj%wmSa4$0-0zW-!5O9q;4KZ$-D0yA@QeN;h`<Scb<p^f2j8Ss
z407M^xM4uk@sy4j;<kw&0TY8qotZBKzi0Qzi>JiOqp}pZzocY`tgC}<i)}#JGoAa4
zB4`{Jc#I`~!=Xrpq^9y&kTm&Nmt6p~zU_IB@}pn>^HR6Sgh9&qtYHXnH-Iv|{hrht
zsj@P$pmckToliyjQ|;lj63z>u+B)lv-<&wOh;y^IEN2U{QkzAFRr54Fw$cpi(1PYC
z8zNBlDFaZVrr;2>K7c|bm7Cj!gbsp_N-+r4>q#F3$tHLJw0$rm8K$kWN5MQV<o+}X
zX$^s5QL&IO^D;jr27hhEX^2#14U!$@;PjSPt?ol7@lC7i)etNGvnKABn0PV+0!T&q
zcO}W2(JkJT5WEIV$G;dcPEmu$O;%hW;a^yNQEuxzu*z6&07PDWLJ?a#8ndA(Czyk3
z-$p5QY@rpq01#PkizoVKSOs7!uZ`fb8vM&$fN;P6&9q!4B>!8nlxW|w4n~oH!WZK_
eP@<oSS39!(Bp76GY)p+Z1)L5%fB*mh00030Sz)OF

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/notebook.webp b/src/react/book_icons/notebook.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ce3b32c3302275c5a508727d41baf3cdc1e459ef
GIT binary patch
literal 5956
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

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/prev-click.webp b/src/react/book_icons/prev-click.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7ff61b57bd4a529158b07bfc91a5d806e064e6b0
GIT binary patch
literal 1866
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
E00U2l%>V!Z

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/prev.webp b/src/react/book_icons/prev.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b0b810251e9e8cb70bee65e4698f512849f9bd9c
GIT binary patch
literal 1298
zcmV+t1?~D$Nk&Er1pok7MM6+kP&il$0000G000300058x06|PpNbdju00Dra?VsZ2
zAFxTe^;OK=9$=pyAS$Xfs(cT!tg5z0sA9#em=)TP`_00CraT)F6F`3h=eV~5f6NFt
z`5BYE58^S@4A(J~+`-Fr#3JS=a(I;)+{+H$!B3<apOQ#4!xhT1iTPO0v)h3kE@ts6
z7Q`&P<elePyjvl%77KQc!+vA8o+yVaEQlzsl5~p0EDM<wt`c1}@mrh4KV$vmcyNM?
zW_($P4x8~}|D6&(sYBc3QS+}I{959C2eu`~ckr|}ob13$UXkpV=p@g6XhRkG-u$mZ
z;AP(F74WQDRs~+*KOPfmnIsK0|NBi109H^qAoK$O08k|WodGHU0g(VckwBVAC8Q#u
zEqEFDuo4MnZs5VKU;+36`T_g_HKcvs)QmT8{f_US<~<6xnO>jyC|Cgc`RD*Z90Rie
zDR`=PKh8Nlt-|z!I$1s2nIYe|h4Oq7RKn|<byZ7fz>3_~i+FtvKr$0=t0bd*_d}g0
z3bnz%s(Te2K7R=x(_BbCaZZ~HdUs$}n7V&uIW4-}3#sfZ3hcPH1J8>v1!k-2HODE>
z7PSSQ64n-+gC<S=h|#GAV-fWV6ek2jxk|{jmCmYFgLxc$(U*3e=@3}~wwF;W(jvTz
zz=uNusa6;?QjCuYI<155xCB76BE%KsLt()wNlHu@`8*CAC&!}!MIn5vaK(uO2S5rn
zKJ2zegnSw~t6Ovd2@%&fAQ-qgaVD`Hm+smC0RE4MJ~>m^2VA~M0JvknV!0Fm*nvde
zMRIk^|NpW+u-v|OW~zx?y8r^_B_R;wfDy??+6&Jd`op+}^P6w_<;30hGVnVY`1j>f
z3!{iZpSaq8|MO5@(6@Q?3;+$*IjuI$fn}iUU2Nf3+|b?>L+Q<}fTRw&r$el}{7J2T
zYR!~Z79P-f4@z%X*OtD(L?0^kRWMCoVzsq%2Q2;Os3{~<XJ+-9PNlc{1zr;l<m|3b
z{O{bcMNSd@FwM<vy!c;5toUl9fSc0&exFPJn+vrn3Ww!ia`eB=H!sCSO;vPhgR&LX
znerp{F+T#*=9DC$;MyQ(CsqzWA+Hi+x{M8oeL)gc=DX*mJ}c7>&uhiZDpD=>dIyW=
zHsP-l(|z|0?r*cb4<^6Ux`rE>ARYRW8-X|a42UH2f_E1+j;?*&Jmy;$HP>cwiV;Sx
zw`~w+6!KJYHh?buGbtq~pra_#oziu7lZ;(e0a@hJRs_^fN*&Hbt0y(L!Zj_m!2FlH
zd)nB0jlag_J_WmPYe+LChnc9N!jKn2gtaZngURa9vJXM151n)4G+a3vtoQHs4XKI^
zf0P-!4o=7FB-VVqjy7N<Lz1+7yjzWdkhZJ6Ad|27=KsY9--p1j%((LAjIRDWS$FpT
zUidKly0nt|YN)lx=0l1c4ec34(^@(yVP;|>XyPzp11JIi*Qp9Jy6LosVESjaXe)th
zyF(qUmJ}9HY|sJe4lxs3TfSmGhKwfm<4)y6=j=%pZgnciPKA5~Z5Qp1?ozl4Xb=ET
z8frJc+)J-K&IX%AnM#5{B$G+1XyZ3kK*Q<tfO;jL@prP>z`?m8p{z`i8^k0*|0|bz
zz=%2)sx#-IH%XI+V{GSR3Cl3*)HZ17O#H=Lul4kQ|1|}L(_!cR2dcg{t2fw-qJRJZ
I000000Lam4)Bpeg

literal 0
HcmV?d00001

diff --git a/src/react/book_icons/title.webp b/src/react/book_icons/title.webp
new file mode 100644
index 0000000000000000000000000000000000000000..703157e44a9b12210f56f06aa4e54c7bfc0f2c03
GIT binary patch
literal 3392
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
N-zWodLco{NzX1urc@Y2r

literal 0
HcmV?d00001

diff --git a/src/react/globals.d.ts b/src/react/globals.d.ts
index 53f2208e..d9f38fc1 100644
--- a/src/react/globals.d.ts
+++ b/src/react/globals.d.ts
@@ -29,6 +29,10 @@ declare module '*.svg' {
     const svg: string
     export default svg
 }
+declare module '*.webp' {
+    const svg: string
+    export default svg
+}
 
 interface PromiseConstructor {
     withResolvers<T> (): {
diff --git a/src/react/singleplayer.module.css b/src/react/singleplayer.module.css
index c7ec49f6..0e69ea46 100644
--- a/src/react/singleplayer.module.css
+++ b/src/react/singleplayer.module.css
@@ -50,8 +50,8 @@
     white-space: pre;
 }
 .world_info_description_line {
-  color: #999;
-  white-space: nowrap;
+    color: #999;
+    white-space: nowrap;
 }
 .world_image {
     height: 100%;
diff --git a/src/reactUi.tsx b/src/reactUi.tsx
index 34a567cd..655a6029 100644
--- a/src/reactUi.tsx
+++ b/src/reactUi.tsx
@@ -41,6 +41,7 @@ import HeldMapUi from './react/HeldMapUi'
 import BedTime from './react/BedTime'
 import NoModalFoundProvider from './react/NoModalFoundProvider'
 import SignInMessageProvider from './react/SignInMessageProvider'
+import BookProvider from './react/BookProvider'
 
 const RobustPortal = ({ children, to }) => {
   return createPortal(<PerComponentErrorBoundary>{children}</PerComponentErrorBoundary>, to)
@@ -116,6 +117,7 @@ const InGameUi = () => {
         <ScoreboardProvider />
         <IndicatorEffectsProvider />
         <Crosshair />
+        <BookProvider />
       </div>
 
       <PauseScreen />
diff --git a/src/worldInteractions.ts b/src/worldInteractions.ts
index 5ce428d2..e523c74b 100644
--- a/src/worldInteractions.ts
+++ b/src/worldInteractions.ts
@@ -289,6 +289,7 @@ class WorldInteraction {
       } else if (!stop) {
         const offhand = activate ? false : activatableItems(bot.inventory.slots[45]?.name ?? '')
         bot.activateItem(offhand) // todo offhand
+        customEvents.emit('activateItem', offhand ? bot.inventory.slots[45] : bot.heldItem, offhand ? 45 : bot.quickBarSlot, offhand)
         itemBeingUsed.name = (offhand ? bot.inventory.slots[45]?.name : bot.heldItem?.name) ?? null
         itemBeingUsed.hand = offhand ? 1 : 0
       }