From 5f10b60bf6febbe735387ed3e79c0655cf8bbc8e Mon Sep 17 00:00:00 2001
From: Vitaly <vital2580@icloud.com>
Date: Sat, 11 Nov 2023 21:38:50 +0300
Subject: [PATCH] feat(mobile): add F3 additional action by holding the F3
 button

---
 src/controls.ts  | 30 +++++++++++++++++++++---------
 src/index.ts     | 11 ++++++++---
 src/menus/hud.js | 10 +++++++++-
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/controls.ts b/src/controls.ts
index 97ebe87b..1034ab42 100644
--- a/src/controls.ts
+++ b/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
   }
 
diff --git a/src/index.ts b/src/index.ts
index 613a6f72..948f4500 100644
--- a/src/index.ts
+++ b/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
diff --git a/src/menus/hud.js b/src/menus/hud.js
index 4a229695..b82aca3f 100644
--- a/src/menus/hud.js
+++ b/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) => {