feat: add a way to change size of touch buttons

zardoy · Sep 25, 2023 · 3ca17f1 · 3ca17f1
1 parent 8c7b6f6
commit 3ca17f1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/menus/advanced_options_screen.js b/src/menus/advanced_options_screen.js
@@ -2,7 +2,7 @@
 const { html, css, LitElement } = require('lit')
 const { commonCss, openURL } = require('./components/common')
 const { hideCurrentModal } = require('../globalState')
-const { toNumber, getScreenRefreshRate } = require('../utils')
+const { getScreenRefreshRate } = require('../utils')
 const { subscribe } = require('valtio')
 const { options } = require('../optionsStorage')
 
@@ -74,6 +74,11 @@ class AdvancedOptionsScreen extends LitElement {
         this.requestUpdate()
       }}></pmui-button>
       </div>
+      <div class="wrapper">
+        <pmui-slider pmui-width="150px" pmui-label="Touch Buttons Size" pmui-value="${options.touchButtonsSize}" pmui-type="%" pmui-min="20" pmui-max="100" @input=${(e) => {
+        options.touchButtonsSize = +e.target.value
+      }}></pmui-slider>
+      </div>
 
       <pmui-button pmui-width="200px" pmui-label="Done" @pmui-click=${() => hideCurrentModal()}></pmui-button>
       </main>

diff --git a/src/optionsStorage.ts b/src/optionsStorage.ts
@@ -24,6 +24,7 @@ const defaultOptions = {
   fov: 75,
   guiScale: 3,
   autoRequestCompletions: true,
+  touchButtonsSize: 40,
 
   frameLimit: false as number | false,
   alwaysBackupWorldBeforeLoading: undefined as boolean | undefined | null,

diff --git a/src/reactUi.jsx b/src/reactUi.jsx
@@ -4,12 +4,12 @@ import { renderToDom } from '@zardoy/react-util'
 import { LeftTouchArea, RightTouchArea, useUsingTouch, useInterfaceState } from '@dimaka/interface'
 import { css } from '@emotion/css'
 import { activeModalStack, isGameActive, miscUiState } from './globalState'
-import { isProbablyIphone } from './menus/components/common'
 // import DeathScreen from './react/DeathScreen'
 import { useSnapshot } from 'valtio'
 import { contro } from './controls'
 import { QRCodeSVG } from 'qrcode.react'
 import { createPortal } from 'react-dom'
+import { options, watchValue } from './optionsStorage'
 
 // todo
 useInterfaceState.setState({
@@ -40,6 +40,14 @@ useInterfaceState.setState({
     }
 })
 
+watchValue(options, (o) => {
+    useInterfaceState.setState({
+        uiCustomization: {
+            touchButtonSize: o.touchButtonsSize,
+        },
+    })
+})
+
 const TouchControls = () => {
     // todo setting
     const usingTouch = useUsingTouch()