X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftracker%2FToolbar.js;fp=resources%2Fjs%2Fcomponents%2Ftracker%2FToolbar.js;h=169d7bc3bce7eedc6ff72e77dba50c7faeb4251e;hb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;hp=0000000000000000000000000000000000000000;hpb=b833b712555c4db00ada3d1fe3b2cee4774dc3e0;p=alttp.git

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
new file mode 100644
index 0000000..169d7bc
--- /dev/null
+++ b/resources/js/components/tracker/Toolbar.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Container, Navbar } from 'react-bootstrap';
+
+import AutoTracking from './AutoTracking';
+import ToggleIcon from './ToggleIcon';
+import { useTracker } from '../../hooks/tracker';
+
+const mapWild = {
+	map: 'wildMap',
+	compass: 'wildCompass',
+	'small-key': 'wildSmall',
+	'big-key': 'wildBig',
+};
+
+const Toolbar = () => {
+	const { config, setConfig } = useTracker();
+
+	const controller = React.useMemo(() => ({
+		getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
+		getDefault: (state, icons) => icons[0],
+		handlePrimary: (state, setState, icons) => {
+			const prop = mapWild[icons[0]];
+			setConfig(c => ({ ...c, [prop]: !c[prop] }));
+		},
+		handleSecondary: () => null,
+	}), [config, setConfig]);
+
+	return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
+		<Container fluid>
+			<div className="button-bar">
+				<ToggleIcon controller={controller} icons={['map']} />
+				<ToggleIcon controller={controller} icons={['compass']} />
+				<ToggleIcon controller={controller} icons={['small-key']} />
+				<ToggleIcon controller={controller} icons={['big-key']} />
+			</div>
+			<AutoTracking />
+		</Container>
+	</Navbar>;
+};
+
+export default Toolbar;