From e84dc5924eb60279918875f202694825818d793c Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 13 Jun 2024 21:29:02 +0400 Subject: [PATCH 01/46] minimap storybook --- src/react/Minimap.stories.tsx | 17 +++++++++++++ src/react/Minimap.tsx | 47 +++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/react/Minimap.stories.tsx create mode 100644 src/react/Minimap.tsx diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx new file mode 100644 index 00000000..854b27fb --- /dev/null +++ b/src/react/Minimap.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Minimap from './Minimap' + +const meta: Meta = { + component: Minimap, + args: { + }, +} + +export default meta +type Story = StoryObj; + +export const Primary: Story = { + args: { + }, +} diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx new file mode 100644 index 00000000..9f333779 --- /dev/null +++ b/src/react/Minimap.tsx @@ -0,0 +1,47 @@ +import { useRef, useEffect } from 'react' + +export default () => { + const canvasRef = useRef(null) + + const drawMap = () => { + const canvas = canvasRef.current! + const ctx = canvas.getContext('2d')! + ctx.clearRect(0, 0, canvas.width, canvas.height) + + const centerX = canvas.width / 2 + const centerY = canvas.height / 2 + const radius = 25 + + ctx.beginPath() + + ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false) + + ctx.fillStyle = 'white' + ctx.fill() + + ctx.strokeStyle = '#000000' + ctx.lineWidth = 1 + ctx.stroke() + } + + useEffect(() => { + if (canvasRef.current) { + drawMap() + } + }, [canvasRef.current]) + + + return
+ + +
+} From d8aabaf99d8680688fb65c2ecd01cb27bb64f02f Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 13 Jun 2024 22:10:06 +0400 Subject: [PATCH 02/46] simple class for map drawing --- src/react/Minimap.tsx | 20 +++--------------- src/react/MinimapDrawer.ts | 43 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 src/react/MinimapDrawer.ts diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 9f333779..3ee177b6 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,27 +1,13 @@ import { useRef, useEffect } from 'react' +import { MinimapDrawer } from './MinimapDrawer' export default () => { const canvasRef = useRef(null) const drawMap = () => { const canvas = canvasRef.current! - const ctx = canvas.getContext('2d')! - ctx.clearRect(0, 0, canvas.width, canvas.height) - - const centerX = canvas.width / 2 - const centerY = canvas.height / 2 - const radius = 25 - - ctx.beginPath() - - ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false) - - ctx.fillStyle = 'white' - ctx.fill() - - ctx.strokeStyle = '#000000' - ctx.lineWidth = 1 - ctx.stroke() + const minimapDrawer = new MinimapDrawer(canvas) + minimapDrawer.draw() } useEffect(() => { diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts new file mode 100644 index 00000000..8bb29f97 --- /dev/null +++ b/src/react/MinimapDrawer.ts @@ -0,0 +1,43 @@ + +export class MinimapDrawer { + centerX: number + centerY: number + radius: number + canvas: HTMLCanvasElement + ctx: CanvasRenderingContext2D + + constructor ( + canvas: HTMLCanvasElement, + centerX?: number, + centerY?: number, + radius?: number, + ) { + this.canvas = canvas + this.ctx = this.canvas.getContext('2d')! + this.centerX = centerX ?? this.canvas.width / 2 + this.centerY = centerY ?? this.canvas.height / 2 + this.radius = radius ?? 25 + } + + draw() { + this.ctx.clearRect( + this.centerX - this.radius, + this.centerY - this.radius, + this.canvas.width, + this.canvas.height + ) + this.ctx.strokeStyle = 'black' + + this.ctx.beginPath() + + this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) + + this.ctx.fillStyle = 'white' + this.ctx.fill() + + this.ctx.strokeStyle = '#000000' + this.ctx.lineWidth = 1 + this.ctx.stroke() + + } +} From 2696a1e345d6355dae137f6de3b6a420c59e1148 Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 13 Jun 2024 23:13:26 +0400 Subject: [PATCH 03/46] drawing map by pixel ex --- src/react/Minimap.stories.tsx | 14 ++++++++++-- src/react/Minimap.tsx | 4 ++-- src/react/MinimapDrawer.ts | 43 +++++++++++++++++++++++++++-------- 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 854b27fb..5df1b26a 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -4,14 +4,24 @@ import Minimap from './Minimap' const meta: Meta = { component: Minimap, - args: { - }, } export default meta type Story = StoryObj; +let worldColors: string[][] = [] + +const mapSize = 50 +for (let i=0; i { +export default ({ worldColors }: { worldColors: string[][] }) => { const canvasRef = useRef(null) const drawMap = () => { const canvas = canvasRef.current! const minimapDrawer = new MinimapDrawer(canvas) - minimapDrawer.draw() + minimapDrawer.draw(worldColors) } useEffect(() => { diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 8bb29f97..71f24a18 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -1,10 +1,10 @@ - export class MinimapDrawer { centerX: number centerY: number radius: number canvas: HTMLCanvasElement ctx: CanvasRenderingContext2D + worldColors: string[] constructor ( canvas: HTMLCanvasElement, @@ -19,25 +19,48 @@ export class MinimapDrawer { this.radius = radius ?? 25 } - draw() { + draw(worldColors?: string[][]) { this.ctx.clearRect( this.centerX - this.radius, this.centerY - this.radius, this.canvas.width, this.canvas.height ) - this.ctx.strokeStyle = 'black' - this.ctx.beginPath() + if (worldColors) { + this.updateWorldColors(worldColors) + } else { + this.ctx.strokeStyle = 'black' + this.ctx.beginPath() - this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) + this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) - this.ctx.fillStyle = 'white' - this.ctx.fill() + this.ctx.fillStyle = 'white' + this.ctx.fill() - this.ctx.strokeStyle = '#000000' - this.ctx.lineWidth = 1 - this.ctx.stroke() + this.ctx.strokeStyle = '#000000' + this.ctx.lineWidth = 1 + this.ctx.stroke() + } } + + updateWorldColors(worldColors: string[][]) { + const left = this.centerX - this.radius + const top = this.centerY - this.radius + + this.ctx.save() + + this.ctx.beginPath() + this.ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI*2, true) + this.ctx.clip() + + for (let row=0; row Date: Thu, 13 Jun 2024 23:21:41 +0400 Subject: [PATCH 04/46] better scaling --- src/react/Minimap.stories.tsx | 2 +- src/react/MinimapDrawer.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 5df1b26a..8b63d391 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -11,7 +11,7 @@ type Story = StoryObj; let worldColors: string[][] = [] -const mapSize = 50 +const mapSize = 10 for (let i=0; i Date: Fri, 14 Jun 2024 12:45:37 +0400 Subject: [PATCH 05/46] fixed eslint in MinimapDrawer --- src/react/Minimap.stories.tsx | 6 +++--- src/react/MinimapDrawer.ts | 20 ++++++++------------ src/react/MinimapProvider.tsx | 17 +++++++++++++++++ 3 files changed, 28 insertions(+), 15 deletions(-) create mode 100644 src/react/MinimapProvider.tsx diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 8b63d391..25ea6507 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -9,12 +9,12 @@ const meta: Meta = { export default meta type Story = StoryObj; -let worldColors: string[][] = [] +const worldColors: string[][] = [] const mapSize = 10 -for (let i=0; i { + const [worldColors, setWorldColors] = useState([]) + + useEffect(() => { + const newColors = [] as string[][] + + + }, []) + + return
+ +
+} From 0f78c74146b4e11da99037350068b731fcc44974 Mon Sep 17 00:00:00 2001 From: gguio Date: Sat, 15 Jun 2024 13:37:35 +0400 Subject: [PATCH 06/46] map draws and updates. Not optimized --- src/react/Minimap.tsx | 2 +- src/react/MinimapProvider.tsx | 35 ++++++++++++++++++++++++++++++++++- src/reactUi.tsx | 2 ++ 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 0e6aee42..7590862a 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -14,7 +14,7 @@ export default ({ worldColors }: { worldColors: string[][] }) => { if (canvasRef.current) { drawMap() } - }, [canvasRef.current]) + }, [canvasRef.current, worldColors]) return
{ const [worldColors, setWorldColors] = useState([]) - useEffect(() => { + const getHighestBlock = (x: number, z: number) => { + let block = null as import('prismarine-block').Block | null + let height = (bot.game as any).height + const airBlocks = ['air', 'cave_air', 'void_air'] + do { + block = bot.world.getBlock(new Vec3(x, height, z)) + height -= 1 + } while (airBlocks.includes(block?.name ?? '')) + return height + } + + const drawMap = () => { + const { colors } = BlockData const newColors = [] as string[][] + const mapSize = 24 + for (let i = 0; i < mapSize; i += 1) { + newColors[i] = [] as string[] + for (let j = 0; j < mapSize; j += 1) { + const x = bot.entity.position.x - mapSize / 2 + i + const z = bot.entity.position.z - mapSize / 2 + j + const y = getHighestBlock(x, z) + const blockName = bot.world.getBlock(new Vec3(x, y, z))?.name + newColors[i][j] = blockName ? colors[blockName] ?? 'white' : 'white' + } + } + setWorldColors([...newColors]) + } + useEffect(() => { + bot.on('move', drawMap) + + return () => { + bot.off('move', drawMap) + } }, []) return
diff --git a/src/reactUi.tsx b/src/reactUi.tsx index 8a9cc32c..7a80d55e 100644 --- a/src/reactUi.tsx +++ b/src/reactUi.tsx @@ -19,6 +19,7 @@ import ScoreboardProvider from './react/ScoreboardProvider' import SignEditorProvider from './react/SignEditorProvider' import IndicatorEffectsProvider from './react/IndicatorEffectsProvider' import PlayerListOverlayProvider from './react/PlayerListOverlayProvider' +import MinimapProvider from './react/MinimapProvider' import HudBarsProvider from './react/HudBarsProvider' import XPBarProvider from './react/XPBarProvider' import DebugOverlay from './react/DebugOverlay' @@ -114,6 +115,7 @@ const InGameUi = () => { +
From 362d87c320293807d95a596f61f7e0c5d1a9a0a0 Mon Sep 17 00:00:00 2001 From: gguio Date: Mon, 17 Jun 2024 12:20:43 +0400 Subject: [PATCH 07/46] stable --- src/react/MinimapProvider.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index c0193e21..237122dd 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -15,25 +15,24 @@ export default () => { block = bot.world.getBlock(new Vec3(x, height, z)) height -= 1 } while (airBlocks.includes(block?.name ?? '')) - return height + return block.name } const drawMap = () => { const { colors } = BlockData const newColors = [] as string[][] - const mapSize = 24 + const mapSize = 50 for (let i = 0; i < mapSize; i += 1) { newColors[i] = [] as string[] for (let j = 0; j < mapSize; j += 1) { const x = bot.entity.position.x - mapSize / 2 + i const z = bot.entity.position.z - mapSize / 2 + j - const y = getHighestBlock(x, z) - const blockName = bot.world.getBlock(new Vec3(x, y, z))?.name + const blockName = getHighestBlock(x, z) newColors[i][j] = blockName ? colors[blockName] ?? 'white' : 'white' } } - setWorldColors([...newColors]) + setWorldColors(newColors) } useEffect(() => { From 73cf00b1b4c399999cc7fe720d2064b75f4152dd Mon Sep 17 00:00:00 2001 From: gguio Date: Mon, 17 Jun 2024 13:37:27 +0400 Subject: [PATCH 08/46] a little faster drawing. Still lags --- src/react/Minimap.tsx | 25 ++++++++++----- src/react/MinimapDrawer.ts | 57 +++++++++++++++++++++++++++-------- src/react/MinimapProvider.tsx | 39 +----------------------- 3 files changed, 63 insertions(+), 58 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 7590862a..1ddcef0e 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,20 +1,31 @@ import { useRef, useEffect } from 'react' import { MinimapDrawer } from './MinimapDrawer' -export default ({ worldColors }: { worldColors: string[][] }) => { +export default () => { + const canvasTick = useRef(0) const canvasRef = useRef(null) + const drawerRef = useRef(null) - const drawMap = () => { - const canvas = canvasRef.current! - const minimapDrawer = new MinimapDrawer(canvas) - minimapDrawer.draw(worldColors) + function updateMap () { + if (drawerRef.current && canvasTick.current % 10 === 0) { + drawerRef.current.draw(bot) + } + canvasTick.current += 1 } useEffect(() => { if (canvasRef.current) { - drawMap() + drawerRef.current = new MinimapDrawer(canvasRef.current) } - }, [canvasRef.current, worldColors]) + }, [canvasRef.current]) + + useEffect(() => { + bot.on('move', updateMap) + + return () => { + bot.off('move', updateMap) + } + }, []) return
& { + world: Omit & { + getBlock: (pos: import('vec3').Vec3) => import('prismarine-block').Block | null + } + _client: Omit & { + write: typeof import('../generatedClientPackets').clientWrite + on: typeof import('../generatedServerPackets').clientOn + } +} + export class MinimapDrawer { centerX: number centerY: number + mapSize: number radius: number ctx: CanvasRenderingContext2D @@ -9,15 +24,17 @@ export class MinimapDrawer { centerX?: number, centerY?: number, radius?: number, + mapSize?: number ) { this.canvas = canvas this.ctx = this.canvas.getContext('2d')! this.centerX = centerX ?? this.canvas.width / 2 this.centerY = centerY ?? this.canvas.height / 2 this.radius = radius ?? 25 + this.mapSize = mapSize ?? this.radius * 2 } - draw (worldColors?: string[][]) { + draw (bot: BotType | undefined) { this.ctx.clearRect( this.centerX - this.radius, this.centerY - this.radius, @@ -25,8 +42,8 @@ export class MinimapDrawer { this.radius * 2 ) - if (worldColors) { - this.updateWorldColors(worldColors) + if (bot) { + this.updateWorldColors(bot) } else { this.ctx.strokeStyle = 'black' this.ctx.beginPath() @@ -42,9 +59,10 @@ export class MinimapDrawer { } } - updateWorldColors (worldColors: string[][]) { + updateWorldColors (bot: BotType) { const left = this.centerX - this.radius const top = this.centerY - this.radius + const mapPixel = Math.floor(this.radius * 2 / this.mapSize) this.ctx.save() @@ -52,18 +70,31 @@ export class MinimapDrawer { this.ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, true) this.ctx.clip() - for (let row = 0; row < worldColors.length; row += 1) { - for (let col = 0; col < worldColors[row].length; col += 1) { - this.ctx.fillStyle = worldColors[row][col] - const rectWidth = Math.floor(this.radius * 2 / worldColors[row].length) - const rectHeight = Math.floor(this.radius * 2 / worldColors.length) + for (let row = 0; row < this.mapSize; row += 1) { + for (let col = 0; col < this.mapSize; col += 1) { + this.ctx.fillStyle = this.getHighestBlockColor( + bot, + bot.entity.position.x - this.mapSize / 2 + row, + bot.entity.position.z - this.mapSize / 2 + col + ) this.ctx.fillRect( - left + rectWidth * col, - top + rectHeight * row, - rectWidth, - rectHeight + left + mapPixel * col, + top + mapPixel * row, + mapPixel, + mapPixel ) } } } + + getHighestBlockColor (bot: BotType, x: number, z: number) { + let block = null as import('prismarine-block').Block | null + let { height } = (bot.game as any) + const airBlocks = new Set(['air', 'cave_air', 'void_air']) + do { + block = bot.world.getBlock(new Vec3(x, height, z)) + height -= 1 + } while (airBlocks.has(block?.name ?? '')) + return BlockData.colors[block?.name ?? ''] ?? 'white' + } } diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 237122dd..d189337a 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -5,45 +5,8 @@ import Minimap from './Minimap' export default () => { - const [worldColors, setWorldColors] = useState([]) - - const getHighestBlock = (x: number, z: number) => { - let block = null as import('prismarine-block').Block | null - let height = (bot.game as any).height - const airBlocks = ['air', 'cave_air', 'void_air'] - do { - block = bot.world.getBlock(new Vec3(x, height, z)) - height -= 1 - } while (airBlocks.includes(block?.name ?? '')) - return block.name - } - - const drawMap = () => { - const { colors } = BlockData - const newColors = [] as string[][] - - const mapSize = 50 - for (let i = 0; i < mapSize; i += 1) { - newColors[i] = [] as string[] - for (let j = 0; j < mapSize; j += 1) { - const x = bot.entity.position.x - mapSize / 2 + i - const z = bot.entity.position.z - mapSize / 2 + j - const blockName = getHighestBlock(x, z) - newColors[i][j] = blockName ? colors[blockName] ?? 'white' : 'white' - } - } - setWorldColors(newColors) - } - - useEffect(() => { - bot.on('move', drawMap) - - return () => { - bot.off('move', drawMap) - } - }, []) return
- +
} From 55ce44585f6f65af1eb4d4938dff925dd6f6026b Mon Sep 17 00:00:00 2001 From: gguio Date: Mon, 17 Jun 2024 19:59:40 +0400 Subject: [PATCH 09/46] cacha added. Didnt change anything, refactoring required --- src/react/Minimap.tsx | 3 ++ src/react/MinimapDrawer.ts | 63 ++++++++++++++++++++++++++------------ 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 1ddcef0e..7f46c349 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -9,6 +9,9 @@ export default () => { function updateMap () { if (drawerRef.current && canvasTick.current % 10 === 0) { drawerRef.current.draw(bot) + if (canvasTick.current % 300 === 0) { + drawerRef.current.clearCache(bot.entity.position.x, bot.entity.position.z) + } } canvasTick.current += 1 } diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 013421c6..a5f12a60 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -1,15 +1,17 @@ import { Vec3 } from 'vec3' +import { Position } from 'source-map-js' +import { underive } from 'valtio/utils' import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' type BotType = Omit & { - world: Omit & { - getBlock: (pos: import('vec3').Vec3) => import('prismarine-block').Block | null - } - _client: Omit & { - write: typeof import('../generatedClientPackets').clientWrite - on: typeof import('../generatedServerPackets').clientOn - } + world: Omit & { + getBlock: (pos: import('vec3').Vec3) => import('prismarine-block').Block | null + } + _client: Omit & { + write: typeof import('../generatedClientPackets').clientWrite + on: typeof import('../generatedServerPackets').clientOn + } } export class MinimapDrawer { @@ -17,7 +19,8 @@ export class MinimapDrawer { centerY: number mapSize: number radius: number - ctx: CanvasRenderingContext2D + ctx: CanvasRenderingContext2D + worldColors: { [key: string]: string } constructor ( private readonly canvas: HTMLCanvasElement, @@ -28,6 +31,7 @@ export class MinimapDrawer { ) { this.canvas = canvas this.ctx = this.canvas.getContext('2d')! + this.ctx.imageSmoothingEnabled = false this.centerX = centerX ?? this.canvas.width / 2 this.centerY = centerY ?? this.canvas.height / 2 this.radius = radius ?? 25 @@ -36,9 +40,9 @@ export class MinimapDrawer { draw (bot: BotType | undefined) { this.ctx.clearRect( - this.centerX - this.radius, - this.centerY - this.radius, - this.radius * 2, + this.centerX - this.radius, + this.centerY - this.radius, + this.radius * 2, this.radius * 2 ) @@ -67,20 +71,20 @@ export class MinimapDrawer { this.ctx.save() this.ctx.beginPath() - this.ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, true) + this.ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, true) this.ctx.clip() for (let row = 0; row < this.mapSize; row += 1) { for (let col = 0; col < this.mapSize; col += 1) { this.ctx.fillStyle = this.getHighestBlockColor( - bot, - bot.entity.position.x - this.mapSize / 2 + row, + bot, + bot.entity.position.x - this.mapSize / 2 + row, bot.entity.position.z - this.mapSize / 2 + col ) this.ctx.fillRect( - left + mapPixel * col, - top + mapPixel * row, - mapPixel, + left + mapPixel * col, + top + mapPixel * row, + mapPixel, mapPixel ) } @@ -88,13 +92,32 @@ export class MinimapDrawer { } getHighestBlockColor (bot: BotType, x: number, z: number) { - let block = null as import('prismarine-block').Block | null + const key = `${x},${z}` + if (Object.keys(this.worldColors).includes(key)) { + return this.worldColors[key] + } + let block = null as import('prismarine-block').Block | null let { height } = (bot.game as any) const airBlocks = new Set(['air', 'cave_air', 'void_air']) do { block = bot.world.getBlock(new Vec3(x, height, z)) height -= 1 } while (airBlocks.has(block?.name ?? '')) - return BlockData.colors[block?.name ?? ''] ?? 'white' - } + const color = BlockData.colors[block?.name ?? ''] ?? 'white' + this.worldColors[key] = color + return color + } + + getDistance (x1: number, z1: number, x2: number, z2: number): number { + return Math.hypot((x2 - x1), (z2 - z1)) + } + + clearCache (currX: number, currZ: number) { + for (const key of Object.keys(this.worldColors)) { + const [x, z] = key.split(',').map(Number) + if (this.getDistance(x, z, currX, currZ) > this.radius * 5) { + delete this.worldColors[`${x},${z}`] + } + } + } } From dfd1cb00283bc0028cb458be80f2dffbd5f6db97 Mon Sep 17 00:00:00 2001 From: gguio Date: Tue, 18 Jun 2024 13:33:23 +0400 Subject: [PATCH 10/46] build doesnt work right --- src/react/Minimap.tsx | 4 ++++ src/react/MinimapDrawer.ts | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 7f46c349..291fdc4a 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -7,7 +7,9 @@ export default () => { const drawerRef = useRef(null) function updateMap () { + console.log('test') if (drawerRef.current && canvasTick.current % 10 === 0) { + console.log(drawerRef.current.worldColors) drawerRef.current.draw(bot) if (canvasTick.current % 300 === 0) { drawerRef.current.clearCache(bot.entity.position.x, bot.entity.position.z) @@ -23,9 +25,11 @@ export default () => { }, [canvasRef.current]) useEffect(() => { + console.log('set update') bot.on('move', updateMap) return () => { + console.log('delete update') bot.off('move', updateMap) } }, []) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index a5f12a60..e96d177d 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -48,6 +48,7 @@ export class MinimapDrawer { if (bot) { this.updateWorldColors(bot) + console.log(this.worldColors) } else { this.ctx.strokeStyle = 'black' this.ctx.beginPath() @@ -93,7 +94,8 @@ export class MinimapDrawer { getHighestBlockColor (bot: BotType, x: number, z: number) { const key = `${x},${z}` - if (Object.keys(this.worldColors).includes(key)) { + if (this.worldColors[key]) { + console.log('using cashed value') return this.worldColors[key] } let block = null as import('prismarine-block').Block | null @@ -113,7 +115,7 @@ export class MinimapDrawer { } clearCache (currX: number, currZ: number) { - for (const key of Object.keys(this.worldColors)) { + for (const key in this.worldColors) { const [x, z] = key.split(',').map(Number) if (this.getDistance(x, z, currX, currZ) > this.radius * 5) { delete this.worldColors[`${x},${z}`] From f6194e462826348893cc282c79b6336f022bf322 Mon Sep 17 00:00:00 2001 From: Vitaly Turovsky Date: Tue, 18 Jun 2024 15:22:00 +0300 Subject: [PATCH 11/46] fix and cleanup code --- src/react/MinimapDrawer.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index e96d177d..32c231df 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -1,9 +1,9 @@ import { Vec3 } from 'vec3' import { Position } from 'source-map-js' -import { underive } from 'valtio/utils' +import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' +import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' - type BotType = Omit & { world: Omit & { getBlock: (pos: import('vec3').Vec3) => import('prismarine-block').Block | null @@ -14,15 +14,26 @@ type BotType = Omit & { } } +interface DrawerAdapter extends TypedEventEmitter<{ + updateBlockColor: (pos: Position) => void + updatePlayerPosition: () => void + updateWarps: () => void +}> { + getHighestBlockColor: (x: number, z: number) => string + playerPosition: Position + warps: WorldWarp + setWarp: (name: string, pos: Position, rotation: Position, color: string, disabled: boolean) => void +} + export class MinimapDrawer { centerX: number centerY: number mapSize: number radius: number ctx: CanvasRenderingContext2D - worldColors: { [key: string]: string } + worldColors: { [key: string]: string } = {} - constructor ( + constructor( private readonly canvas: HTMLCanvasElement, centerX?: number, centerY?: number, @@ -48,7 +59,6 @@ export class MinimapDrawer { if (bot) { this.updateWorldColors(bot) - console.log(this.worldColors) } else { this.ctx.strokeStyle = 'black' this.ctx.beginPath() @@ -95,7 +105,6 @@ export class MinimapDrawer { getHighestBlockColor (bot: BotType, x: number, z: number) { const key = `${x},${z}` if (this.worldColors[key]) { - console.log('using cashed value') return this.worldColors[key] } let block = null as import('prismarine-block').Block | null From ce951fe6ddcb2d1dd273af96c4a44e411da671d0 Mon Sep 17 00:00:00 2001 From: Vitaly Turovsky Date: Tue, 18 Jun 2024 19:55:58 +0300 Subject: [PATCH 12/46] update squid, fix lint --- package.json | 2 +- pnpm-lock.yaml | 11 ++++++----- src/react/Minimap.tsx | 6 +++--- src/react/MinimapDrawer.ts | 9 +++++---- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 56e3cfdd..3369e91c 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "esbuild-plugin-polyfill-node": "^0.3.0", "express": "^4.18.2", "filesize": "^10.0.12", - "flying-squid": "npm:@zardoy/flying-squid@^0.0.29", + "flying-squid": "npm:@zardoy/flying-squid@^0.0.30", "fs-extra": "^11.1.1", "google-drive-browserfs": "github:zardoy/browserfs#google-drive", "iconify-icon": "^1.0.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e1ab099..fa8ba5e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,8 +104,8 @@ importers: specifier: ^10.0.12 version: 10.0.12 flying-squid: - specifier: npm:@zardoy/flying-squid@^0.0.29 - version: '@zardoy/flying-squid@0.0.29(encoding@0.1.13)' + specifier: npm:@zardoy/flying-squid@^0.0.30 + version: '@zardoy/flying-squid@0.0.30(encoding@0.1.13)' fs-extra: specifier: ^11.1.1 version: 11.1.1 @@ -3075,8 +3075,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.29': - resolution: {integrity: sha512-E5Nk1gMeH+fAHM5aJY8kIxjBS/zuPtPD6QPeZg+laPV5H58Jx3Et17clF1zC9MT2wyFQ5wi5uTnfdGBTpSEqHw==} + '@zardoy/flying-squid@0.0.30': + resolution: {integrity: sha512-jQ9GQUKR0nRmUxERLB1sOIkQRc1PdSxqHVPe+BB80ELx2P7R1sVcG8sGMQ2BBdH2vRYBg+HD3r1vKudqYSd1Ww==} engines: {node: '>=8'} hasBin: true @@ -11971,7 +11971,7 @@ snapshots: '@types/emscripten': 1.39.8 tslib: 1.14.1 - '@zardoy/flying-squid@0.0.29(encoding@0.1.13)': + '@zardoy/flying-squid@0.0.30(encoding@0.1.13)': dependencies: '@tootallnate/once': 2.0.0 change-case: 4.1.2 @@ -11997,6 +11997,7 @@ snapshots: random-seed: 0.3.0 range: 0.0.3 readline: 1.3.0 + sanitize-filename: 1.6.3 typed-emitter: 1.4.0 uuid-1345: 1.0.2 vec3: 0.1.8 diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 291fdc4a..a017936c 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -3,7 +3,7 @@ import { MinimapDrawer } from './MinimapDrawer' export default () => { const canvasTick = useRef(0) - const canvasRef = useRef(null) + const canvasRef = useRef(null) const drawerRef = useRef(null) function updateMap () { @@ -12,7 +12,7 @@ export default () => { console.log(drawerRef.current.worldColors) drawerRef.current.draw(bot) if (canvasTick.current % 300 === 0) { - drawerRef.current.clearCache(bot.entity.position.x, bot.entity.position.z) + drawerRef.current.deleteOldWorldColors(bot.entity.position.x, bot.entity.position.z) } } canvasTick.current += 1 @@ -35,7 +35,7 @@ export default () => { }, []) - return
string playerPosition: Position warps: WorldWarp - setWarp: (name: string, pos: Position, rotation: Position, color: string, disabled: boolean) => void + setWarp: (name: string, pos: Position, rotation: Position, dimension: string, color: string, disabled: boolean) => void } export class MinimapDrawer { @@ -33,7 +33,7 @@ export class MinimapDrawer { ctx: CanvasRenderingContext2D worldColors: { [key: string]: string } = {} - constructor( + constructor ( private readonly canvas: HTMLCanvasElement, centerX?: number, centerY?: number, @@ -123,10 +123,11 @@ export class MinimapDrawer { return Math.hypot((x2 - x1), (z2 - z1)) } - clearCache (currX: number, currZ: number) { - for (const key in this.worldColors) { + deleteOldWorldColors (currX: number, currZ: number) { + for (const key of Object.keys(this.worldColors)) { const [x, z] = key.split(',').map(Number) if (this.getDistance(x, z, currX, currZ) > this.radius * 5) { + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete delete this.worldColors[`${x},${z}`] } } From 326ef49c7e791b3f531d8c622f9428bd68a1ce2e Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 20 Jun 2024 17:48:36 +0400 Subject: [PATCH 13/46] fix cache --- src/react/Minimap.tsx | 2 +- src/react/MinimapDrawer.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index a017936c..610befa9 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -7,12 +7,12 @@ export default () => { const drawerRef = useRef(null) function updateMap () { - console.log('test') if (drawerRef.current && canvasTick.current % 10 === 0) { console.log(drawerRef.current.worldColors) drawerRef.current.draw(bot) if (canvasTick.current % 300 === 0) { drawerRef.current.deleteOldWorldColors(bot.entity.position.x, bot.entity.position.z) + console.log(drawerRef.current.worldColors) } } canvasTick.current += 1 diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 49f0241a..bba5e107 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -103,7 +103,9 @@ export class MinimapDrawer { } getHighestBlockColor (bot: BotType, x: number, z: number) { - const key = `${x},${z}` + const roundX = Math.floor(x) + const roundZ = Math.floor(z) + const key = `${roundX},${roundZ}` if (this.worldColors[key]) { return this.worldColors[key] } From 6ebe049ad1d85183a64aa69f42b199a69f11eff7 Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 20 Jun 2024 18:24:12 +0400 Subject: [PATCH 14/46] full map container --- src/react/Minimap.tsx | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 610befa9..67d13303 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,41 +1,52 @@ -import { useRef, useEffect } from 'react' +import { useRef, useEffect, useState } from 'react' import { MinimapDrawer } from './MinimapDrawer' export default () => { + const [fullMapOpened, setFullMapOpened] = useState(false) const canvasTick = useRef(0) const canvasRef = useRef(null) const drawerRef = useRef(null) function updateMap () { - if (drawerRef.current && canvasTick.current % 10 === 0) { - console.log(drawerRef.current.worldColors) + if (drawerRef.current && canvasTick.current % 2 === 0) { drawerRef.current.draw(bot) if (canvasTick.current % 300 === 0) { drawerRef.current.deleteOldWorldColors(bot.entity.position.x, bot.entity.position.z) - console.log(drawerRef.current.worldColors) } } canvasTick.current += 1 } + const openFullMap = () => { + setFullMapOpened(true) + } + useEffect(() => { - if (canvasRef.current) { + if (canvasRef.current && !drawerRef.current) { drawerRef.current = new MinimapDrawer(canvasRef.current) } }, [canvasRef.current]) useEffect(() => { - console.log('set update') bot.on('move', updateMap) return () => { - console.log('delete update') bot.off('move', updateMap) } }, []) + return fullMapOpened ?
+ - return
:
Date: Thu, 20 Jun 2024 19:16:56 +0400 Subject: [PATCH 15/46] fix for weired bug with undo button in Keybindings screen --- src/react/KeybindingsScreen.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/react/KeybindingsScreen.module.css b/src/react/KeybindingsScreen.module.css index e8a9f69b..102974ce 100644 --- a/src/react/KeybindingsScreen.module.css +++ b/src/react/KeybindingsScreen.module.css @@ -49,6 +49,7 @@ .undo-keyboard, .undo-gamepad { aspect-ratio: 1; + min-width: 20px; } .button { From 3b91a17f90c87926c231d609148e8909704ac58e Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 21 Jun 2024 12:09:52 +0400 Subject: [PATCH 16/46] toggle command --- src/controls.ts | 17 +++++++++-------- src/react/Minimap.tsx | 10 ++++++++-- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index a3a22029..0469a0b0 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -51,6 +51,7 @@ export const contro = new ControMax({ }, ui: { back: [null/* 'Escape' */, 'B'], + toggleMap: ['KeyM'], leftClick: [null, 'A'], rightClick: [null, 'Y'], speedupCursor: [null, 'Left Stick'], @@ -75,12 +76,12 @@ export const contro = new ControMax({ }, { defaultControlOptions: controlOptions, target: document, - captureEvents () { + captureEvents() { return true }, storeProvider: { load: () => customKeymaps, - save () { }, + save() { }, }, gamepadPollingInterval: 10 }) @@ -153,10 +154,10 @@ let lastCommandTrigger = null as { command: string, time: number } | null const secondActionActivationTimeout = 300 const secondActionCommands = { - 'general.jump' () { + 'general.jump'() { toggleFly() }, - 'general.forward' () { + 'general.forward'() { setSprinting(true) } } @@ -292,7 +293,7 @@ const alwaysPressedHandledCommand = (command: Command) => { } } -function cycleHotbarSlot (dir: 1 | -1) { +function cycleHotbarSlot(dir: 1 | -1) { const newHotbarSlot = (bot.quickBarSlot + dir + 9) % 9 bot.setQuickBarSlot(newHotbarSlot) } @@ -418,7 +419,7 @@ contro.on('release', ({ command }) => { export const f3Keybinds = [ { key: 'KeyA', - action () { + action() { //@ts-expect-error const loadedChunks = Object.entries(worldView.loadedChunks).filter(([, v]) => v).map(([key]) => key.split(',').map(Number)) for (const [x, z] of loadedChunks) { @@ -440,7 +441,7 @@ export const f3Keybinds = [ }, { key: 'KeyG', - action () { + action() { options.showChunkBorders = !options.showChunkBorders viewer.world.updateShowChunksBorder(options.showChunkBorders) }, @@ -448,7 +449,7 @@ export const f3Keybinds = [ }, { key: 'KeyT', - async action () { + async action() { // waypoints const widgetNames = widgets.map(widget => widget.name) const widget = await showOptionsModal('Open Widget', widgetNames) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 67d13303..c1740a60 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,5 +1,6 @@ import { useRef, useEffect, useState } from 'react' import { MinimapDrawer } from './MinimapDrawer' +import { contro } from '../controls' export default () => { const [fullMapOpened, setFullMapOpened] = useState(false) @@ -17,10 +18,11 @@ export default () => { canvasTick.current += 1 } - const openFullMap = () => { - setFullMapOpened(true) + const toggleFullMap = ({ command }) => { + if (command === 'ui.toggleMap') setFullMapOpened(prev => !prev) } + useEffect(() => { if (canvasRef.current && !drawerRef.current) { drawerRef.current = new MinimapDrawer(canvasRef.current) @@ -30,8 +32,11 @@ export default () => { useEffect(() => { bot.on('move', updateMap) + contro.on('trigger', toggleFullMap) + return () => { bot.off('move', updateMap) + contro.off('', toggleFullMap) } }, []) @@ -41,6 +46,7 @@ export default () => { inset: '0px', display: 'flex', justifyContent: 'center', + alignItems: 'center', border: '2px solid red' }} > From 33302c06aa9a8a1ec11c254435f6c3ccca457f42 Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 21 Jun 2024 13:48:27 +0400 Subject: [PATCH 17/46] toggle full map --- src/controls.ts | 16 ++++++++-------- src/react/Minimap.tsx | 22 +++++++++++++++++----- src/react/MinimapDrawer.ts | 22 +++++++++++++++------- 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index 0469a0b0..8df3f209 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -76,12 +76,12 @@ export const contro = new ControMax({ }, { defaultControlOptions: controlOptions, target: document, - captureEvents() { + captureEvents () { return true }, storeProvider: { load: () => customKeymaps, - save() { }, + save () { }, }, gamepadPollingInterval: 10 }) @@ -154,10 +154,10 @@ let lastCommandTrigger = null as { command: string, time: number } | null const secondActionActivationTimeout = 300 const secondActionCommands = { - 'general.jump'() { + 'general.jump' () { toggleFly() }, - 'general.forward'() { + 'general.forward' () { setSprinting(true) } } @@ -293,7 +293,7 @@ const alwaysPressedHandledCommand = (command: Command) => { } } -function cycleHotbarSlot(dir: 1 | -1) { +function cycleHotbarSlot (dir: 1 | -1) { const newHotbarSlot = (bot.quickBarSlot + dir + 9) % 9 bot.setQuickBarSlot(newHotbarSlot) } @@ -419,7 +419,7 @@ contro.on('release', ({ command }) => { export const f3Keybinds = [ { key: 'KeyA', - action() { + action () { //@ts-expect-error const loadedChunks = Object.entries(worldView.loadedChunks).filter(([, v]) => v).map(([key]) => key.split(',').map(Number)) for (const [x, z] of loadedChunks) { @@ -441,7 +441,7 @@ export const f3Keybinds = [ }, { key: 'KeyG', - action() { + action () { options.showChunkBorders = !options.showChunkBorders viewer.world.updateShowChunksBorder(options.showChunkBorders) }, @@ -449,7 +449,7 @@ export const f3Keybinds = [ }, { key: 'KeyT', - async action() { + async action () { // waypoints const widgetNames = widgets.map(widget => widget.name) const widget = await showOptionsModal('Open Widget', widgetNames) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index c1740a60..39577ffc 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,6 +1,6 @@ import { useRef, useEffect, useState } from 'react' -import { MinimapDrawer } from './MinimapDrawer' import { contro } from '../controls' +import { MinimapDrawer } from './MinimapDrawer' export default () => { const [fullMapOpened, setFullMapOpened] = useState(false) @@ -25,9 +25,13 @@ export default () => { useEffect(() => { if (canvasRef.current && !drawerRef.current) { + console.log('creating canvas') drawerRef.current = new MinimapDrawer(canvasRef.current) + } else if (canvasRef.current && drawerRef.current) { + console.log('updating canvas') + drawerRef.current.canvas = canvasRef.current } - }, [canvasRef.current]) + }, [canvasRef.current, fullMapOpened]) useEffect(() => { bot.on('move', updateMap) @@ -36,7 +40,7 @@ export default () => { return () => { bot.off('move', updateMap) - contro.off('', toggleFullMap) + contro.off('trigger', toggleFullMap) } }, []) @@ -47,10 +51,18 @@ export default () => { display: 'flex', justifyContent: 'center', alignItems: 'center', - border: '2px solid red' + border: '2px solid red', + backgroundColor: 'rgba(0, 0, 0, 0.4)' }} > - +
:
Date: Fri, 21 Jun 2024 13:49:41 +0400 Subject: [PATCH 18/46] small clean up --- src/react/Minimap.tsx | 2 -- src/react/MinimapDrawer.ts | 3 --- 2 files changed, 5 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 39577ffc..9a22d3ef 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -25,10 +25,8 @@ export default () => { useEffect(() => { if (canvasRef.current && !drawerRef.current) { - console.log('creating canvas') drawerRef.current = new MinimapDrawer(canvasRef.current) } else if (canvasRef.current && drawerRef.current) { - console.log('updating canvas') drawerRef.current.canvas = canvasRef.current } }, [canvasRef.current, fullMapOpened]) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 924a3810..7b2ba296 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -36,9 +36,6 @@ export class MinimapDrawer { constructor ( canvas: HTMLCanvasElement, - centerX?: number, - centerY?: number, - mapSize?: number ) { this.canvas = canvas } From 7901a3a041cb7499ae0a047ccb8e0eb72f957707 Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 21 Jun 2024 15:10:36 +0400 Subject: [PATCH 19/46] adapter implementation --- src/react/Minimap.stories.tsx | 34 ++++++++-------- src/react/Minimap.tsx | 27 +++++++----- src/react/MinimapDrawer.ts | 77 +++++++++++++++++++---------------- src/react/MinimapProvider.tsx | 72 +++++++++++++++++++++++++++++++- 4 files changed, 144 insertions(+), 66 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 25ea6507..8fd94c1c 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -7,21 +7,21 @@ const meta: Meta = { } export default meta -type Story = StoryObj; +// type Story = StoryObj; -const worldColors: string[][] = [] - -const mapSize = 10 -for (let i = 0; i < mapSize; i += 1) { - worldColors[i] = [] as string[] - for (let j = 0; j < mapSize; j += 1) { - const randColor = Math.floor(Math.random() * 255) - worldColors[i][j] = `rgb(${randColor}, ${randColor}, ${randColor})` - } -} - -export const Primary: Story = { - args: { - worldColors - }, -} +// const worldColors: string[][] = [] +// +// const mapSize = 10 +// for (let i = 0; i < mapSize; i += 1) { +// worldColors[i] = [] as string[] +// for (let j = 0; j < mapSize; j += 1) { +// const randColor = Math.floor(Math.random() * 255) +// worldColors[i][j] = `rgb(${randColor}, ${randColor}, ${randColor})` +// } +// } +// +// export const Primary: Story = { +// args: { +// worldColors +// }, +// } diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 9a22d3ef..361b6569 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,25 +1,27 @@ import { useRef, useEffect, useState } from 'react' import { contro } from '../controls' import { MinimapDrawer } from './MinimapDrawer' +import { DrawerAdapter } from './MinimapDrawer' -export default () => { +export default ({ adapter }: { adapter: DrawerAdapter | null }) => { const [fullMapOpened, setFullMapOpened] = useState(false) const canvasTick = useRef(0) const canvasRef = useRef(null) const drawerRef = useRef(null) function updateMap () { + if (!adapter) return if (drawerRef.current && canvasTick.current % 2 === 0) { - drawerRef.current.draw(bot) + drawerRef.current.draw(adapter.getHighestBlockColor, adapter.playerPosition.x, adapter.playerPosition.z) if (canvasTick.current % 300 === 0) { - drawerRef.current.deleteOldWorldColors(bot.entity.position.x, bot.entity.position.z) + drawerRef.current.deleteOldWorldColors(adapter.playerPosition.x, adapter.playerPosition.z) } } canvasTick.current += 1 } - const toggleFullMap = ({ command }) => { - if (command === 'ui.toggleMap') setFullMapOpened(prev => !prev) + const toggleFullMap = () => { + setFullMapOpened(prev => !prev) } @@ -32,15 +34,18 @@ export default () => { }, [canvasRef.current, fullMapOpened]) useEffect(() => { - bot.on('move', updateMap) - - contro.on('trigger', toggleFullMap) + if (adapter) { + adapter.on('updateMap', updateMap) + adapter.on('toggleFullMap', toggleFullMap) + } return () => { - bot.off('move', updateMap) - contro.off('trigger', toggleFullMap) + if (adapter) { + adapter.off('updateMap', updateMap) + adapter.off('toggleFullMap', toggleFullMap) + } } - }, []) + }, [adapter]) return fullMapOpened ?
& { } } -interface DrawerAdapter extends TypedEventEmitter<{ - updateBlockColor: (pos: Position) => void +export interface DrawerAdapter extends TypedEventEmitter<{ + updateBlockColor: (pos: Vec3) => void updatePlayerPosition: () => void updateWarps: () => void }> { getHighestBlockColor: (x: number, z: number) => string - playerPosition: Position - warps: WorldWarp - setWarp: (name: string, pos: Position, rotation: Position, dimension: string, color: string, disabled: boolean) => void + playerPosition: Vec3 + warps: WorldWarp[] + setWarp: (name: string, pos: Vec3, dimension: string, color: string, disabled: boolean) => void } export class MinimapDrawer { @@ -54,7 +54,11 @@ export class MinimapDrawer { this._canvas = canvas } - draw (bot: BotType | undefined) { + draw ( + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], + x: number, + z: number + ) { this.ctx.clearRect( this.centerX - this.radius, this.centerY - this.radius, @@ -62,24 +66,28 @@ export class MinimapDrawer { this.radius * 2 ) - if (bot) { - this.updateWorldColors(bot) - } else { - this.ctx.strokeStyle = 'black' - this.ctx.beginPath() - - this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) - - this.ctx.fillStyle = 'white' - this.ctx.fill() - - this.ctx.strokeStyle = '#000000' - this.ctx.lineWidth = 1 - this.ctx.stroke() - } + // if (bot) { + this.updateWorldColors(getHighestBlockColor, x, z) + // } else { + // this.ctx.strokeStyle = 'black' + // this.ctx.beginPath() + // + // this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) + // + // this.ctx.fillStyle = 'white' + // this.ctx.fill() + // + // this.ctx.strokeStyle = '#000000' + // this.ctx.lineWidth = 1 + // this.ctx.stroke() + // } } - updateWorldColors (bot: BotType) { + updateWorldColors ( + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], + x: number, + z: number + ) { const left = this.centerX - this.radius const top = this.centerY - this.radius const mapPixel = Math.floor(this.radius * 2 / this.mapSize) @@ -92,10 +100,10 @@ export class MinimapDrawer { for (let row = 0; row < this.mapSize; row += 1) { for (let col = 0; col < this.mapSize; col += 1) { - this.ctx.fillStyle = this.getHighestBlockColor( - bot, - bot.entity.position.x - this.mapSize / 2 + row, - bot.entity.position.z - this.mapSize / 2 + col + this.ctx.fillStyle = this.getHighestBlockColorCached( + getHighestBlockColor, + x - this.mapSize / 2 + row, + z - this.mapSize / 2 + col ) this.ctx.fillRect( left + mapPixel * col, @@ -107,22 +115,19 @@ export class MinimapDrawer { } } - getHighestBlockColor (bot: BotType, x: number, z: number) { + getHighestBlockColorCached ( + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], + x: number, + z: number + ) { const roundX = Math.floor(x) const roundZ = Math.floor(z) const key = `${roundX},${roundZ}` if (this.worldColors[key]) { return this.worldColors[key] } - let block = null as import('prismarine-block').Block | null - let { height } = (bot.game as any) - const airBlocks = new Set(['air', 'cave_air', 'void_air']) - do { - block = bot.world.getBlock(new Vec3(x, height, z)) - height -= 1 - } while (airBlocks.has(block?.name ?? '')) - const color = BlockData.colors[block?.name ?? ''] ?? 'white' - this.worldColors[key] = color + const color = getHighestBlockColor(x, z) + if (color !== 'white') this.worldColors[key] = color return color } diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index d189337a..1a306070 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -1,12 +1,80 @@ -import { useEffect, useState } from 'react' +import { useEffect, useRef } from 'react' import { Vec3 } from 'vec3' import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' import Minimap from './Minimap' +import { DrawerAdapter } from './MinimapDrawer' +import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' +import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' +import { contro } from '../controls' +class DrawerAdapterImpl extends TypedEventEmitter<{ + updateBlockColor: (pos: Vec3) => void + updatePlayerPosition: () => void + updateWarps: () => void +}> implements DrawerAdapter { + playerPosition: Vec3 + warps: WorldWarp[] + + constructor(pos?: Vec3, warps?: WorldWarp[]) { + super() + this.playerPosition = pos ?? new Vec3(0, 0, 0) + this.warps = warps ?? [] as WorldWarp[] + } + + getHighestBlockColor (x: number, z:number) { + let block = null as import('prismarine-block').Block | null + let { height } = (bot.game as any) + const airBlocks = new Set(['air', 'cave_air', 'void_air']) + do { + block = bot.world.getBlock(new Vec3(x, height, z)) + height -= 1 + } while (airBlocks.has(block?.name ?? '')) + const color = BlockData.colors[block?.name ?? ''] ?? 'white' + return color + } + + setWarp(name: string, pos: Vec3, world: string, color: string, disabled: boolean): void { + const warp: WorldWarp = { name, x: pos.x, y: pos.y, z: pos.z, world, color, disabled } + const index = this.warps.findIndex(w => w.name === name) + if (index !== -1) { + this.warps[index] = warp + } else { + this.warps.push(warp) + } + this.emit('updateWarps') + } +} export default () => { + const adapter = useRef(null) + + const updateMap = () => { + if (!adapter.current) return + adapter.current.playerPosition = bot.entity.position + adapter.current.emit('updateMap') + } + + const toggleFullMap = ({ command }) => { + if (!adapter.current) return + if (command === 'ui.toggleMap') adapter.current.emit('toggleFullMap') + } + + useEffect(() => { + adapter.current = new DrawerAdapterImpl(bot.entity.position) + }, []) + + useEffect(() => { + bot.on('move', updateMap) + + contro.on('trigger', toggleFullMap) + + return () => { + bot.off('move', updateMap) + contro.off('trigger', toggleFullMap) + } + }, []) return
- +
} From fb84af6105ffdb9c809eb7f7649aa2f3acc5cc9c Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 21 Jun 2024 15:17:54 +0400 Subject: [PATCH 20/46] clean up --- src/react/Minimap.tsx | 4 ++-- src/react/MinimapDrawer.ts | 16 +--------------- src/react/MinimapProvider.tsx | 16 ++++++++-------- 3 files changed, 11 insertions(+), 25 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 361b6569..29b29d9c 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,7 +1,7 @@ import { useRef, useEffect, useState } from 'react' import { contro } from '../controls' -import { MinimapDrawer } from './MinimapDrawer' -import { DrawerAdapter } from './MinimapDrawer' +import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' + export default ({ adapter }: { adapter: DrawerAdapter | null }) => { const [fullMapOpened, setFullMapOpened] = useState(false) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 68149a41..f2088fc7 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -66,21 +66,7 @@ export class MinimapDrawer { this.radius * 2 ) - // if (bot) { - this.updateWorldColors(getHighestBlockColor, x, z) - // } else { - // this.ctx.strokeStyle = 'black' - // this.ctx.beginPath() - // - // this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false) - // - // this.ctx.fillStyle = 'white' - // this.ctx.fill() - // - // this.ctx.strokeStyle = '#000000' - // this.ctx.lineWidth = 1 - // this.ctx.stroke() - // } + this.updateWorldColors(getHighestBlockColor, x, z) } updateWorldColors ( diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 1a306070..4656c0f6 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -1,11 +1,11 @@ import { useEffect, useRef } from 'react' import { Vec3 } from 'vec3' -import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' -import Minimap from './Minimap' -import { DrawerAdapter } from './MinimapDrawer' import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' +import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' import { contro } from '../controls' +import Minimap from './Minimap' +import { DrawerAdapter } from './MinimapDrawer' class DrawerAdapterImpl extends TypedEventEmitter<{ updateBlockColor: (pos: Vec3) => void @@ -15,7 +15,7 @@ class DrawerAdapterImpl extends TypedEventEmitter<{ playerPosition: Vec3 warps: WorldWarp[] - constructor(pos?: Vec3, warps?: WorldWarp[]) { + constructor (pos?: Vec3, warps?: WorldWarp[]) { super() this.playerPosition = pos ?? new Vec3(0, 0, 0) this.warps = warps ?? [] as WorldWarp[] @@ -33,13 +33,13 @@ class DrawerAdapterImpl extends TypedEventEmitter<{ return color } - setWarp(name: string, pos: Vec3, world: string, color: string, disabled: boolean): void { + setWarp (name: string, pos: Vec3, world: string, color: string, disabled: boolean): void { const warp: WorldWarp = { name, x: pos.x, y: pos.y, z: pos.z, world, color, disabled } const index = this.warps.findIndex(w => w.name === name) - if (index !== -1) { - this.warps[index] = warp - } else { + if (index === -1) { this.warps.push(warp) + } else { + this.warps[index] = warp } this.emit('updateWarps') } From 0dfff262f477623b6fc091d23d4dda2e57fb6d4c Mon Sep 17 00:00:00 2001 From: gguio Date: Sat, 22 Jun 2024 17:00:55 +0400 Subject: [PATCH 21/46] useState used for adapter --- src/react/MinimapDrawer.ts | 8 ++++---- src/react/MinimapProvider.tsx | 28 ++++++++++------------------ 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index f2088fc7..d9094ae7 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -1,8 +1,6 @@ import { Vec3 } from 'vec3' -import { Position } from 'source-map-js' import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' -import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' type BotType = Omit & { world: Omit & { @@ -14,11 +12,13 @@ type BotType = Omit & { } } -export interface DrawerAdapter extends TypedEventEmitter<{ +export type MapUpdates = { updateBlockColor: (pos: Vec3) => void updatePlayerPosition: () => void updateWarps: () => void -}> { +} + +export interface DrawerAdapter extends TypedEventEmitter { getHighestBlockColor: (x: number, z: number) => string playerPosition: Vec3 warps: WorldWarp[] diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 4656c0f6..7eab51eb 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -1,17 +1,13 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import { Vec3 } from 'vec3' import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' import BlockData from '../../prismarine-viewer/viewer/lib/moreBlockDataGenerated.json' import { contro } from '../controls' import Minimap from './Minimap' -import { DrawerAdapter } from './MinimapDrawer' +import { DrawerAdapter, MapUpdates } from './MinimapDrawer' -class DrawerAdapterImpl extends TypedEventEmitter<{ - updateBlockColor: (pos: Vec3) => void - updatePlayerPosition: () => void - updateWarps: () => void -}> implements DrawerAdapter { +class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { playerPosition: Vec3 warps: WorldWarp[] @@ -46,23 +42,19 @@ class DrawerAdapterImpl extends TypedEventEmitter<{ } export default () => { - const adapter = useRef(null) + const [adapter] = useState(() => new DrawerAdapterImpl(bot.entity.position)) const updateMap = () => { - if (!adapter.current) return - adapter.current.playerPosition = bot.entity.position - adapter.current.emit('updateMap') + if (!adapter) return + adapter.playerPosition = bot.entity.position + adapter.emit('updateMap') } const toggleFullMap = ({ command }) => { - if (!adapter.current) return - if (command === 'ui.toggleMap') adapter.current.emit('toggleFullMap') + if (!adapter) return + if (command === 'ui.toggleMap') adapter.emit('toggleFullMap') } - useEffect(() => { - adapter.current = new DrawerAdapterImpl(bot.entity.position) - }, []) - useEffect(() => { bot.on('move', updateMap) @@ -75,6 +67,6 @@ export default () => { }, []) return
- +
} From 03d8e3100fe9501f2bde4fad2fadc2edbb9f0e95 Mon Sep 17 00:00:00 2001 From: gguio Date: Sat, 22 Jun 2024 17:46:39 +0400 Subject: [PATCH 22/46] pointer lock --- src/react/Minimap.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 29b29d9c..35380708 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,10 +1,11 @@ -import { useRef, useEffect, useState } from 'react' -import { contro } from '../controls' +import { useRef, useEffect } from 'react' +import { showModal, hideModal } from '../globalState' +import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' export default ({ adapter }: { adapter: DrawerAdapter | null }) => { - const [fullMapOpened, setFullMapOpened] = useState(false) + const fullMapOpened = useIsModalActive('full-map') const canvasTick = useRef(0) const canvasRef = useRef(null) const drawerRef = useRef(null) @@ -21,7 +22,11 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { } const toggleFullMap = () => { - setFullMapOpened(prev => !prev) + if (fullMapOpened) { + hideModal({ reactType: 'full-map' }) + } else { + showModal({ reactType: 'full-map' }) + } } From 4ef31616c2ab458d309e98b9cab1e832b5ccd748 Mon Sep 17 00:00:00 2001 From: gguio Date: Tue, 25 Jun 2024 15:52:30 +0400 Subject: [PATCH 23/46] mouse click in world coords doesnt count correctly --- src/react/Minimap.tsx | 21 +++++++++++++++++++++ src/react/MinimapDrawer.ts | 7 +++++++ src/react/MinimapProvider.tsx | 2 +- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 35380708..9a60364e 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -29,6 +29,14 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { } } + const setWarp = (e: MouseEvent) => { + if (!e.target) return + const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() + const x = e.pageX - rect.left + const y = e.pageY - rect.top + const coords = drawerRef.current?.mouseToWorldPos(x, y, bot.entity.position) + console.log('coords:', x, y, '| In game coords:', coords) + } useEffect(() => { if (canvasRef.current && !drawerRef.current) { @@ -38,6 +46,19 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { } }, [canvasRef.current, fullMapOpened]) + useEffect(() => { + console.log('full map toggled') + if (fullMapOpened && canvasRef.current) { + console.log('in if') + canvasRef.current.addEventListener('click', setWarp) + } + + return () => { + console.log('memory clear') + canvasRef.current?.removeEventListener('click', setWarp) + } + }, [fullMapOpened]) + useEffect(() => { if (adapter) { adapter.on('updateMap', updateMap) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index d9094ae7..bc9a79a7 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -130,4 +130,11 @@ export class MinimapDrawer { } } } + + mouseToWorldPos(x: number, z: number, botPos: Vec3) { + const worldX = x - this.radius + const worldZ = z - this.radius + + return [botPos.x - worldX, botPos.z - worldZ] + } } diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 7eab51eb..14afc657 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useState } from 'react' import { Vec3 } from 'vec3' import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' From e8864447d239d9c1cbbfe76975d8cc37d5d49ed5 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 12:46:17 +0400 Subject: [PATCH 24/46] click to map pos fix --- src/react/Minimap.tsx | 4 ++-- src/react/MinimapDrawer.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 9a60364e..4c11aa27 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -32,8 +32,8 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { const setWarp = (e: MouseEvent) => { if (!e.target) return const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() - const x = e.pageX - rect.left - const y = e.pageY - rect.top + const x = (e.pageX - rect.left) * canvasRef.current!.width / rect.width + const y = (e.pageY - rect.top) * canvasRef.current!.height / rect.height const coords = drawerRef.current?.mouseToWorldPos(x, y, bot.entity.position) console.log('coords:', x, y, '| In game coords:', coords) } diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index bc9a79a7..5d583a6f 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -131,10 +131,10 @@ export class MinimapDrawer { } } - mouseToWorldPos(x: number, z: number, botPos: Vec3) { - const worldX = x - this.radius - const worldZ = z - this.radius + mouseToWorldPos (x: number, z: number, botPos: Vec3) { + const worldX = x - this.mapSize / 2 + const worldZ = z - this.mapSize / 2 - return [botPos.x - worldX, botPos.z - worldZ] + return [(botPos.x + worldX).toFixed(1), (botPos.z + worldZ).toFixed(1)] } } From a6880be14cc58480633c3da78ece72b50b23750d Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 13:18:14 +0400 Subject: [PATCH 25/46] x and y should be otherwise --- src/react/Minimap.tsx | 11 ++++------- src/react/MinimapDrawer.ts | 27 ++++++++++++++++++++------- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 4c11aa27..df1831e4 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -4,7 +4,7 @@ import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' -export default ({ adapter }: { adapter: DrawerAdapter | null }) => { +export default ({ adapter }: { adapter: DrawerAdapter }) => { const fullMapOpened = useIsModalActive('full-map') const canvasTick = useRef(0) const canvasRef = useRef(null) @@ -13,7 +13,7 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { function updateMap () { if (!adapter) return if (drawerRef.current && canvasTick.current % 2 === 0) { - drawerRef.current.draw(adapter.getHighestBlockColor, adapter.playerPosition.x, adapter.playerPosition.z) + drawerRef.current.draw(bot.entity.position) if (canvasTick.current % 300 === 0) { drawerRef.current.deleteOldWorldColors(adapter.playerPosition.x, adapter.playerPosition.z) } @@ -34,27 +34,24 @@ export default ({ adapter }: { adapter: DrawerAdapter | null }) => { const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() const x = (e.pageX - rect.left) * canvasRef.current!.width / rect.width const y = (e.pageY - rect.top) * canvasRef.current!.height / rect.height - const coords = drawerRef.current?.mouseToWorldPos(x, y, bot.entity.position) + const coords = drawerRef.current?.mouseToWorldPos(y, x, bot.entity.position) console.log('coords:', x, y, '| In game coords:', coords) } useEffect(() => { if (canvasRef.current && !drawerRef.current) { - drawerRef.current = new MinimapDrawer(canvasRef.current) + drawerRef.current = new MinimapDrawer(canvasRef.current, adapter.getHighestBlockColor) } else if (canvasRef.current && drawerRef.current) { drawerRef.current.canvas = canvasRef.current } }, [canvasRef.current, fullMapOpened]) useEffect(() => { - console.log('full map toggled') if (fullMapOpened && canvasRef.current) { - console.log('in if') canvasRef.current.addEventListener('click', setWarp) } return () => { - console.log('memory clear') canvasRef.current?.removeEventListener('click', setWarp) } }, [fullMapOpened]) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 5d583a6f..87e56962 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -28,16 +28,20 @@ export interface DrawerAdapter extends TypedEventEmitter { export class MinimapDrawer { centerX: number centerY: number - mapSize: number + _mapSize: number radius: number ctx: CanvasRenderingContext2D _canvas: HTMLCanvasElement worldColors: { [key: string]: string } = {} + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'] + lastBotPos: Vec3 constructor ( canvas: HTMLCanvasElement, + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'] ) { this.canvas = canvas + this.getHighestBlockColor = getHighestBlockColor } get canvas () { @@ -48,16 +52,24 @@ export class MinimapDrawer { this.ctx = canvas.getContext('2d')! this.ctx.imageSmoothingEnabled = false this.radius = Math.min(canvas.width, canvas.height) / 2 - this.mapSize = this.radius * 2 + this._mapSize = this.radius * 2 this.centerX = canvas.width / 2 this.centerY = canvas.height / 2 this._canvas = canvas } + get mapSize() { + return this._mapSize + } + + set mapSize(mapSize: number) { + this._mapSize = mapSize + this.draw(this.lastBotPos) + } + draw ( - getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], - x: number, - z: number + botPos: Vec3, + getHighestBlockColor?: DrawerAdapter['getHighestBlockColor'], ) { this.ctx.clearRect( this.centerX - this.radius, @@ -66,7 +78,8 @@ export class MinimapDrawer { this.radius * 2 ) - this.updateWorldColors(getHighestBlockColor, x, z) + this.lastBotPos = botPos + this.updateWorldColors(getHighestBlockColor ?? this.getHighestBlockColor, botPos.x, botPos.z) } updateWorldColors ( @@ -135,6 +148,6 @@ export class MinimapDrawer { const worldX = x - this.mapSize / 2 const worldZ = z - this.mapSize / 2 - return [(botPos.x + worldX).toFixed(1), (botPos.z + worldZ).toFixed(1)] + return [(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)] } } From 3c63c0b24006bc40a86e64efffe5e88d52d626c6 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 13:39:54 +0400 Subject: [PATCH 26/46] add new warp logic in MinimapDrawer --- src/react/Minimap.tsx | 27 +++++++++------------------ src/react/MinimapDrawer.ts | 19 +++++++++++-------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index df1831e4..9e0c8c27 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -29,18 +29,13 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { } } - const setWarp = (e: MouseEvent) => { - if (!e.target) return - const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() - const x = (e.pageX - rect.left) * canvasRef.current!.width / rect.width - const y = (e.pageY - rect.top) * canvasRef.current!.height / rect.height - const coords = drawerRef.current?.mouseToWorldPos(y, x, bot.entity.position) - console.log('coords:', x, y, '| In game coords:', coords) + const handleClickOnMap = (e: MouseEvent) => { + drawerRef.current?.addWarpOnClick(e, bot.entity.position) } useEffect(() => { if (canvasRef.current && !drawerRef.current) { - drawerRef.current = new MinimapDrawer(canvasRef.current, adapter.getHighestBlockColor) + drawerRef.current = new MinimapDrawer(canvasRef.current, adapter) } else if (canvasRef.current && drawerRef.current) { drawerRef.current.canvas = canvasRef.current } @@ -48,25 +43,21 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { useEffect(() => { if (fullMapOpened && canvasRef.current) { - canvasRef.current.addEventListener('click', setWarp) + canvasRef.current.addEventListener('click', handleClickOnMap) } return () => { - canvasRef.current?.removeEventListener('click', setWarp) + canvasRef.current?.removeEventListener('click', handleClickOnMap) } }, [fullMapOpened]) useEffect(() => { - if (adapter) { - adapter.on('updateMap', updateMap) - adapter.on('toggleFullMap', toggleFullMap) - } + adapter.on('updateMap', updateMap) + adapter.on('toggleFullMap', toggleFullMap) return () => { - if (adapter) { - adapter.off('updateMap', updateMap) - adapter.off('toggleFullMap', toggleFullMap) - } + adapter.off('updateMap', updateMap) + adapter.off('toggleFullMap', toggleFullMap) } }, [adapter]) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 87e56962..a24c2174 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -33,15 +33,14 @@ export class MinimapDrawer { ctx: CanvasRenderingContext2D _canvas: HTMLCanvasElement worldColors: { [key: string]: string } = {} - getHighestBlockColor: DrawerAdapter['getHighestBlockColor'] lastBotPos: Vec3 constructor ( canvas: HTMLCanvasElement, - getHighestBlockColor: DrawerAdapter['getHighestBlockColor'] + public adapter: DrawerAdapter ) { this.canvas = canvas - this.getHighestBlockColor = getHighestBlockColor + this.adapter = adapter } get canvas () { @@ -58,11 +57,11 @@ export class MinimapDrawer { this._canvas = canvas } - get mapSize() { + get mapSize () { return this._mapSize } - set mapSize(mapSize: number) { + set mapSize (mapSize: number) { this._mapSize = mapSize this.draw(this.lastBotPos) } @@ -79,7 +78,7 @@ export class MinimapDrawer { ) this.lastBotPos = botPos - this.updateWorldColors(getHighestBlockColor ?? this.getHighestBlockColor, botPos.x, botPos.z) + this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) } updateWorldColors ( @@ -144,10 +143,14 @@ export class MinimapDrawer { } } - mouseToWorldPos (x: number, z: number, botPos: Vec3) { + addWarpOnClick (e: MouseEvent, botPos: Vec3) { + if (!e.target) return + const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() + const z = (e.pageX - rect.left) * this.canvas.width / rect.width + const x = (e.pageY - rect.top) * this.canvas.height / rect.height const worldX = x - this.mapSize / 2 const worldZ = z - this.mapSize / 2 - return [(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)] + console.log([(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)]) } } From d61adb0a5a2a1288b2df034368bf21d346236251 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 14:35:32 +0400 Subject: [PATCH 27/46] screen to set up warp --- src/react/Minimap.tsx | 44 ++++++++++++++++++++++++++++++++++++-- src/react/MinimapDrawer.ts | 2 +- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 9e0c8c27..b17770f8 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,11 +1,13 @@ -import { useRef, useEffect } from 'react' +import { useRef, useEffect, useState } from 'react' import { showModal, hideModal } from '../globalState' import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' +import Input from './Input' export default ({ adapter }: { adapter: DrawerAdapter }) => { const fullMapOpened = useIsModalActive('full-map') + const [isWarpInfoOpened, setIsWarpInfoOpened] = useState(false) const canvasTick = useRef(0) const canvasRef = useRef(null) const drawerRef = useRef(null) @@ -13,7 +15,7 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { function updateMap () { if (!adapter) return if (drawerRef.current && canvasTick.current % 2 === 0) { - drawerRef.current.draw(bot.entity.position) + drawerRef.current.draw(adapter.playerPosition) if (canvasTick.current % 300 === 0) { drawerRef.current.deleteOldWorldColors(adapter.playerPosition.x, adapter.playerPosition.z) } @@ -31,6 +33,11 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { const handleClickOnMap = (e: MouseEvent) => { drawerRef.current?.addWarpOnClick(e, bot.entity.position) + setIsWarpInfoOpened(true) + } + + const updateWarps = () => { + } useEffect(() => { @@ -44,6 +51,8 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { useEffect(() => { if (fullMapOpened && canvasRef.current) { canvasRef.current.addEventListener('click', handleClickOnMap) + } else if (!fullMapOpened) { + setIsWarpInfoOpened(false) } return () => { @@ -54,10 +63,12 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { useEffect(() => { adapter.on('updateMap', updateMap) adapter.on('toggleFullMap', toggleFullMap) + adapter.on('updateWaprs', updateWarps) return () => { adapter.off('updateMap', updateMap) adapter.off('toggleFullMap', toggleFullMap) + adapter.off('updateWaprs', updateWarps) } }, [adapter]) @@ -80,6 +91,7 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { height={150} ref={canvasRef} > + {isWarpInfoOpened && }
:
{
} + +const WarpInfo = ({ adapter }: { adapter: DrawerAdapter }) => { + + return
+
+ Name: +
+
+
X:
+
Y:
+
Z:
+
+ +
+} diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index a24c2174..ff6457dc 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -22,7 +22,7 @@ export interface DrawerAdapter extends TypedEventEmitter { getHighestBlockColor: (x: number, z: number) => string playerPosition: Vec3 warps: WorldWarp[] - setWarp: (name: string, pos: Vec3, dimension: string, color: string, disabled: boolean) => void + setWarp: (name: string, pos: Vec3, world: string, color: string, disabled: boolean) => void } export class MinimapDrawer { From 9e7299c2b0021b1f97afc929d8cd0ecda67c679a Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 14:45:51 +0400 Subject: [PATCH 28/46] storybook doesnt worl --- src/react/Minimap.stories.tsx | 20 ++++++++++++++------ src/react/Minimap.tsx | 2 +- src/react/MinimapProvider.tsx | 2 +- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 8fd94c1c..458139e3 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -1,4 +1,6 @@ +import { Vec3 } from 'vec3' import type { Meta, StoryObj } from '@storybook/react' +import { DrawerAdapterImpl } from './MinimapProvider' import Minimap from './Minimap' @@ -7,7 +9,13 @@ const meta: Meta = { } export default meta -// type Story = StoryObj; +type Story = StoryObj; + +const adapter = new DrawerAdapterImpl(new Vec3(0, 0, 0)) + +adapter.getHighestBlockColor = (x: number, z: number) => { + return 'green' +} // const worldColors: string[][] = [] // @@ -20,8 +28,8 @@ export default meta // } // } // -// export const Primary: Story = { -// args: { -// worldColors -// }, -// } +export const Primary: Story = { + args: { + adapter + }, +} diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index b17770f8..f2d8d1e2 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -32,7 +32,7 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { } const handleClickOnMap = (e: MouseEvent) => { - drawerRef.current?.addWarpOnClick(e, bot.entity.position) + drawerRef.current?.addWarpOnClick(e, adapter.playerPosition) setIsWarpInfoOpened(true) } diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 14afc657..27520c49 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -7,7 +7,7 @@ import { contro } from '../controls' import Minimap from './Minimap' import { DrawerAdapter, MapUpdates } from './MinimapDrawer' -class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { +export class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { playerPosition: Vec3 warps: WorldWarp[] From d960d9a55af3b326d8c7299a555df9c9756034c3 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 16:16:46 +0400 Subject: [PATCH 29/46] storybook for minimap. Toggle full map doesnt work yet --- src/react/Minimap.stories.tsx | 65 ++++++++++++++++++++++++++--------- src/react/Minimap.tsx | 10 +++++- 2 files changed, 58 insertions(+), 17 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 458139e3..1c73ff22 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -1,35 +1,68 @@ import { Vec3 } from 'vec3' import type { Meta, StoryObj } from '@storybook/react' -import { DrawerAdapterImpl } from './MinimapProvider' +import { DrawerAdapter, MapUpdates } from './MinimapDrawer' +import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' +import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' +import { useEffect } from 'react' import Minimap from './Minimap' const meta: Meta = { component: Minimap, + decorators: [ + (Story, context) => { + + useEffect(() => { + adapter.emit('toggleFullMap') + setTimeout(updateMap, 2000) + }, [context.args['fullMap']]) + + return
+ } + ] } export default meta type Story = StoryObj; -const adapter = new DrawerAdapterImpl(new Vec3(0, 0, 0)) -adapter.getHighestBlockColor = (x: number, z: number) => { - return 'green' +class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { + playerPosition: Vec3 + warps: WorldWarp[] + + constructor (pos?: Vec3, warps?: WorldWarp[]) { + super() + this.playerPosition = pos ?? new Vec3(0, 0, 0) + this.warps = warps ?? [] as WorldWarp[] + } + + getHighestBlockColor (x: number, z:number) { + console.log('got color') + return 'green' + } + + setWarp (name: string, pos: Vec3, world: string, color: string, disabled: boolean): void { + const warp: WorldWarp = { name, x: pos.x, y: pos.y, z: pos.z, world, color, disabled } + const index = this.warps.findIndex(w => w.name === name) + if (index === -1) { + this.warps.push(warp) + } else { + this.warps[index] = warp + } + this.emit('updateWarps') + } } -// const worldColors: string[][] = [] -// -// const mapSize = 10 -// for (let i = 0; i < mapSize; i += 1) { -// worldColors[i] = [] as string[] -// for (let j = 0; j < mapSize; j += 1) { -// const randColor = Math.floor(Math.random() * 255) -// worldColors[i][j] = `rgb(${randColor}, ${randColor}, ${randColor})` -// } -// } -// +const adapter = new DrawerAdapterImpl() +const updateMap = () => { + console.log('map updated') + adapter.emit('updateMap') +} +setTimeout(updateMap, 2000) + export const Primary: Story = { args: { - adapter + adapter, + fullMap: false }, } diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index f2d8d1e2..ebf8a6bc 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -5,7 +5,7 @@ import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' import Input from './Input' -export default ({ adapter }: { adapter: DrawerAdapter }) => { +export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolean }) => { const fullMapOpened = useIsModalActive('full-map') const [isWarpInfoOpened, setIsWarpInfoOpened] = useState(false) const canvasTick = useRef(0) @@ -48,6 +48,14 @@ export default ({ adapter }: { adapter: DrawerAdapter }) => { } }, [canvasRef.current, fullMapOpened]) + // useEffect(() => { + // if (fullMap) { + // showModal({ reactType: 'full-map' }) + // } else { + // hideModal({ reactType: 'full-map' }) + // } + // }, [fullMap]) + useEffect(() => { if (fullMapOpened && canvasRef.current) { canvasRef.current.addEventListener('click', handleClickOnMap) From c4282c9ab7659dc6a4ceb4167cb2578ae9255281 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 26 Jun 2024 20:36:35 +0400 Subject: [PATCH 30/46] storybook for map + fields to set warp. Styles are not done --- src/react/Minimap.stories.tsx | 13 +++---- src/react/Minimap.tsx | 67 +++++++++++++++++++++++------------ src/react/MinimapDrawer.ts | 1 + 3 files changed, 51 insertions(+), 30 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 1c73ff22..75c0b45d 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -1,11 +1,12 @@ import { Vec3 } from 'vec3' import type { Meta, StoryObj } from '@storybook/react' -import { DrawerAdapter, MapUpdates } from './MinimapDrawer' import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import { TypedEventEmitter } from 'contro-max/build/typedEventEmitter' import { useEffect } from 'react' +import { cleanData } from 'cypress/types/jquery' import Minimap from './Minimap' +import { DrawerAdapter, MapUpdates } from './MinimapDrawer' const meta: Meta = { component: Minimap, @@ -13,8 +14,9 @@ const meta: Meta = { (Story, context) => { useEffect(() => { - adapter.emit('toggleFullMap') - setTimeout(updateMap, 2000) + console.log('map updated') + adapter.emit('updateMap') + }, [context.args['fullMap']]) return
@@ -54,11 +56,6 @@ class DrawerAdapterImpl extends TypedEventEmitter implements DrawerA } const adapter = new DrawerAdapterImpl() -const updateMap = () => { - console.log('map updated') - adapter.emit('updateMap') -} -setTimeout(updateMap, 2000) export const Primary: Story = { args: { diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index ebf8a6bc..4f445813 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,4 +1,4 @@ -import { useRef, useEffect, useState } from 'react' +import { useRef, useEffect, useState, CSSProperties } from 'react' import { showModal, hideModal } from '../globalState' import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' @@ -13,7 +13,6 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea const drawerRef = useRef(null) function updateMap () { - if (!adapter) return if (drawerRef.current && canvasTick.current % 2 === 0) { drawerRef.current.draw(adapter.playerPosition) if (canvasTick.current % 300 === 0) { @@ -46,27 +45,19 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea } else if (canvasRef.current && drawerRef.current) { drawerRef.current.canvas = canvasRef.current } - }, [canvasRef.current, fullMapOpened]) - - // useEffect(() => { - // if (fullMap) { - // showModal({ reactType: 'full-map' }) - // } else { - // hideModal({ reactType: 'full-map' }) - // } - // }, [fullMap]) + }, [canvasRef.current, fullMapOpened, fullMap]) useEffect(() => { - if (fullMapOpened && canvasRef.current) { + if ((fullMapOpened || fullMap) && canvasRef.current) { canvasRef.current.addEventListener('click', handleClickOnMap) - } else if (!fullMapOpened) { + } else if (!fullMapOpened || !fullMap) { setIsWarpInfoOpened(false) } return () => { canvasRef.current?.removeEventListener('click', handleClickOnMap) } - }, [fullMapOpened]) + }, [fullMapOpened, fullMap]) useEffect(() => { adapter.on('updateMap', updateMap) @@ -80,7 +71,7 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea } }, [adapter]) - return fullMapOpened ?
- {isWarpInfoOpened && } + {isWarpInfoOpened && }
:
} -const WarpInfo = ({ adapter }: { adapter: DrawerAdapter }) => { +const WarpInfo = ({ adapter, drawer }: { adapter: DrawerAdapter, drawer: MinimapDrawer | null }) => { + const posInputStyle: CSSProperties = { + width: '100%', + } + const posInputContStyle: CSSProperties = { + flexGrow: '1', + display: 'flex', + } return
{ display: 'flex', justifyContent: 'center', alignItems: 'center', + gap: '10px', flexDirection: 'column', backgroundColor: 'rgba(0, 0, 0, 0.5)', - maxWidth: '70%' }} >
Name:
-
X:
-
Y:
-
Z:
+
X: +
+
+ Y: +
+
+ Z: +
+
+
+ Color: +
+
+ Disabled:
diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index ff6457dc..3f0e03e3 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -152,5 +152,6 @@ export class MinimapDrawer { const worldZ = z - this.mapSize / 2 console.log([(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)]) + this.lastBotPos = new Vec3(Math.floor(botPos.x + worldX), botPos.y, Math.floor(botPos.z + worldZ)) } } From f49c5294423225fd641975d278598c180b10e78d Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 27 Jun 2024 13:04:31 +0400 Subject: [PATCH 31/46] ui for set warp --- src/react/Minimap.tsx | 100 +++++++++++++++++++++------------- src/react/MinimapProvider.tsx | 1 + 2 files changed, 63 insertions(+), 38 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 4f445813..617dcbd5 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,8 +1,9 @@ -import { useRef, useEffect, useState, CSSProperties } from 'react' +import { useRef, useEffect, useState, CSSProperties, Dispatch, SetStateAction } from 'react' import { showModal, hideModal } from '../globalState' import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' import Input from './Input' +import Button from './Button' export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolean }) => { @@ -90,8 +91,7 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea height={150} ref={canvasRef} > - {isWarpInfoOpened && } - + {isWarpInfoOpened && }
:
-
} -const WarpInfo = ({ adapter, drawer }: { adapter: DrawerAdapter, drawer: MinimapDrawer | null }) => { +const WarpInfo = ( + { adapter, drawer, setIsWarpInfoOpened } + : + { adapter: DrawerAdapter, drawer: MinimapDrawer | null, setIsWarpInfoOpened: Dispatch> } +) => { const posInputStyle: CSSProperties = { - width: '100%', - } - const posInputContStyle: CSSProperties = { flexGrow: '1', + } + const fieldCont: CSSProperties = { display: 'flex', + alignItems: 'center', + gap: '5px' } return
-
- Name: -
-
-
X: +
+
+ Name: +
+ +
+
+
+ X: +
+ -
-
- Y: + Y: +
+ -
-
- Z: + Z: +
+ -
+
+
+
Color:
+ +
+
+
Disabled:
+ +
+
+ + +
-
- Color: -
-
- Disabled: -
-
} diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 27520c49..b40ddefa 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -37,6 +37,7 @@ export class DrawerAdapterImpl extends TypedEventEmitter implements } else { this.warps[index] = warp } + if (localServer) void localServer.setWarp(warp) this.emit('updateWarps') } } From 58cb23d2d83d8c60f999da5a74dbd74a6039b5af Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 27 Jun 2024 14:41:07 +0400 Subject: [PATCH 32/46] saving warps in local server --- src/react/Minimap.stories.tsx | 2 +- src/react/Minimap.tsx | 98 +++++++++++++++++++++++++++-------- src/react/MinimapDrawer.ts | 10 ++-- src/react/MinimapProvider.tsx | 8 ++- 4 files changed, 90 insertions(+), 28 deletions(-) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index 75c0b45d..d55f809a 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -43,7 +43,7 @@ class DrawerAdapterImpl extends TypedEventEmitter implements DrawerA return 'green' } - setWarp (name: string, pos: Vec3, world: string, color: string, disabled: boolean): void { + setWarp (name: string, pos: Vec3, color: string, disabled: boolean, world?: string): void { const warp: WorldWarp = { name, x: pos.x, y: pos.y, z: pos.z, world, color, disabled } const index = this.warps.findIndex(w => w.name === name) if (index === -1) { diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index 617dcbd5..9c37cd36 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -1,10 +1,12 @@ import { useRef, useEffect, useState, CSSProperties, Dispatch, SetStateAction } from 'react' +import { Vec3 } from 'vec3' +import { WorldWarp } from 'flying-squid/dist/lib/modules/warps' import { showModal, hideModal } from '../globalState' import { useIsModalActive } from './utilsApp' import { MinimapDrawer, DrawerAdapter } from './MinimapDrawer' import Input from './Input' import Button from './Button' - + export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolean }) => { const fullMapOpened = useIsModalActive('full-map') @@ -32,7 +34,7 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea } const handleClickOnMap = (e: MouseEvent) => { - drawerRef.current?.addWarpOnClick(e, adapter.playerPosition) + drawerRef.current?.setWarpPosOnClick(e, adapter.playerPosition) setIsWarpInfoOpened(true) } @@ -72,7 +74,7 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea } }, [adapter]) - return fullMapOpened || fullMap ?
- {isWarpInfoOpened && } @@ -108,9 +110,19 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea const WarpInfo = ( { adapter, drawer, setIsWarpInfoOpened } - : - { adapter: DrawerAdapter, drawer: MinimapDrawer | null, setIsWarpInfoOpened: Dispatch> } + : + { adapter: DrawerAdapter, drawer: MinimapDrawer | null, setIsWarpInfoOpened: Dispatch> } ) => { + const [warp, setWarp] = useState({ + name: '', + x: drawer?.lastWarpPos.x ?? 100, + y: drawer?.lastWarpPos.y ?? 100, + z: drawer?.lastWarpPos.z ?? 100, + color: '#d3d3d3', + disabled: false, + world: adapter.world + }) + const posInputStyle: CSSProperties = { flexGrow: '1', } @@ -149,38 +161,82 @@ const WarpInfo = (
Name:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, name: e.target.value } }) + }} + />
X:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, x: Number(e.target.value) } }) + }} + />
Y:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, y: Number(e.target.value) } }) + }} + />
Z:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, z: Number(e.target.value) } }) + }} + />
Color:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, color: e.target.value } }) + }} + />
Disabled:
- + { + if (!e.target) return + setWarp(prev => { return { ...prev, disabled: e.target.checked } }) + }} + />
- + diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 1be02898..d097c302 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -37,7 +37,7 @@ export class MinimapDrawer { lastBotPos: Vec3 lastWarpPos: Vec3 - constructor ( + constructor( canvas: HTMLCanvasElement, public adapter: DrawerAdapter ) { @@ -45,11 +45,11 @@ export class MinimapDrawer { this.adapter = adapter } - get canvas () { + get canvas() { return this._canvas } - set canvas (canvas: HTMLCanvasElement) { + set canvas(canvas: HTMLCanvasElement) { this.ctx = canvas.getContext('2d')! this.ctx.imageSmoothingEnabled = false this.radius = Math.min(canvas.width, canvas.height) / 2 @@ -59,16 +59,16 @@ export class MinimapDrawer { this._canvas = canvas } - get mapSize () { + get mapSize() { return this._mapSize } - set mapSize (mapSize: number) { + set mapSize(mapSize: number) { this._mapSize = mapSize this.draw(this.lastBotPos) } - draw ( + draw( botPos: Vec3, getHighestBlockColor?: DrawerAdapter['getHighestBlockColor'], ) { @@ -83,7 +83,7 @@ export class MinimapDrawer { this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) } - updateWorldColors ( + updateWorldColors( getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], x: number, z: number @@ -115,9 +115,9 @@ export class MinimapDrawer { } } - getHighestBlockColorCached ( - getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], - x: number, + getHighestBlockColorCached( + getHighestBlockColor: DrawerAdapter['getHighestBlockColor'], + x: number, z: number ) { const roundX = Math.floor(x) @@ -131,11 +131,11 @@ export class MinimapDrawer { return color } - getDistance (x1: number, z1: number, x2: number, z2: number): number { + getDistance(x1: number, z1: number, x2: number, z2: number): number { return Math.hypot((x2 - x1), (z2 - z1)) } - deleteOldWorldColors (currX: number, currZ: number) { + deleteOldWorldColors(currX: number, currZ: number) { for (const key of Object.keys(this.worldColors)) { const [x, z] = key.split(',').map(Number) if (this.getDistance(x, z, currX, currZ) > this.radius * 5) { @@ -145,15 +145,34 @@ export class MinimapDrawer { } } - setWarpPosOnClick (e: MouseEvent, botPos: Vec3) { + setWarpPosOnClick(e: MouseEvent, botPos: Vec3) { if (!e.target) return const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() - const z = (e.pageX - rect.left) * this.canvas.width / rect.width - const x = (e.pageY - rect.top) * this.canvas.height / rect.height + const z = (e.pageX - rect.left) * this.canvas.width / rect.width + const x = (e.pageY - rect.top) * this.canvas.height / rect.height const worldX = x - this.mapSize / 2 const worldZ = z - this.mapSize / 2 // console.log([(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)]) this.lastWarpPos = new Vec3(Math.floor(botPos.x + worldX), botPos.y, Math.floor(botPos.z + worldZ)) } + + drawWarps() { + for (const warp of this.adapter.warps) { + const distance = this.getDistance( + this.adapter.playerPosition.x, + this.adapter.playerPosition.z, + warp.x, + warp.z + ) + if (distance > this.mapSize * 2/3) continue + const z = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.z + warp.z)) + const x = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.x + warp.x)) + this.ctx.beginPath() + this.ctx.arc(z, x, 2, 0, Math.PI * 2, false) + this.ctx.fillStyle = warp.disabled ? 'rgba(255, 255, 255, 0.4)' : warp.color ?? 'd3d3d3' + this.ctx.fill() + this.ctx.closePath() + } + } } From 2fc14ec420763ae1c49b4c4257397a3a218b5bb2 Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 28 Jun 2024 14:03:22 +0400 Subject: [PATCH 34/46] delay for warp on border --- src/react/MinimapDrawer.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index d097c302..c5e56035 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -168,8 +168,15 @@ export class MinimapDrawer { if (distance > this.mapSize * 2/3) continue const z = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.z + warp.z)) const x = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.x + warp.x)) + const dz = z - this.centerX + const dx = x - this.centerY + const circleDist = Math.sqrt(dx * dx + dz * dz) + + const angle = Math.atan2(dx, dz) + const worldZ = circleDist > this.mapSize / 2 ? this.centerX + this.mapSize / 2 * Math.cos(angle) : z + const worldX = circleDist > this.mapSize / 2 ? this.centerY + this.mapSize / 2 * Math.cos(angle) : x this.ctx.beginPath() - this.ctx.arc(z, x, 2, 0, Math.PI * 2, false) + this.ctx.arc(worldZ, worldX, 2, 0, Math.PI * 2, false) this.ctx.fillStyle = warp.disabled ? 'rgba(255, 255, 255, 0.4)' : warp.color ?? 'd3d3d3' this.ctx.fill() this.ctx.closePath() From 32a0f4c2204bb68db8dd687eadc9f082a716fafc Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 28 Jun 2024 14:20:51 +0400 Subject: [PATCH 35/46] fix delay for warp on border --- src/react/MinimapDrawer.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index c5e56035..7fb08363 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -165,18 +165,18 @@ export class MinimapDrawer { warp.x, warp.z ) - if (distance > this.mapSize * 2/3) continue + if (distance > this.mapSize) continue const z = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.z + warp.z)) const x = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.x + warp.x)) const dz = z - this.centerX const dx = x - this.centerY const circleDist = Math.sqrt(dx * dx + dz * dz) - const angle = Math.atan2(dx, dz) - const worldZ = circleDist > this.mapSize / 2 ? this.centerX + this.mapSize / 2 * Math.cos(angle) : z - const worldX = circleDist > this.mapSize / 2 ? this.centerY + this.mapSize / 2 * Math.cos(angle) : x + const angle = Math.atan2(dz, dx) + const circleZ = circleDist > this.mapSize / 2 ? this.centerX + this.mapSize / 2 * Math.sin(angle) : z + const circleX = circleDist > this.mapSize / 2 ? this.centerY + this.mapSize / 2 * Math.cos(angle) : x this.ctx.beginPath() - this.ctx.arc(worldZ, worldX, 2, 0, Math.PI * 2, false) + this.ctx.arc(circleZ, circleX, circleDist > this.mapSize / 2 ? 1.5 : 2, 0, Math.PI * 2, false) this.ctx.fillStyle = warp.disabled ? 'rgba(255, 255, 255, 0.4)' : warp.color ?? 'd3d3d3' this.ctx.fill() this.ctx.closePath() From a61fc535e2dded3267ba27515a112d329905583a Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 28 Jun 2024 14:27:19 +0400 Subject: [PATCH 36/46] localServer warps are in provider --- src/react/MinimapProvider.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 5e3b6726..89cee961 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -39,15 +39,13 @@ export class DrawerAdapterImpl extends TypedEventEmitter implements } else { this.warps[index] = warp } - if (localServer) void localServer.setWarp(warp) + // if (localServer) void localServer.setWarp(warp) this.emit('updateWarps') - // console.log('local server warps:', localServer?.warps) - // console.log('adapter warps:', this.warps) } } export default () => { - const [adapter] = useState(() => new DrawerAdapterImpl(bot.entity.position)) + const [adapter] = useState(() => new DrawerAdapterImpl(bot.entity.position, localServer?.warps)) const updateMap = () => { if (!adapter) return From 65eae1583e244568e1d4eee82cf7133b8119b68c Mon Sep 17 00:00:00 2001 From: gguio Date: Fri, 28 Jun 2024 14:38:12 +0400 Subject: [PATCH 37/46] open map on click --- src/react/Minimap.tsx | 17 ++++++++++++++++- src/react/MinimapDrawer.ts | 30 +++++++++++++++--------------- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/react/Minimap.tsx b/src/react/Minimap.tsx index d8ed7a7d..5b5238d0 100644 --- a/src/react/Minimap.tsx +++ b/src/react/Minimap.tsx @@ -78,6 +78,7 @@ export default ({ adapter, fullMap }: { adapter: DrawerAdapter, fullMap?: boolea return fullMapOpened || fullMap ?
+
{ + toggleFullMap() + }} + >
+ { + toggleFullMap() + }} >
@@ -227,7 +243,6 @@ const WarpInfo = (
} diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index cfa3b4cb..0037b645 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -53,8 +53,9 @@ export class MinimapDrawer { set canvas (canvas: HTMLCanvasElement) { this.ctx = canvas.getContext('2d', { willReadFrequently: true })! this.ctx.imageSmoothingEnabled = false - this.radius = Math.min(canvas.width, canvas.height) / 2 + this.radius = Math.floor(Math.min(canvas.width, canvas.height) / 2.2) this._mapSize = this.radius * 2 + this.mapPixel = Math.floor(this.radius * 2 / this.mapSize) this.centerX = canvas.width / 2 this.centerY = canvas.height / 2 this._canvas = canvas @@ -84,6 +85,7 @@ export class MinimapDrawer { this.lastBotPos = botPos this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) this.drawWarps() + this.drawPartsOfWorld() } updateWorldColors ( @@ -190,20 +192,33 @@ export class MinimapDrawer { this.ctx.strokeStyle = 'black' this.ctx.lineWidth = 1 this.ctx.stroke() - this.ctx.fillStyle = warp.disabled ? 'rgba(255, 255, 255, 0.4)' : warp.color ?? 'd3d3d3' + this.ctx.fillStyle = warp.disabled ? 'rgba(255, 255, 255, 0.4)' : warp.color ?? '#d3d3d3' this.ctx.fill() this.ctx.closePath() } } drawPartsOfWorld () { - this.ctx.font = '12px serif' + this.ctx.fillStyle = 'white' + this.ctx.shadowOffsetX = 1 + this.ctx.shadowOffsetY = 1 + this.ctx.shadowColor = 'black' + this.ctx.font = `${this.radius / 4}px serif` this.ctx.textAlign = 'center' this.ctx.textBaseline = 'middle' + this.ctx.strokeStyle = 'black' + this.ctx.lineWidth = 1 - this.ctx.fillText('N', this.centerX, 5) - this.ctx.fillText('S', this.centerX, this.centerY - 5) - this.ctx.fillText('W', 5, this.centerY) - this.ctx.fillText('E', this.centerX - 5, this.centerY) + this.ctx.strokeText('W', this.centerX, this.centerY - this.radius) + this.ctx.strokeText('E', this.centerX, this.centerY + this.radius) + this.ctx.strokeText('N', this.centerX - this.radius, this.centerY) + this.ctx.strokeText('S', this.centerX + this.radius, this.centerY) + this.ctx.fillText('W', this.centerX, this.centerY - this.radius) + this.ctx.fillText('E', this.centerX, this.centerY + this.radius) + this.ctx.fillText('N', this.centerX - this.radius, this.centerY) + this.ctx.fillText('S', this.centerX + this.radius, this.centerY) + + this.ctx.shadowOffsetX = 0 + this.ctx.shadowOffsetY = 0 } } From b357ea2e6ee8c7c8b5726ec0d77f6a31d42a6d83 Mon Sep 17 00:00:00 2001 From: gguio Date: Tue, 2 Jul 2024 22:10:01 +0400 Subject: [PATCH 42/46] mirror x axis --- src/react/MinimapDrawer.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 0037b645..8deb742d 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -106,7 +106,7 @@ export class MinimapDrawer { for (let col = 0; col < this.mapSize; col += 1) { this.ctx.fillStyle = this.getHighestBlockColorCached( getHighestBlockColor, - x - this.mapSize / 2 + row, + x - this.mapSize / 2 + this.mapSize - row, z - this.mapSize / 2 + col ) this.ctx.fillRect( @@ -119,11 +119,8 @@ export class MinimapDrawer { } const clippedImage = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height) - this.ctx.restore() - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) - this.ctx.putImageData(clippedImage, 0, 0) } @@ -162,7 +159,7 @@ export class MinimapDrawer { const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() const z = (e.pageX - rect.left) * this.canvas.width / rect.width const x = (e.pageY - rect.top) * this.canvas.height / rect.height - const worldX = x - this.mapSize / 2 + const worldX = -1 * x + this.mapSize / 2 const worldZ = z - this.mapSize / 2 // console.log([(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)]) @@ -179,7 +176,7 @@ export class MinimapDrawer { ) if (distance > this.mapSize) continue const z = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.z + warp.z)) - const x = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.x + warp.x)) + const x = Math.floor((this.mapSize / 2 + this.adapter.playerPosition.x - warp.x)) const dz = z - this.centerX const dx = x - this.centerY const circleDist = Math.hypot(dx, dz) @@ -209,12 +206,12 @@ export class MinimapDrawer { this.ctx.strokeStyle = 'black' this.ctx.lineWidth = 1 - this.ctx.strokeText('W', this.centerX, this.centerY - this.radius) - this.ctx.strokeText('E', this.centerX, this.centerY + this.radius) + this.ctx.strokeText('E', this.centerX, this.centerY - this.radius) + this.ctx.strokeText('W', this.centerX, this.centerY + this.radius) this.ctx.strokeText('N', this.centerX - this.radius, this.centerY) this.ctx.strokeText('S', this.centerX + this.radius, this.centerY) - this.ctx.fillText('W', this.centerX, this.centerY - this.radius) - this.ctx.fillText('E', this.centerX, this.centerY + this.radius) + this.ctx.fillText('E', this.centerX, this.centerY - this.radius) + this.ctx.fillText('W', this.centerX, this.centerY + this.radius) this.ctx.fillText('N', this.centerX - this.radius, this.centerY) this.ctx.fillText('S', this.centerX + this.radius, this.centerY) From d35db9a9a565be9272a4e59a19df679b367f7353 Mon Sep 17 00:00:00 2001 From: gguio Date: Wed, 3 Jul 2024 13:12:18 +0400 Subject: [PATCH 43/46] fixed drawing direction --- src/react/MinimapDrawer.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 8deb742d..c33b8bb0 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -84,8 +84,8 @@ export class MinimapDrawer { this.lastBotPos = botPos this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) - this.drawWarps() this.drawPartsOfWorld() + this.drawWarps() } updateWorldColors ( @@ -106,8 +106,8 @@ export class MinimapDrawer { for (let col = 0; col < this.mapSize; col += 1) { this.ctx.fillStyle = this.getHighestBlockColorCached( getHighestBlockColor, - x - this.mapSize / 2 + this.mapSize - row, - z - this.mapSize / 2 + col + x - this.mapSize / 2 + col, + z - this.mapSize / 2 + row ) this.ctx.fillRect( left + this.mapPixel * col, @@ -157,9 +157,9 @@ export class MinimapDrawer { setWarpPosOnClick (e: MouseEvent, botPos: Vec3) { if (!e.target) return const rect = (e.target as HTMLCanvasElement).getBoundingClientRect() - const z = (e.pageX - rect.left) * this.canvas.width / rect.width - const x = (e.pageY - rect.top) * this.canvas.height / rect.height - const worldX = -1 * x + this.mapSize / 2 + const z = (e.pageY - rect.top) * this.canvas.width / rect.width + const x = (e.pageX - rect.left) * this.canvas.height / rect.height + const worldX = x - this.mapSize / 2 const worldZ = z - this.mapSize / 2 // console.log([(botPos.x + worldX).toFixed(0), (botPos.z + worldZ).toFixed(0)]) @@ -176,7 +176,7 @@ export class MinimapDrawer { ) if (distance > this.mapSize) continue const z = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.z + warp.z)) - const x = Math.floor((this.mapSize / 2 + this.adapter.playerPosition.x - warp.x)) + const x = Math.floor((this.mapSize / 2 - this.adapter.playerPosition.x + warp.x)) const dz = z - this.centerX const dx = x - this.centerY const circleDist = Math.hypot(dx, dz) @@ -185,7 +185,7 @@ export class MinimapDrawer { const circleZ = circleDist > this.mapSize / 2 ? this.centerX + this.mapSize / 2 * Math.sin(angle) : z const circleX = circleDist > this.mapSize / 2 ? this.centerY + this.mapSize / 2 * Math.cos(angle) : x this.ctx.beginPath() - this.ctx.arc(circleZ, circleX, circleDist > this.mapSize / 2 ? 1.5 : 2, 0, Math.PI * 2, false) + this.ctx.arc(circleX, circleZ, circleDist > this.mapSize / 2 ? 1.5 : 2, 0, Math.PI * 2, false) this.ctx.strokeStyle = 'black' this.ctx.lineWidth = 1 this.ctx.stroke() @@ -206,14 +206,14 @@ export class MinimapDrawer { this.ctx.strokeStyle = 'black' this.ctx.lineWidth = 1 - this.ctx.strokeText('E', this.centerX, this.centerY - this.radius) - this.ctx.strokeText('W', this.centerX, this.centerY + this.radius) - this.ctx.strokeText('N', this.centerX - this.radius, this.centerY) - this.ctx.strokeText('S', this.centerX + this.radius, this.centerY) - this.ctx.fillText('E', this.centerX, this.centerY - this.radius) - this.ctx.fillText('W', this.centerX, this.centerY + this.radius) - this.ctx.fillText('N', this.centerX - this.radius, this.centerY) - this.ctx.fillText('S', this.centerX + this.radius, this.centerY) + this.ctx.strokeText('N', this.centerX, this.centerY - this.radius) + this.ctx.strokeText('S', this.centerX, this.centerY + this.radius) + this.ctx.strokeText('W', this.centerX - this.radius, this.centerY) + this.ctx.strokeText('E', this.centerX + this.radius, this.centerY) + this.ctx.fillText('N', this.centerX, this.centerY - this.radius) + this.ctx.fillText('S', this.centerX, this.centerY + this.radius) + this.ctx.fillText('W', this.centerX - this.radius, this.centerY) + this.ctx.fillText('E', this.centerX + this.radius, this.centerY) this.ctx.shadowOffsetX = 0 this.ctx.shadowOffsetY = 0 From 5f4a57234711ba94b9694fcabe86cf6f8c032134 Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 4 Jul 2024 00:23:02 +0400 Subject: [PATCH 44/46] map rotation --- src/react/Minimap.stories.tsx | 1 + src/react/MinimapDrawer.ts | 10 ++++++++++ src/react/MinimapProvider.tsx | 2 ++ 3 files changed, 13 insertions(+) diff --git a/src/react/Minimap.stories.tsx b/src/react/Minimap.stories.tsx index d55f809a..3ecdf9b5 100644 --- a/src/react/Minimap.stories.tsx +++ b/src/react/Minimap.stories.tsx @@ -30,6 +30,7 @@ type Story = StoryObj; class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { playerPosition: Vec3 + yaw: number warps: WorldWarp[] constructor (pos?: Vec3, warps?: WorldWarp[]) { diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index c33b8bb0..88772258 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -23,6 +23,7 @@ export interface DrawerAdapter extends TypedEventEmitter { playerPosition: Vec3 warps: WorldWarp[] world?: string + yaw: number setWarp: (name: string, pos: Vec3, color: string, disabled: boolean, world?: string) => void } @@ -86,6 +87,7 @@ export class MinimapDrawer { this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) this.drawPartsOfWorld() this.drawWarps() + this.rotateMap() } updateWorldColors ( @@ -218,4 +220,12 @@ export class MinimapDrawer { this.ctx.shadowOffsetX = 0 this.ctx.shadowOffsetY = 0 } + + rotateMap () { + this.ctx.setTransform(1, 0, 0, 1, 0, 0) + const angle = this.adapter.yaw % Math.PI + this.ctx.translate(this.centerX, this.centerY) + this.ctx.rotate(angle) + this.ctx.translate(-this.centerX, -this.centerY) + } } diff --git a/src/react/MinimapProvider.tsx b/src/react/MinimapProvider.tsx index 89cee961..5e56e585 100644 --- a/src/react/MinimapProvider.tsx +++ b/src/react/MinimapProvider.tsx @@ -9,6 +9,7 @@ import { DrawerAdapter, MapUpdates } from './MinimapDrawer' export class DrawerAdapterImpl extends TypedEventEmitter implements DrawerAdapter { playerPosition: Vec3 + yaw: number warps: WorldWarp[] world: string @@ -50,6 +51,7 @@ export default () => { const updateMap = () => { if (!adapter) return adapter.playerPosition = bot.entity.position + adapter.yaw = bot.entity.yaw adapter.emit('updateMap') } From 1bd85346505bf94c2e3d3023eb0159f894ca2283 Mon Sep 17 00:00:00 2001 From: gguio Date: Thu, 4 Jul 2024 00:52:05 +0400 Subject: [PATCH 45/46] map rotation. Fixes required: drawing has flaws + parts of world --- src/react/MinimapDrawer.ts | 55 +++++++++++++++++++++++++++++++------- 1 file changed, 46 insertions(+), 9 deletions(-) diff --git a/src/react/MinimapDrawer.ts b/src/react/MinimapDrawer.ts index 88772258..eddc338e 100644 --- a/src/react/MinimapDrawer.ts +++ b/src/react/MinimapDrawer.ts @@ -85,9 +85,9 @@ export class MinimapDrawer { this.lastBotPos = botPos this.updateWorldColors(getHighestBlockColor ?? this.adapter.getHighestBlockColor, botPos.x, botPos.z) - this.drawPartsOfWorld() this.drawWarps() this.rotateMap() + this.drawPartsOfWorld() } updateWorldColors ( @@ -208,14 +208,51 @@ export class MinimapDrawer { this.ctx.strokeStyle = 'black' this.ctx.lineWidth = 1 - this.ctx.strokeText('N', this.centerX, this.centerY - this.radius) - this.ctx.strokeText('S', this.centerX, this.centerY + this.radius) - this.ctx.strokeText('W', this.centerX - this.radius, this.centerY) - this.ctx.strokeText('E', this.centerX + this.radius, this.centerY) - this.ctx.fillText('N', this.centerX, this.centerY - this.radius) - this.ctx.fillText('S', this.centerX, this.centerY + this.radius) - this.ctx.fillText('W', this.centerX - this.radius, this.centerY) - this.ctx.fillText('E', this.centerX + this.radius, this.centerY) + const angle = this.adapter.yaw % Math.PI + const angleS = angle + Math.PI + const angleW = angle + Math.PI * 3 / 2 + const angleE = angle + Math.PI / 2 + + this.ctx.strokeText( + 'N', + this.centerX + this.radius * Math.cos(angle), + this.centerY + this.radius * Math.sin(angle) + ) + this.ctx.strokeText( + 'S', + this.centerX + this.radius * Math.cos(angleS), + this.centerY + this.radius * Math.sin(angleS) + ) + this.ctx.strokeText( + 'W', + this.centerX + this.radius * Math.cos(angleW), + this.centerY + this.radius * Math.sin(angleW) + ) + this.ctx.strokeText( + 'E', + this.centerX + this.radius * Math.cos(angleE), + this.centerY + this.radius * Math.sin(angleE) + ) + this.ctx.fillText( + 'N', + this.centerX + this.radius * Math.cos(angle), + this.centerY + this.radius * Math.sin(angle) + ) + this.ctx.fillText( + 'S', + this.centerX + this.radius * Math.cos(angleS), + this.centerY + this.radius * Math.sin(angleS) + ) + this.ctx.fillText( + 'W', + this.centerX + this.radius * Math.cos(angleW), + this.centerY + this.radius * Math.sin(angleW) + ) + this.ctx.fillText( + 'E', + this.centerX + this.radius * Math.cos(angleE), + this.centerY + this.radius * Math.sin(angleE) + ) this.ctx.shadowOffsetX = 0 this.ctx.shadowOffsetY = 0 From 4127bf716986890d35f146000b88ffd173fc0d07 Mon Sep 17 00:00:00 2001 From: Vitaly Turovsky Date: Sun, 7 Jul 2024 17:50:06 +0300 Subject: [PATCH 46/46] add test fullscreen map --- src/react/FullScreenMap.stories.tsx | 18 ++++ src/react/FullScreenMap.tsx | 132 ++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 src/react/FullScreenMap.stories.tsx create mode 100644 src/react/FullScreenMap.tsx diff --git a/src/react/FullScreenMap.stories.tsx b/src/react/FullScreenMap.stories.tsx new file mode 100644 index 00000000..54b7084a --- /dev/null +++ b/src/react/FullScreenMap.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import FullScreenMap from './FullScreenMap' + +const meta: Meta = { + component: FullScreenMap +} + +export default meta +type Story = StoryObj + +export const Primary: Story = { + args: { + }, + parameters: { + noScaling: true + }, +} diff --git a/src/react/FullScreenMap.tsx b/src/react/FullScreenMap.tsx new file mode 100644 index 00000000..a0366722 --- /dev/null +++ b/src/react/FullScreenMap.tsx @@ -0,0 +1,132 @@ +import { useEffect, useRef } from 'react' +import * as THREE from 'three' +import { DragGesture, WheelGesture, ScrollGesture, MoveGesture, PinchGesture } from '@use-gesture/vanilla' +import Gesto from 'gesto' + +export default () => { + const ref = useRef(null) + + useEffect(() => { + const canvas = ref.current! + const { scene, camera, renderer, addCube, onDestroy } = initScene(canvas) + + // const size = 16 * 4 * 1 + const size = 10 + for (let x = -size / 2; x < size / 2; x++) { + for (let z = -size / 2; z < size / 2; z++) { + addCube(x, z) + } + } + return () => { + renderer.dispose() + onDestroy() + } + }, []) + + return +} + +const initScene = (canvas: HTMLCanvasElement) => { + const abortController = new AbortController() + + const renderer = new THREE.WebGLRenderer({ canvas }) + renderer.setSize(window.innerWidth, window.innerHeight) + renderer.setPixelRatio(window.devicePixelRatio || 1) + renderer.setClearColor(0x000000, 1) + + const scene = new THREE.Scene() + const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000) + + camera.position.set(0, 80, 0) + // look down + camera.rotation.set(-Math.PI / 2, 0, 0, 'ZYX') + + + const onResize = () => { + renderer.setSize(window.innerWidth, window.innerHeight) + camera.aspect = window.innerWidth / window.innerHeight + camera.updateProjectionMatrix() + } + window.addEventListener('resize', onResize, { signal: abortController.signal }) + onResize() + + let debugText = 'test' + const debugTextEl = document.createElement('div') + debugTextEl.style.position = 'fixed' + debugTextEl.style.top = '0' + debugTextEl.style.left = '0' + debugTextEl.style.background = 'rgba(0, 0, 0, 0.5)' + debugTextEl.style.color = 'white' + debugTextEl.style.fontSize = '10px' + debugTextEl.style.padding = '5px' + document.body.appendChild(debugTextEl) + + renderer.setAnimationLoop(() => { + renderer.render(scene, camera) + debugTextEl.innerText = debugText + }) + + // register controls + + const gestures = [] as { destroy: () => void }[] + const gesture = new DragGesture(canvas, ({ movement: [mx, my] }) => { + camera.position.x -= mx * 0.001 + camera.position.z -= my * 0.001 + }) + const wheel = new WheelGesture(canvas, ({ delta: [dx, dy] }) => { + camera.position.y += dy * 0.01 + }) + const pinch = new PinchGesture(canvas, ({ delta, movement: [ox, oy], pinching, origin }) => { + console.log([ox, oy], delta, pinching, origin) + }) + gestures.push(wheel) + gestures.push(gesture) + + let scale = 1 + // const gesto = new Gesto(canvas, { + // container: window, + // pinchOutside: true, + // }).on('drag', ({ deltaX, deltaY }) => { + // camera.position.x -= deltaX * 0.01 + // camera.position.z -= deltaY * 0.01 + // }).on('pinchStart', (e) => { + // e.datas.scale = scale + // }).on('pinch', ({ datas: { scale: newScale } }) => { + // scale = newScale + // console.log(scale) + // camera.position.y += newScale * 0.01 + // }) + + + return { + scene, + camera, + renderer, + onDestroy: () => { + abortController.abort() + for (const gesture of gestures) { + gesture.destroy() + } + // gesto.unset() + }, + addCube (x, z) { + const geometry = new THREE.BoxGeometry(1, 1, 1) + const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) + const cube = new THREE.Mesh(geometry, material) + cube.position.set(x, 0, z) + scene.add(cube) + } + } +} + +document.addEventListener('gesturestart', (e) => e.preventDefault()) +document.addEventListener('gesturechange', (e) => e.preventDefault())