feat: 🎸 upadate move

README.md

@@ -19,8 +19,9 @@
 
 - bug:
 
-  1. [ ] PokemonBadge
+  1. [x] PokemonBadge
   2. [x] 赫月熊遺傳招式
+  3. [x] 單一招式的打擊面
 
 ### Guide
 

src/newComponents/game/MoveDetail.tsx

@@ -1,4 +1,4 @@
-import { AttackRange, PokemonBadge } from '@/newComponents/game';
+import { AttackRange, MoveEffective, PokemonBadge } from '@/newComponents/game';
 import { FullMove, LevelMap } from '@/types/Pokemon';
 
 type Prop = {
@@ -101,9 +101,11 @@ export function MoveDetail({
       <p>{move.description}</p>
       {move.category !== '變化' && (
         <>
-          {/* <hr className="my-3 h-px border-0 bg-gray-200" /> */}
-          <h6 className="py-2 text-lg font-bold">招式打點</h6>
-          <AttackRange types={[move.type]} />
+          <div className="flex gap-4">
+            <MoveEffective title={'效果絕佳'} type={move.type} targetRate={2} />
+            <MoveEffective title={'效果不好'} type={move.type} targetRate={0.5} />
+            <MoveEffective title={'沒有效果'} type={move.type} targetRate={0} />
+          </div>
         </>
       )}
       <LevelingUps move={move} onlyEvolve={onlyEvolve} />

src/routers/layouts/MainLayout/MainLayout.tsx

@@ -12,6 +12,12 @@ function MainLayout() {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const hash = location.pathname.split('/')[1];
+
+  const updateNav = (to: string) => {
+    navigate(to);
+  };
+
   useEffect(() => {
     if (!ref.current) return;
 
@@ -38,15 +44,6 @@ function MainLayout() {
     }
   }, [location, navigate]);
 
-  const [hash, setHash] = useState(
-    window.location.hash.replace('#/', '').split('?')[0].split('/')[0]
-  );
-
-  const updateNav = (to: string) => {
-    setHash(to);
-    navigate(to);
-  };
-
   return (
     <div className="flex h-screen max-h-screen flex-col md:max-h-full md:flex-row">
       <aside className="flex w-screen flex-col space-y-2 md:h-screen md:w-64 md:p-4">
@@ -60,7 +57,7 @@ function MainLayout() {
           <Item
             text={'圖鑑清單'}
             color="bg-custom-red"
-            selected={hash === 'pokedex' || hash === ''}
+            selected={['pokedex', ''].includes(hash)}
             onClick={() => updateNav('')}
           >
             <Icon.Books className="h-5 w-5 fill-current" />