resources/js/components/tracker/ConfigDialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Col, Form, Modal, Row } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import LargeCheck from '../common/LargeCheck';
   7 import { getConfigValue } from '../../helpers/tracker';
   8 import { useTracker } from '../../hooks/tracker';
   9
  10 const ConfigDialog = ({
  11         onHide,
  12         show,
  13 }) => {
  14         const { config, saveConfig } = useTracker();
  15         const { t } = useTranslation();
  16
  17         const handleChange = React.useCallback(({ target: { name, value } }) => {
  18                 saveConfig({ [name]: value });
  19         }, [saveConfig]);
  20
  21         return <Modal className="tracker-config-dialog" onHide={onHide} show={show} size="lg">
  22                 <Modal.Header closeButton>
  23                         <Modal.Title>
  24                                 {t('tracker.config.title')}
  25                         </Modal.Title>
  26                 </Modal.Header>
  27                 <Modal.Body>
  28                         <Row>
  29                                 <Col sm={6}>
  30                                         <h3>{t('tracker.config.logic')}</h3>
  31                                         <Form.Group
  32                                                 className="d-flex justify-content-between my-2"
  33                                                 controlId="tracker.worldState"
  34                                         >
  35                                                 <Form.Label>{t('tracker.config.worldState')}</Form.Label>
  36                                                 <Form.Select
  37                                                         className="w-auto"
  38                                                         name="world-state"
  39                                                         onChange={handleChange}
  40                                                         value={getConfigValue(config, 'world-state', 'open')}
  41                                                 >
  42                                                         {['open', 'inverted'].map(n =>
  43                                                                 <option key={n} value={n}>
  44                                                                         {t(`tracker.config.worldStates.${n}`)}
  45                                                                 </option>
  46                                                         )}
  47                                                 </Form.Select>
  48                                         </Form.Group>
  49                                         <Form.Group
  50                                                 className="d-flex justify-content-between my-2"
  51                                                 controlId="tracker.glitches"
  52                                         >
  53                                                 <Form.Label>{t('tracker.config.glitches')}</Form.Label>
  54                                                 <Form.Select
  55                                                         className="w-auto"
  56                                                         name="glitches"
  57                                                         onChange={handleChange}
  58                                                         value={getConfigValue(config, 'glitches', 'none')}
  59                                                 >
  60                                                         {['none', 'owg', 'hmg', 'mg', 'nl'].map(n =>
  61                                                                 <option key={n} value={n}>
  62                                                                         {t(`tracker.config.glitchRules.${n}`)}
  63                                                                 </option>
  64                                                         )}
  65                                                 </Form.Select>
  66                                         </Form.Group>
  67                                         <Form.Group
  68                                                 className="d-flex justify-content-between my-2"
  69                                                 controlId="tracker.bossShuffle"
  70                                         >
  71                                                 <Form.Label>{t('tracker.config.bossShuffle')}</Form.Label>
  72                                                 <Form.Control
  73                                                         as={LargeCheck}
  74                                                         name="bossShuffle"
  75                                                         onChange={handleChange}
  76                                                         value={!!config.bossShuffle}
  77                                                 />
  78                                         </Form.Group>
  79                                 </Col>
  80                                 <Col sm={6}>
  81                                         <h3>{t('tracker.config.goal')}</h3>
  82                                         <Form.Group
  83                                                 className="d-flex justify-content-between my-2"
  84                                                 controlId="tracker.gtCrystals"
  85                                         >
  86                                                 <Form.Label>{t('tracker.config.gtCrystals')}</Form.Label>
  87                                                 <Form.Select
  88                                                         className="w-auto"
  89                                                         name="gt-crystals"
  90                                                         onChange={handleChange}
  91                                                         value={getConfigValue(config, 'gt-crystals', 7)}
  92                                                 >
  93                                                         {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
  94                                                                 <option key={n} value={n}>
  95                                                                         {n}
  96                                                                 </option>
  97                                                         )}
  98                                                 </Form.Select>
  99                                         </Form.Group>
 100                                         <Form.Group
 101                                                 className="d-flex justify-content-between my-2"
 102                                                 controlId="tracker.ganonCrystals"
 103                                         >
 104                                                 <Form.Label>{t('tracker.config.ganonCrystals')}</Form.Label>
 105                                                 <Form.Select
 106                                                         className="w-auto"
 107                                                         name="ganon-crystals"
 108                                                         onChange={handleChange}
 109                                                         value={getConfigValue(config, 'ganon-crystals', 7)}
 110                                                 >
 111                                                         {['?', 0, 1, 2, 3, 4, 5, 6, 7].map(n =>
 112                                                                 <option key={n} value={n}>
 113                                                                         {n}
 114                                                                 </option>
 115                                                         )}
 116                                                 </Form.Select>
 117                                         </Form.Group>
 118                                         <Form.Group
 119                                                 className="d-flex justify-content-between my-2"
 120                                                 controlId="tracker.goal"
 121                                         >
 122                                                 <Form.Label>{t('tracker.config.goal')}</Form.Label>
 123                                                 <Form.Select
 124                                                         className="w-auto"
 125                                                         name="goal"
 126                                                         onChange={handleChange}
 127                                                         value={getConfigValue(config, 'goal', 'ganon')}
 128                                                 >
 129                                                         {['ganon', 'fast', 'ad', 'ped', 'trinity', 'thunt', 'ghunt'].map(n =>
 130                                                                 <option key={n} value={n}>
 131                                                                         {t(`tracker.config.goals.${n}`)}
 132                                                                 </option>
 133                                                         )}
 134                                                 </Form.Select>
 135                                         </Form.Group>
 136                                 </Col>
 137                         </Row>
 138                         <Row className="mt-3">
 139                                 <Col sm={6}>
 140                                         <h3>{t('tracker.config.wildItems')}</h3>
 141                                         <Form.Group
 142                                                 className="d-flex justify-content-between my-2"
 143                                                 controlId="tracker.wildMap"
 144                                         >
 145                                                 <Form.Label>{t('tracker.config.wildMap')}</Form.Label>
 146                                                 <Form.Control
 147                                                         as={LargeCheck}
 148                                                         name="wildMap"
 149                                                         onChange={handleChange}
 150                                                         value={!!config.wildMap}
 151                                                 />
 152                                         </Form.Group>
 153                                         <Form.Group
 154                                                 className="d-flex justify-content-between my-2"
 155                                                 controlId="tracker.wildCompass"
 156                                         >
 157                                                 <Form.Label>{t('tracker.config.wildCompass')}</Form.Label>
 158                                                 <Form.Control
 159                                                         as={LargeCheck}
 160                                                         name="wildCompass"
 161                                                         onChange={handleChange}
 162                                                         value={!!config.wildCompass}
 163                                                 />
 164                                         </Form.Group>
 165                                         <Form.Group
 166                                                 className="d-flex justify-content-between my-2"
 167                                                 controlId="tracker.wildSmall"
 168                                         >
 169                                                 <Form.Label>{t('tracker.config.wildSmall')}</Form.Label>
 170                                                 <Form.Control
 171                                                         as={LargeCheck}
 172                                                         name="wildSmall"
 173                                                         onChange={handleChange}
 174                                                         value={!!config.wildSmall}
 175                                                 />
 176                                         </Form.Group>
 177                                         <Form.Group
 178                                                 className="d-flex justify-content-between my-2"
 179                                                 controlId="tracker.wildBig"
 180                                         >
 181                                                 <Form.Label>{t('tracker.config.wildBig')}</Form.Label>
 182                                                 <Form.Control
 183                                                         as={LargeCheck}
 184                                                         name="wildBig"
 185                                                         onChange={handleChange}
 186                                                         value={!!config.wildBig}
 187                                                 />
 188                                         </Form.Group>
 189                                 </Col>
 190                                 <Col sm={6}>
 191                                         <h3>{t('tracker.config.showItems')}</h3>
 192                                         <Form.Group
 193                                                 className="d-flex justify-content-between my-2"
 194                                                 controlId="tracker.showMap"
 195                                         >
 196                                                 <Form.Label>{t('tracker.config.showMap')}</Form.Label>
 197                                                 <Form.Select
 198                                                         className="w-auto"
 199                                                         name="showMap"
 200                                                         onChange={handleChange}
 201                                                         value={config.showMap || 'always'}
 202                                                 >
 203                                                         <option value="never">
 204                                                                 {t('tracker.config.showItemOptions.never')}
 205                                                         </option>
 206                                                         <option value="situational">
 207                                                                 {t('tracker.config.showItemOptions.situational')}
 208                                                         </option>
 209                                                         <option value="always">
 210                                                                 {t('tracker.config.showItemOptions.always')}
 211                                                         </option>
 212                                                 </Form.Select>
 213                                         </Form.Group>
 214                                         <Form.Group
 215                                                 className="d-flex justify-content-between my-2"
 216                                                 controlId="tracker.showCompass"
 217                                         >
 218                                                 <Form.Label>{t('tracker.config.showCompass')}</Form.Label>
 219                                                 <Form.Select
 220                                                         className="w-auto"
 221                                                         name="showCompass"
 222                                                         onChange={handleChange}
 223                                                         value={config.showCompass || 'always'}
 224                                                 >
 225                                                         <option value="never">
 226                                                                 {t('tracker.config.showItemOptions.never')}
 227                                                         </option>
 228                                                         <option value="situational">
 229                                                                 {t('tracker.config.showItemOptions.situational')}
 230                                                         </option>
 231                                                         <option value="always">
 232                                                                 {t('tracker.config.showItemOptions.always')}
 233                                                         </option>
 234                                                 </Form.Select>
 235                                         </Form.Group>
 236                                         <Form.Group
 237                                                 className="d-flex justify-content-between my-2"
 238                                                 controlId="tracker.showSmall"
 239                                         >
 240                                                 <Form.Label>{t('tracker.config.showSmall')}</Form.Label>
 241                                                 <Form.Select
 242                                                         className="w-auto"
 243                                                         name="showSmall"
 244                                                         onChange={handleChange}
 245                                                         value={config.showSmall || 'always'}
 246                                                 >
 247                                                         <option value="never">
 248                                                                 {t('tracker.config.showItemOptions.never')}
 249                                                         </option>
 250                                                         <option value="situational">
 251                                                                 {t('tracker.config.showItemOptions.situational')}
 252                                                         </option>
 253                                                         <option value="always">
 254                                                                 {t('tracker.config.showItemOptions.always')}
 255                                                         </option>
 256                                                 </Form.Select>
 257                                         </Form.Group>
 258                                         <Form.Group
 259                                                 className="d-flex justify-content-between my-2"
 260                                                 controlId="tracker.showBig"
 261                                         >
 262                                                 <Form.Label>{t('tracker.config.showBig')}</Form.Label>
 263                                                 <Form.Select
 264                                                         className="w-auto"
 265                                                         name="showBig"
 266                                                         onChange={handleChange}
 267                                                         value={config.showBig || 'always'}
 268                                                 >
 269                                                         <option value="never">
 270                                                                 {t('tracker.config.showItemOptions.never')}
 271                                                         </option>
 272                                                         <option value="situational">
 273                                                                 {t('tracker.config.showItemOptions.situational')}
 274                                                         </option>
 275                                                         <option value="always">
 276                                                                 {t('tracker.config.showItemOptions.always')}
 277                                                         </option>
 278                                                 </Form.Select>
 279                                         </Form.Group>
 280                                 </Col>
 281                         </Row>
 282                 </Modal.Body>
 283         </Modal>;
 284 };
 285
 286 ConfigDialog.propTypes = {
 287         onHide: PropTypes.func,
 288         show: PropTypes.bool,
 289 };
 290
 291 export default ConfigDialog;