resources/js/components/tracker/Toolbar.js

   1 import React from 'react';
   2 import { Button, Container, Form, Navbar } from 'react-bootstrap';
   3 import { useTranslation } from 'react-i18next';
   4
   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';
  12
  13 const mapWild = {
  14         map: 'wildMap',
  15         compass: 'wildCompass',
  16         'small-key': 'wildSmall',
  17         'big-key': 'wildBig',
  18 };
  19
  20 const Toolbar = () => {
  21         const [showConfigDialog, setShowConfigDialog] = React.useState(false);
  22         const { config, saveConfig } = useTracker();
  23         const { t } = useTranslation();
  24
  25         const handleConfigChange = React.useCallback(({ target: { name, value } }) => {
  26                 saveConfig({ [name]: value });
  27         }, [saveConfig]);
  28
  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});
  34                 },
  35                 handleSecondary: () => null,
  36         }), [config, saveConfig]);
  37
  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] });
  44                 },
  45                 handleSecondary: () => null,
  46         }), [config, saveConfig]);
  47
  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' });
  53                 },
  54                 handleSecondary: () => null,
  55         }), [config, saveConfig]);
  56
  57         return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
  58                 <Container fluid>
  59                         <div className="button-bar">
  60                                 <Button
  61                                         className="me-3"
  62                                         onClick={() => setShowConfigDialog(true)}
  63                                         variant="outline-secondary"
  64                                 >
  65                                         <Icon.SETTINGS />
  66                                 </Button>
  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']} />
  73                         </div>
  74                         <div>
  75                                 <Form.Group
  76                                         className="d-inline-flex align-items-center justify-content-between"
  77                                         controlId="tracker.gtCrystals"
  78                                 >
  79                                         <Form.Label className="me-1">
  80                                                 <ZeldaIcon name="gt" title={t('tracker.config.gtCrystals')} />
  81                                         </Form.Label>
  82                                         <Form.Select
  83                                                 className="w-auto bg-dark"
  84                                                 name="gt-crystals"
  85                                                 onChange={handleConfigChange}
  86                                                 value={getConfigValue(config, 'gt-crystals', 7)}
  87                                         >
  88                                                 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
  89                                                         <option key={n} value={n}>
  90                                                                 {n}
  91                                                         </option>
  92                                                 )}
  93                                         </Form.Select>
  94                                 </Form.Group>
  95                                 <Form.Group
  96                                         className="d-inline-flex align-items-center justify-content-between"
  97                                         controlId="tracker.ganonCrystals"
  98                                 >
  99                                         <Form.Label className="me-1">
 100                                                 <ZeldaIcon name="ganon" title={t('tracker.config.ganonCrystals')} />
 101                                         </Form.Label>
 102                                         <Form.Select
 103                                                 className="w-auto bg-dark"
 104                                                 name="ganon-crystals"
 105                                                 onChange={handleConfigChange}
 106                                                 value={getConfigValue(config, 'ganon-crystals', 7)}
 107                                         >
 108                                                 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
 109                                                         <option key={n} value={n}>
 110                                                                 {n}
 111                                                         </option>
 112                                                 )}
 113                                         </Form.Select>
 114                                 </Form.Group>
 115                                 <Form.Group
 116                                         className="d-inline-flex align-items-center justify-content-between"
 117                                         controlId="tracker.goal"
 118                                 >
 119                                         <Form.Label className="me-1">
 120                                                 <ZeldaIcon name="triforce" title={t('tracker.config.goal')} />
 121                                         </Form.Label>
 122                                         <Form.Select
 123                                                 className="w-auto bg-dark"
 124                                                 name="goal"
 125                                                 onChange={handleConfigChange}
 126                                                 value={getConfigValue(config, 'goal', 'ganon')}
 127                                         >
 128                                                 {['ganon', 'fast', 'ad', 'ped', 'trinity', 'thunt', 'ghunt'].map(n =>
 129                                                         <option key={n} value={n}>
 130                                                                 {t(`tracker.config.goals.${n}`)}
 131                                                         </option>
 132                                                 )}
 133                                         </Form.Select>
 134                                 </Form.Group>
 135                         </div>
 136                         <div>
 137                                 <AutoTracking />
 138                         </div>
 139                 </Container>
 140                 <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
 141         </Navbar>;
 142 };
 143
 144 export default Toolbar;