Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

minimap fixes #249

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
+201 −308
Open

minimap fixes #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c4fb07
minimap fixes
Jan 13, 2025
9725e78
exclude uncaught exception cypress
Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions cypress/e2e/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ const testWorldLoad = () => {
}

it('Loads & renders singleplayer', () => {
cy.on('uncaught:exception', (err, runnable, promise) => {
if (promise) return false
})
cleanVisit('/?singleplayer=1')
setOptions({
localServerOptions: {
Expand Down
15 changes: 11 additions & 4 deletions prismarine-viewer/viewer/lib/worldrendererCommon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,18 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
this.geometryReceiveCount[data.workerIndex] ??= 0
this.geometryReceiveCount[data.workerIndex]++
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)
}
}
// 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
// }
// }
const chunkCoords = data.key.split(',').map(Number)
this.lastChunkDistance = Math.max(...this.getDistance(new Vec3(chunkCoords[0], 0, chunkCoords[2])))
}
Expand All @@ -197,6 +203,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}`)
}
}
this.checkAllFinished()
Expand Down
14 changes: 7 additions & 7 deletions src/controls.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,13 +432,13 @@ contro.on('trigger', ({ command }) => {
void goFullscreen(true)
}

if (command === 'ui.toggleMap') {
if (activeModalStack.at(-1)?.reactType === 'full-map') {
hideModal({ reactType: 'full-map' })
} else {
showModal({ reactType: 'full-map' })
}
}
// if (command === 'ui.toggleMap') {
// if (activeModalStack.at(-1)?.reactType === 'full-map') {
// hideModal({ reactType: 'full-map' })
// } else {
// showModal({ reactType: 'full-map' })
// }
// }
})

contro.on('release', ({ command }) => {
Expand Down
90 changes: 29 additions & 61 deletions src/react/Fullmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Vec3 } from 'vec3'
import { useRef, useEffect, useState, CSSProperties, Dispatch, SetStateAction } from 'react'
import { WorldWarp } from 'flying-squid/dist/lib/modules/warps'
import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch'
import { MinimapDrawer, DrawerAdapter, ChunkInfo } from './MinimapDrawer'
import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer'
import Button from './Button'
import Input from './Input'
import './Fullmap.css'
Expand All @@ -18,7 +18,7 @@ type FullmapProps = {
export default ({ toggleFullMap, adapter }: FullmapProps) => {
const [grid, setGrid] = useState(() => new Set<string>())
const zoomRef = useRef<ReactZoomPanPinchRef>(null)
const redrawCell = useRef(false)
const [redraw, setRedraw] = useState<Set<string> | null>(null)
const [lastWarpPos, setLastWarpPos] = useState({ x: 0, y: 0, z: 0 })
const stateRef = useRef({ scale: 1, positionX: 0, positionY: 0 })
const cells = useRef({ columns: 0, rows: 0 })
Expand Down Expand Up @@ -73,7 +73,7 @@ export default ({ toggleFullMap, adapter }: FullmapProps) => {
zIndex: '-1'
}}
onClick={toggleFullMap}
/>
> </div>
: <Button
icon="close-box"
onClick={toggleFullMap}
Expand Down Expand Up @@ -129,7 +129,7 @@ export default ({ toggleFullMap, adapter }: FullmapProps) => {
worldZ={playerChunkTop + y / 4 - offsetY}
setIsWarpInfoOpened={setIsWarpInfoOpened}
setLastWarpPos={setLastWarpPos}
redraw={redrawCell.current}
redraw={redraw}
setInitWarp={setInitWarp}
setWarpPreview={setWarpPreview}
/>
Expand All @@ -156,9 +156,7 @@ export default ({ toggleFullMap, adapter }: FullmapProps) => {
adapter={adapter}
warpPos={lastWarpPos}
setIsWarpInfoOpened={setIsWarpInfoOpened}
afterWarpIsSet={() => {
redrawCell.current = !redrawCell.current
}}
setRedraw={setRedraw}
initWarp={initWarp}
setInitWarp={setInitWarp}
toggleFullMap={toggleFullMap}
Expand All @@ -179,16 +177,14 @@ const MapChunk = (
worldZ: number,
setIsWarpInfoOpened: (x: boolean) => void,
setLastWarpPos: (obj: { x: number, y: number, z: number }) => void,
redraw?: boolean
redraw?: Set<string> | null
setInitWarp?: (warp: WorldWarp | undefined) => void
setWarpPreview?: (warpInfo) => void
}
) => {
const containerRef = useRef(null)
const drawerRef = useRef<MinimapDrawer | null>(null)
const touchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
const canvasRef = useRef<HTMLCanvasElement>(null)
const [isCanvas, setIsCanvas] = useState(false)

const longPress = (e) => {
touchTimer.current = setTimeout(() => {
Expand All @@ -202,8 +198,8 @@ const MapChunk = (
}

const handleClick = (e: MouseEvent | TouchEvent) => {
// console.log('click:', e)
if (!drawerRef.current) return
if (!adapter.mapDrawer) return
console.log('click:', e)
let clientX: number
let clientY: number
if ('buttons' in e && e.button === 2) {
Expand All @@ -217,17 +213,17 @@ const MapChunk = (
const mapX = Math.floor(x + worldX)
const mapZ = Math.floor(z + worldZ)
const y = adapter.getHighestBlockY(mapX, mapZ)
drawerRef.current.setWarpPosOnClick(new Vec3(mapX, y, mapZ))
setLastWarpPos(drawerRef.current.lastWarpPos)
const { lastWarpPos } = drawerRef.current
adapter.mapDrawer.setWarpPosOnClick(new Vec3(mapX, y, mapZ))
setLastWarpPos(adapter.mapDrawer.lastWarpPos)
const { lastWarpPos } = adapter.mapDrawer
const initWarp = adapter.warps.find(warp => Math.hypot(lastWarpPos.x - warp.x, lastWarpPos.z - warp.z) < 2)
setInitWarp?.(initWarp)
setIsWarpInfoOpened(true)
}

const getXZ = (clientX: number, clientY: number) => {
const rect = canvasRef.current!.getBoundingClientRect()
const factor = scale * (drawerRef.current?.mapPixel ?? 1)
const factor = scale * (adapter.mapDrawer.mapPixel ?? 1)
const x = (clientX - rect.left) / factor
const y = (clientY - rect.top) / factor
return [x, y]
Expand All @@ -241,34 +237,18 @@ const MapChunk = (
)
}

const handleRedraw = (key?: string, chunk?: ChunkInfo) => {
const handleRedraw = (key?: string) => {
if (key !== `${worldX / 16},${worldZ / 16}`) return
adapter.mapDrawer.canvas = canvasRef.current!
adapter.mapDrawer.full = true
// console.log('handle redraw:', key)
// if (chunk) {
// drawerRef.current?.chunksStore.set(key, chunk)
// }
if (!adapter.chunksStore.has(key)) {
adapter.chunksStore.set(key, 'requested')
void adapter.loadChunk(key)
return
}
console.log('[mapChunk] update', key, `${worldX / 16},${worldZ / 16}`)
const timeout = setTimeout(() => {
const center = new Vec3(worldX + 8, 0, worldZ + 8)
drawerRef.current!.lastBotPos = center
drawerRef.current?.drawChunk(key)
// drawerRef.current?.drawWarps(center)
// drawerRef.current?.drawPlayerPos(center.x, center.z)
if (canvasRef.current) void adapter.drawChunkOnCanvas(`${worldX / 16},${worldZ / 16}`, canvasRef.current)
clearTimeout(timeout)
}, 100)
}

useEffect(() => {
// if (canvasRef.current && !drawerRef.current) {
// drawerRef.current = adapter.mapDrawer
// } else if (canvasRef.current && drawerRef.current) {
// }
if (canvasRef.current) void adapter.drawChunkOnCanvas(`${worldX / 16},${worldZ / 16}`, canvasRef.current)
}, [canvasRef.current])

Expand All @@ -286,29 +266,15 @@ const MapChunk = (
canvasRef.current?.removeEventListener('touchmove', cancel)
canvasRef.current?.removeEventListener('mousemove', handleMouseMove)
}
}, [canvasRef.current, scale])

useEffect(() => {
// handleRedraw()
}, [drawerRef.current, redraw])
}, [canvasRef.current])

useEffect(() => {
const intersectionObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
setIsCanvas(true)
}
if (redraw) {
for (const key of redraw) {
handleRedraw(key)
}
})
intersectionObserver.observe(containerRef.current!)

// adapter.on('chunkReady', handleRedraw)

return () => {
intersectionObserver.disconnect()
// adapter.off('chunkReady', handleRedraw)
}
}, [])
}, [redraw])

return <div
ref={containerRef}
Expand All @@ -334,15 +300,16 @@ const MapChunk = (
}

const WarpInfo = (
{ adapter, warpPos, setIsWarpInfoOpened, afterWarpIsSet, initWarp, toggleFullMap }:
{ adapter, warpPos, setIsWarpInfoOpened, afterWarpIsSet, initWarp, toggleFullMap, setRedraw }:
{
adapter: DrawerAdapter,
warpPos: { x: number, y: number, z: number },
setIsWarpInfoOpened: Dispatch<SetStateAction<boolean>>,
afterWarpIsSet?: () => void
initWarp?: WorldWarp,
setInitWarp?: React.Dispatch<React.SetStateAction<WorldWarp | undefined>>,
toggleFullMap?: ({ command }: { command: string }) => void
toggleFullMap?: ({ command }: { command: string }) => void,
setRedraw?: React.Dispatch<React.SetStateAction<Set<string> | null>>
}
) => {
const [warp, setWarp] = useState<WorldWarp>(initWarp ?? {
Expand All @@ -365,14 +332,14 @@ const WarpInfo = (
}

const updateChunk = () => {
const redraw = new Set<string>()
for (let i = -1; i < 2; i += 1) {
for (let j = -1; j < 2; j += 1) {
adapter.emit(
'chunkReady',
`${Math.floor(warp.x / 16) + j},${Math.floor(warp.z / 16) + i}`
)
redraw.add(`${Math.floor(warp.x / 16) + j},${Math.floor(warp.z / 16) + i}`)
}
}
setRedraw?.(redraw)
console.log('[warpInfo] update', redraw)
}

const tpNow = () => {
Expand Down Expand Up @@ -486,7 +453,8 @@ const WarpInfo = (
}}
>Cancel</Button>
<Button
onClick={() => {
onClick={(e) => {
e.preventDefault()
adapter.setWarp({ ...warp })
console.log(adapter.warps)
setIsWarpInfoOpened(false)
Expand Down
58 changes: 4 additions & 54 deletions src/react/Minimap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useRef, useEffect, useState } from 'react'
import { MinimapDrawer, DrawerAdapter, ChunkInfo } from './MinimapDrawer'
import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer'
import Fullmap from './Fullmap'


Expand All @@ -20,11 +20,7 @@ export default (
const full = useRef(false)
const canvasTick = useRef(0)
const canvasRef = useRef<HTMLCanvasElement>(null)
const warpsAndPartsCanvasRef = useRef<HTMLCanvasElement>(null)
const playerPosCanvasRef = useRef<HTMLCanvasElement>(null)
const warpsDrawerRef = useRef<MinimapDrawer | null>(null)
const drawerRef = useRef<MinimapDrawer | null>(null)
const playerPosDrawerRef = useRef<MinimapDrawer | null>(null)
const [position, setPosition] = useState({ x: 0, y: 0, z: 0 })

const updateMap = () => {
Expand Down Expand Up @@ -55,12 +51,7 @@ export default (
const rotateMap = () => {
if (!drawerRef.current) return
drawerRef.current.canvas.style.transform = `rotate(${adapter.yaw}rad)`
if (!warpsDrawerRef.current) return
warpsDrawerRef.current.canvas.style.transform = `rotate(${adapter.yaw}rad)`
}

const updateChunkOnMap = (key: string, chunk: ChunkInfo) => {
adapter.chunksStore.set(key, chunk)
drawerRef.current.yaw = adapter.yaw
}

useEffect(() => {
Expand All @@ -71,25 +62,8 @@ export default (
} else if (canvasRef.current && drawerRef.current) {
drawerRef.current.canvas = canvasRef.current
}

}, [canvasRef.current])

// useEffect(() => {
// if (warpsAndPartsCanvasRef.current && !warpsDrawerRef.current) {
// warpsDrawerRef.current = new MinimapDrawer(warpsAndPartsCanvasRef.current, adapter)
// } else if (warpsAndPartsCanvasRef.current && warpsDrawerRef.current) {
// warpsDrawerRef.current.canvas = warpsAndPartsCanvasRef.current
// }
// }, [warpsAndPartsCanvasRef.current])

// useEffect(() => {
// if (playerPosCanvasRef.current && !playerPosDrawerRef.current) {
// playerPosDrawerRef.current = new MinimapDrawer(playerPosCanvasRef.current, adapter)
// } else if (playerPosCanvasRef.current && playerPosDrawerRef.current) {
// playerPosDrawerRef.current.canvas = playerPosCanvasRef.current
// }
// }, [playerPosCanvasRef.current])

useEffect(() => {
adapter.on('updateMap', updateMap)
adapter.on('updateWaprs', updateWarps)
Expand All @@ -106,9 +80,7 @@ export default (
}
}, [])

const displayFullmap = fullMap && displayMode !== 'minimapOnly' && (showFullmap === 'singleplayer' && singleplayer || showFullmap === 'always')
const displayMini = displayMode !== 'fullmapOnly' && (showMinimap === 'singleplayer' && singleplayer || showMinimap === 'always')
return displayFullmap
return fullMap && displayMode !== 'minimapOnly' && (showFullmap === 'singleplayer' && singleplayer || showFullmap === 'always')
? <Fullmap
toggleFullMap={() => {
toggleFullMap?.({ command: 'ui.toggleMap' })
Expand All @@ -117,7 +89,7 @@ export default (
drawer={drawerRef.current}
canvasRef={canvasRef}
/>
: displayMini
: displayMode !== 'fullmapOnly' && (showMinimap === 'singleplayer' && singleplayer || showMinimap === 'always')
? <div
className='minimap'
style={{
Expand All @@ -141,28 +113,6 @@ export default (
height={80}
ref={canvasRef}
/>
<canvas
style={{
transition: '0.5s',
transitionTimingFunction: 'ease-out',
position: 'absolute',
left: '0px'
}}
width={80}
height={80}
ref={warpsAndPartsCanvasRef}
/>
<canvas
style={{
transition: '0.5s',
transitionTimingFunction: 'ease-out',
position: 'absolute',
left: '0px'
}}
width={80}
height={80}
ref={playerPosCanvasRef}
/>
<div
style={{
fontSize: '0.5em',
Expand Down
Loading
Loading