add targeted icon in YgoCard

neos-assets/targeted.svg

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <path opacity="0.5" d="M17 9.00195C19.175 9.01406 20.3529 9.11051 21.1213 9.8789C22 10.7576 22 12.1718 22 15.0002V16.0002C22 18.8286 22 20.2429 21.1213 21.1215C20.2426 22.0002 18.8284 22.0002 16 22.0002H8C5.17157 22.0002 3.75736 22.0002 2.87868 21.1215C2 20.2429 2 18.8286 2 16.0002L2 15.0002C2 12.1718 2 10.7576 2.87868 9.87889C3.64706 9.11051 4.82497 9.01406 7 9.00195" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round"/> <path d="M12 2L12 15M12 15L9 11.5M12 15L15 11.5" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
+</svg>
\ No newline at end of file

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

@@ -13,3 +13,12 @@
   background-size: contain;
   text-align: center;
 }
+
+.targeted {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}

src/ui/Shared/YgoCard/index.tsx

@@ -2,9 +2,12 @@ import classNames from "classnames";
 import { CSSProperties, useMemo } from "react";
 
 import { getCardImgUrl } from "@/api";
+import { useConfig } from "@/config";
 
 import styles from "./index.module.scss";
 
+const { assetsPath } = useConfig();
+
 interface Props {
   className?: string;
   isBack?: boolean;
@@ -23,6 +26,7 @@ export const YgoCard: React.FC<Props> = (props) => {
     code = 0,
     // cardName,
     isBack = false,
+    targeted = false,
     width,
     style,
     onClick,
@@ -45,6 +49,13 @@ export const YgoCard: React.FC<Props> = (props) => {
       >
         {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
         {/* {cardName} */}
+        {targeted ? (
+          <div className={styles.targeted}>
+            <img src={`${assetsPath}/targeted.svg`} />
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     ),
     [code],