feat: allow to change opacity & position of touch buttons

fix: touch buttons don't overflow other menus
fix: make top touch buttons prettier & bigger a bit

package.json

@@ -34,6 +34,7 @@
     "@zardoy/react-util": "^0.2.0",
     "@zardoy/utils": "^0.0.11",
     "browserfs": "github:zardoy/browserfs#build",
+    "change-case": "^5.1.2",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "cypress-plugin-snapshots": "^1.4.4",
@@ -51,6 +52,7 @@
     "minecraft-assets": "^1.9.1",
     "minecraft-data": "^3.0.0",
     "net-browserify": "github:zardoy/prismarinejs-net-browserify",
+    "node-gzip": "^1.1.2",
     "peerjs": "^1.5.0",
     "pretty-bytes": "^6.1.1",
     "qrcode.react": "^3.1.0",

prismarine-viewer/package.json

@@ -19,8 +19,6 @@
   },
   "dependencies": {
     "@tweenjs/tween.js": "^20.0.3",
-    "three-stdlib": "^2.26.11",
-    "tsx": "^3.13.0",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
@@ -30,6 +28,7 @@
     "looks-same": "^8.2.3",
     "minecraft-wrap": "^1.3.0",
     "minecrafthawkeye": "^1.3.6",
+    "node-canvas-webgl": "^0.3.0",
     "prismarine-block": "^1.7.3",
     "prismarine-chunk": "^1.22.0",
     "prismarine-schematic": "^1.2.0",
@@ -37,8 +36,9 @@
     "process": "^0.11.10",
     "socket.io": "^4.0.0",
     "socket.io-client": "^4.0.0",
+    "three-stdlib": "^2.26.11",
     "three.meshline": "^1.3.0",
-    "vec3": "^0.1.7",
-    "node-canvas-webgl": "^0.3.0"
+    "tsx": "^3.13.0",
+    "vec3": "^0.1.7"
   }
 }

src/createLocalServer.ts

@@ -1,16 +1,22 @@
 //@ts-check
-import mcServer from 'flying-squid'
+import { createMCServer } from 'flying-squid'
 import { LocalServer } from './customServer'
 
 export const startLocalServer = (serverOptions) => {
   const passOptions = { ...serverOptions, Server: LocalServer }
-  const server = mcServer.createMCServer(passOptions)
+  const server = createMCServer(passOptions)
   server.formatMessage = (message) => `[server] ${message}`
   server.options = passOptions
   server.looseProtocolMode = true
   return server
 }
 
+declare global {
+  interface Server {
+    options: Options
+  }
+}
+
 // features that flying-squid doesn't support at all
 // todo move & generate in flying-squid
 export const unsupportedLocalServerFeatures = ['transactionPacketExists', 'teleportUsesOwnPacket', 'dimensionDataIsAvailable']

src/index.ts

@@ -596,7 +596,8 @@ async function connect (connectOptions: {
       }
       screenTouches++
       if (screenTouches === 3) {
-        window.dispatchEvent(new MouseEvent('mousedown', { button: 1 }))
+        // todo needs fixing!
+        // window.dispatchEvent(new MouseEvent('mousedown', { button: 1 }))
       }
       if (capturedPointer) {
         return

src/menus/hud.js

@@ -79,11 +79,12 @@ class Hud extends LitElement {
       .chat-btn {
         border: none;
         outline: none;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
+        scale: 1.2;
         background-image: url('extra-textures/gui.png');
         background-size: 256px;
-        background-position-x: -200px;
+        background-position-x: -201px;
         background-position-y: -64px;
       }
 
@@ -95,6 +96,8 @@ class Hud extends LitElement {
         font-size: 8px;
         /* todo make other buttons centered */
         margin-right: 5px;
+        color: white;
+        font-family: minecraft, mojangles, monospace;
       }
     `
   }
@@ -212,7 +215,7 @@ class Hud extends LitElement {
       <div class="mobile-top-btns" id="mobile-top">
         <button class="debug-btn" @pointerdown=${(e) => {
       window.dispatchEvent(new MouseEvent('mousedown', { button: 1 }))
-    }}>Select</button>
+    }}>S</button>
         <button class="debug-btn" @pointerdown=${(e) => {
       this.shadowRoot.getElementById('debug-overlay').showOverlay = !this.shadowRoot.getElementById('debug-overlay').showOverlay
     }}>F3</button>

src/optionsGuiScheme.tsx

@@ -159,6 +159,13 @@ export const guiOptionsScheme: {
       },
       touchButtonsSize: {
         min: 40
+      },
+      touchButtonsOpacity: {
+        min: 10,
+        max: 90
+      },
+      touchButtonsPosition: {
+        max: 80
       }
     }
   ],

src/optionsStorage.ts

@@ -25,6 +25,8 @@ const defaultOptions = {
   guiScale: 3,
   autoRequestCompletions: true,
   touchButtonsSize: 40,
+  touchButtonsOpacity: 80,
+  touchButtonsPosition: 12,
   highPerformanceGpu: false,
   /** @unstable */
   disableAssets: false,
@@ -89,6 +91,12 @@ watchValue(options, o => {
 watchValue(options, o => {
   document.body.classList.toggle('disable-assets', o.disableAssets)
 })
+watchValue(options, o => {
+  document.body.style.setProperty('--touch-movement-buttons-opacity', (o.touchButtonsOpacity / 100).toString())
+})
+watchValue(options, o => {
+  document.body.style.setProperty('--touch-movement-buttons-position', (o.touchButtonsPosition * 2) + 'px')
+})
 
 export const useOptionValue = (setting, valueCallback) => {
   valueCallback(setting)

src/reactUi.jsx

@@ -7,7 +7,7 @@ import { useSnapshot } from 'valtio'
 import { QRCodeSVG } from 'qrcode.react'
 import { createPortal } from 'react-dom'
 import { contro } from './controls'
-import { miscUiState } from './globalState'
+import { activeModalStack, miscUiState } from './globalState'
 import { options, watchValue } from './optionsStorage'
 import DeathScreenProvider from './react/DeathScreenProvider'
 import OptionsRenderApp from './react/OptionsRenderApp'
@@ -59,10 +59,12 @@ const TouchControls = () => {
   // todo setting
   const usingTouch = useUsingTouch()
   const { usingGamepadInput } = useSnapshot(miscUiState)
+  const modals = useSnapshot(activeModalStack)
 
   if (!usingTouch || usingGamepadInput) return null
   return (
     <div
+      style={{ zIndex: modals.length ? 7 : 8 }}
       className={css`
         position: fixed;
         inset: 0;
@@ -124,7 +126,10 @@ const InGameUi = () => {
       <DeathScreenProvider />
     </Portal>
     <DisplayQr />
-    <TouchControls />
+    <Portal to={document.body}>
+      {/* becaues of z-index */}
+      <TouchControls />
+    </Portal>
   </>
 }
 

src/styles.css

@@ -24,10 +24,12 @@ html {
   overflow: hidden;
   color: white;
 }
+
 body {
   --widgets-gui-atlas: url('minecraft-assets/minecraft-assets/data/1.17.1/gui/widgets.png');
   --title-gui: url('minecraft-assets/minecraft-assets/data/1.17.1/gui/title/minecraft.png');
 }
+
 body.disable-assets {
   --widgets-gui-atlas: none;
   --title-gui: none;
@@ -81,7 +83,17 @@ body {
   /* padding-left: calc(env(safe-area-inset-left) / 2);
   padding-right: calc(env(safe-area-inset-right) / 2);
   padding-bottom: calc(env(safe-area-inset-bottom) / 2); */
-  padding: 25px;
+  margin: calc(var(--touch-movement-buttons-position) * 2);
+  --border: none;
+}
+
+[data-name="TouchMovementArea"]:first-child {
+  --border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[data-name="MovementButton"] {
+  opacity: var(--touch-movement-buttons-opacity);
+  border: var(--border);
 }
 
 @font-face {