No big features yet (#52)

.github/workflows/publish.yml

@@ -19,6 +19,7 @@ jobs:
       - run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
       # will install + build to .vercel/output/static
       - run: vercel build --token=${{ secrets.VERCEL_TOKEN }} --prod
+      - run: pnpm build-storybook
       - name: Copy playground files
         run: node prismarine-viewer/esbuild.mjs && cp prismarine-viewer/public/index.html .vercel/output/static/playground.html && cp prismarine-viewer/public/playground.js .vercel/output/static/playground.js
       - name: Download Generated Sounds map

package.json

@@ -15,7 +15,7 @@
     "test-mc-server": "tsx cypress/minecraft-server.mjs",
     "lint": "eslint \"{src,cypress}/**/*.{ts,js,jsx,tsx}\"",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build && node scripts/build.js moveStorybookFiles",
     "start-experiments": "vite --config experiments/vite.config.ts",
     "watch-worker": "node prismarine-viewer/buildWorker.mjs -w"
   },
@@ -98,7 +98,7 @@
     "http-server": "^14.1.1",
     "https-browserify": "^1.0.0",
     "minecraft-inventory-gui": "github:zardoy/minecraft-inventory-gui#next",
-    "mineflayer": "github:zardoy/mineflayer#custom",
+    "mineflayer": "github:PrismarineJS/mineflayer",
     "mineflayer-pathfinder": "^2.4.4",
     "npm-run-all": "^4.1.5",
     "os-browserify": "^0.3.0",

scripts/build.js

@@ -91,6 +91,10 @@ exports.getSwAdditionalEntries = () => {
     return output
 }
 
+exports.moveStorybookFiles = () => {
+    fs.renameSync('storybook-static', 'dist/storybook')
+}
+
 const fn = require.main === module && exports[process.argv[2]]
 
 if (fn) {

src/botUtils.ts

@@ -1,8 +1,8 @@
 // this should actually be moved to mineflayer / prismarine-viewer
 
-import { fromFormattedString } from '@xmcl/text-component'
+import { fromFormattedString, TextComponent } from '@xmcl/text-component'
 
-export type MessageFormatPart = {
+export type MessageFormatPart = Pick<TextComponent, 'hoverEvent' | 'clickEvent'> & {
   text: string
   color?: string
   bold?: boolean

src/controls.ts

@@ -10,7 +10,7 @@ import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCur
 import { goFullscreen, pointerLock, reloadChunks } from './utils'
 import { options } from './optionsStorage'
 import { openPlayerInventory } from './playerWindows'
-import { initialChatOpenValue } from './react/ChatContainer'
+import { chatInputValueGlobal } from './react/ChatContainer'
 import { fsState } from './loadSave'
 
 // doesnt seem to work for now
@@ -226,7 +226,7 @@ contro.on('trigger', ({ command }) => {
         showModal({ reactType: 'chat' })
         break
       case 'general.command':
-        initialChatOpenValue.value = '/'
+        chatInputValueGlobal.value = '/'
         showModal({ reactType: 'chat' })
         break
       case 'general.selectItem':

src/globalState.ts

@@ -187,6 +187,9 @@ export const showNotification = (newNotification: Partial<typeof notification>)
 // todo restore auto-save on interval for player data! (or implement it in flying squid since there is already auto-save for world)
 
 window.addEventListener('unload', (e) => {
+  if (!window.justReloaded) {
+    sessionStorage.justReloaded = false
+  }
   void saveServer()
 })
 
@@ -201,6 +204,10 @@ window.inspectPlayer = () => require('fs').promises.readFile('/world/playerdata/
 
 // todo move from global state
 window.addEventListener('beforeunload', (event) => {
+  if (!window.justReloaded) {
+    sessionStorage.justReloaded = false
+  }
+
   // todo-low maybe exclude chat?
   if (!isGameActive(true) && activeModalStack.at(-1)?.elem?.id !== 'chat') return
   if (sessionStorage.lastReload && !options.preventDevReloadWhilePlaying) return

src/index.ts

@@ -433,6 +433,7 @@ async function connect (connectOptions: {
       noPongTimeout: 240 * 1000,
       closeTimeout: 240 * 1000,
       respawn: options.autoRespawn,
+      maxCatchupTicks: 0,
       async versionSelectedHook (client) {
         // todo keep in sync with esbuild preload, expose cache ideally
         if (client.version === '1.20.1') {
@@ -447,12 +448,12 @@ async function connect (connectOptions: {
     if (singleplayer || p2pMultiplayer) {
       // in case of p2pMultiplayer there is still flying-squid on the host side
       const _supportFeature = bot.supportFeature
-      bot.supportFeature = (feature) => {
+      bot.supportFeature = ((feature) => {
         if (unsupportedLocalServerFeatures.includes(feature)) {
           return false
         }
         return _supportFeature(feature)
-      }
+      }) as typeof bot.supportFeature
 
       bot.emit('inject_allowed')
       bot._client.emit('connect')

src/react/Chat.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { useEffect, useState } from 'react'
 import { formatMessage } from '../botUtils'
-import Chat, { fadeMessage, initialChatOpenValue } from './ChatContainer'
+import Chat, { fadeMessage, chatInputValueGlobal } from './ChatContainer'
 import Button from './Button'
 
 window.spamMessage = window.spamMessage ?? ''
@@ -20,7 +20,7 @@ const meta: Meta<typeof Chat> = {
       const abortController = new AbortController()
       addEventListener('keyup', (e) => {
         if (e.code === 'KeyY') {
-          initialChatOpenValue.value = '/'
+          chatInputValueGlobal.value = '/'
           setOpen(true)
           e.stopImmediatePropagation()
         }
@@ -103,7 +103,6 @@ export const Primary: Story = {
           'underlined': false,
           'strikethrough': false,
           'obfuscated': false,
-          //@ts-expect-error
           'json': {
             'insertion': 'pviewer672',
             'clickEvent': {
@@ -129,6 +128,7 @@ export const Primary: Story = {
           },
           'hoverEvent': {
             'action': 'show_entity',
+            //@ts-expect-error
             'contents': {
               'type': 'minecraft:player',
               'id': 'ecd0eeb1-625e-3fea-b16e-cb449dcfa434',

src/react/ChatContainer.tsx

@@ -1,4 +1,5 @@
 import { useUsingTouch } from '@dimaka/interface'
+import { proxy, subscribe } from 'valtio'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { isCypress } from '../standaloneUtils'
 import { MessageFormatPart } from '../botUtils'
@@ -12,7 +13,7 @@ export type Message = {
   faded?: boolean
 }
 
-const MessageLine = ({ message }) => {
+const MessageLine = ({ message }: {message: Message}) => {
   const classes = {
     'chat-message-fadeout': message.fading,
     'chat-message-fade': message.fading,
@@ -35,9 +36,9 @@ type Props = {
   // width?: number
 }
 
-export const initialChatOpenValue = {
+export const chatInputValueGlobal = proxy({
   value: ''
-}
+})
 
 export const fadeMessage = (message: Message, initialTimeout: boolean, requestUpdate: () => void) => {
   setTimeout(() => {
@@ -100,11 +101,18 @@ export default ({ messages, opacity = 1, fetchCompletionItems, opened, sendMessa
 
   useEffect(() => {
     if (opened) {
-      updateInputValue(initialChatOpenValue.value)
-      initialChatOpenValue.value = ''
+      updateInputValue(chatInputValueGlobal.value)
+      chatInputValueGlobal.value = ''
       if (!usingTouch) {
         chatInput.current.focus()
       }
+      const unsubscribe = subscribe(chatInputValueGlobal, () => {
+        if (!chatInputValueGlobal.value) return
+        updateInputValue(chatInputValueGlobal.value)
+        chatInputValueGlobal.value = ''
+        chatInput.current.focus()
+      })
+      return unsubscribe
     }
     if (!opened && chatMessages.current) {
       chatMessages.current.scrollTop = chatMessages.current.scrollHeight

src/react/DeathScreen.tsx

@@ -4,7 +4,7 @@ import MessageFormatted from './MessageFormatted'
 import Button from './Button'
 
 type Props = {
-  dieReasonMessage: readonly MessageFormatPart[]
+  dieReasonMessage: MessageFormatPart[]
   respawnCallback: () => void
   disconnectCallback: () => void
 }

src/react/DeathScreenProvider.tsx

@@ -56,7 +56,7 @@ export default () => {
   if (!isModalActive || !dieReasonMessage || options.autoRespawn) return null
 
   return <DeathScreen
-    dieReasonMessage={dieReasonMessage}
+    dieReasonMessage={dieReasonMessage as MessageFormatPart[]}
     respawnCallback={() => {
       bot._client.write('client_command', bot.supportFeature('respawnIsPayload') ? { payload: 0 } : { actionId: 0 })
     }}

src/react/MainMenu.tsx

@@ -20,6 +20,8 @@ interface Props {
 const refreshApp = async () => {
   const registration = await navigator.serviceWorker.getRegistration()
   await registration?.unregister()
+  window.justReloaded = true
+  sessionStorage.justReloaded = true
   window.location.reload()
 }
 
@@ -36,7 +38,13 @@ export default ({ connectToServerAction, mapsProvider, singleplayerAction, optio
       fetch('./version.txt').then(async (f) => {
         if (f.status === 404) return
         const contents = await f.text()
-        setVersionStatus(`(${contents === process.env.BUILD_VERSION ? 'latest' : 'new version available'})`)
+        const isLatest = contents === process.env.BUILD_VERSION
+        if (!isLatest && sessionStorage.justReloaded) {
+          // try to force bypass cache
+          location.search = '?update=true'
+        }
+        sessionStorage.justReloaded = false
+        setVersionStatus(`(${isLatest ? 'latest' : 'new version available'})`)
         setVersionTitle(`Loaded: ${process.env.BUILD_VERSION}. Remote: ${contents}`)
       }, () => { })
     }
@@ -114,7 +122,10 @@ export default ({ connectToServerAction, mapsProvider, singleplayerAction, optio
       <div className={styles['bottom-info']}>
         <span
           title={`${versionTitle} (click to reload)`}
-          onClick={refreshApp}
+          onClick={async () => {
+            setVersionStatus('(reloading)')
+            await refreshApp()
+          }}
           className={styles['product-info']}
         >
           Prismarine Web Client {versionStatus}