Merge pull request #962 from WatWowMap/pkmn-filter-help

feat: pkmn filter diagram

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"
-  ]
-}
+  "exclude": ["node_modules", "**/node_modules/*", "dist"]
+}

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"
 }

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(
             <WebhookAdvanced />
             <SlotSelection />
             <HelpDialog />
+            <PkmnFilterHelp />
           </>
         )}
       </>

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<import('@mui/material').Theme>} */
+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 (
+    <Typography variant="h6" align="center" width="100%" {...props}>
+      {t(children)}
+    </Typography>
+  )
+}
+
+/** @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 (
+    <Grid2
+      direction="column"
+      sx={SX_PROPS}
+      m={GAP}
+      overflow="hidden"
+      xs={12}
+      sm={fullSize ? 12 : 6}
+    >
+      <Box width="100%" bgcolor={`${bgcolor}.main`} sx={SUB_SX_PROPS}>
+        <Typography variant="h5" color="white" align="center">
+          {t(title)}
+        </Typography>
+        {i18n.exists(`${title}_caption`) && (
+          <Typography
+            variant="caption"
+            color="white"
+            width="100%"
+            textAlign="center"
+            component="p"
+          >
+            {t(`${title}_caption`)}
+          </Typography>
+        )}
+      </Box>
+      <Box p={GAP / 2}>{children}</Box>
+    </Grid2>
+  )
+}
+
+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 (
+    <DialogWrapper dialog="pkmnFilterHelp" maxWidth="md">
+      <Header titles="Filter Help" action={handleClose} />
+      <DialogContent sx={{ p: 0, height: '100%', alignItems: 'center' }}>
+        <Grid2
+          container
+          alignItems="stretch"
+          justifyContent="space-around"
+          height="100%"
+          p={GAP}
+          columns={13}
+        >
+          <Grid2 xs={12} md={8} my={GAP / 2}>
+            <Typography
+              variant="h4"
+              px={GAP}
+              pt={GAP}
+              pb={{ xs: 0, md: GAP + 0.5 }}
+            >
+              {t('global_and_individual')}
+            </Typography>
+            <Divider flexItem sx={{ my: 2, borderColor: 'darkgrey' }} />
+            <Card title="gender_filters_all" bgcolor="success" fullSize>
+              <Grid2 container columns={16} justifyContent="center">
+                <Card title="and" bgcolor="primary">
+                  {AND_ITEMS.map((child) => (
+                    <ChildText
+                      key={child}
+                      color={perms.iv ? 'inherit' : 'GrayText'}
+                    >
+                      {child}
+                    </ChildText>
+                  ))}
+                </Card>
+                <Card title="or" bgcolor="secondary">
+                  <Box py={1} />
+                  {OR_ITEMS.map((child) => (
+                    <ChildText
+                      key={child}
+                      color={
+                        (child.startsWith('slider') ? perms.pvp : perms.iv)
+                          ? 'inherit'
+                          : 'GrayText'
+                      }
+                    >
+                      {child}
+                    </ChildText>
+                  ))}
+                </Card>
+              </Grid2>
+            </Card>
+          </Grid2>
+          {!isMobile && (
+            <Divider
+              orientation="vertical"
+              flexItem
+              sx={{ borderColor: 'darkgrey' }}
+            />
+          )}
+          <Grid2 xs={12} md={4} my={GAP / 2} container direction="column">
+            <Typography variant="h4" px={GAP} pt={GAP}>
+              {t('only_global')}
+            </Typography>
+            <Typography variant="caption" width="100%" component="p" px={GAP}>
+              {t('global_caption')}
+            </Typography>
+            <Divider flexItem sx={{ my: 2, borderColor: 'darkgrey' }} />
+            <Chip
+              label={t('zero_iv')}
+              color="primary"
+              disabled={!perms.iv}
+              sx={[SX_PROPS, { my: 1, mx: GAP }]}
+            />
+            <Chip
+              label={t('hundo_iv')}
+              color="primary"
+              disabled={!perms.iv}
+              sx={[SX_PROPS, { my: 1, mx: GAP }]}
+            />
+          </Grid2>
+        </Grid2>
+      </DialogContent>
+      <Footer options={OPTIONS} />
+    </DialogWrapper>
+  )
+}

src/components/layout/drawer/BoolToggle.jsx

@@ -68,7 +68,7 @@ export function BoolBase({
 
 export const BoolToggle = React.memo(BoolBase)
 
-/** @param {{ items: readonly [string, string], secondColor?: BoolToggleProps['switchColor'] } & BoolToggleProps} props */
+/** @param {{ items: readonly [string, string], secondColor?: BoolToggleProps['switchColor'], label?: `${string}-${string}` } & Omit<BoolToggleProps, 'label'>} props */
 export function DualBoolToggle({
   items,
   switchColor,
@@ -77,7 +77,7 @@ export function DualBoolToggle({
   label,
   ...props
 }) {
-  const labels = label?.split('-') || []
+  const labels = label?.split('-', 2) || []
   return (
     <Grid2 container component={ListItem} disablePadding disableGutters>
       {items.map((item, i) => (

src/components/layout/drawer/Pokemon.jsx

@@ -17,18 +17,21 @@ import {
   InputLabel,
 } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import Help from '@mui/icons-material/HelpOutline'
 
 import { useMemory } from '@hooks/useMemory'
 import { useStorage, useDeepStore } from '@hooks/useStorage'
 import Utility from '@services/Utility'
 import { XXS_XXL, NUNDO_HUNDO } from '@assets/constants'
+import { useLayoutStore } from '@hooks/useLayoutStore'
 
 import { StringFilterMemo } from '../dialogs/filters/StringFilter'
 import SliderTile from '../dialogs/filters/SliderTile'
 import TabPanel from '../general/TabPanel'
 import { BoolToggle, DualBoolToggle } from './BoolToggle'
 import { GenderListItem } from '../dialogs/filters/Gender'
 import { SelectorListMemo } from './SelectorList'
+import { BasicListButton } from '../general/BasicListButton'
 
 function PokemonDrawer() {
   const legacyFilter = useStorage((s) => s.userSettings.pokemon.legacyFilter)
@@ -167,6 +170,12 @@ function PokemonDrawer() {
           </TabPanel>
         </>
       )}
+      <BasicListButton
+        label="filter_help"
+        onClick={() => useLayoutStore.setState({ pkmnFilterHelp: true })}
+      >
+        <Help />
+      </BasicListButton>
     </>
   )
 }

src/components/layout/general/Icons.jsx

@@ -3,7 +3,7 @@ import Save from '@mui/icons-material/Save'
 import Add from '@mui/icons-material/Add'
 import People from '@mui/icons-material/People'
 import BugReport from '@mui/icons-material/BugReport'
-import Help from '@mui/icons-material/Help'
+import Help from '@mui/icons-material/HelpOutline'
 import Ballot from '@mui/icons-material/Ballot'
 import Tune from '@mui/icons-material/Tune'
 import FormatSize from '@mui/icons-material/FormatSize'

src/hooks/useLayoutStore.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { create } from 'zustand'
 
 import Utility from '@services/Utility'
@@ -13,6 +14,7 @@ import { useStorage } from './useStorage'
  *  motd: boolean,
  *  donorPage: boolean,
  *  search: boolean,
+ *  pkmnFilterHelp: boolean,
  *  userProfile: boolean,
  *  resetFilters: boolean,
  *  feedback: boolean,
@@ -42,6 +44,7 @@ export const useLayoutStore = create(() => ({
   nestSubmissions: '0',
   help: { open: false, category: '' },
   motd: false,
+  pkmnFilterHelp: false,
   donorPage: false,
   search: false,
   userProfile: false,