Merge branch 'fix/crash' into 'main'

修复线上Crash

See merge request !345

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

@@ -54,7 +54,6 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
         focusOpacity: 1,
         subZ: 0,
         opacity: 1,
-        config: { mass: 1, tension: 800, friction: 30 },
       }) satisfies SpringApiProps,
   );
 

src/ui/Duel/PlayMat/Card/springs/attack.ts

@@ -52,17 +52,16 @@ export const attack: AttackFunc = async (props) => {
     z: 200,
   });
   // 后撤半个卡位，并调整倾斜角
-  // await asyncStart(api)({
-  //   y:
-  //     current.y +
-  //     (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
-  //   rz,
-  // });
+  await asyncStart(api)({
+    y:
+      current.y +
+      (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
+    rz,
+  });
   // 加速前冲
   await asyncStart(api)({
     x,
     y,
-    rz,
     config: {
       easing: easings.easeInOutSine,
     },
@@ -73,5 +72,8 @@ export const attack: AttackFunc = async (props) => {
     y: current.y,
     z: current.z,
     rz: current.rz,
+    config: {
+      easing: easings.easeInOutQuad,
+    },
   });
 };

src/ui/Duel/PlayMat/Card/springs/moveToGround.ts

+import { easings } from "@react-spring/web";
+
 import { ygopro } from "@/api";
 import { isMe } from "@/stores";
 import { matConfig } from "@/ui/Shared";
@@ -96,17 +98,32 @@ export const moveToGround: MoveFunc = async (props) => {
       rz,
       height: 0,
     });
-  }
-
+  } else {
     await asyncStart(api)({
-    height,
       x,
       y,
-    z: 0,
+      height,
+      z: is_overlay ? 120 : 200,
       ry,
       rz,
+      config: {
+        tension: 250,
+        clamp: true,
+        easing: easings.easeOutSine,
+      },
+    });
+  }
+
+  await asyncStart(api)({
+    height,
+    z: 0,
     subZ: isToken ? 100 : 0,
     zIndex: is_overlay ? 1 : 3,
+    config: {
+      easing: easings.easeInQuad,
+      duration: 200,
+      clamp: true,
+    },
   });
   if (isToken) api.set({ subZ: 0 });
 };

src/ui/Duel/PlayMat/Card/springs/moveToOutside.ts

@@ -32,10 +32,6 @@ export const moveToOutside: MoveFunc = async (props) => {
     x = -x;
     y = -y;
   }
-  api.set({
-    z: 0,
-    subZ: 100,
-  });
   await asyncStart(api)({
     x,
     y,
@@ -45,6 +41,9 @@ export const moveToOutside: MoveFunc = async (props) => {
     ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0,
     subZ: 100,
     zIndex: sequence,
+    config: {
+      tension: 140,
+    },
   });
   api.set({ subZ: 0 });
 };

src/ui/Duel/PlayMat/Card/springs/types.ts

@@ -20,13 +20,6 @@ export interface SpringApiProps {
   // <<< focus
 
   subZ: number; // 0 -> 100，这是为了让卡片移动过程中，稍微上浮一些，避免一些奇怪的遮挡问题
-
-  config?: Partial<{
-    mass: number;
-    tension: number;
-    friction: number;
-    clamp: boolean;
-  }>;
 }
 
 export type SpringApi = SpringRef<SpringApiProps>;

src/ui/Shared/YgoCard/index.tsx

 import classNames from "classnames";
-import { CSSProperties, useEffect, useState } from "react";
+import { CSSProperties, useMemo } from "react";
 
 import { useConfig } from "@/config";
 import { isSuperReleaseCard } from "@/superPreRelease";
@@ -21,41 +21,33 @@ export const YgoCard: React.FC<Props> = (props) => {
   const {
     className,
     code = 0,
+    // cardName,
     isBack = false,
     width,
     style,
     onClick,
     onLoad,
   } = props;
-
-  const [src, setSrc] = useState(
-    "https://img2.imgtp.com/2024/03/06/G6wTJRz9.png",
-  );
-
-  useEffect(() => {
-    const img = new Image();
-    img.onload = () => {
-      console.timeEnd(code.toString());
-      setSrc(img.src); // 图片加载完成后更新src状态
-    };
-    // 直接设置图片路径，无需url()包裹
-    img.src = getCardImgUrl(code, isBack);
-    console.time(code.toString());
-  }, [code, isBack]); // useEffect的依赖数组中加入isBack
-
-  return (
+  return useMemo(
+    () => (
       <div
         className={classNames(styles["ygo-card"], className)}
         style={
           {
             width,
-          "--src": `url(${src})`,
+            "--src": `url(${getCardImgUrl(code, isBack)})`,
             ...style,
           } as any
         }
         onClick={onClick}
+        // 加载完成
         onLoad={onLoad}
-    ></div>
+      >
+        {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
+        {/* {cardName} */}
+      </div>
+    ),
+    [code],
   );
 };