tentative inverted logic

[alttp.git] / resources / js / components / tracker / Toolbar.js

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
index 020826635a65a215fa89bf452c81d5af58734a61..85e0f0428bf6bb4d47c7dbfa6833d602a9c1df80 100644 (file)
--- a/resources/js/components/tracker/Toolbar.js
+++ b/resources/js/components/tracker/Toolbar.js
@@ -1,10 +1,13 @@
 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 = {
@@ -17,8 +20,22 @@ 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) => {
@@ -28,6 +45,15 @@ const Toolbar = () => {
                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">
@@ -38,12 +64,78 @@ const Toolbar = () => {
                                >
                                        <Icon.SETTINGS />
                                </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']} />
+                               <ToggleIcon controller={wildController} icons={['compass']} />
+                               <ToggleIcon controller={wildController} icons={['small-key']} />
+                               <ToggleIcon controller={wildController} icons={['big-key']} />
+                               <ToggleIcon className="ms-3" controller={bossController} icons={['armos']} />
+                               <ToggleIcon controller={worldController} icons={['link-head', 'bunny-head']} />
+                       </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>;