Fix keybindings for options

giongto35 · Mar 15, 2024 · 29eedee · 29eedee
1 parent a349fdd
commit 29eedee
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/web/index.html b/web/index.html
@@ -104,12 +104,12 @@
 
 <script src="js/gui/gui.js?v=3"></script>
 <script src="js/utils.js?v1"></script>
-<script src="js/gui/message.js?v=2"></script>
+<script src="js/gui/message.js?v=3"></script>
 <script src="js/log.js?v=5"></script>
-<script src="js/event/event.js?v=5"></script>
+<script src="js/event/event.js?v=6"></script>
 <script src="js/input/keys.js?v=3"></script>
 <script src="js/settings/opts.js?v=3"></script>
-<script src="js/settings/settings.js?v=6"></script>
+<script src="js/settings/settings.js?v=7"></script>
 <script src="js/env.js?v=6"></script>
 <script src="js/input/input.js?v=3"></script>
 <script src="js/gameList.js?v=5"></script>
@@ -122,7 +122,7 @@
 <script src="js/api/api.js?v=3"></script>
 <script src="js/workerManager.js?v=1"></script>
 <script src="js/stats/stats.js?v=1"></script>
-<script src="js/controller.js?v=11"></script>
+<script src="js/controller.js?v=12"></script>
 <script src="js/input/keyboard.js?v=6"></script>
 <script src="js/input/touch.js?v=3"></script>
 <script src="js/input/joystick.js?v=3"></script>

diff --git a/web/js/controller.js b/web/js/controller.js
@@ -303,8 +303,7 @@
                 name: 'settings',
                 keyRelease: key => {
                     if (key === KEY.SETTINGS) {
-                        const isSettingsOpened = settings.ui.toggle();
-                        if (!isSettingsOpened) setState(lastState);
+                        !settings.ui.toggle() && setState(lastState)
                     }
                 },
                 menuReady: showMenuScreen
@@ -452,9 +451,6 @@
     event.sub(KEY_PRESSED, onKeyPress);
     event.sub(KEY_RELEASED, onKeyRelease);
     event.sub(SETTINGS_CHANGED, () => message.show('Settings have been updated'));
-    event.sub(SETTINGS_CLOSED, () => {
-        state.keyRelease(KEY.SETTINGS);
-    });
     event.sub(AXIS_CHANGED, onAxisChanged);
     event.sub(CONTROLLER_UPDATED, data => webrtc.input(data));
     // recording

diff --git a/web/js/event/event.js b/web/js/event/event.js
@@ -97,7 +97,6 @@ const STATS_TOGGLE = 'statsToggle';
 const HELP_OVERLAY_TOGGLED = 'helpOverlayToggled';
 
 const SETTINGS_CHANGED = 'settingsChanged';
-const SETTINGS_CLOSED = 'settingsClosed';
 
 const RECORDING_TOGGLED = 'recordingToggle'
 const RECORDING_STATUS_CHANGED = 'recordingStatusChanged'

diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
@@ -131,7 +131,7 @@ const gui = (() => {
             _title.innerText = state.loading ? `${state.title}...` : state.title;
         }
 
-        function toggle(show) {
+        function toggle(show = true) {
             state.shown = show;
 
             // hack not transparent jpeg corners :_;
@@ -142,6 +142,7 @@ const gui = (() => {
             onToggle && onToggle(state.shown, _root)
 
             state.shown ? gui.show(_root) : gui.hide(_root)
+            return state.shown;
         }
 
         return {

diff --git a/web/js/settings/settings.js b/web/js/settings/settings.js
@@ -244,6 +244,13 @@ const settings = (() => {
         provider.remove(key, subKey);
     }
 
+
+    const _render = () => {
+        _renderer.data = panel.contentEl;
+        _renderer.render()
+    }
+
+
     const panel = gui.panel(document.getElementById('settings'), '> OPTIONS', 'settings', null, [
             {caption: 'Export', handler: () => _export(), title: 'Save',},
             {caption: 'Import', handler: () => _fileReader.read(onFileLoad), title: 'Load',},
@@ -259,25 +266,25 @@ const settings = (() => {
             },
             {}
         ],
-        (state) => {
-            if (state) return;
+        (show) => {
+            if (show) {
+                _render();
+                return;
+            }
 
-            event.pub(SETTINGS_CLOSED);
             // to make sure it's disabled, but it's a tad verbose
             event.pub(KEYBOARD_TOGGLE_FILTER_MODE, {mode: true});
         })
 
     panel.toggle(false);
 
-    const _render = () => {
-        _renderer.data = panel.contentEl;
-        _renderer.render()
-    }
-
-    const toggle = () => {
-        panel.toggle(true);
-        _render()
-    }
+    const toggle = (() => {
+        let x = false;
+        return () => {
+            x = !x;
+            panel.toggle(x);
+        }
+    })();
 
     function _getType(value) {
         if (value === undefined) return option.undefined