feat(mobile): add F3 additional action by holding the F3 button

src/controls.ts

@@ -226,12 +226,10 @@ contro.on('release', ({ command }) => {
 
 // hard-coded keybindings
 
-const hardcodedPressedKeys = new Set<string>()
-document.addEventListener('keydown', (e) => {
-  if (!isGameActive(false)) return
-  if (hardcodedPressedKeys.has('F3')) {
-    // reload chunks
-    if (e.code === 'KeyA') {
+export const f3Keybinds = [
+  {
+    key: 'KeyA',
+    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) {
@@ -242,11 +240,25 @@ document.addEventListener('keydown', (e) => {
         localServer.players[0].world.columns = {}
       }
       void reloadChunks()
-    }
-    if (e.code === 'KeyG') {
+    },
+    mobileTitle: 'Reload chunks',
+  },
+  {
+    key: 'KeyG',
+    action () {
       options.showChunkBorders = !options.showChunkBorders
       viewer.world.updateShowChunksBorder(options.showChunkBorders)
-    }
+    },
+    mobileTitle: 'Toggle chunk borders',
+  }
+]
+
+const hardcodedPressedKeys = new Set<string>()
+document.addEventListener('keydown', (e) => {
+  if (!isGameActive(false)) return
+  if (hardcodedPressedKeys.has('F3')) {
+    const keybind = f3Keybinds.find((v) => v.key === e.code)
+    if (keybind) keybind.action()
     return
   }
 

src/index.ts

@@ -718,11 +718,15 @@ watchValue(miscUiState, async s => {
 })
 
 // #region fire click event on touch as we disable default behaviors
-let activeTouch: { touch: Touch, elem: HTMLElement } | undefined
+let activeTouch: { touch: Touch, elem: HTMLElement, start: number } | undefined
 document.body.addEventListener('touchend', (e) => {
   if (!isGameActive(true)) return
   if (activeTouch?.touch.identifier !== e.changedTouches[0].identifier) return
-  activeTouch.elem.click()
+  if (Date.now() - activeTouch.start > 500) {
+    activeTouch.elem.dispatchEvent(new Event('longtouch', { bubbles: true }))
+  } else {
+    activeTouch.elem.click()
+  }
   activeTouch = undefined
 })
 document.body.addEventListener('touchstart', (e) => {
@@ -739,7 +743,8 @@ document.body.addEventListener('touchstart', (e) => {
   if (!firstClickable) return
   activeTouch = {
     touch: e.touches[0],
-    elem: firstClickable
+    elem: firstClickable,
+    start: Date.now(),
   }
 }, { passive: false })
 // #endregion

src/menus/hud.js

@@ -1,3 +1,6 @@
+import { f3Keybinds } from '../controls'
+import { showOptionsModal } from '../react/SelectOption'
+
 const { LitElement, html, css, unsafeCSS } = require('lit')
 const { showModal, miscUiState } = require('../globalState')
 const { options, watchValue } = require('../optionsStorage')
@@ -219,7 +222,12 @@ class Hud extends LitElement {
         <div class="debug-btn" @pointerdown=${(e) => {
       window.dispatchEvent(new MouseEvent('mousedown', { button: 1 }))
     }}>S</div>
-        <div class="debug-btn" @pointerdown=${(e) => {
+        <div class="debug-btn" @longtouch=${async () => {
+      const select = await showOptionsModal('', f3Keybinds.filter(f3Keybind => f3Keybind.mobileTitle).map(f3Keybind => f3Keybind.mobileTitle))
+      if (!select) return
+      const f3Keybind = f3Keybinds.find(f3Keybind => f3Keybind.mobileTitle === select)
+      f3Keybind.action()
+    }} @pointerdown=${(e) => {
       this.shadowRoot.getElementById('debug-overlay').showOverlay = !this.shadowRoot.getElementById('debug-overlay').showOverlay
     }}>F3</div>
         <div class="chat-btn" @pointerdown=${(e) => {