diff --git a/prismarine-viewer/examples/playgroundUi.tsx b/prismarine-viewer/examples/playgroundUi.tsx index 0de20d62d..ed183d780 100644 --- a/prismarine-viewer/examples/playgroundUi.tsx +++ b/prismarine-viewer/examples/playgroundUi.tsx @@ -4,10 +4,14 @@ import { proxy, useSnapshot } from 'valtio' import { LeftTouchArea, RightTouchArea, useInterfaceState } from '@dimaka/interface' import { css } from '@emotion/css' import { Vec3 } from 'vec3' +import useLongPress from '../../src/react/useLongPress' +import { isMobile } from '../viewer/lib/simpleUtils' export const playgroundGlobalUiState = proxy({ scenes: [] as string[], - selected: '' + selected: '', + selectorOpened: false, + actions: {} as Record void>, }) renderToDom() @@ -17,7 +21,7 @@ function Playground () { const style = document.createElement('style') style.innerHTML = /* css */ ` .lil-gui { - top: 40px !important; + top: 60px !important; right: 0 !important; } ` @@ -33,24 +37,31 @@ function Playground () { }}> + } function SceneSelector () { + const mobile = isMobile() const { scenes, selected } = useSnapshot(playgroundGlobalUiState) + const longPressEvents = useLongPress(() => { + playgroundGlobalUiState.selectorOpened = true + }, () => { }) - return
+ return
{scenes.map(scene =>
{ const qs = new URLSearchParams(window.location.search) @@ -61,6 +72,41 @@ function SceneSelector () {
} +const ActionsSelector = () => { + const { actions, selectorOpened } = useSnapshot(playgroundGlobalUiState) + + if (!selectorOpened) return null + return
{Object.entries({ + ...actions, + 'Close' () { + playgroundGlobalUiState.selectorOpened = false + } + }).map(([name, action]) =>
{ + action() + playgroundGlobalUiState.selectorOpened = false + }} + >{name}
)}
+} + const Controls = () => { // todo setting const usingTouch = navigator.maxTouchPoints > 0 diff --git a/src/controls.ts b/src/controls.ts index 3b41c06f1..7f3b7d344 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -523,6 +523,15 @@ export const f3Keybinds = [ } }, mobileTitle: 'Cycle Game Mode' + }, + { + key: 'KeyP', + async action () { + const { uuid, ping: playerPing, username } = bot.player + const proxyPing = await bot['pingProxy']() + void showOptionsModal(`${username}: last known total latency (ping): ${playerPing}. Connected to ${lastConnectOptions.value?.proxy} with current ping ${proxyPing}. Player UUID: ${uuid}`, []) + }, + mobileTitle: 'Show Proxy & Ping Details' } ] diff --git a/src/react/useLongPress.ts b/src/react/useLongPress.ts index 3807221d0..49a1dec6a 100644 --- a/src/react/useLongPress.ts +++ b/src/react/useLongPress.ts @@ -31,9 +31,9 @@ const useLongPress = ( ) const clear = useCallback( - (event: React.MouseEvent | React.TouchEvent, shouldTriggerClick = true) => { + (event: React.MouseEvent | React.TouchEvent) => { if (timeout.current) clearTimeout(timeout.current) - if (shouldTriggerClick && !longPressTriggered) onClick() + if (!longPressTriggered) onClick() setLongPressTriggered(false) if (shouldPreventDefault && target.current) { target.current.removeEventListener('touchend', preventDefault) @@ -46,7 +46,7 @@ const useLongPress = ( onMouseDown: (e: React.MouseEvent) => start(e), onTouchStart: (e: React.TouchEvent) => start(e), onMouseUp: (e: React.MouseEvent) => clear(e), - onMouseLeave: (e: React.MouseEvent) => clear(e, false), + onMouseLeave: (e: React.MouseEvent) => clear(e), onTouchEnd: (e: React.TouchEvent) => clear(e) } } @@ -61,4 +61,3 @@ const preventDefault = (event: Event) => { } export default useLongPress -