feat: add ping display on mobile & via f3, playground ui improvements

zardoy · Dec 6, 2024 · 18a191a · 18a191a
1 parent 3bacef1
commit 18a191a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git 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<string, () => void>,
 })
 
 renderToDom(<Playground />)
@@ -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 () {
   }}>
     <Controls />
     <SceneSelector />
+    <ActionsSelector />
   </div>
 }
 
 function SceneSelector () {
+  const mobile = isMobile()
   const { scenes, selected } = useSnapshot(playgroundGlobalUiState)
+  const longPressEvents = useLongPress(() => {
+    playgroundGlobalUiState.selectorOpened = true
+  }, () => { })
 
-  return <div style={{
-    position: 'fixed',
-    top: 0,
-    left: 0,
-  }}>
+  return <div
+    style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+    }} {...longPressEvents}>
     {scenes.map(scene => <div
       key={scene}
       style={{
-        padding: '2px 5px',
+        padding: mobile ? '5px' : '2px 5px',
         cursor: 'pointer',
         userSelect: 'none',
         background: scene === selected ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.6)',
+        fontWeight: scene === selected ? 'bold' : 'normal',
       }}
       onClick={() => {
         const qs = new URLSearchParams(window.location.search)
@@ -61,6 +72,41 @@ function SceneSelector () {
   </div>
 }
 
+const ActionsSelector = () => {
+  const { actions, selectorOpened } = useSnapshot(playgroundGlobalUiState)
+
+  if (!selectorOpened) return null
+  return <div style={{
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 10,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 5,
+    fontSize: 24,
+  }}>{Object.entries({
+      ...actions,
+      'Close' () {
+        playgroundGlobalUiState.selectorOpened = false
+      }
+    }).map(([name, action]) => <div
+      key={name}
+      style={{
+        padding: '2px 5px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        background: 'rgba(0, 0, 0, 0.5)',
+      }}
+      onClick={() => {
+        action()
+        playgroundGlobalUiState.selectorOpened = false
+      }}
+    >{name}</div>)}</div>
+}
+
 const Controls = () => {
   // todo setting
   const usingTouch = navigator.maxTouchPoints > 0

diff --git 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
@@ -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
-