start migrating to new options storage api

scripts/patchPackages.js

@@ -8,6 +8,7 @@ const lines = fs.readFileSync(dataPath, 'utf8').split('\n')
 
 function removeLinesBetween (start, end) {
   let startIndex = lines.findIndex(line => line === start)
+  if (startIndex === -1) return
   let endIndex = startIndex + lines.slice(startIndex).findIndex(line => line === end)
   const linesToRemove = endIndex - startIndex + 1
   lines.splice(startIndex, linesToRemove)

src/index.js

@@ -21,6 +21,7 @@ require('./menus/options_screen')
 require('./menus/advanced_options_screen')
 require('./menus/notification')
 require('./menus/title_screen')
+require('./optionsStorage')
 
 // @ts-ignore
 require('crypto').createPublicKey = () => { }

src/menus/advanced_options_screen.js

@@ -4,6 +4,8 @@ const { CommonOptionsScreen } = require('./options_store')
 const { commonCss, isMobile, openURL } = require('./components/common')
 const { hideCurrentModal } = require('../globalState')
 const { toNumber, getScreenRefreshRate } = require('../utils')
+const { subscribe } = require('valtio')
+const { options } = require('../optionsStorage')
 
 class AdvancedOptionsScreen extends CommonOptionsScreen {
   /** @type {null | number} */
@@ -12,9 +14,11 @@ class AdvancedOptionsScreen extends CommonOptionsScreen {
   constructor () {
     super()
     this.defineOptions({
-      alwaysShowMobileControls: { defaultValue: false, convertFn: (v) => v === 'true' },
       frameLimit: { defaultValue: false, convertFn: (v) => toNumber(v) ?? false },
     })
+    subscribe(options, () => {
+      this.requestUpdate()
+    })
   }
 
   static get styles () {
@@ -54,14 +58,8 @@ class AdvancedOptionsScreen extends CommonOptionsScreen {
       <p class="title">Advanced Options</p>
       <main>
         <div class="wrapper">
-          <pmui-button pmui-width="150px" pmui-label=${`Always Show Mobile Controls: ${this.alwaysShowMobileControls ? 'ON' : 'OFF'}`} @pmui-click=${() => {
-        this.alwaysShowMobileControls = !this.alwaysShowMobileControls
-        if (this.alwaysShowMobileControls || isMobile()) {
-          document.getElementById('hud').showMobileControls(true)
-        } else {
-          document.getElementById('hud').showMobileControls(false)
-        }
-        this.requestUpdate()
+          <pmui-button pmui-width="150px" pmui-label=${`Always Show Mobile Controls: ${options.alwaysShowMobileControls ? 'ON' : 'OFF'}`} @pmui-click=${() => {
+        options.alwaysShowMobileControls = !options.alwaysShowMobileControls
       }
       }></pmui-button>
       <!-- todo rename button, also might be unstable -->

src/menus/hud.js

@@ -1,6 +1,8 @@
+//@ts-check
 const { LitElement, html, css } = require('lit')
 const { isMobile } = require('./components/common')
-const { showModal } = require('../globalState')
+const { showModal, miscUiState } = require('../globalState')
+const { options, watchValue } = require('../optionsStorage')
 
 class Hud extends LitElement {
   static get styles () {
@@ -283,6 +285,11 @@ class Hud extends LitElement {
 
     // TODO
     // breathbar.updateOxygen(bot.oxygenLevel ?? 20)
+
+    watchValue(options, (o) => {
+      miscUiState.currentTouch = o.alwaysShowMobileControls || isMobile()
+      this.showMobileControls(miscUiState.currentTouch)
+    })
   }
 
   /** @param {boolean} bl */

src/optionsStorage.js

@@ -0,0 +1,39 @@
+//@ts-check
+// todo implement async options storage
+
+import { proxy, subscribe } from 'valtio/vanilla'
+import { subscribeKey } from 'valtio/utils'
+import { mergeAny } from './optionsStorageTypes'
+
+export const options = proxy(
+  mergeAny({
+    alwaysShowMobileControls: false
+  }, JSON.parse(localStorage.options || '{}'))
+)
+
+window.options = options
+
+subscribe(options, () => {
+  localStorage.options = JSON.stringify(options)
+})
+
+/** @type {import('./optionsStorageTypes').WatchValue} */
+export const watchValue = (proxy, callback) => {
+  const watchedProps = new Set()
+  callback(new Proxy(proxy, {
+    get (target, p, receiver) {
+      watchedProps.add(p.toString())
+      return Reflect.get(target, p, receiver)
+    },
+  }))
+  watchedProps.forEach(prop => {
+    subscribeKey(proxy, prop, () => {
+      callback(proxy)
+    })
+  })
+}
+
+export const useOptionValue = (setting, valueCallback) => {
+  valueCallback(setting)
+  subscribe(setting, valueCallback)
+}