From 249e06be11d0f7778d99956c87d4f0a8ac7e69f7 Mon Sep 17 00:00:00 2001 From: Daniel Karbach Date: Tue, 26 Mar 2024 15:44:39 +0100 Subject: [PATCH] simple tracker config dialog --- .../js/components/tracker/ConfigDialog.js | 180 ++++++++++++++++++ .../js/components/tracker/CountDisplay.js | 6 +- resources/js/components/tracker/Dungeons.js | 48 +++-- resources/js/components/tracker/Toolbar.js | 13 +- resources/js/helpers/tracker.js | 18 ++ resources/js/i18n/de.js | 18 ++ resources/js/i18n/en.js | 18 ++ resources/sass/tracker.scss | 3 + 8 files changed, 284 insertions(+), 20 deletions(-) create mode 100644 resources/js/components/tracker/ConfigDialog.js diff --git a/resources/js/components/tracker/ConfigDialog.js b/resources/js/components/tracker/ConfigDialog.js new file mode 100644 index 0000000..88c6d73 --- /dev/null +++ b/resources/js/components/tracker/ConfigDialog.js @@ -0,0 +1,180 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { Col, Form, Modal, Row } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; + +import LargeCheck from '../common/LargeCheck'; +import { useTracker } from '../../hooks/tracker'; + +const ConfigDialog = ({ + onHide, + show, +}) => { + const { config, saveConfig } = useTracker(); + const { t } = useTranslation(); + + const handleChange = React.useCallback(({ target: { name, value } }) => { + saveConfig({ [name]: value }); + }, [saveConfig]); + + return + + + {t('tracker.config.title')} + + + + + +

{t('tracker.config.wildItems')}

+ + {t('tracker.config.wildMap')} + + + + {t('tracker.config.wildCompass')} + + + + {t('tracker.config.wildSmall')} + + + + {t('tracker.config.wildBig')} + + + + +

{t('tracker.config.showItems')}

+ + {t('tracker.config.showMap')} + + + + + + + + {t('tracker.config.showCompass')} + + + + + + + + {t('tracker.config.showSmall')} + + + + + + + + {t('tracker.config.showBig')} + + + + + + + +
+
+
; +}; + +ConfigDialog.propTypes = { + onHide: PropTypes.func, + show: PropTypes.bool, +}; + +export default ConfigDialog; diff --git a/resources/js/components/tracker/CountDisplay.js b/resources/js/components/tracker/CountDisplay.js index ed9b91f..8282422 100644 --- a/resources/js/components/tracker/CountDisplay.js +++ b/resources/js/components/tracker/CountDisplay.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const CountDisplay = ({ className, count }) => { +const CountDisplay = ({ className, count, full }) => { const classNames = ['count-display']; if (className) { classNames.push(className); @@ -9,6 +9,9 @@ const CountDisplay = ({ className, count }) => { if (!count) { classNames.push('is-zero'); } + if (full && count >= full) { + classNames.push('is-full'); + } return {count} ; @@ -17,6 +20,7 @@ const CountDisplay = ({ className, count }) => { CountDisplay.propTypes = { className: PropTypes.string, count: PropTypes.number, + full: PropTypes.number, }; export default CountDisplay; diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js index 08a581f..b997e75 100644 --- a/resources/js/components/tracker/Dungeons.js +++ b/resources/js/components/tracker/Dungeons.js @@ -5,35 +5,47 @@ import ToggleIcon from './ToggleIcon'; import { getDungeonAcquiredSKs, getDungeonRemainingItems, + shouldShowDungeonItem, } from '../../helpers/tracker'; import { useTracker } from '../../hooks/tracker'; const Dungeons = () => { - const { dungeons, state } = useTracker(); + const { config, dungeons, state } = useTracker(); return
{dungeons.map(dungeon =>
{dungeon.id.toUpperCase()} - - - + {shouldShowDungeonItem(config, 'Map') ? - - - + : null} + {shouldShowDungeonItem(config, 'Compass') ? + + : null} + {shouldShowDungeonItem(config, 'Small') ? + + + + + : null} + {shouldShowDungeonItem(config, 'Big') ? + + : null} { + const [showConfigDialog, setShowConfigDialog] = React.useState(false); const { config, saveConfig } = useTracker(); const controller = React.useMemo(() => ({ @@ -28,6 +31,13 @@ const Toolbar = () => { return
+ @@ -35,6 +45,7 @@ const Toolbar = () => {
+ setShowConfigDialog(false)} show={showConfigDialog} />
; }; diff --git a/resources/js/helpers/tracker.js b/resources/js/helpers/tracker.js index 2bc477b..e4b0ebe 100644 --- a/resources/js/helpers/tracker.js +++ b/resources/js/helpers/tracker.js @@ -68,6 +68,10 @@ export const BOSSES = [ ]; export const CONFIG = { + showMap: 'situational', + showCompass: 'situational', + showSmall: 'always', + showBig: 'always', wildMap: false, wildCompass: false, wildSmall: false, @@ -1552,6 +1556,20 @@ export const UNDERWORLD_LOCATIONS = [ }, ]; +export const shouldShowDungeonItem = (config, which) => { + const show = config[`show${which}`] || 'always'; + const wild = config[`wild${which}`] || false; + switch (show) { + default: + case 'always': + return true; + case 'situational': + return wild; + case 'never': + return false; + } +}; + export const toggleBoolean = name => state => ({ ...state, [name]: !state[name], diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js index 7232e2d..87b6198 100644 --- a/resources/js/i18n/de.js +++ b/resources/js/i18n/de.js @@ -501,6 +501,24 @@ export default { seeAlso: 'Siehe auch', }, tracker: { + config: { + showBig: 'Big Keys', + showCompass: 'Kompanden', + showItemOptions: { + always: 'Immer', + never: 'Nie', + situational: 'Situationsbedingt', + }, + showItems: 'Zeige Dungeon Items', + showMap: 'Maps', + showSmall: 'Small Keys', + title: 'Konfiguration', + wildBig: 'Big Keys', + wildCompass: 'Kompanden', + wildItems: 'Wild Dungeon Items', + wildMap: 'Maps', + wildSmall: 'Small Keys', + }, location: { aginah: 'Aginah', blacksmith: 'Blacksmith', diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js index a76dd6c..9ca7a6b 100644 --- a/resources/js/i18n/en.js +++ b/resources/js/i18n/en.js @@ -501,6 +501,24 @@ export default { seeAlso: 'See also', }, tracker: { + config: { + showBig: 'Big Keys', + showCompass: 'Compasses', + showItemOptions: { + always: 'Always', + never: 'Never', + situational: 'Situational', + }, + showItems: 'Show Dungeon Items', + showMap: 'Maps', + showSmall: 'Small Keys', + title: 'Configuration', + wildBig: 'Big Keys', + wildCompass: 'Compasses', + wildItems: 'Wild Dungeon Items', + wildMap: 'Maps', + wildSmall: 'Small Keys', + }, location: { aginah: 'Aginah', blacksmith: 'Blacksmith', diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index eae60c3..4857557 100644 --- a/resources/sass/tracker.scss +++ b/resources/sass/tracker.scss @@ -41,6 +41,9 @@ &.is-zero { display: none; } + &.is-full { + color: green; + } } } } -- 2.39.2