X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fhooks%2Fsnes.js;h=344c1eb787429c3297f01564d8cd12cccd28db40;hb=147c5f43c5d41fa18e82edb6651fe5a37c789353;hp=05e84b2e496d488452a6e53fcfbc32e553cae1f2;hpb=73c29bf37f10df401d87d14cc26999f88ce77379;p=alttp.git

diff --git a/resources/js/hooks/snes.js b/resources/js/hooks/snes.js
index 05e84b2..344c1eb 100644
--- 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>;
 };