display disabled for YgoCard

src/stores/cardStore.ts

 import { proxy } from "valtio";
 
 import { CardMeta, ygopro } from "@/api";
+import { STATUS_DISABLED, STATUS_FORBIDDEN } from "@/common";
 
 import type { Interactivity } from "./matStore/types";
 import { type NeosStore } from "./shared";
 
 /**
- * 场上某位置的状态
+ * Status of card on field
+ *
+ * TODO: use class
  */
 export interface CardType {
   uuid: string; // 一张卡的唯一标识
@@ -94,4 +97,9 @@ export class CardStore implements NeosStore {
   }
 }
 
+// TODO: provided in class
+export function isCardDisabled(card: CardType): boolean {
+  return card.status === STATUS_DISABLED || card.status === STATUS_FORBIDDEN;
+}
+
 export const cardStore = proxy(new CardStore());

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

@@ -14,7 +14,13 @@ import {
 import { Container } from "@/container";
 import { getUIContainer } from "@/container/compat";
 import { eventbus, Task } from "@/infra";
-import { cardStore, CardType, Interactivity, InteractType } from "@/stores";
+import {
+  cardStore,
+  CardType,
+  Interactivity,
+  InteractType,
+  isCardDisabled,
+} from "@/stores";
 import { showCardModal as displayCardModal } from "@/ui/Duel/Message/CardModal";
 import { YgoCard } from "@/ui/Shared";
 
@@ -344,6 +350,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
           <YgoCard
             className={styles.cover}
             code={snap.code === 0 ? snap.meta.id : snap.code}
+            disabled={isCardDisabled(snap as CardType)}
           />
           <YgoCard className={styles.back} isBack />
         </div>

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

@@ -22,3 +22,12 @@
   z-index: 2;
   pointer-events: none;
 }
+
+.disabled {
+  position: relative;
+  display: flex;
+  width: 50%;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}

src/ui/Shared/YgoCard/index.tsx

@@ -13,6 +13,7 @@ interface Props {
   isBack?: boolean;
   code?: number;
   targeted?: boolean;
+  disabled?: boolean;
   // cardName?: string;
   style?: CSSProperties;
   width?: number | string;
@@ -27,6 +28,7 @@ export const YgoCard: React.FC<Props> = (props) => {
     // cardName,
     isBack = false,
     targeted = false,
+    disabled = false,
     width,
     style,
     onClick,
@@ -53,6 +55,10 @@ export const YgoCard: React.FC<Props> = (props) => {
           <div className={styles.targeted}>
             <img src={`${assetsPath}/targeted.svg`} />
           </div>
+        ) : disabled ? (
+          <div className={styles.disabled}>
+            <img src={`${assetsPath}/disabled.png`} />
+          </div>
         ) : (
           <></>
         )}