From a40b20123a78f3d565a47ed9266c16da3b979bdb Mon Sep 17 00:00:00 2001 From: Derick M <58572875+TurtIeSocks@users.noreply.github.com> Date: Thu, 22 Feb 2024 23:19:38 -0500 Subject: [PATCH] feat: pkmn filter diagram --- jsconfig.json | 31 +-- packages/locales/lib/human/en.json | 11 +- src/components/layout/Nav.jsx | 2 + .../layout/dialogs/filters/PkmnFilterHelp.jsx | 195 ++++++++++++++++++ src/components/layout/drawer/BoolToggle.jsx | 4 +- src/components/layout/drawer/Pokemon.jsx | 9 + src/components/layout/general/Icons.jsx | 2 +- src/hooks/useLayoutStore.js | 3 + 8 files changed, 233 insertions(+), 24 deletions(-) create mode 100644 src/components/layout/dialogs/filters/PkmnFilterHelp.jsx diff --git a/jsconfig.json b/jsconfig.json index 88e79d180..eee01f5e6 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,29 +1,20 @@ { "compilerOptions": { "target": "ESNext", - "module": "CommonJS", + "module": "ESNext", + "moduleResolution": "node", "resolveJsonModule": true, "esModuleInterop": true, + "allowSyntheticDefaultImports": true, "baseUrl": ".", - "jsx": "react", + "lib": ["ESNext", "dom"], + "jsx": "react-jsx", "paths": { - "@assets/*": [ - "./src/assets/*" - ], - "@components/*": [ - "./src/components/*" - ], - "@services/*": [ - "./src/services/*" - ], - "@hooks/*": [ - "./src/hooks/*" - ], + "@assets/*": ["./src/assets/*"], + "@components/*": ["./src/components/*"], + "@services/*": ["./src/services/*"], + "@hooks/*": ["./src/hooks/*"] } }, - "exclude": [ - "node_modules", - "**/node_modules/*", - "dist" - ] -} \ No newline at end of file + "exclude": ["node_modules", "**/node_modules/*", "dist"] +} diff --git a/packages/locales/lib/human/en.json b/packages/locales/lib/human/en.json index 546538aa4..01b3a9f39 100644 --- a/packages/locales/lib/human/en.json +++ b/packages/locales/lib/human/en.json @@ -725,5 +725,14 @@ "extra": "Extra", "select": "Select", "searching": "searching...", - "no_options": "No Options..." + "no_options": "No Options...", + "and": "AND", + "or": "OR", + "only_global": "Only Global", + "global_caption": "Ignores All Other Filters", + "global_and_individual": "Global & Individual Filters", + "gender_filters_all": "Gender Applies to All", + "and_caption": "Linked Together", + "or_caption": "Filters Independently", + "filter_help": "Filter Help" } diff --git a/src/components/layout/Nav.jsx b/src/components/layout/Nav.jsx index 77498c276..6b2b740fc 100644 --- a/src/components/layout/Nav.jsx +++ b/src/components/layout/Nav.jsx @@ -22,6 +22,7 @@ import BadgeSelection from './dialogs/BadgeSelection' import WebhookAdvanced from './dialogs/webhooks/WebhookAdv' import SlotSelection from './dialogs/filters/SlotSelection' import { HelpDialog } from './dialogs/Help' +import { PkmnFilterHelp } from './dialogs/filters/PkmnFilterHelp' export const Nav = React.memo( () => { @@ -50,6 +51,7 @@ export const Nav = React.memo( + )} diff --git a/src/components/layout/dialogs/filters/PkmnFilterHelp.jsx b/src/components/layout/dialogs/filters/PkmnFilterHelp.jsx new file mode 100644 index 000000000..acb56ec9b --- /dev/null +++ b/src/components/layout/dialogs/filters/PkmnFilterHelp.jsx @@ -0,0 +1,195 @@ +// @ts-check +import * as React from 'react' +import DialogContent from '@mui/material/DialogContent' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Grid2 from '@mui/material/Unstable_Grid2' +import { useTranslation } from 'react-i18next' +import { Chip, Divider, useMediaQuery } from '@mui/material' + +import Header from '@components/layout/general/Header' +import Footer from '@components/layout/general/Footer' +import { useMemory } from '@hooks/useMemory' +import { useLayoutStore } from '@hooks/useLayoutStore' + +import { DialogWrapper } from '../DialogWrapper' + +const GAP = 2 + +/** @type {(theme: import('@mui/material').Theme) => import('@mui/system').SystemStyleObject} */ +const SX_PROPS = (theme) => ({ + borderColor: theme.palette.grey[theme.palette.mode === 'dark' ? 600 : 300], + border: '3px solid', + borderRadius: 4, +}) + +const SUB_SX_PROPS = /** @type {typeof SX_PROPS} */ ( + (theme) => ({ + borderColor: theme.palette.grey[theme.palette.mode === 'dark' ? 600 : 300], + borderBottom: '3px solid', + p: 0.5, + }) +) + +const AND_ITEMS = [ + 'iv', + 'level', + 'cp', + 'slider_atk_iv', + 'slider_def_iv', + 'slider_sta_iv', +] + +const OR_ITEMS = [ + 'slider_little', + 'slider_great', + 'slider_ultra', + 'size_1', + 'size_5', +] + +/** @param {{ children: string } & import('@mui/material').TypographyProps} props */ +function ChildText({ children, ...props }) { + const { t } = useTranslation() + return ( + + {t(children)} + + ) +} + +/** @param {{ title: string, children: React.ReactNode, bgcolor: import('@mui/material').BoxProps['bgcolor'], fullSize?: boolean }} props */ +function Card({ title, children, bgcolor, fullSize }) { + const { t, i18n } = useTranslation() + return ( + + + + {t(title)} + + {i18n.exists(`${title}_caption`) && ( + + {t(`${title}_caption`)} + + )} + + {children} + + ) +} + +const handleClose = () => useLayoutStore.setState({ pkmnFilterHelp: false }) + +const OPTIONS = + /** @type {import('@components/layout/general/Footer').FooterButton[]} */ ([ + { name: 'close', color: 'error', action: handleClose }, + ]) + +export function PkmnFilterHelp() { + const { t } = useTranslation() + const perms = useMemory((s) => s.auth.perms) + const isMobile = useMediaQuery( + (/** @type {import('@mui/material').Theme} */ theme) => + theme.breakpoints.down('md'), + ) + + if (!perms.pokemon) return null + return ( + +
+ + + + + {t('global_and_individual')} + + + + + + {AND_ITEMS.map((child) => ( + + {child} + + ))} + + + + {OR_ITEMS.map((child) => ( + + {child} + + ))} + + + + + {!isMobile && ( + + )} + + + {t('only_global')} + + + {t('global_caption')} + + + + + + + +