refactor: 95%

src/ui/Duel/PlayMat/Card/index.module.scss

@@ -30,7 +30,7 @@
       z-index: 1;
       transform: translateZ(0.5px);
     }
-    &.focus .cover {
+    &.focusing .cover {
       animation: focus 0.6s ease-in-out;
     }
     .back {

src/ui/Duel/PlayMat/Card/index.tsx

@@ -307,7 +307,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
       >
         <div
           className={classnames(styles["img-wrap"], {
-            [styles.focus]: classFocus,
+            [styles.focusing]: classFocus,
           })}
         >
           <YgoCard

src/ui/Duel/PlayMat/Mat/index.module.scss

 section.mat {
   position: relative;
+  width: "100%";
   .camera {
     height: 100%;
     display: flex;

src/ui/Duel/PlayMat/Mat/index.tsx

@@ -9,32 +9,27 @@ import { Card } from "../Card";
 
 // 后面再改名
 export const Mat: React.FC = () => {
-  const snap = useSnapshot(cardStore.inner);
   return (
-    <section
-      className="mat"
-      style={{
-        width: "100%",
-      }}
-    >
-      <Plane>
-        <Bg />
-        <CardContainer>
-          {snap.map((_cardSnap, i) => (
-            <Card key={i} idx={i} />
-          ))}
-        </CardContainer>
-      </Plane>
+    <section className={styles.mat}>
+      <div className={styles.camera}>
+        <div className={styles.plane}>
+          <Bg />
+          <div className={styles.container}>
+            <Cards />
+          </div>
+        </div>
+      </div>
     </section>
   );
 };
 
-const Plane: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className={styles.camera}>
-    <div className={styles.plane}>{children}</div>
-  </div>
-);
-
-const CardContainer: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className={styles.container}>{children}</div>
-);
+const Cards: React.FC = () => {
+  const snap = useSnapshot(cardStore.inner);
+  return (
+    <>
+      {snap.map((_cardSnap, i) => (
+        <Card key={i} idx={i} />
+      ))}
+    </>
+  );
+};