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                                         title={t('button.settings')}
  64                                         variant="outline-secondary"
  65                                 >
  66                                         <Icon.SETTINGS title="" />
  67                                 </Button>
  68                                 <ToggleIcon
  69                                         controller={wildController}
  70                                         icons={['map']}
  71                                         title={t('tracker.config.shuffleMap')}
  72                                 />
  73                                 <ToggleIcon
  74                                         controller={wildController}
  75                                         icons={['compass']}
  76                                         title={t('tracker.config.shuffleCompass')}
  77                                 />
  78                                 <ToggleIcon
  79                                         controller={wildController}
  80                                         icons={['small-key']}
  81                                         title={t('tracker.config.shuffleSmall')}
  82                                 />
  83                                 <ToggleIcon
  84                                         controller={wildController}
  85                                         icons={['big-key']}
  86                                         title={t('tracker.config.shuffleBig')}
  87                                 />
  88                                 <ToggleIcon
  89                                         className="ms-3"
  90                                         controller={bossController}
  91                                         icons={['armos']}
  92                                         title={t('tracker.config.bossShuffle')}
  93                                 />
  94                                 <ToggleIcon
  95                                         controller={worldController}
  96                                         icons={['link-head', 'bunny-head']}
  97                                         title={t('tracker.config.inverted')}
  98                                 />
  99                         </div>
 100                         <div>
 101                                 <Form.Group
 102                                         className="d-inline-flex align-items-center justify-content-between"
 103                                         controlId="tracker.gtCrystals"
 104                                 >
 105                                         <Form.Label className="me-1">
 106                                                 <ZeldaIcon name="gt" title={t('tracker.config.gtCrystals')} />
 107                                         </Form.Label>
 108                                         <Form.Select
 109                                                 className="w-auto bg-dark"
 110                                                 name="gt-crystals"
 111                                                 onChange={handleConfigChange}
 112                                                 value={getConfigValue(config, 'gt-crystals', 7)}
 113                                         >
 114                                                 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
 115                                                         <option key={n} value={n}>
 116                                                                 {n}
 117                                                         </option>
 118                                                 )}
 119                                         </Form.Select>
 120                                 </Form.Group>
 121                                 <Form.Group
 122                                         className="d-inline-flex align-items-center justify-content-between"
 123                                         controlId="tracker.ganonCrystals"
 124                                 >
 125                                         <Form.Label className="me-1">
 126                                                 <ZeldaIcon name="ganon" title={t('tracker.config.ganonCrystals')} />
 127                                         </Form.Label>
 128                                         <Form.Select
 129                                                 className="w-auto bg-dark"
 130                                                 name="ganon-crystals"
 131                                                 onChange={handleConfigChange}
 132                                                 value={getConfigValue(config, 'ganon-crystals', 7)}
 133                                         >
 134                                                 {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
 135                                                         <option key={n} value={n}>
 136                                                                 {n}
 137                                                         </option>
 138                                                 )}
 139                                         </Form.Select>
 140                                 </Form.Group>
 141                                 <Form.Group
 142                                         className="d-inline-flex align-items-center justify-content-between"
 143                                         controlId="tracker.goal"
 144                                 >
 145                                         <Form.Label className="me-1">
 146                                                 <ZeldaIcon name="triforce" title={t('tracker.config.goal')} />
 147                                         </Form.Label>
 148                                         <Form.Select
 149                                                 className="w-auto bg-dark"
 150                                                 name="goal"
 151                                                 onChange={handleConfigChange}
 152                                                 value={getConfigValue(config, 'goal', 'ganon')}
 153                                         >
 154                                                 {['ganon', 'fast', 'ad', 'ped', 'trinity', 'thunt', 'ghunt'].map(n =>
 155                                                         <option key={n} value={n}>
 156                                                                 {t(`tracker.config.goals.${n}`)}
 157                                                         </option>
 158                                                 )}
 159                                         </Form.Select>
 160                                 </Form.Group>
 161                         </div>
 162                         <div>
 163                                 <AutoTracking />
 164                         </div>
 165                 </Container>
 166                 <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
 167         </Navbar>;
 168 };
 169
 170 export default Toolbar;