From 306f894d8cc5c6314bb0495ddaaaa4a19be2cb4c Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 03:18:56 +0300
Subject: [PATCH 1/9] fix(important,singleplayer): stop loading chunks in
 previous position when teleported to a new pos and always start loading
 chunks in new pos

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5337cebfb..bd18bc038 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "express": "^4.18.2",
     "filesize": "^10.0.12",
-    "flying-squid": "npm:@zardoy/flying-squid@^0.0.36",
+    "flying-squid": "npm:@zardoy/flying-squid@^0.0.38",
     "fs-extra": "^11.1.1",
     "google-drive-browserfs": "github:zardoy/browserfs#google-drive",
     "jszip": "^3.10.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8075be60e..77810ab07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,8 +117,8 @@ importers:
         specifier: ^10.0.12
         version: 10.0.12
       flying-squid:
-        specifier: npm:@zardoy/flying-squid@^0.0.36
-        version: '@zardoy/flying-squid@0.0.36(encoding@0.1.13)'
+        specifier: npm:@zardoy/flying-squid@^0.0.38
+        version: '@zardoy/flying-squid@0.0.38(encoding@0.1.13)'
       fs-extra:
         specifier: ^11.1.1
         version: 11.1.1
@@ -3390,8 +3390,8 @@ packages:
     resolution: {integrity: sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==}
     engines: {node: '>=12 <14 || 14.2 - 14.9 || >14.10.0'}
 
-  '@zardoy/flying-squid@0.0.36':
-    resolution: {integrity: sha512-d4clMPDpw723SDF5P2mMVNfbthUFLX6OT+vTCECAMshX8/M7CyMq/q9BfBQoeJcBL0H9nplhwtFbnx3Edb2fzA==}
+  '@zardoy/flying-squid@0.0.38':
+    resolution: {integrity: sha512-xz/ZuWmva3mlT1cigOudOMqa5iQF2sWsUUVeBNUoqfHscXoXl0TIOXnRScBeEGZjY2fD7meJ24nlcInewgNfZg==}
     engines: {node: '>=8'}
     hasBin: true
 
@@ -13366,7 +13366,7 @@ snapshots:
       '@types/emscripten': 1.39.8
       tslib: 1.14.1
 
-  '@zardoy/flying-squid@0.0.36(encoding@0.1.13)':
+  '@zardoy/flying-squid@0.0.38(encoding@0.1.13)':
     dependencies:
       '@tootallnate/once': 2.0.0
       change-case: 4.1.2

From 5aaa687392cef67e153270463461ce3a46704813 Mon Sep 17 00:00:00 2001
From: Vitaly <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 05:03:17 +0300
Subject: [PATCH 2/9] feat: display progress of downloading chunks visually
 (#195)

---
 prismarine-viewer/viewer/lib/mesher/models.ts |  10 +-
 src/react/AppStatus.tsx                       |  13 ++-
 src/react/AppStatusProvider.tsx               |  33 ++++--
 src/react/DiveTransition.tsx                  |  12 +-
 src/react/LoadingChunks.css                   |  12 ++
 src/react/LoadingChunks.stories.tsx           |  43 +++++++
 src/react/LoadingChunks.tsx                   |  60 ++++++++++
 src/react/PauseScreen.tsx                     | 108 ++++++++++++++----
 src/utils.ts                                  |   9 +-
 9 files changed, 263 insertions(+), 37 deletions(-)
 create mode 100644 src/react/LoadingChunks.css
 create mode 100644 src/react/LoadingChunks.stories.tsx
 create mode 100644 src/react/LoadingChunks.tsx

diff --git a/prismarine-viewer/viewer/lib/mesher/models.ts b/prismarine-viewer/viewer/lib/mesher/models.ts
index 88505c06a..8b9115e79 100644
--- a/prismarine-viewer/viewer/lib/mesher/models.ts
+++ b/prismarine-viewer/viewer/lib/mesher/models.ts
@@ -282,6 +282,7 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
 
     const aos: number[] = []
     const neighborPos = position.plus(new Vec3(...dir))
+    // 10%
     const baseLight = world.getLight(neighborPos, undefined, undefined, block.name) / 15
     for (const pos of corners) {
       let vertex = [
@@ -290,7 +291,7 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
         (pos[2] ? maxz : minz)
       ]
 
-      if (!needTiles) {
+      if (!needTiles) { // 10%
         vertex = vecadd3(matmul3(localMatrix, vertex), localShift)
         vertex = vecadd3(matmul3(globalMatrix, vertex), globalShift)
         vertex = vertex.map(v => v / 16)
@@ -411,7 +412,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
     // todo this can be removed here
     signs: {},
     // isFull: true,
-    highestBlocks: {},
+    highestBlocks: {}, // todo migrate to map for 2% boost perf
     hadErrors: false
   }
 
@@ -449,7 +450,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
         }
         const biome = block.biome.name
 
-        if (world.preflat) {
+        if (world.preflat) { // 10% perf
           const patchProperties = preflatBlockCalculation(block, world, cursor)
           if (patchProperties) {
             block._originalProperties ??= block._properties
@@ -505,6 +506,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
             const model = modelVars[useVariant] ?? modelVars[0]
             if (!model) continue
 
+            // #region 10%
             let globalMatrix = null as any
             let globalShift = null as any
             for (const axis of ['x', 'y', 'z'] as const) {
@@ -518,6 +520,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
               globalShift = [8, 8, 8]
               globalShift = vecsub3(globalShift, matmul3(globalMatrix, globalShift))
             }
+            // #endregion
 
             for (const element of model.elements ?? []) {
               const ao = model.ao ?? true
@@ -527,6 +530,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
                   renderElement(world, pos, element, ao, attr, globalMatrix, globalShift, block, biome)
                 })
               } else {
+                // 60%
                 renderElement(world, cursor, element, ao, attr, globalMatrix, globalShift, block, biome)
               }
             }
diff --git a/src/react/AppStatus.tsx b/src/react/AppStatus.tsx
index ca83c29af..31f086415 100644
--- a/src/react/AppStatus.tsx
+++ b/src/react/AppStatus.tsx
@@ -2,8 +2,18 @@ import { useEffect, useState } from 'react'
 import styles from './appStatus.module.css'
 import Button from './Button'
 import Screen from './Screen'
+import LoadingChunks from './LoadingChunks'
 
-export default ({ status, isError, hideDots = false, lastStatus = '', backAction = undefined as undefined | (() => void), description = '', actionsSlot = null as React.ReactNode | null }) => {
+export default ({
+  status,
+  isError,
+  hideDots = false,
+  lastStatus = '',
+  backAction = undefined as undefined | (() => void),
+  description = '',
+  actionsSlot = null as React.ReactNode | null,
+  children
+}) => {
   const [loadingDots, setLoadingDots] = useState('')
 
   useEffect(() => {
@@ -52,6 +62,7 @@ export default ({ status, isError, hideDots = false, lastStatus = '', backAction
           <Button onClick={() => window.location.reload()} label="Reset App (recommended)" />
         </>
       )}
+      {children}
     </Screen>
   )
 }
diff --git a/src/react/AppStatusProvider.tsx b/src/react/AppStatusProvider.tsx
index 179905fc8..d853c2628 100644
--- a/src/react/AppStatusProvider.tsx
+++ b/src/react/AppStatusProvider.tsx
@@ -1,6 +1,6 @@
 import { proxy, useSnapshot } from 'valtio'
-import { useEffect, useState } from 'react'
-import { activeModalStack, activeModalStacks, hideModal, insertActiveModalStack, miscUiState } from '../globalState'
+import { useEffect, useRef, useState } from 'react'
+import { activeModalStack, activeModalStacks, hideModal, insertActiveModalStack, miscUiState, showModal } from '../globalState'
 import { resetLocalStorageWorld } from '../browserfs'
 import { fsState } from '../loadSave'
 import { guessProblem } from '../errorLoadingScreenHelpers'
@@ -14,6 +14,7 @@ import { useIsModalActive } from './utilsApp'
 import Button from './Button'
 import { AuthenticatedAccount, updateAuthenticatedAccountData, updateLoadedServerData } from './ServersListProvider'
 import { showOptionsModal } from './SelectOption'
+import LoadingChunks from './LoadingChunks'
 
 const initialState = {
   status: '',
@@ -22,9 +23,12 @@ const initialState = {
   descriptionHint: '',
   isError: false,
   hideDots: false,
+  loadingChunksData: null as null | Record<string, string>,
+  loadingChunksDataPlayerChunk: null as null | { x: number, z: number },
+  isDisplaying: false
 }
 export const appStatusState = proxy(initialState)
-const resetState = () => {
+export const resetAppStatusState = () => {
   Object.assign(appStatusState, initialState)
 }
 
@@ -33,7 +37,7 @@ export const lastConnectOptions = {
 }
 
 export default () => {
-  const { isError, lastStatus, maybeRecoverable, status, hideDots, descriptionHint } = useSnapshot(appStatusState)
+  const { isError, lastStatus, maybeRecoverable, status, hideDots, descriptionHint, loadingChunksData, loadingChunksDataPlayerChunk } = useSnapshot(appStatusState)
   const { active: replayActive } = useSnapshot(packetsReplaceSessionState)
 
   const isOpen = useIsModalActive('app-status')
@@ -52,7 +56,7 @@ export default () => {
   }, [isOpen])
 
   const reconnect = () => {
-    resetState()
+    resetAppStatusState()
     window.dispatchEvent(new window.CustomEvent('connect', {
       detail: lastConnectOptions.value
     }))
@@ -93,7 +97,7 @@ export default () => {
       lastStatus={lastStatus}
       description={displayAuthButton ? '' : (isError ? guessProblem(status) : '') || descriptionHint}
       backAction={maybeRecoverable ? () => {
-        resetState()
+        resetAppStatusState()
         miscUiState.gameLoaded = false
         miscUiState.loadedDataVersion = null
         window.loadedData = undefined
@@ -113,10 +117,25 @@ export default () => {
           {replayActive && <Button label='Download Packets Replay' onClick={downloadPacketsReplay} />}
         </>
       }
-    />
+    >
+      {loadingChunksData && <LoadingChunks regionFiles={Object.keys(loadingChunksData)} stateMap={loadingChunksData} playerChunk={loadingChunksDataPlayerChunk} />}
+      {isOpen && <DisplayingIndicator />}
+    </AppStatus>
   </DiveTransition>
 }
 
+const DisplayingIndicator = () => {
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        appStatusState.isDisplaying = true
+      })
+    })
+  }, [])
+
+  return <div />
+}
+
 const PossiblyVpnBypassProxyButton = ({ reconnect }: { reconnect: () => void }) => {
   const [vpnBypassProxy, setVpnBypassProxy] = useState('')
 
diff --git a/src/react/DiveTransition.tsx b/src/react/DiveTransition.tsx
index cd78dd66e..828378761 100644
--- a/src/react/DiveTransition.tsx
+++ b/src/react/DiveTransition.tsx
@@ -9,7 +9,7 @@ const endExitStyle = { opacity: 0, transform: 'translateZ(150px)' }
 const endStyle = { opacity: 1, transform: 'translateZ(0)' }
 
 const stateStyles = {
-  entering: startStyle,
+  entering: endStyle,
   entered: endStyle,
   exiting: endExitStyle,
   exited: endExitStyle,
@@ -26,6 +26,15 @@ export default ({ children, open }) => {
     if (!mounted && open) {
       setMounted(true)
     }
+    let timeout
+    if (mounted && !open) {
+      timeout = setTimeout(() => {
+        setMounted(false)
+      }, duration)
+    }
+    return () => {
+      if (timeout) clearTimeout(timeout)
+    }
   }, [open])
 
   if (!mounted) return null
@@ -43,5 +52,4 @@ export default ({ children, open }) => {
       </div>
     }}
   </Transition>
-
 }
diff --git a/src/react/LoadingChunks.css b/src/react/LoadingChunks.css
new file mode 100644
index 000000000..324cbb5f1
--- /dev/null
+++ b/src/react/LoadingChunks.css
@@ -0,0 +1,12 @@
+@keyframes loading-chunks-loading-animation {
+    /* blink */
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
diff --git a/src/react/LoadingChunks.stories.tsx b/src/react/LoadingChunks.stories.tsx
new file mode 100644
index 000000000..5b91cc0cd
--- /dev/null
+++ b/src/react/LoadingChunks.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { useEffect, useState } from 'react'
+import LoadingChunks from './LoadingChunks'
+
+const meta: Meta<typeof LoadingChunks> = {
+  component: LoadingChunks,
+  render (args) {
+    const [stateMap, setStateMap] = useState(Object.fromEntries(args.regionFiles!.map(x => x.split('.').slice(1, 3).map(Number).map(y => y.toString()).join(',')).map(x => [x, 'loading'])))
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        // pick random and set to done
+        const random = Math.floor(Math.random() * args.regionFiles!.length)
+        const [x, z] = args.regionFiles![random].split('.').slice(1, 3).map(Number)
+        setStateMap(prev => ({ ...prev, [`${x},${z}`]: 'done' }))
+      }, 1000)
+      return () => clearInterval(interval)
+    }, [])
+
+    return <LoadingChunks stateMap={stateMap} {...args} />
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LoadingChunks>
+
+export const Primary: Story = {
+  args: {
+    regionFiles: [
+      'r.-1.-1.mca',
+      'r.-1.0.mca',
+      'r.0.-1.mca',
+      'r.0.0.mca',
+      'r.0.1.mca',
+    ],
+    playerChunk: {
+      x: -1,
+      z: 0
+    },
+    displayText: true,
+  },
+}
diff --git a/src/react/LoadingChunks.tsx b/src/react/LoadingChunks.tsx
new file mode 100644
index 000000000..03943eb20
--- /dev/null
+++ b/src/react/LoadingChunks.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react'
+import './LoadingChunks.css'
+
+export default ({ regionFiles = [] as string[], stateMap = {} as Record<string, string>, displayText = false, playerChunk = null as null | { x: number, z: number } }) => {
+  // visualize downloading chunks
+  const regionNumbers = regionFiles.map(x => x.split('.').slice(1, 3).map(Number))
+  const minX = Math.min(...regionNumbers.map(([x]) => x))
+  const maxX = Math.max(...regionNumbers.map(([x]) => x))
+  const minZ = Math.min(...regionNumbers.map(([, z]) => z))
+  const maxZ = Math.max(...regionNumbers.map(([, z]) => z))
+  const xChunks = maxX - minX + 1
+  const zChunks = maxZ - minZ + 1
+
+  return <div style={{
+    // maxWidth: '80%',
+    // maxHeight: '80%',
+    // aspectRatio: '1',
+    display: 'grid',
+    gridTemplateColumns: `repeat(${xChunks}, 1fr)`,
+    gridTemplateRows: `repeat(${zChunks}, 1fr)`,
+    gap: 1,
+    width: '110px',
+    height: '110px',
+  }}>
+    {Array.from({ length: xChunks * zChunks }).map((_, i) => {
+      const x = minX + i % xChunks
+      const z = minZ + Math.floor(i / xChunks)
+      const file = `r.${x}.${z}.mca`
+      const state = stateMap[file]
+      if (!regionFiles.includes(file)) return <div key={i} style={{ background: 'gray' }} />
+      return <Chunk key={i} x={x} z={z} state={state} displayText={displayText} currentPlayer={playerChunk?.x === x && playerChunk?.z === z} />
+    })}
+  </div>
+}
+
+const Chunk = ({ x, z, state, displayText, currentPlayer }) => {
+  const text = displayText ? `${x},${z}` : undefined
+
+  return <div style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: state === 'errored' ? 'red' : state === 'loading' ? 'white' : 'limegreen',
+    animation: state === 'loading' ? `loading-chunks-loading-animation 4s infinite cubic-bezier(0.4, 0, 0.2, 1)` : undefined,
+    transition: 'background 1s',
+    color: state === 'loading' ? 'black' : 'white',
+    position: 'relative',
+    zIndex: 1,
+  }}>
+    {/* green dot */}
+    {currentPlayer && <div style={{
+      position: 'absolute',
+      background: 'reed',
+      borderRadius: '50%',
+      width: '5px',
+      height: '5px',
+      zIndex: -1,
+    }} />}
+    {text}</div>
+}
diff --git a/src/react/PauseScreen.tsx b/src/react/PauseScreen.tsx
index 9f25810d3..1c4fdcd4e 100644
--- a/src/react/PauseScreen.tsx
+++ b/src/react/PauseScreen.tsx
@@ -1,9 +1,12 @@
 import { join } from 'path'
 import fs from 'fs'
 import { useEffect } from 'react'
-import { useSnapshot } from 'valtio'
+import { subscribe, useSnapshot } from 'valtio'
 import { usedServerPathsV1 } from 'flying-squid/dist/lib/modules/world'
 import { openURL } from 'prismarine-viewer/viewer/lib/simpleUtils'
+import { Vec3 } from 'vec3'
+import { generateSpiralMatrix } from 'flying-squid/dist/utils'
+import { subscribeKey } from 'valtio/utils'
 import {
   activeModalStack,
   showModal,
@@ -23,14 +26,29 @@ import Screen from './Screen'
 import styles from './PauseScreen.module.css'
 import { DiscordButton } from './DiscordButton'
 import { showNotification } from './NotificationProvider'
+import { appStatusState } from './AppStatusProvider'
+
+const waitForPotentialRender = async () => {
+  return new Promise<void>(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve as any))
+  })
+}
 
 export const saveToBrowserMemory = async () => {
   setLoadingScreenStatus('Saving world')
   try {
+    await new Promise<void>(resolve => {
+      subscribeKey(appStatusState, 'isDisplaying', () => {
+        if (appStatusState.isDisplaying) {
+          resolve()
+        }
+      })
+    })
     //@ts-expect-error
     const { worldFolder } = localServer.options
     const saveRootPath = await uniqueFileNameFromWorldName(worldFolder.split('/').pop(), `/data/worlds`)
     await mkdirRecursive(saveRootPath)
+    console.log('made world folder', saveRootPath)
     const allRootPaths = [...usedServerPathsV1]
     const allFilesToCopy = [] as string[]
     for (const dirBase of allRootPaths) {
@@ -46,39 +64,87 @@ export const saveToBrowserMemory = async () => {
       }
       allFilesToCopy.push(...res.map(x => join(dirBase, x)))
     }
-    const pathsSplit = allFilesToCopy.reduce((acc, cur, i) => {
-      if (i % 15 === 0) {
-        acc.push([])
-      }
-      acc.at(-1)!.push(cur)
-      return acc
-    // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter
-    }, [] as string[][])
+    console.log('paths collected')
+    const pathsSplitBasic = allFilesToCopy.filter(path => {
+      if (!path.startsWith('region/')) return true
+      const [x, z] = path.split('/').at(-1)!.split('.').slice(1, 3).map(Number)
+      return Math.abs(x) > 50 || Math.abs(z) > 50 // HACK: otherwise it's too big and we can't handle it in visual display
+    })
     let copied = 0
-    const upProgress = () => {
+    let isRegionFiles = false
+    const upProgress = (totalSize: number) => {
       copied++
-      const action = fsState.remoteBackend ? 'Downloading & copying' : 'Copying'
-      setLoadingScreenStatus(`${action} files (${copied}/${allFilesToCopy.length})`)
+      let action = fsState.remoteBackend ? 'Downloading & copying' : 'Copying'
+      action += isRegionFiles ? ' region files (world chunks)' : ' basic save files'
+      setLoadingScreenStatus(`${action} files (${copied}/${totalSize})`)
     }
-    for (const copyPaths of pathsSplit) {
-      // eslint-disable-next-line no-await-in-loop
-      await Promise.all(copyPaths.map(async (copyPath) => {
-        const srcPath = join(worldFolder, copyPath)
-        const savePath = join(saveRootPath, copyPath)
-        await mkdirRecursive(savePath)
-        await fs.promises.writeFile(savePath, await fs.promises.readFile(srcPath))
-        upProgress()
-      }))
+    const copyFiles = async (copyPaths: string[][]) => {
+      const totalSIze = copyPaths.flat().length
+      for (const copyFileGroup of copyPaths) {
+        // eslint-disable-next-line no-await-in-loop, @typescript-eslint/no-loop-func
+        await Promise.all(copyFileGroup.map(async (copyPath) => {
+          const srcPath = join(worldFolder, copyPath)
+          const savePath = join(saveRootPath, copyPath)
+          await mkdirRecursive(savePath)
+          await fs.promises.writeFile(savePath, await fs.promises.readFile(srcPath))
+          upProgress(totalSIze)
+          if (isRegionFiles) {
+            const regionFile = copyPath.split('/').at(-1)!
+            appStatusState.loadingChunksData![regionFile] = 'done'
+          }
+        }))
+        // eslint-disable-next-line no-await-in-loop
+        await waitForPotentialRender()
+      }
     }
+    // basic save files
+    await copyFiles(splitByCopySize(pathsSplitBasic))
+    setLoadingScreenStatus('Preparing world chunks copying')
+    await waitForPotentialRender()
+
+    // region files
+    isRegionFiles = true
+    copied = 0
+    const regionFiles = allFilesToCopy.filter(x => !pathsSplitBasic.includes(x))
+    const regionFilesNumbers = regionFiles.map(x => x.split('/').at(-1)!.split('.').slice(1, 3).map(Number))
+    const xMin = Math.min(...regionFilesNumbers.flatMap(x => x[0]))
+    const zMin = Math.min(...regionFilesNumbers.flatMap(x => x[1]))
+    const xMax = Math.max(...regionFilesNumbers.flatMap(x => x[0]))
+    const zMax = Math.max(...regionFilesNumbers.flatMap(x => x[1]))
+    const playerPosRegion = bot.entity.position.divide(new Vec3(32 * 16, 32 * 16, 32 * 16)).floored()
+    const maxDistantRegion = Math.max(
+      Math.abs(playerPosRegion.x - xMin),
+      Math.abs(playerPosRegion.z - zMin),
+      Math.abs(playerPosRegion.x - xMax),
+      Math.abs(playerPosRegion.z - zMax)
+    )
+    const spiral = generateSpiralMatrix(maxDistantRegion)
+    const filesWithSpiral = spiral.filter(x => allFilesToCopy.includes(`region/r.${x[0]}.${x[1]}.mca`)).map(x => `region/r.${x[0]}.${x[1]}.mca`)
+    if (filesWithSpiral.length !== regionFiles.length) throw new Error('Something went wrong with region files')
+
+    appStatusState.loadingChunksData = Object.fromEntries(regionFiles.map(x => [x.split('/').at(-1)!, 'loading']))
+    appStatusState.loadingChunksDataPlayerChunk = { x: playerPosRegion.x, z: playerPosRegion.z }
+    await copyFiles(splitByCopySize(filesWithSpiral, 10))
 
     return saveRootPath
   } catch (err) {
+    console.error(err)
     void showOptionsModal(`Error while saving the world: ${err.message}`, [])
   } finally {
     setLoadingScreenStatus(undefined)
   }
 }
 
+const splitByCopySize = (files: string[], copySize = 15) => {
+  return files.reduce<string[][]>((acc, cur, i) => {
+    if (i % copySize === 0) {
+      acc.push([])
+    }
+    acc.at(-1)!.push(cur)
+    return acc
+  }, [])
+}
+
 export default () => {
   const qsParams = new URLSearchParams(window.location.search)
   const lockConnect = qsParams?.get('lockConnect') === 'true'
diff --git a/src/utils.ts b/src/utils.ts
index b3c479a9f..f6a6176f0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,6 @@
-import { hideModal, isGameActive, miscUiState, showModal } from './globalState'
+import { activeModalStack, hideModal, isGameActive, miscUiState, showModal } from './globalState'
 import { options } from './optionsStorage'
-import { appStatusState } from './react/AppStatusProvider'
+import { appStatusState, resetAppStatusState } from './react/AppStatusProvider'
 import { notificationProxy, showNotification } from './react/NotificationProvider'
 
 export const goFullscreen = async (doToggle = false) => {
@@ -139,7 +139,10 @@ export const setLoadingScreenStatus = function (status: string | undefined | nul
     return
   }
 
-  // todo update in component instead
+  if (!activeModalStack.some(x => x.reactType === 'app-status')) {
+    // just showing app status
+    resetAppStatusState()
+  }
   showModal({ reactType: 'app-status' })
   if (appStatusState.isError) {
     miscUiState.gameLoaded = false

From 266d34c1cfaccba3a3d346d8f107b1ecad02007c Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 05:48:00 +0300
Subject: [PATCH 3/9] fixup for player pos in chunk loader

---
 src/react/LoadingChunks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/react/LoadingChunks.tsx b/src/react/LoadingChunks.tsx
index 03943eb20..8b7a5b866 100644
--- a/src/react/LoadingChunks.tsx
+++ b/src/react/LoadingChunks.tsx
@@ -50,7 +50,7 @@ const Chunk = ({ x, z, state, displayText, currentPlayer }) => {
     {/* green dot */}
     {currentPlayer && <div style={{
       position: 'absolute',
-      background: 'reed',
+      background: 'red',
       borderRadius: '50%',
       width: '5px',
       height: '5px',

From c6ea9f79dcbb7953b1e84033cce890bba985165c Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 19:02:02 +0300
Subject: [PATCH 4/9] fix(regression): instruct the browser that the web app
 uses dark mode (which fixes some edge-case issues)

---
 src/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles.css b/src/styles.css
index 185956e59..429d4991f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -28,6 +28,7 @@ html {
   height: 100vh;
   overflow: hidden;
   color: white;
+  prefers-color-scheme: dark;
 }
 
 html.disable-assets {

From a9d2104dbf57f1ff5686aed29d67298ca640f524 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 19:14:09 +0300
Subject: [PATCH 5/9] fix: Force disable dark reader as it was making the
 crosshair (reticle) black

---
 index.html     | 1 +
 src/styles.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 8182f783e..304ee0a6c 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta name="darkreader-lock">
     <script>
       window.startLoad = Date.now()
     </script>
diff --git a/src/styles.css b/src/styles.css
index 429d4991f..43eb9acbc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -28,7 +28,7 @@ html {
   height: 100vh;
   overflow: hidden;
   color: white;
-  prefers-color-scheme: dark;
+  color-scheme: dark;
 }
 
 html.disable-assets {

From 65ba687e0869f2b2d5bef2088fd8e59c811515b8 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 4 Sep 2024 19:17:02 +0300
Subject: [PATCH 6/9] force make crosshair transparent to avoid issues with old
 darkreader safari version

---
 src/react/Crosshair.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/react/Crosshair.css b/src/react/Crosshair.css
index 7076f475a..c49740175 100644
--- a/src/react/Crosshair.css
+++ b/src/react/Crosshair.css
@@ -10,6 +10,7 @@
   transform: translate(-50%, -50%);
   image-rendering: pixelated;
   pointer-events: none;
+  background-color: transparent !important;
 }
 
 .crosshair-indicator {

From 9dfff40afd61df4e684b3130d9a6a62c5a54a275 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Thu, 5 Sep 2024 15:13:26 +0300
Subject: [PATCH 7/9] fix(regression): fix dropped items display (for preflat
 versions it is still broken like many other entities display)

---
 .../viewer/lib/{entities.js => entities.ts}   | 103 ++++++++++--------
 src/index.ts                                  |   2 +-
 2 files changed, 59 insertions(+), 46 deletions(-)
 rename prismarine-viewer/viewer/lib/{entities.js => entities.ts} (87%)

diff --git a/prismarine-viewer/viewer/lib/entities.js b/prismarine-viewer/viewer/lib/entities.ts
similarity index 87%
rename from prismarine-viewer/viewer/lib/entities.js
rename to prismarine-viewer/viewer/lib/entities.ts
index 59d1164a4..281a442e5 100644
--- a/prismarine-viewer/viewer/lib/entities.js
+++ b/prismarine-viewer/viewer/lib/entities.ts
@@ -17,10 +17,9 @@ import { disposeObject } from './threeJsUtils'
 
 export const TWEEN_DURATION = 120
 
-/**
- * @param {string} username
- */
-function getUsernameTexture(username, { fontFamily = 'sans-serif' }) {
+type PlayerObjectType = PlayerObject & { animation?: PlayerAnimation }
+
+function getUsernameTexture (username: string, { fontFamily = 'sans-serif' }: any) {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
   if (!ctx) throw new Error('Could not get 2d context')
@@ -64,7 +63,7 @@ const addNametag = (entity, options, mesh) => {
 // todo cleanup
 const nametags = {}
 
-function getEntityMesh(entity, scene, options, overrides) {
+function getEntityMesh (entity, scene, options, overrides) {
   if (entity.name) {
     try {
       // https://github.com/PrismarineJS/prismarine-viewer/pull/410
@@ -94,23 +93,41 @@ function getEntityMesh(entity, scene, options, overrides) {
   return cube
 }
 
+export type SceneEntity = THREE.Object3D & {
+  playerObject?: PlayerObject & {
+    animation?: PlayerAnimation
+  }
+  username?: string
+  additionalCleanup?: () => void
+}
+
 export class Entities extends EventEmitter {
-  constructor(scene) {
+  entities = {} as Record<string, SceneEntity>
+  entitiesOptions: {
+    fontFamily?: string
+  } = {}
+  debugMode: string
+  onSkinUpdate: () => void
+  clock = new THREE.Clock()
+  rendering = true
+  itemsTexture: THREE.Texture | null = null
+  getItemUv: undefined | ((idOrName: number | string) => {
+    texture: THREE.Texture;
+    u: number;
+    v: number;
+    su?: number;
+    sv?: number;
+    size?: number;
+  })
+
+  constructor (public scene: THREE.Scene) {
     super()
-    /** @type {THREE.Scene} */
-    this.scene = scene
-    this.entities = {}
     this.entitiesOptions = {}
     this.debugMode = 'none'
     this.onSkinUpdate = () => { }
-    this.clock = new THREE.Clock()
-    this.rendering = true
-    /** @type {THREE.Texture | null} */
-    this.itemsTexture = null
-    this.getItemUv = undefined
   }
 
-  clear() {
+  clear () {
     for (const mesh of Object.values(this.entities)) {
       this.scene.remove(mesh)
       disposeObject(mesh)
@@ -118,10 +135,10 @@ export class Entities extends EventEmitter {
     this.entities = {}
   }
 
-  setDebugMode(mode, /** @type {THREE.Object3D?} */entity = null) {
+  setDebugMode (mode: string, entity: THREE.Object3D | null = null) {
     this.debugMode = mode
     for (const mesh of entity ? [entity] : Object.values(this.entities)) {
-      const boxHelper = mesh.children.find(c => c.name === 'debug')
+      const boxHelper = mesh.children.find(c => c.name === 'debug')!
       boxHelper.visible = false
       if (this.debugMode === 'basic') {
         boxHelper.visible = true
@@ -130,7 +147,7 @@ export class Entities extends EventEmitter {
     }
   }
 
-  setRendering(rendering, /** @type {THREE.Object3D?} */entity = null) {
+  setRendering (rendering: boolean, entity: THREE.Object3D | null = null) {
     this.rendering = rendering
     for (const ent of entity ? [entity] : Object.values(this.entities)) {
       if (rendering) {
@@ -141,7 +158,7 @@ export class Entities extends EventEmitter {
     }
   }
 
-  render() {
+  render () {
     const dt = this.clock.getDelta()
     for (const entityId of Object.keys(this.entities)) {
       const playerObject = this.getPlayerObject(entityId)
@@ -151,9 +168,8 @@ export class Entities extends EventEmitter {
     }
   }
 
-  getPlayerObject(entityId) {
-    /** @type {(PlayerObject & { animation?: PlayerAnimation }) | undefined} */
-    const playerObject = this.entities[entityId]?.playerObject
+  getPlayerObject (entityId: string | number) {
+    const playerObject = this.entities[entityId]?.playerObject as PlayerObjectType | undefined
     return playerObject
   }
 
@@ -161,7 +177,7 @@ export class Entities extends EventEmitter {
   defaultSteveTexture
 
   // true means use default skin url
-  updatePlayerSkin(entityId, username, /** @type {string | true} */skinUrl, /** @type {string | true | undefined} */capeUrl = undefined) {
+  updatePlayerSkin (entityId: string | number, username: string | undefined, skinUrl: string | true, capeUrl: string | true | undefined = undefined) {
     let playerObject = this.getPlayerObject(entityId)
     if (!playerObject) return
     // const username = this.entities[entityId].username
@@ -188,7 +204,6 @@ export class Entities extends EventEmitter {
       skinTexture.magFilter = THREE.NearestFilter
       skinTexture.minFilter = THREE.NearestFilter
       skinTexture.needsUpdate = true
-      //@ts-expect-error
       playerObject.skin.map = skinTexture
       playerObject.skin.modelType = inferModelType(skinTexture.image)
 
@@ -244,14 +259,14 @@ export class Entities extends EventEmitter {
       playerObject.cape.map = null
     }
 
-    function isCanvasBlank(canvas) {
+    function isCanvasBlank (canvas) {
       return !canvas.getContext('2d')
         .getImageData(0, 0, canvas.width, canvas.height).data
         .some(channel => channel !== 0)
     }
   }
 
-  playAnimation(entityPlayerId, /** @type {'walking' | 'running' | 'oneSwing' | 'idle'} */animation) {
+  playAnimation (entityPlayerId, animation: 'walking' | 'running' | 'oneSwing' | 'idle') {
     const playerObject = this.getPlayerObject(entityPlayerId)
     if (!playerObject) return
 
@@ -271,7 +286,7 @@ export class Entities extends EventEmitter {
 
   }
 
-  parseEntityLabel(jsonLike) {
+  parseEntityLabel (jsonLike) {
     if (!jsonLike) return
     try {
       const parsed = typeof jsonLike === 'string' ? mojangson.simplify(mojangson.parse(jsonLike)) : nbt.simplify(jsonLike)
@@ -282,22 +297,24 @@ export class Entities extends EventEmitter {
     }
   }
 
-  getItemMesh(item) {
+  getItemMesh (item) {
     const textureUv = this.getItemUv?.(item.itemId ?? item.blockId)
     if (textureUv) {
       // todo use geometry buffer uv instead!
       const { u, v, size, su, sv, texture } = textureUv
       const itemsTexture = texture.clone()
       itemsTexture.flipY = true
-      itemsTexture.offset.set(u, 1 - v - (sv ?? size))
-      itemsTexture.repeat.set(su ?? size, sv ?? size)
+      const sizeY = (sv ?? size)!
+      const sizeX = (su ?? size)!
+      itemsTexture.offset.set(u, 1 - v - sizeY)
+      itemsTexture.repeat.set(sizeX, sizeY)
       itemsTexture.needsUpdate = true
       itemsTexture.magFilter = THREE.NearestFilter
       itemsTexture.minFilter = THREE.NearestFilter
       const itemsTextureFlipped = itemsTexture.clone()
       itemsTextureFlipped.repeat.x *= -1
       itemsTextureFlipped.needsUpdate = true
-      itemsTextureFlipped.offset.set(u + (su ?? size), 1 - v - (sv ?? size))
+      itemsTextureFlipped.offset.set(u + (sizeX), 1 - v - sizeY)
       const material = new THREE.MeshStandardMaterial({
         map: itemsTexture,
         transparent: true,
@@ -322,7 +339,7 @@ export class Entities extends EventEmitter {
     }
   }
 
-  update(/** @type {import('prismarine-entity').Entity & {delete?, pos}} */entity, overrides) {
+  update (entity: import('prismarine-entity').Entity & { delete?; pos }, overrides) {
     let isPlayerModel = entity.name === 'player'
     if (entity.name === 'zombie' || entity.name === 'zombie_villager' || entity.name === 'husk') {
       isPlayerModel = true
@@ -332,21 +349,20 @@ export class Entities extends EventEmitter {
       const group = new THREE.Group()
       let mesh
       if (entity.name === 'item') {
-        /** @type {any} */
-        //@ts-expect-error
-        const item = entity.metadata?.find(m => typeof m === 'object' && m?.itemCount)
+        const item = entity.metadata?.find((m: any) => typeof m === 'object' && m?.itemCount)
         if (item) {
           const object = this.getItemMesh(item)
           if (object) {
-            object.scale.set(0.5, 0.5, 0.5)
-            object.position.set(0, 0.2, 0)
+            mesh = object.mesh
+            mesh.scale.set(0.5, 0.5, 0.5)
+            mesh.position.set(0, 0.2, 0)
             // set faces
             // mesh.position.set(targetPos.x + 0.5 + 2, targetPos.y + 0.5, targetPos.z + 0.5)
             // viewer.scene.add(mesh)
             const clock = new THREE.Clock()
-            object.onBeforeRender = () => {
+            mesh.onBeforeRender = () => {
               const delta = clock.getDelta()
-              object.rotation.y += delta
+              mesh.rotation.y += delta
             }
             //@ts-expect-error
             group.additionalCleanup = () => {
@@ -359,8 +375,7 @@ export class Entities extends EventEmitter {
       } else if (isPlayerModel) {
         // CREATE NEW PLAYER ENTITY
         const wrapper = new THREE.Group()
-        /** @type {PlayerObject & { animation?: PlayerAnimation }} */
-        const playerObject = new PlayerObject()
+        const playerObject = new PlayerObject() as PlayerObjectType
         playerObject.position.set(0, 16, 0)
 
         //@ts-expect-error
@@ -470,9 +485,7 @@ export class Entities extends EventEmitter {
     }
 
     if (e?.playerObject && overrides?.rotation?.head) {
-      /** @type {PlayerObject} */
-      // eslint-disable-next-line prefer-destructuring
-      const playerObject = e.playerObject
+      const playerObject = e.playerObject as PlayerObjectType
       const headRotationDiff = overrides.rotation.head.y ? overrides.rotation.head.y - entity.yaw : 0
       playerObject.skin.head.rotation.y = -headRotationDiff
       playerObject.skin.head.rotation.x = overrides.rotation.head.x ? - overrides.rotation.head.x : 0
@@ -497,7 +510,7 @@ export class Entities extends EventEmitter {
     }
   }
 
-  handleDamageEvent(entityId, damageAmount) {
+  handleDamageEvent (entityId, damageAmount) {
     const entityMesh = this.entities[entityId]?.children.find(c => c.name === 'mesh')
     if (entityMesh) {
       entityMesh.traverse((child) => {
diff --git a/src/index.ts b/src/index.ts
index 39a110a38..da73abea3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -185,7 +185,7 @@ viewer.entities.getItemUv = (idOrName: number | string) => {
       u: 0,
       v: 0,
       size: 16 / viewer.world.material.map!.image.width,
-      texture: viewer.world.material.map
+      texture: viewer.world.material.map!
     }
   }
 }

From ea5a48967bd6f037e19ad8e5fc915e059cc0ec37 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Thu, 5 Sep 2024 16:48:04 +0300
Subject: [PATCH 8/9] fix: improve signs viewer by allow to copy position and
 select signs

---
 .../viewer/lib/worldrendererThree.ts          |  4 --
 src/react/ModuleSignsViewer.tsx               | 37 +++++++++++++++----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/prismarine-viewer/viewer/lib/worldrendererThree.ts b/prismarine-viewer/viewer/lib/worldrendererThree.ts
index deec264e4..17abfad95 100644
--- a/prismarine-viewer/viewer/lib/worldrendererThree.ts
+++ b/prismarine-viewer/viewer/lib/worldrendererThree.ts
@@ -29,10 +29,6 @@ export class WorldRendererThree extends WorldRendererCommon {
     super(config)
     this.starField = new StarField(scene)
     this.holdingBlock = new HoldingBlock(this.scene)
-    this.onHandItemSwitch({
-      name: 'furnace',
-      properties: {}
-    })
 
     this.renderUpdateEmitter.on('textureDownloaded', () => {
       if (this.holdingBlock.toBeRenderedItem) {
diff --git a/src/react/ModuleSignsViewer.tsx b/src/react/ModuleSignsViewer.tsx
index a9e1b9ad0..2115c352a 100644
--- a/src/react/ModuleSignsViewer.tsx
+++ b/src/react/ModuleSignsViewer.tsx
@@ -1,26 +1,45 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { WorldRendererThree } from 'prismarine-viewer/viewer/lib/worldrendererThree'
 import FullScreenWidget from './FullScreenWidget'
 
-export const name = 'signs'
+export const name = 'loaded world signs'
 
 export default () => {
+  const [selected, setSelected] = useState([] as string[])
+  const allSignsPos = [] as string[]
   const signs = viewer.world instanceof WorldRendererThree ? [...viewer.world.chunkTextures.values()].flatMap(textures => {
     return Object.entries(textures).map(([signPosKey, texture]) => {
+      allSignsPos.push(signPosKey)
       const pos = signPosKey.split(',').map(Number)
+      const isSelected = selected.includes(signPosKey)
       return <div key={signPosKey}>
-        <div style={{ color: 'white' }}>{pos.join(', ')}</div>
-        <div style={{ background: 'rgba(255, 255, 255, 0.5)', padding: 5, borderRadius: 5 }}>
+        <div style={{ color: 'white', userSelect: 'text', fontSize: 8, }}>{pos.join(', ')}</div>
+        <div
+          style={{ background: isSelected ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)', padding: 5, borderRadius: 5, cursor: 'pointer' }}
+          onClick={() => setSelected(selected.includes(signPosKey) ? selected.filter(x => x !== signPosKey) : [...selected, signPosKey])}>
           <AddElem elem={texture.image} />
         </div>
       </div>
     })
   }) : []
 
-  return <FullScreenWidget name='signs' title='Loaded Signs'>
+  return <FullScreenWidget name={name} title='Loaded Signs'>
     <div>
-      {signs.length} signs currently loaded:
+      {signs.length} signs currently in the scene:
     </div>
+    <div
+      style={{ cursor: 'pointer', }} onClick={() => {
+        // toggle all
+        if (selected.length === allSignsPos.length) {
+          setSelected([])
+          return
+        }
+        setSelected([...allSignsPos])
+      }}>Select All</div>
+    {selected.length && <div
+      style={{ cursor: 'pointer', }} onClick={() => {
+        void navigator.clipboard.writeText(selected.join('\n'))
+      }}>Copy Selected Signs</div>}
     {signs}
   </FullScreenWidget>
 }
@@ -29,13 +48,17 @@ const AddElem = ({ elem }) => {
   const ref = useRef<HTMLDivElement>(null)
   useEffect(() => {
     elem.style.width = '100%'
+    elem.style.height = '100%'
     ref.current!.appendChild(elem)
     return () => {
       elem.remove()
     }
   }, [])
 
-  return <div ref={ref} />
+  return <div
+    ref={ref} style={{
+      height: '35px',
+    }} />
 }
 
 // for (const key of Object.keys(viewer.world.sectionObjects)) {

From d6964b89ebfa6bd9bb1dd3edc90f28a274df53e3 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Thu, 5 Sep 2024 18:23:05 +0300
Subject: [PATCH 9/9] fix typings

---
 src/entities.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/entities.ts b/src/entities.ts
index b5daa2206..de97fb578 100644
--- a/src/entities.ts
+++ b/src/entities.ts
@@ -47,10 +47,10 @@ customEvents.on('gameLoaded', () => {
     window.debugEntityMetadata ??= {}
     window.debugEntityMetadata[e.username] = e
     // todo entity spawn timing issue, check perf
-    if (viewer.entities.entities[e.id]?.playerObject) {
+    const playerObject = viewer.entities.entities[e.id]?.playerObject
+    if (playerObject) {
       // todo throttle!
       bot.tracker.trackEntity(e)
-      const { playerObject } = viewer.entities.entities[e.id]
       playerObject.backEquipment = e.equipment.some((item) => item?.name === 'elytra') ? 'elytra' : 'cape'
       if (playerObject.cape.map === null) {
         playerObject.cape.visible = false