feat: minimap and full screen map (disabled by default) (#147)

package.json

@@ -92,6 +92,7 @@
     "react-dom": "^18.2.0",
     "react-select": "^5.8.0",
     "react-transition-group": "^4.4.5",
+    "react-zoom-pan-pinch": "3.4.4",
     "remark": "^15.0.1",
     "sanitize-filename": "^1.6.3",
     "skinview3d": "^3.0.1",

prismarine-viewer/viewer/lib/mesher/models.ts

@@ -4,7 +4,9 @@ import legacyJson from '../../../../src/preflatMap.json'
 import { BlockType } from '../../../examples/shared'
 import { World, BlockModelPartsResolved, WorldBlock as Block } from './world'
 import { BlockElement, buildRotationMatrix, elemFaces, matmul3, matmulmat3, vecadd3, vecsub3 } from './modelsGeometryCommon'
-import { MesherGeometryOutput } from './shared'
+import { INVISIBLE_BLOCKS } from './worldConstants'
+import { MesherGeometryOutput, HighestBlockInfo } from './shared'
+
 
 let blockProvider: WorldBlockProvider
 
@@ -439,8 +441,6 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
   }
 }
 
-const invisibleBlocks = new Set(['air', 'cave_air', 'void_air', 'barrier'])
-
 const isBlockWaterlogged = (block: Block) => block.getProperties().waterlogged === true || block.getProperties().waterlogged === 'true'
 
 let unknownBlockModel: BlockModelPartsResolved
@@ -464,7 +464,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
     // todo this can be removed here
     signs: {},
     // isFull: true,
-    highestBlocks: {}, // todo migrate to map for 2% boost perf
+    highestBlocks: new Map<string, HighestBlockInfo>([]),
     hadErrors: false,
     blocksCount: 0
   }
@@ -474,16 +474,13 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
     for (cursor.z = sz; cursor.z < sz + 16; cursor.z++) {
       for (cursor.x = sx; cursor.x < sx + 16; cursor.x++) {
         let block = world.getBlock(cursor, blockProvider, attr)!
-        if (!invisibleBlocks.has(block.name)) {
-          const highest = attr.highestBlocks[`${cursor.x},${cursor.z}`]
+        if (!INVISIBLE_BLOCKS.has(block.name)) {
+          const highest = attr.highestBlocks.get(`${cursor.x},${cursor.z}`)
           if (!highest || highest.y < cursor.y) {
-            attr.highestBlocks[`${cursor.x},${cursor.z}`] = {
-              y: cursor.y,
-              name: block.name
-            }
+            attr.highestBlocks.set(`${cursor.x},${cursor.z}`, { y: cursor.y, stateId: block.stateId, biomeId: block.biome.id })
           }
         }
-        if (invisibleBlocks.has(block.name)) continue
+        if (INVISIBLE_BLOCKS.has(block.name)) continue
         if ((block.name.includes('_sign') || block.name === 'sign') && !world.config.disableSignsMapsSupport) {
           const key = `${cursor.x},${cursor.y},${cursor.z}`
           const props: any = block.getProperties()
@@ -531,7 +528,7 @@ export function getSectionGeometry (sx, sy, sz, world: World) {
           renderLiquid(world, cursor, blockProvider.getTextureInfo('lava_still'), block.type, biome, false, attr)
           attr.blocksCount++
         }
-        if (block.name !== 'water' && block.name !== 'lava' && !invisibleBlocks.has(block.name)) {
+        if (block.name !== 'water' && block.name !== 'lava' && !INVISIBLE_BLOCKS.has(block.name)) {
           // cache
           let { models } = block
 

prismarine-viewer/viewer/lib/mesher/shared.ts

@@ -32,7 +32,9 @@ export type MesherGeometryOutput = {
   tiles: Record<string, BlockType>,
   signs: Record<string, any>,
   // isFull: boolean
-  highestBlocks: Record<string, { y: number, name: string }>
+  highestBlocks: Map<string, HighestBlockInfo>
   hadErrors: boolean
   blocksCount: number
 }
+
+export type HighestBlockInfo = { y: number, stateId: number | undefined, biomeId: number | undefined }

prismarine-viewer/viewer/lib/mesher/test/tests.test.ts

@@ -1,5 +1,6 @@
 import { test, expect } from 'vitest'
 import supportedVersions from '../../../../../src/supportedVersions.mjs'
+import { INVISIBLE_BLOCKS } from '../worldConstants'
 import { setup } from './mesherTester'
 
 const lastVersion = supportedVersions.at(-1)
@@ -16,7 +17,7 @@ const addPositions = [
 
 test('Known blocks are not rendered', () => {
   const { mesherWorld, getGeometry, pos, mcData } = setup(lastVersion, addPositions as any)
-  const ignoreAsExpected = new Set(['air', 'cave_air', 'void_air', 'barrier', 'water', 'lava', 'moving_piston', 'light'])
+  const ignoreAsExpected = new Set([...INVISIBLE_BLOCKS, 'water', 'lava', 'moving_piston', 'light'])
 
   let time = 0
   let times = 0

prismarine-viewer/viewer/lib/mesher/worldConstants.ts

@@ -0,0 +1 @@
+export const INVISIBLE_BLOCKS = new Set(['air', 'void_air', 'cave_air', 'barrier'])

prismarine-viewer/viewer/lib/worldrendererCommon.ts

@@ -14,7 +14,7 @@ import TypedEmitter from 'typed-emitter'
 import { dynamicMcDataFiles } from '../../buildMesherConfig.mjs'
 import { toMajorVersion } from '../../../src/utils'
 import { buildCleanupDecorator } from './cleanupDecorator'
-import { MesherGeometryOutput, defaultMesherConfig } from './mesher/shared'
+import { defaultMesherConfig, HighestBlockInfo, MesherGeometryOutput } from './mesher/shared'
 import { chunkPos } from './simpleUtils'
 import { HandItemBlock } from './holdingBlock'
 import { updateStatText } from './ui/newStats'
@@ -62,6 +62,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     dirty (pos: Vec3, value: boolean): void
     update (/* pos: Vec3, value: boolean */): void
     textureDownloaded (): void
+    chunkFinished (key: string): void
   }>
   customTexturesDataUrl = undefined as string | undefined
   @worldCleanup()
@@ -81,7 +82,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   handleResize = () => { }
   mesherConfig = defaultMesherConfig
   camera: THREE.PerspectiveCamera
-  highestBlocks: Record<string, { y: number, name: string }> = {}
+  highestBlocks = new Map<string, HighestBlockInfo>()
   blockstatesModels: any
   customBlockStates: Record<string, any> | undefined
   customModels: Record<string, any> | undefined
@@ -134,10 +135,10 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
         this.handleWorkerMessage(data)
         if (data.type === 'geometry') {
           const geometry = data.geometry as MesherGeometryOutput
-          for (const key in geometry.highestBlocks) {
-            const highest = geometry.highestBlocks[key]
-            if (!this.highestBlocks[key] || this.highestBlocks[key].y < highest.y) {
-              this.highestBlocks[key] = highest
+          for (const [key, highest] of geometry.highestBlocks.entries()) {
+            const currHighest = this.highestBlocks.get(key)
+            if (!currHighest || currHighest.y < highest.y) {
+              this.highestBlocks.set(key, highest)
             }
           }
           const chunkCoords = data.key.split(',').map(Number)
@@ -156,6 +157,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
               return x === chunkCoords[0] && z === chunkCoords[2]
             })) {
               this.finishedChunks[`${chunkCoords[0]},${chunkCoords[2]}`] = true
+              this.renderUpdateEmitter.emit(`chunkFinished`, `${chunkCoords[0] / 16},${chunkCoords[2] / 16}`)
             }
           }
           if (this.sectionsOutstanding.size === 0) {
@@ -363,7 +365,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     const endZ = Math.ceil((z + 1) / 16) * 16
     for (let x = startX; x < endX; x += 16) {
       for (let z = startZ; z < endZ; z += 16) {
-        delete this.highestBlocks[`${x},${z}`]
+        this.highestBlocks.delete(`${x},${z}`)
       }
     }
   }

src/controls.ts

@@ -7,7 +7,7 @@ import { ControMax } from 'contro-max/build/controMax'
 import { CommandEventArgument, SchemaCommandInput } from 'contro-max/build/types'
 import { stringStartsWith } from 'contro-max/build/stringUtils'
 import { UserOverrideCommand, UserOverridesConfig } from 'contro-max/build/types/store'
-import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCurrentModal, miscUiState, loadedGameState } from './globalState'
+import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCurrentModal, miscUiState, loadedGameState, hideModal } from './globalState'
 import { goFullscreen, pointerLock, reloadChunks } from './utils'
 import { options } from './optionsStorage'
 import { openPlayerInventory } from './inventoryWindows'
@@ -54,6 +54,7 @@ export const contro = new ControMax({
     ui: {
       toggleFullscreen: ['F11'],
       back: [null/* 'Escape' */, 'B'],
+      toggleMap: ['KeyM'],
       leftClick: [null, 'A'],
       rightClick: [null, 'Y'],
       speedupCursor: [null, 'Left Stick'],
@@ -424,6 +425,14 @@ contro.on('trigger', ({ command }) => {
   if (command === 'ui.toggleFullscreen') {
     void goFullscreen(true)
   }
+
+  if (command === 'ui.toggleMap') {
+    if (activeModalStack.at(-1)?.reactType === 'full-map') {
+      hideModal({ reactType: 'full-map' })
+    } else {
+      showModal({ reactType: 'full-map' })
+    }
+  }
 })
 
 contro.on('release', ({ command }) => {

src/globalState.ts

@@ -1,6 +1,7 @@
 //@ts-check
 
 import { proxy, ref, subscribe } from 'valtio'
+import { WorldWarp } from 'flying-squid/dist/lib/modules/warps'
 import { pointerLock } from './utils'
 import type { OptionsGroupType } from './optionsGuiScheme'
 
@@ -153,6 +154,7 @@ export const gameAdditionalState = proxy({
   isFlying: false,
   isSprinting: false,
   isSneaking: false,
+  warps: [] as WorldWarp[]
 })
 
 window.gameAdditionalState = gameAdditionalState

src/optionsGuiScheme.tsx

@@ -250,6 +250,19 @@ export const guiOptionsScheme: {
         ],
       },
     },
+    {
+      custom () {
+        return <Category>Map</Category>
+      },
+      showMinimap: {
+        text: 'Enable Minimap',
+        values: [
+          'always',
+          'singleplayer',
+          'never'
+        ],
+      },
+    },
     {
       custom () {
         return <Category>Experimental</Category>

src/optionsStorage.ts

@@ -88,6 +88,8 @@ const defaultOptions = {
   /** Wether to popup sign editor on server action */
   autoSignEditor: true,
   wysiwygSignEditor: 'auto' as 'auto' | 'always' | 'never',
+  showMinimap: 'never' as 'always' | 'singleplayer' | 'never',
+  minimapOptimizations: true,
   displayBossBars: false, // boss bar overlay was removed for some reason, enable safely
   disabledUiParts: [] as string[],
   neighborChunkUpdates: true

src/react/Fullmap.css

@@ -0,0 +1,13 @@
+
+.map {
+  width: 70% !important;
+  height: 80% !important;
+  border: 1px solid black;
+}
+
+@media (max-width: 500px) {
+  .map {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}