basic auto tracking

[alttp.git] / resources / js / components / tracker / Toolbar.js

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
new file mode 100644 (file)
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;