1 import React from 'react';
2 import { Button, Container, Form, Navbar } from 'react-bootstrap';
3 import { useTranslation } from 'react-i18next';
5 import AutoTracking from './AutoTracking';
6 import ConfigDialog from './ConfigDialog';
7 import ToggleIcon from './ToggleIcon';
8 import Icon from '../common/Icon';
9 import ZeldaIcon from '../common/ZeldaIcon';
10 import { getConfigValue } from '../../helpers/tracker';
11 import { useTracker } from '../../hooks/tracker';
15 compass: 'wildCompass',
16 'small-key': 'wildSmall',
20 const Toolbar = () => {
21 const [showConfigDialog, setShowConfigDialog] = React.useState(false);
22 const { config, saveConfig } = useTracker();
23 const { t } = useTranslation();
25 const handleConfigChange = React.useCallback(({ target: { name, value } }) => {
26 saveConfig({ [name]: value });
29 const bossController = React.useMemo(() => ({
30 getActive: (state, icons) => config.bossShuffle ? icons[0] : null,
31 getDefault: (state, icons) => icons[0],
32 handlePrimary: () => {
33 saveConfig({ bossShuffle: !config.bossShuffle});
35 handleSecondary: () => null,
36 }), [config, saveConfig]);
38 const wildController = React.useMemo(() => ({
39 getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
40 getDefault: (state, icons) => icons[0],
41 handlePrimary: (state, setState, icons) => {
42 const prop = mapWild[icons[0]];
43 saveConfig({ [prop]: !config[prop] });
45 handleSecondary: () => null,
46 }), [config, saveConfig]);
48 const worldController = React.useMemo(() => ({
49 getActive: (state, icons) => config.worldState === 'inverted' ? icons[1] : icons[0],
50 getDefault: (state, icons) => icons[0],
51 handlePrimary: () => {
52 saveConfig({ worldState: config.worldState == 'inverted' ? 'open' : 'inverted' });
54 handleSecondary: () => null,
55 }), [config, saveConfig]);
57 return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
59 <div className="button-bar">
62 onClick={() => setShowConfigDialog(true)}
63 variant="outline-secondary"
67 <ToggleIcon controller={wildController} icons={['map']} />
68 <ToggleIcon controller={wildController} icons={['compass']} />
69 <ToggleIcon controller={wildController} icons={['small-key']} />
70 <ToggleIcon controller={wildController} icons={['big-key']} />
71 <ToggleIcon className="ms-3" controller={bossController} icons={['armos']} />
72 <ToggleIcon controller={worldController} icons={['link-head', 'bunny-head']} />
76 className="d-inline-flex align-items-center justify-content-between"
77 controlId="tracker.gtCrystals"
79 <Form.Label className="me-1">
80 <ZeldaIcon name="gt" title={t('tracker.config.gtCrystals')} />
83 className="w-auto bg-dark"
85 onChange={handleConfigChange}
86 value={getConfigValue(config, 'gt-crystals', 7)}
88 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
89 <option key={n} value={n}>
96 className="d-inline-flex align-items-center justify-content-between"
97 controlId="tracker.ganonCrystals"
99 <Form.Label className="me-1">
100 <ZeldaIcon name="ganon" title={t('tracker.config.ganonCrystals')} />
103 className="w-auto bg-dark"
104 name="ganon-crystals"
105 onChange={handleConfigChange}
106 value={getConfigValue(config, 'ganon-crystals', 7)}
108 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
109 <option key={n} value={n}>
116 className="d-inline-flex align-items-center justify-content-between"
117 controlId="tracker.goal"
119 <Form.Label className="me-1">
120 <ZeldaIcon name="triforce" title={t('tracker.config.goal')} />
123 className="w-auto bg-dark"
125 onChange={handleConfigChange}
126 value={getConfigValue(config, 'goal', 'ganon')}
128 {['ganon', 'fast', 'ad', 'ped', 'trinity', 'thunt', 'ghunt'].map(n =>
129 <option key={n} value={n}>
130 {t(`tracker.config.goals.${n}`)}
140 <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
144 export default Toolbar;