feat(ui): add back, close buttons in settings for mobile

src/controls.ts

@@ -7,7 +7,7 @@ import { ControMax } from 'contro-max/build/controMax'
 import { CommandEventArgument, SchemaCommandInput } from 'contro-max/build/types'
 import { stringStartsWith } from 'contro-max/build/stringUtils'
 import { UserOverrideCommand, UserOverridesConfig } from 'contro-max/build/types/store'
-import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCurrentModal, miscUiState, loadedGameState, hideModal } from './globalState'
+import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCurrentModal, miscUiState, loadedGameState, hideModal, hideAllModals } from './globalState'
 import { goFullscreen, pointerLock, reloadChunks } from './utils'
 import { options } from './optionsStorage'
 import { openPlayerInventory } from './inventoryWindows'
@@ -740,19 +740,12 @@ window.addEventListener('keydown', (e) => {
   if (activeModalStack.length) {
     const hideAll = e.ctrlKey || e.metaKey
     if (hideAll) {
-      while (activeModalStack.length > 0) {
-        hideCurrentModal(undefined, () => {
-          if (!activeModalStack.length) {
-            pointerLock.justHitEscape = true
-          }
-        })
-      }
+      hideAllModals()
     } else {
-      hideCurrentModal(undefined, () => {
-        if (!activeModalStack.length) {
-          pointerLock.justHitEscape = true
-        }
-      })
+      hideCurrentModal()
+    }
+    if (activeModalStack.length === 0) {
+      pointerLock.justHitEscape = true
     }
   } else if (pointerLock.hasPointerLock) {
     document.exitPointerLock?.()

src/globalState.ts

@@ -86,6 +86,13 @@ export const hideCurrentModal = (_data?, onHide?: () => void) => {
   }
 }
 
+export const hideAllModals = () => {
+  while (activeModalStack.length > 0) {
+    if (!hideModal()) break
+  }
+  return activeModalStack.length === 0
+}
+
 export const openOptionsMenu = (group: OptionsGroupType) => {
   showModal({ reactType: `options-${group}` })
 }

src/react/Button.tsx

@@ -13,6 +13,7 @@ interface Props extends React.ComponentProps<'button'> {
   children?: React.ReactNode
   inScreen?: boolean
   rootRef?: Ref<HTMLButtonElement>
+  overlayColor?: string
 }
 
 const ButtonContext = createContext({
@@ -23,7 +24,7 @@ export const ButtonProvider: FC<{ children, onClick }> = ({ children, onClick })
   return <ButtonContext.Provider value={{ onClick }}>{children}</ButtonContext.Provider>
 }
 
-export default (({ label, icon, children, inScreen, rootRef, type = 'button', postLabel, ...args }) => {
+export default (({ label, icon, children, inScreen, rootRef, type = 'button', postLabel, overlayColor, ...args }) => {
   const ctx = useContext(ButtonContext)
 
   const onClick = (e) => {
@@ -45,6 +46,13 @@ export default (({ label, icon, children, inScreen, rootRef, type = 'button', po
       {label}
       {postLabel}
       {children}
+      {overlayColor && <div style={{
+        position: 'absolute',
+        inset: 0,
+        backgroundColor: overlayColor,
+        opacity: 0.5,
+        pointerEvents: 'none'
+      }} />}
     </button>
   </SharedHudVars>
 }) satisfies FC<Props>

src/react/OptionsItems.tsx

@@ -3,11 +3,12 @@ import { noCase } from 'change-case'
 import { titleCase } from 'title-case'
 import { useMemo } from 'react'
 import { options, qsOptions } from '../optionsStorage'
-import { miscUiState } from '../globalState'
+import { hideAllModals, miscUiState } from '../globalState'
 import Button from './Button'
 import Slider from './Slider'
 import Screen from './Screen'
 import { showOptionsModal } from './SelectOption'
+import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 
 type GeneralItem<T extends string | number | boolean> = {
   id?: string
@@ -188,10 +189,18 @@ interface Props {
 }
 
 export default ({ items, title, backButtonAction }: Props) => {
+  const { currentTouch } = useSnapshot(miscUiState)
+
   return <Screen
     title={title}
   >
     <div className='screen-items'>
+      {currentTouch && (
+        <div style={{ position: 'fixed', marginLeft: '-30px', display: 'flex', flexDirection: 'column', gap: 1, }}>
+          <Button icon={pixelartIcons['close']} onClick={hideAllModals} style={{ color: '#ff5d5d', }} />
+          <Button icon={pixelartIcons['chevron-left']} onClick={backButtonAction} style={{ color: 'yellow', }} />
+        </div>
+      )}
       {items.map((element, i) => {
         // make sure its unique!
         return <RenderOption key={element.id ?? `${title}-${i}`} item={element} />