{isInputFocused && completionItems?.length ? (
@@ -430,9 +526,10 @@ export default ({
/>}
{chunk?.lines[1]}
)
})}
diff --git a/src/react/ChunksDebugScreen.tsx b/src/react/ChunksDebugScreen.tsx
index 9f47d023..28b0bbc4 100644
--- a/src/react/ChunksDebugScreen.tsx
+++ b/src/react/ChunksDebugScreen.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
import { useUtilsEffect } from '@zardoy/react-util'
import { WorldRendererCommon } from 'renderer/viewer/lib/worldrendererCommon'
import { WorldRendererThree } from 'renderer/viewer/three/worldrendererThree'
+import { Vec3 } from 'vec3'
+import { generateSpiralMatrix } from 'flying-squid/dist/utils'
import Screen from './Screen'
import ChunksDebug, { ChunkDebug } from './ChunksDebug'
import { useIsModalActive } from './utilsApp'
@@ -12,6 +14,10 @@ const Inner = () => {
const [update, setUpdate] = useState(0)
useUtilsEffect(({ interval }) => {
+ const up = () => {
+ // setUpdate(u => u + 1)
+ }
+ bot.on('chunkColumnLoad', up)
interval(
500,
() => {
@@ -20,17 +26,48 @@ const Inner = () => {
setUpdate(u => u + 1)
}
)
+ return () => {
+ bot.removeListener('chunkColumnLoad', up)
+ }
}, [])
+ // Track first load time for all chunks
+ const allLoadTimes = Object.values(worldView!.debugChunksInfo)
+ .map(chunk => chunk?.loads[0]?.time ?? Infinity)
+ .filter(time => time !== Infinity)
+ .sort((a, b) => a - b)
+
+ const allSpiralChunks = Object.fromEntries(generateSpiralMatrix(worldView!.viewDistance).map(pos => [`${pos[0]},${pos[1]}`, pos]))
+
const mapChunk = (key: string, state: ChunkDebug['state']): ChunkDebug => {
+ const x = Number(key.split(',')[0])
+ const z = Number(key.split(',')[1])
+ const chunkX = Math.floor(x / 16)
+ const chunkZ = Math.floor(z / 16)
+
+ delete allSpiralChunks[`${chunkX},${chunkZ}`]
const chunk = worldView!.debugChunksInfo[key]
+ const firstLoadTime = chunk?.loads[0]?.time
+ const loadIndex = firstLoadTime ? allLoadTimes.indexOf(firstLoadTime) + 1 : 0
+ // const timeSinceFirstLoad = firstLoadTime ? firstLoadTime - allLoadTimes[0] : 0
+ const timeSinceFirstLoad = firstLoadTime ? firstLoadTime - allLoadTimes[0] : 0
+ let line = ''
+ let line2 = ''
+ if (loadIndex) {
+ line = `${loadIndex}`
+ line2 = `${timeSinceFirstLoad}ms`
+ }
+ if (chunk?.loads.length > 1) {
+ line += ` - ${chunk.loads.length}`
+ }
+
return {
- x: Number(key.split(',')[0]),
- z: Number(key.split(',')[1]),
+ x,
+ z,
state,
- lines: [String(chunk?.loads.length ?? 0)],
+ lines: [line, line2],
sidebarLines: [
- `loads: ${chunk.loads?.map(l => `${l.reason} ${l.dataLength} ${l.time}`).join('\n')}`,
+ `loads: ${chunk?.loads?.map(l => `${l.reason} ${l.dataLength} ${l.time}`).join('\n')}`,
// `blockUpdates: ${chunk.blockUpdates}`,
],
}
@@ -55,14 +92,22 @@ const Inner = () => {
const chunksDone = Object.keys(world.finishedChunks).map(key => mapChunk(key, 'done'))
+
+ const chunksWaitingOrder = Object.values(allSpiralChunks).map(([x, z]) => {
+ const pos = new Vec3(x * 16, 0, z * 16)
+ if (bot.world.getColumnAt(pos) === null) return null
+ return mapChunk(`${pos.x},${pos.z}`, 'order-queued')
+ }).filter(a => !!a)
+
const allChunks = [
...chunksWaitingServer,
...chunksWaitingClient,
...clientProcessingChunks,
...chunksDone,
...chunksDoneEmpty,
+ ...chunksWaitingOrder,
]
- return
+ return
{
if (!options.debugContro) return null
return (
-
+
Keys: {[...pressedKeys].join(', ')}
Actions: {actions.join(', ')}
diff --git a/src/react/FireRenderer.tsx b/src/react/FireRenderer.tsx
new file mode 100644
index 00000000..20ad4606
--- /dev/null
+++ b/src/react/FireRenderer.tsx
@@ -0,0 +1,153 @@
+/* eslint-disable no-await-in-loop */
+import { useSnapshot } from 'valtio'
+import { useEffect, useState } from 'react'
+import { getLoadedImage } from 'mc-assets/dist/utils'
+import { createCanvas } from 'renderer/viewer/lib/utils'
+
+const TEXTURE_UPDATE_INTERVAL = 100 // 5 times per second
+
+export default () => {
+ const { onFire, perspective } = useSnapshot(appViewer.playerState.reactive)
+ const [fireTextures, setFireTextures] = useState
([])
+ const [currentTextureIndex, setCurrentTextureIndex] = useState(0)
+
+ useEffect(() => {
+ let animationFrameId: number
+ let lastTextureUpdate = 0
+
+ const updateTexture = (timestamp: number) => {
+ if (onFire && fireTextures.length > 0) {
+ if (timestamp - lastTextureUpdate >= TEXTURE_UPDATE_INTERVAL) {
+ setCurrentTextureIndex(prev => (prev + 1) % fireTextures.length)
+ lastTextureUpdate = timestamp
+ }
+ }
+ animationFrameId = requestAnimationFrame(updateTexture)
+ }
+
+ animationFrameId = requestAnimationFrame(updateTexture)
+ return () => cancelAnimationFrame(animationFrameId)
+ }, [onFire, fireTextures])
+
+ useEffect(() => {
+ const loadTextures = async () => {
+ const fireImageUrls: string[] = []
+
+ const { resourcesManager } = appViewer
+ const { blocksAtlasParser } = resourcesManager
+ if (!blocksAtlasParser?.atlas?.latest) {
+ console.warn('FireRenderer: Blocks atlas parser not available')
+ return
+ }
+
+ const keys = Object.keys(blocksAtlasParser.atlas.latest.textures).filter(key => /^fire_\d+$/.exec(key))
+ for (const key of keys) {
+ const textureInfo = blocksAtlasParser.getTextureInfo(key) as { u: number, v: number, width?: number, height?: number }
+ if (textureInfo) {
+ const defaultSize = blocksAtlasParser.atlas.latest.tileSize
+ const imageWidth = blocksAtlasParser.atlas.latest.width
+ const imageHeight = blocksAtlasParser.atlas.latest.height
+ const textureWidth = textureInfo.width ?? defaultSize
+ const textureHeight = textureInfo.height ?? defaultSize
+
+ // Create a temporary canvas for the full texture
+ const tempCanvas = createCanvas(textureWidth, textureHeight)
+ const tempCtx = tempCanvas.getContext('2d')
+ if (tempCtx && blocksAtlasParser.latestImage) {
+ const image = await getLoadedImage(blocksAtlasParser.latestImage)
+ tempCtx.drawImage(
+ image,
+ textureInfo.u * imageWidth,
+ textureInfo.v * imageHeight,
+ textureWidth,
+ textureHeight,
+ 0,
+ 0,
+ textureWidth,
+ textureHeight
+ )
+
+ // Create final canvas with only top 20% of the texture
+ const finalHeight = Math.ceil(textureHeight * 0.4)
+ const canvas = createCanvas(textureWidth, finalHeight)
+ const ctx = canvas.getContext('2d')
+ if (ctx) {
+ // Draw only the top portion
+ ctx.drawImage(
+ tempCanvas,
+ 0,
+ 0, // Start from top
+ textureWidth,
+ finalHeight,
+ 0,
+ 0,
+ textureWidth,
+ finalHeight
+ )
+
+ const blob = await canvas.convertToBlob()
+ const url = URL.createObjectURL(blob)
+ fireImageUrls.push(url)
+ }
+ }
+ }
+ }
+
+ setFireTextures(fireImageUrls)
+ }
+
+ // Load textures initially
+ if (appViewer.resourcesManager.currentResources) {
+ void loadTextures()
+ }
+
+ // Set up listener for texture updates
+ const onAssetsUpdated = () => {
+ void loadTextures()
+ }
+ appViewer.resourcesManager.on('assetsTexturesUpdated', onAssetsUpdated)
+
+ // Cleanup
+ return () => {
+ appViewer.resourcesManager.off('assetsTexturesUpdated', onAssetsUpdated)
+ // Cleanup texture URLs
+ for (const url of fireTextures) URL.revokeObjectURL(url)
+ }
+ }, [])
+
+ if (!onFire || fireTextures.length === 0 || perspective !== 'first_person') return null
+
+ return (
+
+ )
+}
diff --git a/src/react/FoodBar.css b/src/react/FoodBar.css
index ca3629cd..83da3c25 100644
--- a/src/react/FoodBar.css
+++ b/src/react/FoodBar.css
@@ -11,7 +11,6 @@
--offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2))));
--bg-x: calc(-1 * (16px + 9px * var(--lightened)));
--bg-y: calc(-1 * 27px);
- pointer-events: none;
image-rendering: pixelated;
}
diff --git a/src/react/GameInteractionOverlay.tsx b/src/react/GameInteractionOverlay.tsx
index 63cee586..268162ec 100644
--- a/src/react/GameInteractionOverlay.tsx
+++ b/src/react/GameInteractionOverlay.tsx
@@ -2,6 +2,7 @@ import { useRef, useEffect } from 'react'
import { subscribe, useSnapshot } from 'valtio'
import { useUtilsEffect } from '@zardoy/react-util'
import { getThreeJsRendererMethods } from 'renderer/viewer/three/threeJsMethods'
+import { isItemActivatableMobile } from 'mineflayer-mouse/dist/activatableItemsMobile'
import { options } from '../optionsStorage'
import { activeModalStack, isGameActive, miscUiState } from '../globalState'
import { onCameraMove, CameraMoveEvent } from '../cameraRotationControls'
@@ -77,7 +78,10 @@ function GameInteractionOverlayInner ({
if (options.touchInteractionType === 'classic') {
virtualClickTimeout ??= setTimeout(() => {
virtualClickActive = true
- document.dispatchEvent(new MouseEvent('mousedown', { button: 0 }))
+ // If held item is activatable, use right click instead of left
+ const heldItemName = bot?.heldItem?.name
+ const isOnlyActivatable = heldItemName && isItemActivatableMobile(heldItemName, loadedData)
+ document.dispatchEvent(new MouseEvent('mousedown', { button: isOnlyActivatable ? 2 : 0 }))
}, touchStartBreakingBlockMs)
}
}
@@ -150,16 +154,23 @@ function GameInteractionOverlayInner ({
if (virtualClickActive) {
// button 0 is left click
- document.dispatchEvent(new MouseEvent('mouseup', { button: 0 }))
+ // If held item is activatable, use right click instead of left
+ const heldItemName = bot?.heldItem?.name
+ const isOnlyActivatable = heldItemName && isItemActivatableMobile(heldItemName, loadedData)
+ document.dispatchEvent(new MouseEvent('mouseup', { button: isOnlyActivatable ? 2 : 0 }))
virtualClickActive = false
} else if (!capturedPointer.active.activateCameraMove && (Date.now() - capturedPointer.active.time < touchStartBreakingBlockMs)) {
// single click action
const MOUSE_BUTTON_RIGHT = 2
const MOUSE_BUTTON_LEFT = 0
+ const heldItemName = bot?.heldItem?.name
+ const isOnlyActivatable = heldItemName && isItemActivatableMobile(heldItemName, loadedData)
const gonnaAttack = !!bot.mouse.getCursorState().entity || !!videoCursorInteraction()
- document.dispatchEvent(new MouseEvent('mousedown', { button: gonnaAttack ? MOUSE_BUTTON_LEFT : MOUSE_BUTTON_RIGHT }))
+ // If not attacking entity and item is activatable, use right click for breaking
+ const useButton = !gonnaAttack && isOnlyActivatable ? MOUSE_BUTTON_RIGHT : (gonnaAttack ? MOUSE_BUTTON_LEFT : MOUSE_BUTTON_RIGHT)
+ document.dispatchEvent(new MouseEvent('mousedown', { button: useButton }))
bot.mouse.update()
- document.dispatchEvent(new MouseEvent('mouseup', { button: gonnaAttack ? MOUSE_BUTTON_LEFT : MOUSE_BUTTON_RIGHT }))
+ document.dispatchEvent(new MouseEvent('mouseup', { button: useButton }))
}
if (screenTouches > 0) {
diff --git a/src/react/HealthBar.css b/src/react/HealthBar.css
index a6fefe09..72f5a1fe 100644
--- a/src/react/HealthBar.css
+++ b/src/react/HealthBar.css
@@ -11,7 +11,6 @@
--offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2)) ));
--bg-x: calc(-1 * (16px + 9px * var(--lightened)));
--bg-y: calc(-1 * var(--hardcore) * 45px);
- pointer-events: none;
image-rendering: pixelated;
}
diff --git a/src/react/HotbarRenderApp.tsx b/src/react/HotbarRenderApp.tsx
index 80f0a789..c782e6ef 100644
--- a/src/react/HotbarRenderApp.tsx
+++ b/src/react/HotbarRenderApp.tsx
@@ -2,15 +2,15 @@ import { useEffect, useRef, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { createPortal } from 'react-dom'
import { subscribe, useSnapshot } from 'valtio'
-import { openItemsCanvas, openPlayerInventory, upInventoryItems } from '../inventoryWindows'
+import { openItemsCanvas, upInventoryItems } from '../inventoryWindows'
import { activeModalStack, isGameActive, miscUiState } from '../globalState'
import { currentScaling } from '../scaleInterface'
import { watchUnloadForCleanup } from '../gameUnload'
import { getItemNameRaw } from '../mineflayer/items'
import { isInRealGameSession } from '../utils'
+import { triggerCommand } from '../controls'
import MessageFormattedString from './MessageFormattedString'
import SharedHudVars from './SharedHudVars'
-import { packetsReplayState } from './state/packetsReplayState'
const ItemName = ({ itemKey }: { itemKey: string }) => {
@@ -75,6 +75,8 @@ const HotbarInner = () => {
const container = useRef(null!)
const [itemKey, setItemKey] = useState('')
const hasModals = useSnapshot(activeModalStack).length
+ const { currentTouch, appConfig } = useSnapshot(miscUiState)
+ const mobileOpenInventory = currentTouch && !appConfig?.disabledCommands?.includes('general.inventory')
useEffect(() => {
const controller = new AbortController()
@@ -105,7 +107,7 @@ const HotbarInner = () => {
canvasManager.setScale(currentScaling.scale)
canvasManager.windowHeight = 25 * canvasManager.scale
- canvasManager.windowWidth = (210 - (inv.inventory.supportsOffhand ? 0 : 25) + (miscUiState.currentTouch ? 28 : 0)) * canvasManager.scale
+ canvasManager.windowWidth = (210 - (inv.inventory.supportsOffhand ? 0 : 25) + (mobileOpenInventory ? 28 : 0)) * canvasManager.scale
}
setSize()
watchUnloadForCleanup(subscribe(currentScaling, setSize))
@@ -113,17 +115,19 @@ const HotbarInner = () => {
container.current.appendChild(inv.canvas)
const upHotbarItems = () => {
if (!appViewer.resourcesManager?.itemsAtlasParser) return
- upInventoryItems(true, inv)
+ globalThis.debugHotbarItems = upInventoryItems(true, inv)
}
canvasManager.canvas.onclick = (e) => {
if (!isGameActive(true)) return
const pos = inv.canvasManager.getMousePos(inv.canvas, e)
- if (canvasManager.canvas.width - pos.x < 35 * inv.canvasManager.scale) {
- openPlayerInventory()
+ if (canvasManager.canvas.width - pos.x < 35 * inv.canvasManager.scale && mobileOpenInventory) {
+ triggerCommand('general.inventory', true)
+ triggerCommand('general.inventory', false)
}
}
+ globalThis.debugUpHotbarItems = upHotbarItems
upHotbarItems()
bot.inventory.on('updateSlot', upHotbarItems)
appViewer.resourcesManager.on('assetsTexturesUpdated', upHotbarItems)
@@ -180,17 +184,8 @@ const HotbarInner = () => {
})
document.addEventListener('touchend', (e) => {
if (touchStart && (e.target as HTMLElement).closest('.hotbar') && Date.now() - touchStart > 700) {
- // drop item
- bot._client.write('block_dig', {
- 'status': 4,
- 'location': {
- 'x': 0,
- 'z': 0,
- 'y': 0
- },
- 'face': 0,
- sequence: 0
- })
+ triggerCommand('general.dropStack', true)
+ triggerCommand('general.dropStack', false)
}
touchStart = 0
})
@@ -206,17 +201,28 @@ const HotbarInner = () => {
+ }}>
+
+
-
{
setEffectToAdd(null)
setEffectToRemove(null)
}}
- />
- {
setEffectToAdd(null)
setEffectToRemove(null)
}}
- />
-
+
+
{
+ hideModal()
+ }}
+ />
+
+
+ {title}
+
+
+ {
+ ideState.contents = value ?? ''
+ }}
+ value={contents}
+ options={{
+ fontFamily: bodyFont,
+ minimap: {
+ enabled: true,
+ },
+ }}
+ />
+
+
= {
id?: string
@@ -18,7 +20,8 @@ type GeneralItem = {
tooltip?: string
// description?: string
enableWarning?: string
- willHaveNoEffect?: boolean
+ requiresRestart?: boolean
+ requiresChunksReload?: boolean
values?: Array
disableIf?: [option: keyof typeof options, value: any]
}
@@ -56,7 +59,14 @@ const useCommonComponentsProps = (item: OptionMeta) => {
}
}
-export const OptionButton = ({ item }: { item: Extract }) => {
+const ignoreReloadWarningsCache = new Set()
+
+export const OptionButton = ({ item, onClick, valueText, cacheKey }: {
+ item: Extract,
+ onClick?: () => void,
+ valueText?: string,
+ cacheKey?: string,
+}) => {
const { disabledBecauseOfSetting } = useCommonComponentsProps(item)
const optionValue = useSnapshot(options)[item.id!]
@@ -84,40 +94,63 @@ export const OptionButton = ({ item }: { item: Extract {
if (disabledReason) {
- await showOptionsModal(`The option is unavailable. ${disabledReason}`, [])
+ await showOptionsModal(`${translate('The option is not available')}: ${disabledReason}`, [])
return
}
if (item.enableWarning && !options[item.id!]) {
const result = await showOptionsModal(item.enableWarning, ['Enable'])
if (!result) return
}
- const { values } = item
- if (values) {
- const getOptionValue = (arrItem) => {
- if (typeof arrItem === 'string') {
- return arrItem
+ onClick?.()
+ if (item.id) {
+ const { values } = item
+ if (values) {
+ const getOptionValue = (arrItem) => {
+ if (typeof arrItem === 'string') {
+ return arrItem
+ } else {
+ return arrItem[0]
+ }
+ }
+ const currentIndex = values.findIndex((value) => {
+ return getOptionValue(value) === optionValue
+ })
+ if (currentIndex === -1) {
+ options[item.id] = getOptionValue(values[0])
} else {
- return arrItem[0]
+ const nextIndex = event.shiftKey
+ ? (currentIndex - 1 + values.length) % values.length
+ : (currentIndex + 1) % values.length
+ options[item.id] = getOptionValue(values[nextIndex])
+ }
+ } else {
+ options[item.id] = !options[item.id]
+ }
+ }
+
+ const toCacheKey = cacheKey ?? item.id ?? ''
+ if (toCacheKey && !ignoreReloadWarningsCache.has(toCacheKey)) {
+ ignoreReloadWarningsCache.add(toCacheKey)
+
+ if (item.requiresRestart) {
+ const result = await showOptionsModal(translate('The option requires a restart to take effect'), ['Restart', 'I will do it later'], {
+ cancel: false,
+ })
+ if (result) {
+ reconnectReload()
}
}
- const currentIndex = values.findIndex((value) => {
- return getOptionValue(value) === optionValue
- })
- if (currentIndex === -1) {
- options[item.id!] = getOptionValue(values[0])
- } else {
- const nextIndex = event.shiftKey
- ? (currentIndex - 1 + values.length) % values.length
- : (currentIndex + 1) % values.length
- options[item.id!] = getOptionValue(values[nextIndex])
+ if (item.requiresChunksReload) {
+ const result = await showOptionsModal(translate('The option requires a chunks reload to take effect'), ['Reload', 'I will do it later'], {
+ cancel: false,
+ })
+ if (result) {
+ reloadChunksAction()
+ }
}
- } else {
- options[item.id!] = !options[item.id!]
}
}}
title={disabledReason ? `${disabledReason} | ${item.tooltip}` : item.tooltip}
@@ -128,7 +161,15 @@ export const OptionButton = ({ item }: { item: Extract }) => {
+export const OptionSlider = ({
+ item,
+ onChange,
+ valueOverride
+}: {
+ item: Extract
+ onChange?: (value: number) => void
+ valueOverride?: number
+}) => {
const { disabledBecauseOfSetting } = useCommonComponentsProps(item)
const optionValue = useSnapshot(options)[item.id!]
@@ -141,7 +182,7 @@ export const OptionSlider = ({ item }: { item: Extract {
options[item.id!] = value
+ onChange?.(value)
}}
/>
)
diff --git a/src/react/OverlayModelViewer.tsx b/src/react/OverlayModelViewer.tsx
new file mode 100644
index 00000000..e48a2f0b
--- /dev/null
+++ b/src/react/OverlayModelViewer.tsx
@@ -0,0 +1,554 @@
+import { proxy, useSnapshot, subscribe } from 'valtio'
+import { useEffect, useMemo, useRef } from 'react'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { applySkinToPlayerObject, createPlayerObject, PlayerObjectType } from '../../renderer/viewer/lib/createPlayerObject'
+import { currentScaling } from '../scaleInterface'
+import { activeModalStack } from '../globalState'
+
+THREE.ColorManagement.enabled = false
+
+export const modelViewerState = proxy({
+ model: undefined as undefined | {
+ models?: string[] // Array of model URLs (URL itself is the cache key)
+ steveModelSkin?: string
+ debug?: boolean
+ // absolute positioning
+ positioning: {
+ windowWidth: number
+ windowHeight: number
+ x: number
+ y: number
+ width: number
+ height: number
+ scaled?: boolean
+ onlyInitialScale?: boolean
+ followCursor?: boolean
+ }
+ modelCustomization?: { [modelUrl: string]: { color?: string, opacity?: number, metalness?: number, roughness?: number } }
+ resetRotationOnReleae?: boolean
+ continiousRender?: boolean
+ alwaysRender?: boolean
+ }
+})
+globalThis.modelViewerState = modelViewerState
+
+// Global debug function to get camera and model values
+globalThis.getModelViewerValues = () => {
+ const scene = globalThis.sceneRef?.current
+ if (!scene) return null
+
+ const { camera, playerObject } = scene
+ if (!playerObject) return null
+
+ const wrapper = playerObject.parent
+ if (!wrapper) return null
+
+ const box = new THREE.Box3().setFromObject(wrapper)
+ const size = box.getSize(new THREE.Vector3())
+ const center = box.getCenter(new THREE.Vector3())
+
+ return {
+ camera: {
+ position: camera.position.clone(),
+ fov: camera.fov,
+ aspect: camera.aspect
+ },
+ model: {
+ position: wrapper.position.clone(),
+ rotation: wrapper.rotation.clone(),
+ scale: wrapper.scale.clone(),
+ size,
+ center
+ },
+ cursor: {
+ position: globalThis.cursorPosition || { x: 0, y: 0 },
+ normalized: globalThis.cursorPosition ? {
+ x: globalThis.cursorPosition.x * 2 - 1,
+ y: globalThis.cursorPosition.y * 2 - 1
+ } : { x: 0, y: 0 }
+ },
+ visibleArea: {
+ height: 2 * Math.tan(camera.fov * Math.PI / 180 / 2) * camera.position.z,
+ width: 2 * Math.tan(camera.fov * Math.PI / 180 / 2) * camera.position.z * camera.aspect
+ }
+ }
+}
+
+subscribe(activeModalStack, () => {
+ if (!modelViewerState.model || !modelViewerState.model?.alwaysRender) {
+ return
+ }
+ if (activeModalStack.length === 0) {
+ modelViewerState.model = undefined
+ }
+})
+
+export default () => {
+ const { model } = useSnapshot(modelViewerState)
+ const containerRef = useRef(null)
+ const sceneRef = useRef<{
+ scene: THREE.Scene
+ camera: THREE.PerspectiveCamera
+ renderer: THREE.WebGLRenderer
+ controls: OrbitControls
+ playerObject?: PlayerObjectType
+ dispose: () => void
+ }>()
+ const initialScale = useMemo(() => {
+ return currentScaling.scale
+ }, [])
+ globalThis.sceneRef = sceneRef
+
+ // Cursor following state
+ const cursorPosition = useRef({ x: 0, y: 0 })
+ const isFollowingCursor = useRef(false)
+
+ // Model management state
+ const loadedModels = useRef>(new Map())
+ const modelLoaders = useRef>(new Map())
+
+ // Model management functions
+ const loadModel = (modelUrl: string) => {
+ if (loadedModels.current.has(modelUrl)) return // Already loaded
+
+ const isGLTF = modelUrl.toLowerCase().endsWith('.gltf') || modelUrl.toLowerCase().endsWith('.glb')
+ const loader = isGLTF ? new GLTFLoader() : new OBJLoader()
+ modelLoaders.current.set(modelUrl, loader)
+
+ const onLoad = (object: THREE.Object3D) => {
+ // Apply customization if available and enable shadows
+ const customization = model?.modelCustomization?.[modelUrl]
+ object.traverse((child) => {
+ if (child instanceof THREE.Mesh) {
+ // Enable shadow casting and receiving for all meshes
+ child.castShadow = true
+ child.receiveShadow = true
+
+ if (child.material && customization) {
+ const material = child.material as THREE.MeshStandardMaterial
+ if (customization.color) {
+ material.color.setHex(parseInt(customization.color.replace('#', ''), 16))
+ }
+ if (customization.opacity !== undefined) {
+ material.opacity = customization.opacity
+ material.transparent = customization.opacity < 1
+ }
+ if (customization.metalness !== undefined) {
+ material.metalness = customization.metalness
+ }
+ if (customization.roughness !== undefined) {
+ material.roughness = customization.roughness
+ }
+ }
+ }
+ })
+
+ // Center and scale model
+ const box = new THREE.Box3().setFromObject(object)
+ const center = box.getCenter(new THREE.Vector3())
+ const size = box.getSize(new THREE.Vector3())
+ const maxDim = Math.max(size.x, size.y, size.z)
+ const scale = 2 / maxDim
+ object.scale.setScalar(scale)
+ object.position.sub(center.multiplyScalar(scale))
+
+ // Store the model using URL as key
+ loadedModels.current.set(modelUrl, object)
+ sceneRef.current?.scene.add(object)
+
+ // Trigger render
+ if (sceneRef.current) {
+ setTimeout(() => {
+ const render = () => sceneRef.current?.renderer.render(sceneRef.current.scene, sceneRef.current.camera)
+ render()
+ }, 0)
+ }
+ }
+
+ if (isGLTF) {
+ (loader as GLTFLoader).load(modelUrl, (gltf) => {
+ onLoad(gltf.scene)
+ })
+ } else {
+ (loader as OBJLoader).load(modelUrl, onLoad)
+ }
+ }
+
+ const removeModel = (modelUrl: string) => {
+ const model = loadedModels.current.get(modelUrl)
+ if (model) {
+ sceneRef.current?.scene.remove(model)
+ model.traverse((child) => {
+ if (child instanceof THREE.Mesh) {
+ if (child.material) {
+ if (Array.isArray(child.material)) {
+ for (const mat of child.material) {
+ mat.dispose()
+ }
+ } else {
+ child.material.dispose()
+ }
+ }
+ if (child.geometry) {
+ child.geometry.dispose()
+ }
+ }
+ })
+ loadedModels.current.delete(modelUrl)
+ }
+ modelLoaders.current.delete(modelUrl)
+ }
+
+ // Subscribe to model changes
+ useEffect(() => {
+ if (!modelViewerState.model?.models) return
+
+ const modelsChanged = () => {
+ const currentModels = modelViewerState.model?.models || []
+ const currentModelUrls = new Set(currentModels)
+ const loadedModelUrls = new Set(loadedModels.current.keys())
+
+ // Remove models that are no longer in the state
+ for (const modelUrl of loadedModelUrls) {
+ if (!currentModelUrls.has(modelUrl)) {
+ removeModel(modelUrl)
+ }
+ }
+
+ // Add new models
+ for (const modelUrl of currentModels) {
+ if (!loadedModelUrls.has(modelUrl)) {
+ loadModel(modelUrl)
+ }
+ }
+ }
+ const unsubscribe = subscribe(modelViewerState.model.models, modelsChanged)
+
+ let unmounted = false
+ setTimeout(() => {
+ if (unmounted) return
+ modelsChanged()
+ })
+
+ return () => {
+ unmounted = true
+ unsubscribe?.()
+ }
+ }, [model?.models])
+
+ useEffect(() => {
+ if (!model || !containerRef.current) return
+
+ // Setup scene
+ const scene = new THREE.Scene()
+ scene.background = null // Transparent background
+
+ // Setup camera with optimal settings for player model viewing
+ const camera = new THREE.PerspectiveCamera(
+ 50, // Reduced FOV for better model viewing
+ model.positioning.width / model.positioning.height,
+ 0.1,
+ 1000
+ )
+ camera.position.set(0, 0, 3) // Position camera to view player model optimally
+
+ // Setup renderer with pixel density awareness
+ const renderer = new THREE.WebGLRenderer({ alpha: true })
+ let scale = window.devicePixelRatio || 1
+ if (modelViewerState.model?.positioning.scaled) {
+ scale *= currentScaling.scale
+ }
+ renderer.setPixelRatio(scale)
+ renderer.setSize(model.positioning.width, model.positioning.height)
+
+ // Enable shadow rendering for depth and realism
+ renderer.shadowMap.enabled = true
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap // Soft shadows for better quality
+ renderer.shadowMap.autoUpdate = true
+
+ containerRef.current.appendChild(renderer.domElement)
+
+ // Setup controls
+ const controls = new OrbitControls(camera, renderer.domElement)
+ // controls.enableZoom = false
+ // controls.enablePan = false
+ controls.minPolarAngle = Math.PI / 2 // Lock vertical rotation
+ controls.maxPolarAngle = Math.PI / 2
+ controls.enableDamping = true
+ controls.dampingFactor = 0.05
+
+ // Add ambient light for overall illumination
+ const ambientLight = new THREE.AmbientLight(0xff_ff_ff, 0.4) // Reduced intensity to allow shadows
+ scene.add(ambientLight)
+
+ // Add directional light for shadows and depth (similar to Minecraft inventory lighting)
+ const directionalLight = new THREE.DirectionalLight(0xff_ff_ff, 0.6)
+ directionalLight.position.set(2, 2, 2) // Position light from top-right-front
+ directionalLight.target.position.set(0, 0, 0) // Point towards center of scene
+
+ // Configure shadow properties for optimal quality
+ directionalLight.castShadow = true
+ directionalLight.shadow.mapSize.width = 2048 // High resolution shadow map
+ directionalLight.shadow.mapSize.height = 2048
+ directionalLight.shadow.camera.near = 0.1
+ directionalLight.shadow.camera.far = 10
+ directionalLight.shadow.camera.left = -3
+ directionalLight.shadow.camera.right = 3
+ directionalLight.shadow.camera.top = 3
+ directionalLight.shadow.camera.bottom = -3
+ directionalLight.shadow.bias = -0.0001 // Reduce shadow acne
+
+ scene.add(directionalLight)
+ scene.add(directionalLight.target)
+
+ // Cursor following function
+ const updatePlayerLookAt = () => {
+ if (!isFollowingCursor.current || !sceneRef.current?.playerObject) return
+
+ const { playerObject } = sceneRef.current
+ const { x, y } = cursorPosition.current
+
+ // Convert 0-1 cursor position to normalized coordinates (-1 to 1)
+ const normalizedX = x * 2 - 1
+ const normalizedY = y * 2 - 1 // Inverted: top of screen = negative pitch, bottom = positive pitch
+
+ // Calculate head rotation based on cursor position
+ // Limit head movement to realistic angles
+ const maxHeadYaw = Math.PI / 3 // 60 degrees
+ const maxHeadPitch = Math.PI / 4 // 45 degrees
+
+ const headYaw = normalizedX * maxHeadYaw
+ const headPitch = normalizedY * maxHeadPitch
+
+ // Apply head rotation with smooth interpolation
+ const lerpFactor = 0.1 // Smooth interpolation factor
+ playerObject.skin.head.rotation.y = THREE.MathUtils.lerp(
+ playerObject.skin.head.rotation.y,
+ headYaw,
+ lerpFactor
+ )
+ playerObject.skin.head.rotation.x = THREE.MathUtils.lerp(
+ playerObject.skin.head.rotation.x,
+ headPitch,
+ lerpFactor
+ )
+
+ // Apply slight body rotation for more natural movement
+ const bodyYaw = headYaw * 0.3 // Body follows head but with less rotation
+ playerObject.rotation.y = THREE.MathUtils.lerp(
+ playerObject.rotation.y,
+ bodyYaw,
+ lerpFactor * 0.5 // Slower body movement
+ )
+
+ render()
+ }
+
+ // Render function
+ const render = () => {
+ renderer.render(scene, camera)
+ }
+
+ // Setup animation/render strategy
+ if (model.continiousRender) {
+ // Continuous animation loop
+ const animate = () => {
+ requestAnimationFrame(animate)
+ render()
+ }
+ animate()
+ } else {
+ // Render only on camera movement
+ controls.addEventListener('change', render)
+ // Initial render
+ render()
+ // Render after model loads
+ if (model.steveModelSkin !== undefined) {
+ // Create player model
+ const { playerObject, wrapper } = createPlayerObject({
+ scale: 1 // Start with base scale, will adjust below
+ })
+
+ // Enable shadows for player object
+ wrapper.traverse((child) => {
+ if (child instanceof THREE.Mesh) {
+ child.castShadow = true
+ child.receiveShadow = true
+ }
+ })
+
+ // Calculate proper scale and positioning for camera view
+ const box = new THREE.Box3().setFromObject(wrapper)
+ const size = box.getSize(new THREE.Vector3())
+ const center = box.getCenter(new THREE.Vector3())
+
+ // Calculate scale to fit within camera view (considering FOV and distance)
+ const cameraDistance = camera.position.z
+ const fov = camera.fov * Math.PI / 180 // Convert to radians
+ const visibleHeight = 2 * Math.tan(fov / 2) * cameraDistance
+ const visibleWidth = visibleHeight * (model.positioning.width / model.positioning.height)
+
+ const scaleFactor = Math.min(
+ (visibleHeight) / size.y,
+ (visibleWidth) / size.x
+ )
+
+ wrapper.scale.multiplyScalar(scaleFactor)
+
+ // Center the player object
+ wrapper.position.sub(center.multiplyScalar(scaleFactor))
+
+ // Rotate to face camera (remove the default 180° rotation)
+ wrapper.rotation.set(0, 0, 0)
+
+ scene.add(wrapper)
+ sceneRef.current = {
+ ...sceneRef.current!,
+ playerObject
+ }
+
+ void applySkinToPlayerObject(playerObject, model.steveModelSkin).then(() => {
+ setTimeout(render, 0)
+ })
+
+ // Set up cursor following if enabled
+ if (model.positioning.followCursor) {
+ isFollowingCursor.current = true
+ }
+ }
+ }
+
+ // Window cursor tracking for followCursor
+ let lastCursorUpdate = 0
+ let waitingRender = false
+ const handleWindowPointerMove = (event: PointerEvent) => {
+ if (!model.positioning.followCursor) return
+
+ // Track cursor position as 0-1 across the entire window
+ const newPosition = {
+ x: event.clientX / window.innerWidth,
+ y: event.clientY / window.innerHeight
+ }
+ cursorPosition.current = newPosition
+ globalThis.cursorPosition = newPosition // Expose for debug
+ lastCursorUpdate = Date.now()
+ updatePlayerLookAt()
+ if (!waitingRender) {
+ requestAnimationFrame(() => {
+ render()
+ waitingRender = false
+ })
+ waitingRender = true
+ }
+ }
+
+ // Add window event listeners
+ if (model.positioning.followCursor) {
+ window.addEventListener('pointermove', handleWindowPointerMove)
+ isFollowingCursor.current = true
+ }
+
+ // Store refs for cleanup
+ sceneRef.current = {
+ ...sceneRef.current!,
+ scene,
+ camera,
+ renderer,
+ controls,
+ dispose () {
+ if (!model.continiousRender) {
+ controls.removeEventListener('change', render)
+ }
+ if (model.positioning.followCursor) {
+ window.removeEventListener('pointermove', handleWindowPointerMove)
+ }
+
+ // Clean up loaded models
+ for (const [modelUrl, model] of loadedModels.current) {
+ scene.remove(model)
+ model.traverse((child) => {
+ if (child instanceof THREE.Mesh) {
+ if (child.material) {
+ if (Array.isArray(child.material)) {
+ for (const mat of child.material) {
+ mat.dispose()
+ }
+ } else {
+ child.material.dispose()
+ }
+ }
+ if (child.geometry) {
+ child.geometry.dispose()
+ }
+ }
+ })
+ }
+ loadedModels.current.clear()
+ modelLoaders.current.clear()
+
+ const playerObject = sceneRef.current?.playerObject
+ if (playerObject?.skin.map) {
+ (playerObject.skin.map as unknown as THREE.Texture).dispose()
+ }
+ renderer.dispose()
+ renderer.domElement?.remove()
+ }
+ }
+
+ return () => {
+ sceneRef.current?.dispose()
+ }
+ }, [model])
+
+ if (!model) return null
+
+ const { x, y, width, height, scaled, onlyInitialScale } = model.positioning
+ const { windowWidth } = model.positioning
+ const { windowHeight } = model.positioning
+ const scaleValue = onlyInitialScale ? initialScale : 'var(--guiScale)'
+
+ return (
+
+ )
+}
diff --git a/src/react/PauseScreen.tsx b/src/react/PauseScreen.tsx
index 4bdd2974..856ac932 100644
--- a/src/react/PauseScreen.tsx
+++ b/src/react/PauseScreen.tsx
@@ -32,7 +32,7 @@ import Screen from './Screen'
import styles from './PauseScreen.module.css'
import { DiscordButton } from './DiscordButton'
import { showNotification } from './NotificationProvider'
-import { appStatusState, reconnectReload } from './AppStatusProvider'
+import { appStatusState, lastConnectOptions, reconnectReload } from './AppStatusProvider'
import NetworkStatus from './NetworkStatus'
import PauseLinkButtons from './PauseLinkButtons'
import { pixelartIcons } from './PixelartIcon'
@@ -265,7 +265,7 @@ export default () => {
Back to Game
-
openOptionsMenu('main')}>Options
+
openOptionsMenu('main')}>Options...
{singleplayer ? (
clickJoinLinkButton()}>
@@ -289,16 +289,60 @@ export default () => {
/>
) : null}
+ {(noConnection || appConfig?.alwaysReconnectButton) && (
+
+
+ Reconnect
+
+ {appConfig?.reportBugButtonWithReconnect && (
+ {
+ const platform = (navigator as any).userAgentData?.platform ?? navigator.platform
+ const body = `Version: ${window.location.hostname}\nServer: ${lastConnectOptions.value?.server ?? ''}\nPlatform: ${platform}\nWebsite: ${window.location.href}`
+ const currentHost = window.location.hostname
+ const options = [
+ 'GitHub (please use it if you can)',
+ 'Email',
+ ...((currentHost === 'mcraft.fun' || currentHost === 'ru.mcraft.fun') ? ['Try Beta Version'] : []),
+ // 'Use previous versions of client'
+ ]
+ const action = await showOptionsModal('Report client issue', options)
+ if (!action) return
+
+ switch (action) {
+ case 'GitHub (please use it if you can)':
+ openGithub(`/issues/new?body=${encodeURIComponent(body)}&title=${encodeURIComponent('[Bug Report] ')}&labels=bug`)
+ break
+ case 'Email': {
+ window.location.href = `mailto:support@mcraft.fun?body=${encodeURIComponent(body)}`
+ break
+ }
+ case 'Try Beta Version': {
+ if (currentHost === 'mcraft.fun') {
+ window.location.href = 'https://s.mcraft.fun'
+ } else if (currentHost === 'ru.mcraft.fun') {
+ window.location.href = 'https://s.pcm.gg'
+ }
+ break
+ }
+ case 'Use previous versions of client':
+ // TODO: Implement versions screen
+ void showOptionsModal('Previous versions', [])
+ break
+ }
+ }}
+ />
+ )}
+
+ )}
{!lockConnect && <>
{fsState.inMemorySave && !fsState.syncFs && !fsState.isReadonly ? 'Save & Quit' : 'Disconnect & Reset'}
}
- {(noConnection || appConfig?.alwaysReconnectButton) && (
-
- Reconnect
-
- )}
diff --git a/src/react/ServersListProvider.tsx b/src/react/ServersListProvider.tsx
index d95d4e9e..42ef2aaa 100644
--- a/src/react/ServersListProvider.tsx
+++ b/src/react/ServersListProvider.tsx
@@ -1,9 +1,11 @@
import { useEffect, useMemo, useState } from 'react'
import { useUtilsEffect } from '@zardoy/react-util'
import { useSnapshot } from 'valtio'
+import { supportedVersions } from 'minecraft-protocol'
+import { versionToNumber } from 'mc-assets/dist/utils'
import { ConnectOptions } from '../connect'
import { activeModalStack, hideCurrentModal, miscUiState, notHideableModalsWithoutForce, showModal } from '../globalState'
-import supportedVersions from '../supportedVersions.mjs'
+import appSupportedVersions from '../supportedVersions.mjs'
import { appQueryParams } from '../appParams'
import { fetchServerStatus, isServerValid } from '../api/mcStatusApi'
import { getServerInfo } from '../mineflayer/mc-protocol'
@@ -20,6 +22,10 @@ import Button from './Button'
import { pixelartIcons } from './PixelartIcon'
import { showNotification } from './NotificationProvider'
+const firstProtocolVersion = versionToNumber(supportedVersions[0])
+const lastProtocolVersion = versionToNumber(supportedVersions.at(-1)!)
+const protocolSupportedVersions = appSupportedVersions.filter(v => versionToNumber(v) >= firstProtocolVersion && versionToNumber(v) <= lastProtocolVersion)
+
const EXPLICIT_SHARE_SERVER_MODE = false
if (appQueryParams.lockConnect) {
@@ -113,6 +119,7 @@ const Inner = ({ hidden, customServersList }: { hidden?: boolean, customServersL
...serversListProvided,
...(customServersList ? [] : (miscUiState.appConfig?.promoteServers ?? [])).map((server): StoreServerItem => ({
ip: server.ip,
+ name: server.name,
versionOverride: server.version,
description: server.description,
isRecommended: true
@@ -156,13 +163,23 @@ const Inner = ({ hidden, customServersList }: { hidden?: boolean, customServersL
const isWebSocket = server.ip.startsWith('ws://') || server.ip.startsWith('wss://')
let data
if (isWebSocket) {
- const pingResult = await getServerInfo(server.ip, undefined, undefined, true)
- console.log('pingResult.fullInfo.description', pingResult.fullInfo.description)
- data = {
- formattedText: pingResult.fullInfo.description,
- textNameRight: `ws ${pingResult.latency}ms`,
- textNameRightGrayed: `${pingResult.fullInfo.players?.online ?? '??'}/${pingResult.fullInfo.players?.max ?? '??'}`,
- offline: false
+ try {
+ const pingResult = await getServerInfo(server.ip, undefined, undefined, true)
+ console.log('pingResult.fullInfo.description', pingResult.fullInfo.description)
+ data = {
+ formattedText: pingResult.fullInfo.description,
+ icon: pingResult.fullInfo.favicon,
+ textNameRight: `ws ${pingResult.latency}ms`,
+ textNameRightGrayed: `${pingResult.fullInfo.players?.online ?? '??'}/${pingResult.fullInfo.players?.max ?? '??'}`,
+ offline: false
+ }
+ } catch (err) {
+ data = {
+ formattedText: 'Failed to connect',
+ textNameRight: '',
+ textNameRightGrayed: '',
+ offline: true
+ }
}
} else {
data = await fetchServerStatus(server.ip, /* signal */undefined, server.versionOverride) // DONT ADD SIGNAL IT WILL CRUSH JS RUNTIME
@@ -217,7 +234,6 @@ const Inner = ({ hidden, customServersList }: { hidden?: boolean, customServersL
})
const editModalJsx = isEditScreenModal ? {
min?: number;
max?: number;
disabledReason?: string;
+ throttle?: number | false; // milliseconds, default 100, false to disable
updateValue?: (value: number) => void;
updateOnDragEnd?: boolean;
@@ -26,15 +27,24 @@ const Slider: React.FC = ({
min = 0,
max = 100,
disabledReason,
+ throttle = 0,
updateOnDragEnd = false,
updateValue,
...divProps
}) => {
+ label = translate(label)
+ disabledReason = translate(disabledReason)
+ valueDisplay = typeof valueDisplay === 'string' ? translate(valueDisplay) : valueDisplay
+
const [value, setValue] = useState(valueProp)
const getRatio = (v = value) => Math.max(Math.min((v - min) / (max - min), 1), 0)
const [ratio, setRatio] = useState(getRatio())
+ // Throttling refs
+ const timeoutRef = useRef(null)
+ const lastValueRef = useRef(valueProp)
+
useEffect(() => {
setValue(valueProp)
}, [valueProp])
@@ -42,14 +52,52 @@ const Slider: React.FC = ({
setRatio(getRatio())
}, [value, min, max])
- const fireValueUpdate = (dragEnd: boolean, v = value) => {
+ const throttledUpdateValue = useCallback((newValue: number, dragEnd: boolean) => {
if (updateOnDragEnd !== dragEnd) return
- updateValue?.(v)
+ if (!updateValue) return
+
+ lastValueRef.current = newValue
+
+ if (!throttle) {
+ // No throttling
+ updateValue(newValue)
+ return
+ }
+
+ // Clear existing timeout
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+
+ // Set new timeout
+ timeoutRef.current = setTimeout(() => {
+ updateValue(lastValueRef.current)
+ timeoutRef.current = null
+ }, throttle)
+ }, [updateValue, updateOnDragEnd, throttle])
+
+ // Cleanup timeout on unmount
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ // Fire the last value immediately on cleanup
+ if (updateValue && lastValueRef.current !== undefined) {
+ updateValue(lastValueRef.current)
+ }
+ }
+ }
+ }, [updateValue])
+
+ const fireValueUpdate = (dragEnd: boolean, v = value) => {
+ throttledUpdateValue(v, dragEnd)
}
+ const labelText = `${label}: ${valueDisplay ?? value} ${unit}`
+
return (
-
+
17 ? 'settings-text-container-long' : ''}`} style={{ width }} {...divProps}>
= ({
- {label}: {valueDisplay ?? value} {unit}
+ {labelText}
diff --git a/src/react/TouchAreasControls.tsx b/src/react/TouchAreasControls.tsx
index ec9d201b..469097bd 100644
--- a/src/react/TouchAreasControls.tsx
+++ b/src/react/TouchAreasControls.tsx
@@ -1,5 +1,6 @@
import { CSSProperties, PointerEvent, useEffect, useRef, useState } from 'react'
import { proxy, ref, useSnapshot } from 'valtio'
+import activatableItemsMobile from 'mineflayer-mouse/dist/activatableItemsMobile'
import { contro } from '../controls'
import { options } from '../optionsStorage'
import PixelartIcon from './PixelartIcon'
@@ -72,10 +73,12 @@ export default ({ setupActive, closeButtonsSetup, foregroundGameActive }: Props)
break: false,
jump: bot?.getControlState('jump'),
}[name]
+ const RIGHT_MOUSE_BUTTON = 2
+ const LEFT_MOUSE_BUTTON = 0
const holdDown = {
action () {
if (!bot) return
- document.dispatchEvent(new MouseEvent('mousedown', { button: 2 }))
+ document.dispatchEvent(new MouseEvent('mousedown', { button: RIGHT_MOUSE_BUTTON }))
bot.mouse.update()
},
sneak () {
@@ -87,7 +90,7 @@ export default ({ setupActive, closeButtonsSetup, foregroundGameActive }: Props)
},
break () {
if (!bot) return
- document.dispatchEvent(new MouseEvent('mousedown', { button: 0 }))
+ document.dispatchEvent(new MouseEvent('mousedown', { button: LEFT_MOUSE_BUTTON }))
bot.mouse.update()
active = true
},
@@ -101,7 +104,7 @@ export default ({ setupActive, closeButtonsSetup, foregroundGameActive }: Props)
}
const holdUp = {
action () {
- document.dispatchEvent(new MouseEvent('mouseup', { button: 2 }))
+ document.dispatchEvent(new MouseEvent('mouseup', { button: RIGHT_MOUSE_BUTTON }))
},
sneak () {
void contro.emit('release', {
@@ -112,7 +115,7 @@ export default ({ setupActive, closeButtonsSetup, foregroundGameActive }: Props)
},
break () {
if (!bot) return
- document.dispatchEvent(new MouseEvent('mouseup', { button: 0 }))
+ document.dispatchEvent(new MouseEvent('mouseup', { button: LEFT_MOUSE_BUTTON }))
bot.mouse.update()
active = false
},
diff --git a/src/react/appStorageProvider.ts b/src/react/appStorageProvider.ts
index bce6feca..fd469186 100644
--- a/src/react/appStorageProvider.ts
+++ b/src/react/appStorageProvider.ts
@@ -91,6 +91,14 @@ const setCookieValue = (key: string, value: string): boolean => {
}
document.cookie = cookie
+
+ // Verify the cookie was actually saved by reading it back
+ const savedValue = getCookieValue(key)
+ if (savedValue !== value) {
+ console.warn(`Cookie verification failed for key '${key}'. Expected: ${value}, Got: ${savedValue}`)
+ return false
+ }
+
return true
} catch (error) {
console.error(`Failed to set cookie for key '${key}':`, error)
@@ -229,12 +237,19 @@ export const getRandomUsername = (appConfig: AppConfig) => {
export const appStorage = proxy({ ...defaultStorageData })
+// Track if cookies failed in this session
+let cookiesFailedThisSession = false
+
// Check if cookie storage should be used (will be set by options)
const shouldUseCookieStorage = () => {
- const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+ // If cookies failed this session, don't try again
+ if (cookiesFailedThisSession) {
+ return false
+ }
+
const isSecureCookiesAvailable = () => {
// either https or localhost
- return window.location.protocol === 'https:' || (window.location.hostname === 'localhost' && !isSafari)
+ return window.location.protocol === 'https:' || (window.location.hostname === 'localhost')
}
if (!isSecureCookiesAvailable()) {
return false
@@ -345,8 +360,10 @@ const saveKey = (key: keyof StorageData) => {
// Remove from localStorage if cookie save was successful
markLocalStorageAsMigrated(key)
} else {
- // Disabling for now so no confusing conflicts modal after page reload
- // useLocalStorage = true
+ // Cookie save failed, disable cookies for this session and fallback to localStorage
+ console.warn(`Cookie save failed for key '${key}', disabling cookies for this session`)
+ cookiesFailedThisSession = true
+ useLocalStorage = true
}
}
}
diff --git a/src/reactUi.tsx b/src/reactUi.tsx
index b15cb79d..6339686e 100644
--- a/src/reactUi.tsx
+++ b/src/reactUi.tsx
@@ -66,6 +66,9 @@ import CreditsAboutModal from './react/CreditsAboutModal'
import GlobalOverlayHints from './react/GlobalOverlayHints'
import FullscreenTime from './react/FullscreenTime'
import StorageConflictModal from './react/StorageConflictModal'
+import FireRenderer from './react/FireRenderer'
+import MonacoEditor from './react/MonacoEditor'
+import OverlayModelViewer from './react/OverlayModelViewer'
const isFirefox = ua.getBrowser().name === 'Firefox'
if (isFirefox) {
@@ -171,6 +174,7 @@ const InGameUi = () => {
+ {!disabledUiParts.includes('fire') &&
}
@@ -178,6 +178,7 @@ Server specific:
- `?lockConnect=true` - Only works then `ip` parameter is set. Disables cancel/save buttons and all inputs in the connect screen already set as parameters. Useful for integrates iframes.
- `?autoConnect=true` - Only works then `ip` and `version` parameters are set and `allowAutoConnect` is `true` in config.json! Directly connects to the specified server. Useful for integrates iframes.
- `?serversList=