X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FToolbar.js;h=f9d488a03f5bacf88afe29ce52dc8bb6b4e9cfd2;hb=HEAD;hp=c7545b3106c0898afe0ed8224a78fe7b91ce4c85;hpb=4a9ad147aedfae6d5488a7121cacf9a18775ff21;p=alttp.git

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
index c7545b3..f9d488a 100644
--- a/resources/js/components/tracker/Toolbar.js
+++ b/resources/js/components/tracker/Toolbar.js
@@ -1,8 +1,13 @@
 import React from 'react';
-import { 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 = {
@@ -13,9 +18,24 @@ 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) => {
@@ -25,16 +45,125 @@ 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">
-				<ToggleIcon controller={controller} icons={['map']} />
-				<ToggleIcon controller={controller} icons={['compass']} />
-				<ToggleIcon controller={controller} icons={['small-key']} />
-				<ToggleIcon controller={controller} icons={['big-key']} />
+				<Button
+					className="me-3"
+					onClick={() => setShowConfigDialog(true)}
+					title={t('button.settings')}
+					variant="outline-secondary"
+				>
+					<Icon.SETTINGS title="" />
+				</Button>
+				<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>;
 };