]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tracker/Toolbar.js
basic auto tracking
[alttp.git] / resources / js / components / tracker / Toolbar.js
1 import React from 'react';
2 import { Container, Navbar } from 'react-bootstrap';
3
4 import AutoTracking from './AutoTracking';
5 import ToggleIcon from './ToggleIcon';
6 import { useTracker } from '../../hooks/tracker';
7
8 const mapWild = {
9         map: 'wildMap',
10         compass: 'wildCompass',
11         'small-key': 'wildSmall',
12         'big-key': 'wildBig',
13 };
14
15 const Toolbar = () => {
16         const { config, setConfig } = useTracker();
17
18         const controller = React.useMemo(() => ({
19                 getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
20                 getDefault: (state, icons) => icons[0],
21                 handlePrimary: (state, setState, icons) => {
22                         const prop = mapWild[icons[0]];
23                         setConfig(c => ({ ...c, [prop]: !c[prop] }));
24                 },
25                 handleSecondary: () => null,
26         }), [config, setConfig]);
27
28         return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
29                 <Container fluid>
30                         <div className="button-bar">
31                                 <ToggleIcon controller={controller} icons={['map']} />
32                                 <ToggleIcon controller={controller} icons={['compass']} />
33                                 <ToggleIcon controller={controller} icons={['small-key']} />
34                                 <ToggleIcon controller={controller} icons={['big-key']} />
35                         </div>
36                         <AutoTracking />
37                 </Container>
38         </Navbar>;
39 };
40
41 export default Toolbar;