feat: 🎸 update move page

HuskyHsu · Nov 7, 2023 · e8e62d9 · e8e62d9
1 parent 2a400e7
commit e8e62d9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 21 deletions.
diff --git a/src/newComponents/game/PokemonBadge.tsx b/src/newComponents/game/PokemonBadge.tsx
@@ -19,7 +19,7 @@ export function PokemonBadge({ pm, size = 'text-xs', text }: Props) {
         BgFromType[pm.types[0] as keyof typeof BgFromType],
         BgToType[pm.types[pm.types.length - 1] as keyof typeof BgToType]
       )}
-      to={`/pokedex/${pm.link}`}
+      to={`/pokedex/${pm.nameZh}${pm.altForm ? '-' + pm.altForm : ''}`}
     >
       {pm.nameZh}
       {pm.altForm && `-${pm.altForm}`}

diff --git a/src/pages/MoveDex/MoveDex.tsx b/src/pages/MoveDex/MoveDex.tsx
@@ -8,7 +8,7 @@ import { Icon } from '@/newComponents';
 import { Accuracy, FullMove, Move } from '@/types/Pokemon';
 import { ValueKeys, api } from '@/utils';
 
-import { Header } from './components';
+import { Header, Intersection } from './components';
 import { useMoveListInfo } from './api';
 
 export type Filter = {
@@ -148,9 +148,7 @@ function MoveDex() {
     } else {
       updatedPanels.add(panelKey);
 
-      if (moveMap[panelKey] === undefined) {
-        updateMoveMap(panelKey, nameZh);
-      }
+      await updateMoveMap(panelKey, nameZh);
     }
 
     setExpandedPanels(updatedPanels);
@@ -160,7 +158,10 @@ function MoveDex() {
     <div className="mb-4 flex flex-col gap-y-4">
       <Header filter={filter} updateState={updateState} />
       <Hr />
-      {/* <Intersection fullMoves={[...pick].map((pid) => moveMap[pid])} /> */}
+      {pick.size >= 2 && pick.size <= 4 && (
+        <Intersection fullMoves={[...pick].map((pid) => moveMap[pid])} />
+      )}
+
       <div className="-mx-4 flex flex-col gap-4 md:mx-0">
         <ul className="text-sm">
           <li
@@ -241,7 +242,9 @@ function MoveDex() {
                       {col.value({
                         row: move,
                         checked: pick.has(move.pid),
-                        fn: () => {
+                        fn: async () => {
+                          await updateMoveMap(move.pid, move.nameZh);
+
                           setPick((prev) => {
                             if (prev.has(move.pid)) {
                               prev.delete(move.pid);
@@ -250,7 +253,6 @@ function MoveDex() {
                             }
                             return new Set([...prev]);
                           });
-                          updateMoveMap(move.pid, move.nameZh);
                         },
                       })}
                     </span>

diff --git a/src/pages/MoveDex/components/Intersection.tsx b/src/pages/MoveDex/components/Intersection.tsx
@@ -1,10 +1,36 @@
-import { FullMove } from '@/types/Pokemon';
+import { usePokemonListContext } from '@/newComponents/contexts';
+import { PokemonBadge } from '@/newComponents/game';
+import { FullMove, Move, SubPokemon } from '@/types/Pokemon';
 
 type Props = {
   fullMoves: FullMove[];
 };
 
+function addtoSet(acc: Record<string, Set<string>>, link: string, move: Move) {
+  if (acc[link] === undefined) {
+    acc[link] = new Set();
+  }
+  acc[link].add(move.nameZh);
+  return acc;
+}
+
 export function Intersection({ fullMoves }: Props) {
+  const { pokemonList } = usePokemonListContext();
+
+  const summary = fullMoves.reduce((acc, move) => {
+    move.levelingUps.forEach(({ link }) => addtoSet(acc, link, move));
+    move.egg.forEach(({ link }) => addtoSet(acc, link, move));
+    move.TM?.pm.forEach(({ link }) => addtoSet(acc, link, move));
+
+    return acc;
+  }, {} as Record<string, Set<string>>);
+
+  const intersectionList = new Set(
+    Object.entries(summary)
+      .filter(([_, set]) => set.size === fullMoves.length)
+      .map(([link]) => link)
+  );
+
   return (
     <>
       <h6 className="text-sm font-bold text-gray-700">
@@ -13,7 +39,13 @@ export function Intersection({ fullMoves }: Props) {
         的寶可夢
       </h6>
       <h6 className="text-xs text-gray-500">(最多查詢四種招式)</h6>
-      <div className="mt-2 flex flex-wrap gap-2">QQ</div>
+      <div className="mt-2 flex flex-wrap gap-2">
+        {pokemonList
+          .filter((pm) => intersectionList.has(pm.link))
+          .map((pm, i) => (
+            <PokemonBadge pm={pm} key={pm.link + String(i)} />
+          ))}
+      </div>
       <hr className="my-3 h-px border-0 bg-gray-200" />
     </>
   );

diff --git a/src/pages/Pokemon/components/Moves.tsx b/src/pages/Pokemon/components/Moves.tsx
@@ -121,13 +121,13 @@ export function Moves({ pm }: Props) {
     .map((move) => {
       let key = `${move.pid}`;
       if ('level' in move) {
-        key += `:${move.level}`;
+        key += `:level${move.level}`;
       }
       if ('pm' in move) {
-        key += `:${move.pm.link}`;
+        key += `:PM${move.pm.link}`;
       }
       if ('TMPid' in move) {
-        key += `:${move.TMPid}`;
+        key += `:TM${move.TMPid}`;
       }
 
       return {

diff --git a/src/routers/layouts/MainLayout/MainLayout.tsx b/src/routers/layouts/MainLayout/MainLayout.tsx
@@ -65,14 +65,6 @@ function MainLayout() {
           >
             <Icon.Books className="h-5 w-5 fill-current" />
           </Item>
-          <Item
-            text={'招式清單'}
-            color="bg-custom-green"
-            selected={hash === 'moves'}
-            onClick={() => updateNav('moves')}
-          >
-            <Icon.Book className="h-5 w-5 fill-current" />
-          </Item>
           <Item
             text={'招式清單'}
             color="bg-custom-blue"