switch SNES default port

[alttp.git] / resources / js / hooks / snes.js

diff --git a/resources/js/hooks/snes.js b/resources/js/hooks/snes.js
index 05e84b2e496d488452a6e53fcfbc32e553cae1f2..344c1eb787429c3297f01564d8cd12cccd28db40 100644 (file)
--- a/resources/js/hooks/snes.js
+++ b/resources/js/hooks/snes.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import SettingsDialog from '../components/snes/SettingsDialog';
 import SNESSocket from '../helpers/SNESSocket';
 
 const context = React.createContext({});
@@ -9,13 +10,14 @@ export const useSNES = () => React.useContext(context);
 
 export const SNESProvider = ({ children }) => {
        const [enabled, setEnabled] = React.useState(false);
+       const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
 
        const sock = React.useRef(null);
 
        const [settings, setSettings] = React.useState({
                proto: 'ws',
                host: 'localhost',
-               port: 8080,
+               port: 23074,
                device: '',
        });
 
@@ -104,6 +106,23 @@ export const SNESProvider = ({ children }) => {
                });
        }, []);
 
+       const openSettings = React.useCallback(() => {
+               setShowSettingsDialog(true);
+       }, []);
+
+       const closeSettings = React.useCallback(() => {
+               setShowSettingsDialog(false);
+       }, []);
+
+       const saveSettings = React.useCallback((values) => {
+               setSettings(s => {
+                       const newSettings = { ...s, ...values };
+                       localStorage.setItem('snes.settings', JSON.stringify(newSettings));
+                       return newSettings;
+               });
+               setShowSettingsDialog(false);
+       }, []);
+
        React.useEffect(() => {
                const savedSettings = localStorage.getItem('snes.settings');
                if (savedSettings) {
@@ -112,11 +131,18 @@ export const SNESProvider = ({ children }) => {
        }, []);
 
        const value = React.useMemo(() => {
-               return { disable, enable, enabled, settings, sock, status };
-       }, [disable, enable, enabled, settings, sock, status]);
+               return { disable, enable, enabled, openSettings, settings, sock, status };
+       }, [disable, enable, enabled, openSettings, settings, sock, status]);
 
        return <context.Provider value={value}>
                {children}
+               <SettingsDialog
+                       deviceList={status.deviceList}
+                       onHide={closeSettings}
+                       onSubmit={saveSettings}
+                       settings={settings}
+                       show={showSettingsDialog}
+               />
        </context.Provider>;
 };