Implement filter by features for battlesuit list

public/data/battlesuits/dk.json

@@ -4,7 +4,7 @@
   "name": "Drive Kometa",
   "type": "psychic",
   "valkyrie": "bronya",
-  "strengths": [],
+  "strengths": ["physical", "gather", "weaken", "burst", "time mastery"],
   "leader": {
     "core": {
       "name": "Mental Sync",

public/data/battlesuits/ds.json

@@ -4,7 +4,7 @@
   "name": "Danzai Spectramancer",
   "type": "mecha",
   "valkyrie": "mei",
-  "strengths": [],
+  "strengths": ["physical"],
   "leader": {
     "core": {
       "name": "Phantom Outbreak",

public/data/battlesuits/ft.json

@@ -4,7 +4,7 @@
   "name": "Fervent Tempo Δ",
   "type": "psychic",
   "valkyrie": "olenyevas",
-  "strengths": [],
+  "strengths": ["physical"],
   "leader": {
     "core": {
       "name": "SHOWTIME!",

public/data/battlesuits/hf.json

@@ -4,7 +4,7 @@
   "name": "Hawk of the Fog",
   "type": "psychic",
   "valkyrie": "fuhua",
-  "strengths": [],
+  "strengths": ["lightning dmg", "heavy atk", "paralyze", "time mastery"],
   "leader": {
     "core": {
       "name": "Chelonic Unity",

public/data/battlesuits/hfs.json

@@ -4,7 +4,7 @@
   "name": "Herrscher of Flamescion",
   "type": "psychic",
   "valkyrie": "kiana",
-  "strengths": ["fire dmg", "heal", "time mastery", "gather"],
+  "strengths": ["fire dmg", "heal", "time mastery", "gather", "aerial"],
   "leader": {
     "core": {
       "name": "Nameless Knight-Errant's Path",

public/data/battlesuits/hov.json

@@ -4,7 +4,7 @@
   "name": "Herrscher of the Void",
   "type": "biologic",
   "valkyrie": "kiana",
-  "strengths": ["physical", "time mastery", "fast atk"],
+  "strengths": ["physical", "time mastery", "fast atk", "aerial"],
   "leader": {
     "core": {
       "name": "Void Throne",

public/data/battlesuits/io.json

@@ -4,7 +4,7 @@
   "name": "Infinite Ouroboros",
   "type": "mecha",
   "valkyrie": "mobius",
-  "strengths": ["lightning dmg", "time mastery"],
+  "strengths": ["lightning dmg", "time mastery", "aerial"],
   "leader": {
     "core": {
       "name": "Infinite Fate",

public/data/battlesuits/mpe.json

@@ -4,7 +4,7 @@
   "name": "Miss Pink Elf♪",
   "type": "psychic",
   "valkyrie": "elysia",
-  "strengths": ["physical", "time mastery", "fast atk"],
+  "strengths": ["physical", "time mastery", "fast atk", "aerial"],
   "leader": {
     "core": {
       "name": "An Ode to Love and Compassion",

public/data/battlesuits/pv.json

@@ -4,7 +4,7 @@
   "name": "Prinzessin der Verurteilung!",
   "type": "biologic",
   "valkyrie": "fischl",
-  "strengths": ["lightning dmg", "time mastery", "fast atk"],
+  "strengths": ["lightning dmg", "time mastery", "fast atk", "aerial"],
   "leader": {
     "core": {
       "name": "Evernight Suite",

public/data/battlesuits/sns.json

@@ -4,7 +4,7 @@
   "name": "Sweet 'n' Spicy",
   "type": "mecha",
   "valkyrie": "carole",
-  "strengths": ["physical", "time mastery", "stun", "gather"],
+  "strengths": ["physical", "time mastery", "stun", "gather", "aerial"],
   "leader": {
     "core": {
       "name": "Star of Hope",

public/data/battlesuits/stfu.json

@@ -4,7 +4,7 @@
   "name": "Striker Fulminata",
   "type": "biologic",
   "valkyrie": "mei",
-  "strengths": [],
+  "strengths": ["physical", "burst", "fast atk", "paralyze"],
   "leader": {
     "core": {
       "name": "Sakura Aura",

src/pages/_app.tsx

@@ -86,6 +86,27 @@ export const theme: Theme = {
       lineHeight: 'heading',
     },
   },
+  buttons: {
+    primary: {
+      color: 'primary',
+      borderColor: 'primary',
+      borderStyle: 'solid',
+      borderWidth: 1,
+      bg: 'background',
+      '&:hover, &.active': {
+        color: 'background',
+        bg: 'primary',
+      },
+    },
+    secondary: {
+      color: 'background',
+      bg: 'secondary',
+    },
+    gray: {
+      color: 'background',
+      bg: 'gray',
+    },
+  },
   styles: {
     root: {
       fontFamily: 'body',

src/pages/honkai3rd/battlesuits/index.tsx

@@ -1,8 +1,9 @@
-import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
+import { Box, Heading, Flex, Text, Link, Button } from '@theme-ui/components'
 import Image from 'next/image'
 import NextLink from 'next/link'
 import { pick } from 'ramda'
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import {
@@ -10,35 +11,74 @@ import {
   listBattlesuits,
 } from '../../../data/honkai3rd/battlesuits'
 
+type BattlesuitListItemData = Pick<BattlesuitData, 'id' | 'name' | 'strengths'>
+
 interface BattlesuitListPageProps {
-  battlesuits: Pick<BattlesuitData, 'id' | 'name'>[]
+  battlesuits: BattlesuitListItemData[]
 }
 
+const featureFilterOptions = [
+  { value: 'all', label: 'All' },
+  { value: 'physical', label: 'Physical' },
+  { value: 'fire dmg', label: 'Fire DMG' },
+  { value: 'ice dmg', label: 'Ice DMG' },
+  { value: 'lightning dmg', label: 'Lightning DMG' },
+  { value: 'freeze', label: 'Freeze' },
+  { value: 'paralyze', label: 'Paralyze' },
+  { value: 'stun', label: 'Stun' },
+  { value: 'ignite', label: 'Ignite' },
+  { value: 'bleed', label: 'Bleed' },
+  { value: 'heavy atk', label: 'Heavy ATK' },
+  { value: 'weaken', label: 'Weaken' },
+  { value: 'impair', label: 'Impair' },
+  { value: 'time mastery', label: 'Time Mastery' },
+  { value: 'gather', label: 'Gather' },
+  { value: 'heal', label: 'Heal' },
+  { value: 'fast atk', label: 'Fast ATK' },
+  { value: 'burst', label: 'Burst' },
+  { value: 'aerial', label: 'Aerial' },
+]
+
 const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
-  return (
+  const [filter, setFilter] = useState('all')
-    <Box>
-      <Honkai3rdNavigator />
 
-      <Box p={3}>
+  const isBattlesuitHidden = useCallback(
-        <Breadcrumb
+    (battlesuit: BattlesuitListItemData) => {
-          items={[
+      switch (filter) {
-            { href: '/honkai3rd', label: 'Honkai 3rd' },
+        case 'physical':
-            { href: '/honkai3rd/battlesuits', label: 'Battlesuits' },
+        case 'fire dmg':
-          ]}
+        case 'ice dmg':
-        />
+        case 'lightning dmg':
+        case 'freeze':
+        case 'paralyze':
+        case 'stun':
+        case 'ignite':
+        case 'bleed':
+        case 'heavy atk':
+        case 'weaken':
+        case 'impair':
+        case 'time mastery':
+        case 'gather':
+        case 'heal':
+        case 'fast atk':
+        case 'burst':
+        case 'aerial':
+          return !battlesuit.strengths.some((strength) => strength === filter)
+        default:
+        case 'all':
+          return false
+      }
+    },
+    [filter]
+  )
 
-        <Heading as='h1'>Battlesuits</Heading>
+  const battlesuitList = useMemo(() => {
-
+    return battlesuits.map((battlesuit) => {
-        <Flex
+      const hidden = isBattlesuitHidden(battlesuit)
-          sx={{
-            flexWrap: 'wrap',
-            justifyContent: 'space-around',
-          }}
-        >
-          {battlesuits.map((battlesuit) => {
       return (
         <Box
           key={battlesuit.id}
+          className={hidden ? 'hidden' : ''}
           sx={{
             width: '160px',
             padding: 2,
@@ -47,10 +87,14 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
             borderWidth: 1,
             borderStyle: 'solid',
             borderRadius: 8,
+            transition:
+              'box-shadow 200ms ease-in-out, opacity 200ms ease-in-out',
             '&:hover': {
               borderColor: 'gray.3',
               boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-                    transition: 'box-shadow 200ms ease-in-out',
+            },
+            '&.hidden': {
+              display: 'none',
             },
           }}
         >
@@ -91,8 +135,85 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
           </NextLink>
         </Box>
       )
+    })
+  }, [battlesuits, isBattlesuitHidden])
+
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/battlesuits', label: 'Battlesuits' },
+          ]}
+        />
+
+        <Heading as='h1'>Battlesuits</Heading>
+        <Box>
+          <Heading as='h3'>Filter by Features</Heading>
+          <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
+            {featureFilterOptions.map(({ value, label }) => {
+              return (
+                <FilterButton
+                  active={value === filter}
+                  setFilter={setFilter}
+                  value={value}
+                  label={label}
+                />
+              )
             })}
           </Flex>
+
+          <Heading as='h3'>Filter by Valkyries</Heading>
+          <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
+            <FilterButton setFilter={setFilter} value='all' label='ALL' />
+            <FilterButton setFilter={setFilter} value='mecha' label='MECHA' />
+            <FilterButton setFilter={setFilter} value='bio' label='BIO' />
+            <FilterButton setFilter={setFilter} value='psy' label='PSY' />
+            <FilterButton setFilter={setFilter} value='qua' label='QUA' />
+            <FilterButton setFilter={setFilter} value='img' label='IMG' />
+            <FilterButton setFilter={setFilter} value='kiana' label='Kiana' />
+            <FilterButton setFilter={setFilter} value='mei' label='Mei' />
+            <FilterButton setFilter={setFilter} value='bronya' label='Bronya' />
+            <FilterButton setFilter={setFilter} value='himeko' label='Himeko' />
+            <FilterButton
+              setFilter={setFilter}
+              value='theresa'
+              label='Theresa'
+            />
+            <FilterButton setFilter={setFilter} value='fu hua' label='Fu Hua' />
+            <FilterButton setFilter={setFilter} value='rita' label='Rita' />
+            <FilterButton setFilter={setFilter} value='sakura' label='Sakura' />
+            <FilterButton setFilter={setFilter} value='kallen' label='Kallen' />
+            <FilterButton
+              setFilter={setFilter}
+              value='olenyevas'
+              label='Olenyevas'
+            />
+            <FilterButton setFilter={setFilter} value='seele' label='Seele' />
+            <FilterButton
+              setFilter={setFilter}
+              value='durandal'
+              label='Durandal'
+            />
+            <FilterButton setFilter={setFilter} value='fischl' label='Fischl' />
+            <FilterButton setFilter={setFilter} value='elysia' label='Elysia' />
+            <FilterButton setFilter={setFilter} value='mobius' label='Mobius' />
+            <FilterButton setFilter={setFilter} value='raven' label='Raven' />
+            <FilterButton setFilter={setFilter} value='carole' label='Carole' />
+          </Flex>
+        </Box>
+
+        <Flex
+          sx={{
+            flexWrap: 'wrap',
+            justifyContent: 'space-around',
+          }}
+        >
+          {battlesuitList}
+        </Flex>
       </Box>
     </Box>
   )
@@ -104,8 +225,46 @@ export async function getStaticProps() {
   return {
     props: {
       battlesuits: listBattlesuits().map((battlesuit) =>
-        pick(['id', 'name'], battlesuit)
+        pick(['id', 'name', 'strengths'], battlesuit)
       ),
     },
   }
 }
+
+interface FilterButtonProps {
+  active?: boolean
+  icon?: string
+  label: string
+  setFilter: (filter: string) => void
+  value: string
+}
+
+const FilterButton = ({
+  active = false,
+  setFilter,
+  icon,
+  label,
+  value,
+}: FilterButtonProps) => {
+  const selectFilter = useCallback(() => {
+    setFilter(value)
+  }, [setFilter, value])
+  return (
+    <Button
+      m={1}
+      py={1}
+      px={2}
+      onClick={selectFilter}
+      className={active ? 'active' : ''}
+    >
+      {icon != null && (
+        <SquareImageBox
+          src={`/assets/honkai3rd/icons/${icon}.png`}
+          alt={label}
+          size={30}
+        />
+      )}
+      {label}
+    </Button>
+  )
+}