import React from 'react';
-import { Button, Container, Navbar } from 'react-bootstrap';
+import { Button, Container, Form, Navbar } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
import AutoTracking from './AutoTracking';
import ConfigDialog from './ConfigDialog';
import ToggleIcon from './ToggleIcon';
import Icon from '../common/Icon';
+import ZeldaIcon from '../common/ZeldaIcon';
+import { getConfigValue } from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
const mapWild = {
const Toolbar = () => {
const [showConfigDialog, setShowConfigDialog] = React.useState(false);
const { config, saveConfig } = useTracker();
+ const { t } = useTranslation();
- const controller = React.useMemo(() => ({
+ const handleConfigChange = React.useCallback(({ target: { name, value } }) => {
+ saveConfig({ [name]: value });
+ }, [saveConfig]);
+
+ const bossController = React.useMemo(() => ({
+ getActive: (state, icons) => config.bossShuffle ? icons[0] : null,
+ getDefault: (state, icons) => icons[0],
+ handlePrimary: () => {
+ saveConfig({ bossShuffle: !config.bossShuffle});
+ },
+ handleSecondary: () => null,
+ }), [config, saveConfig]);
+
+ const wildController = React.useMemo(() => ({
getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
getDefault: (state, icons) => icons[0],
handlePrimary: (state, setState, icons) => {
handleSecondary: () => null,
}), [config, saveConfig]);
+ const worldController = React.useMemo(() => ({
+ getActive: (state, icons) => config.worldState === 'inverted' ? icons[1] : icons[0],
+ getDefault: (state, icons) => icons[0],
+ handlePrimary: () => {
+ saveConfig({ worldState: config.worldState == 'inverted' ? 'open' : 'inverted' });
+ },
+ handleSecondary: () => null,
+ }), [config, saveConfig]);
+
return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
<Container fluid>
<div className="button-bar">
<Button
className="me-3"
onClick={() => setShowConfigDialog(true)}
+ title={t('button.settings')}
variant="outline-secondary"
>
- <Icon.SETTINGS />
+ <Icon.SETTINGS title="" />
</Button>
- <ToggleIcon controller={controller} icons={['map']} />
- <ToggleIcon controller={controller} icons={['compass']} />
- <ToggleIcon controller={controller} icons={['small-key']} />
- <ToggleIcon controller={controller} icons={['big-key']} />
+ <ToggleIcon
+ controller={wildController}
+ icons={['map']}
+ title={t('tracker.config.shuffleMap')}
+ />
+ <ToggleIcon
+ controller={wildController}
+ icons={['compass']}
+ title={t('tracker.config.shuffleCompass')}
+ />
+ <ToggleIcon
+ controller={wildController}
+ icons={['small-key']}
+ title={t('tracker.config.shuffleSmall')}
+ />
+ <ToggleIcon
+ controller={wildController}
+ icons={['big-key']}
+ title={t('tracker.config.shuffleBig')}
+ />
+ <ToggleIcon
+ className="ms-3"
+ controller={bossController}
+ icons={['armos']}
+ title={t('tracker.config.bossShuffle')}
+ />
+ <ToggleIcon
+ controller={worldController}
+ icons={['link-head', 'bunny-head']}
+ title={t('tracker.config.inverted')}
+ />
+ </div>
+ <div>
+ <Form.Group
+ className="d-inline-flex align-items-center justify-content-between"
+ controlId="tracker.gtCrystals"
+ >
+ <Form.Label className="me-1">
+ <ZeldaIcon name="gt" title={t('tracker.config.gtCrystals')} />
+ </Form.Label>
+ <Form.Select
+ className="w-auto bg-dark"
+ name="gt-crystals"
+ onChange={handleConfigChange}
+ value={getConfigValue(config, 'gt-crystals', 7)}
+ >
+ {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
+ <option key={n} value={n}>
+ {n}
+ </option>
+ )}
+ </Form.Select>
+ </Form.Group>
+ <Form.Group
+ className="d-inline-flex align-items-center justify-content-between"
+ controlId="tracker.ganonCrystals"
+ >
+ <Form.Label className="me-1">
+ <ZeldaIcon name="ganon" title={t('tracker.config.ganonCrystals')} />
+ </Form.Label>
+ <Form.Select
+ className="w-auto bg-dark"
+ name="ganon-crystals"
+ onChange={handleConfigChange}
+ value={getConfigValue(config, 'ganon-crystals', 7)}
+ >
+ {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
+ <option key={n} value={n}>
+ {n}
+ </option>
+ )}
+ </Form.Select>
+ </Form.Group>
+ <Form.Group
+ className="d-inline-flex align-items-center justify-content-between"
+ controlId="tracker.goal"
+ >
+ <Form.Label className="me-1">
+ <ZeldaIcon name="triforce" title={t('tracker.config.goal')} />
+ </Form.Label>
+ <Form.Select
+ className="w-auto bg-dark"
+ name="goal"
+ onChange={handleConfigChange}
+ value={getConfigValue(config, 'goal', 'ganon')}
+ >
+ {['ganon', 'fast', 'ad', 'ped', 'trinity', 'thunt', 'ghunt'].map(n =>
+ <option key={n} value={n}>
+ {t(`tracker.config.goals.${n}`)}
+ </option>
+ )}
+ </Form.Select>
+ </Form.Group>
+ </div>
+ <div>
+ <AutoTracking />
</div>
- <AutoTracking />
</Container>
<ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
</Navbar>;