fix: small

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

@@ -313,6 +313,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
         >
           <YgoCard
             className={styles.cover}
+            cardName={snap.meta.text.name}
             code={snap.code === 0 ? snap.meta.id : snap.code}
           />
           <YgoCard className={styles.back} isBack />

src/ui/Shared/YgoCard/index.module.scss

 .ygo-card {
+  color: white;
   aspect-ratio: var(--card-ratio);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 5px;
+  line-height: 1.75em;
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  background-color: #313746;
+  background-image: var(--src);
+  background-size: contain;
+  text-align: center;
 }

src/ui/Shared/YgoCard/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   className?: string;
   isBack?: boolean;
   code?: number;
+  cardName?: string;
   style?: CSSProperties;
   width?: number;
   onClick?: () => void;
@@ -19,6 +20,7 @@ export const YgoCard: React.FC<Props> = (props) => {
   const {
     className,
     code = 0,
+    cardName,
     isBack = false,
     width,
     style,
@@ -27,14 +29,22 @@ export const YgoCard: React.FC<Props> = (props) => {
   } = props;
   return useMemo(
     () => (
-      <img
+      <div
         className={classNames(styles["ygo-card"], className)}
-        src={getCardImgUrl(code, isBack)}
-        style={{ width, ...style }}
+        style={
+          {
+            width,
+            "--src": `url(${getCardImgUrl(code, isBack)})`,
+            ...style,
+          } as any
+        }
         onClick={onClick}
         // 加载完成
         onLoad={onLoad}
-      />
+      >
+        {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
+        {/* {cardName} */}
+      </div>
     ),
     [code],
   );