feat: 🎸 add move filter and ability link to wiki

HuskyHsu · Nov 2, 2023 · 235cc95 · 235cc95
1 parent 0df59f5
commit 235cc95
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 18 deletions.
diff --git a/src/newComponents/common/Buttons.tsx b/src/newComponents/common/Buttons.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+
+type Props = {
+  list: { name: string; val: string }[];
+  currVal: string;
+  updateState: (val: string) => void;
+};
+
+export function Buttons({ list, currVal, updateState }: Props) {
+  return (
+    <div className="flex flex-wrap gap-4">
+      {list.map((item) => {
+        return (
+          <button
+            key={item.name}
+            className={clsx(
+              'rounded-xl px-2 py-1',
+              'whitespace-nowrap shadow-list-items',
+              currVal === item.val ? 'bg-secondary' : 'bg-secondary/40'
+            )}
+            onClick={() => {
+              updateState(item.val);
+            }}
+          >
+            {item.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/newComponents/common/index.ts b/src/newComponents/common/index.ts
@@ -5,3 +5,4 @@ export * from './TitleSlide';
 export * from './Indicator';
 export * from './Toggle';
 export * from './PokemonBadge';
+export * from './Buttons';
diff --git a/src/pages/Pokemon/Pokemon.tsx b/src/pages/Pokemon/Pokemon.tsx
@@ -116,12 +116,7 @@ function PokemonInfo() {
           </>
         )}
 
-        {tab === '招式清單' && (
-          <>
-            <SubTitleSlide title="招式清單" />
-            <Moves pm={pm} />
-          </>
-        )}
+        {tab === '招式清單' && <Moves pm={pm} />}
 
         <button onClick={() => navigate(-1)}>back</button>
       </div>

diff --git a/src/pages/Pokemon/components/BaseInfo.tsx b/src/pages/Pokemon/components/BaseInfo.tsx
@@ -67,18 +67,22 @@ const renderData: Render[] = [
     Content: ({ pm }: ContentProps) => (
       <span className="flex flex-wrap justify-center gap-2 md:justify-start">
         {pm.abilities.map((ability) => (
-          <span
+          <a
             key={ability}
+            href={`https://wiki.52poke.com/zh-hant/${ability}（特性）`}
+            target="_blank"
+            rel="noreferrer"
             className={clsx(
               'py-px',
               'h-7 w-full md:w-2/5',
               'border-2 border-solid border-secondary',
-              'rounded-full bg-secondary/30 text-center text-sm text-black',
-              'whitespace-nowrap'
+              'rounded-full bg-secondary/30 text-center text-sm',
+              'whitespace-nowrap',
+              'text-blue-800 underline'
             )}
           >
             {ability}
-          </span>
+          </a>
         ))}
       </span>
     ),
@@ -91,17 +95,21 @@ const renderData: Render[] = [
       }
       return (
         <span className="flex flex-wrap justify-center gap-2 md:justify-start">
-          <span
+          <a
+            href={`https://wiki.52poke.com/zh-hant/${pm.hiddenAbility}（特性）`}
+            target="_blank"
+            rel="noreferrer"
             className={clsx(
               'py-px',
               'h-7 w-full md:w-2/5',
               'border-2 border-solid border-scarlet',
-              'rounded-full bg-scarlet/30 text-center text-sm text-black',
-              'whitespace-nowrap'
+              'rounded-full bg-scarlet/30 text-center text-sm',
+              'whitespace-nowrap',
+              'text-blue-800 underline'
             )}
           >
             {pm.hiddenAbility}
-          </span>
+          </a>
         </span>
       );
     },

diff --git a/src/pages/Pokemon/components/Moves.tsx b/src/pages/Pokemon/components/Moves.tsx
@@ -2,13 +2,18 @@ import { useState } from 'react';
 import clsx from 'clsx';
 
 import { Accuracy, FullMove, FullPokemon, LevelMap, PMMove } from '@/types/Pokemon';
-import { Icon, PokemonBadge } from '@/newComponents';
-import { api } from '@/utils';
+import { Buttons, Icon, PokemonBadge, SubTitleSlide } from '@/newComponents';
+import { ValueKeys, api } from '@/utils';
 
 type Props = {
   pm: FullPokemon;
 };
 
+type Filter = {
+  types: Set<string>;
+  category: Set<string>;
+};
+
 const columns = [
   //   {
   //     header: '挑選',
@@ -179,9 +184,12 @@ export function Moves({ pm }: Props) {
     .concat(pm.moves.TMs as PMMove[])
     .concat(pm.moves.beforeEvolveTMs as PMMove[]);
 
+  const allMoveType = [...new Set(allMoves.map((move) => move.type))];
+
   const [expandedPanels, setExpandedPanels] = useState<Set<string>>(new Set());
   const [moveMap, setMoveMap] = useState<Record<string, FullMove>>({});
   const [onlyEvolve, setOnlyEvolve] = useState<boolean>(true);
+  const [filter, setFilter] = useState<Filter>({ types: new Set(), category: new Set() });
 
   const handleClick = async (panelKey: string, nameZh: string) => {
     const updatedPanels = new Set(expandedPanels);
@@ -202,9 +210,69 @@ export function Moves({ pm }: Props) {
     setExpandedPanels(updatedPanels);
   };
 
+  const updateSetState = (key: ValueKeys<Filter, Set<string>>[keyof Filter]) => {
+    return (val: string) => {
+      setFilter((prev) => {
+        if (prev[key].has(val)) {
+          prev[key].delete(val);
+        } else {
+          prev[key].add(val);
+        }
+
+        return {
+          ...prev,
+          [key]: prev[key],
+        };
+      });
+    };
+  };
+
+  const typeUpdate = updateSetState('types');
+
   return (
-    <div className="-mx-4 md:mx-0">
-      <ul className="text-sm">
+    <div className="-mx-4 flex flex-col gap-2 md:mx-0">
+      <SubTitleSlide title="屬性" />
+      <div className="flex w-full flex-wrap justify-items-center gap-x-4 gap-y-3 pb-2 pl-2">
+        {allMoveType.map((type) => (
+          <button onClick={() => typeUpdate(type)} key={type}>
+            <Icon.Game.Type
+              type={type}
+              className={clsx(
+                'h-8 w-8',
+                filter.types.size > 0 && !filter.types.has(type) && 'opacity-30'
+              )}
+            />
+          </button>
+        ))}
+      </div>
+      <SubTitleSlide title="分類" />
+      <Buttons
+        list={[
+          { name: '物理', val: '物理' },
+          { name: '特殊', val: '特殊' },
+          { name: '變化', val: '變化' },
+        ]}
+        currVal={filter.category.size === 1 ? [...filter.category][0] : ''}
+        updateState={(val) => {
+          setFilter((prev) => {
+            if (prev.category.size === 0) {
+              prev.category.add(val);
+            } else {
+              if (prev.category.has(val)) {
+                prev.category.delete(val);
+              } else {
+                prev.category.clear();
+                prev.category.add(val);
+              }
+            }
+            return {
+              ...prev,
+              category: prev.category,
+            };
+          });
+        }}
+      />
+      <ul className="mt-4 text-sm">
         <li className={clsx('sticky top-0 flex bg-custom-gold/50', 'py-1 text-gray-100 md:-top-4')}>
           {columns.map((col) => (
             <span
@@ -216,6 +284,18 @@ export function Moves({ pm }: Props) {
           ))}
         </li>
         {allMoves
+          .filter((move) => {
+            let display = true;
+            if (filter.types.size > 0) {
+              display = display && filter.types.has(move.type);
+            }
+
+            if (filter.category.size > 0) {
+              display = display && filter.category.has(move.category);
+            }
+
+            return display;
+          })
           .map((move, i) => {
             const key = `${move.pid}-${i}`;
             const lilist = [