Feat/card disabled

src/common.ts

@@ -453,3 +453,36 @@ function ifSetCard(setCodeToAnalyse: number, setCodeFromCard: number): boolean {
 
   return res;
 }
+
+export const STATUS_DISABLED = 0x0001;
+// const STATUS_TO_ENABLE = 0x0002
+// const STATUS_TO_DISABLE = 0x0004
+// const STATUS_PROC_COMPLETE = 0x0008
+// const STATUS_SET_TURN = 0x0010
+// const STATUS_NO_LEVEL = 0x0020
+// const STATUS_BATTLE_RESULT = 0x0040
+// const STATUS_SPSUMMON_STEP = 0x0080
+// const STATUS_FORM_CHANGED = 0x0100
+// const STATUS_SUMMONING = 0x0200
+// const STATUS_EFFECT_ENABLED = 0x0400
+// const STATUS_SUMMON_TURN = 0x0800
+// const STATUS_DESTROY_CONFIRMED = 0x1000
+// const STATUS_LEAVE_CONFIRMED = 0x2000
+// const STATUS_BATTLE_DESTROYED = 0x4000
+// const STATUS_COPYING_EFFECT = 0x8000
+// const STATUS_CHAINING = 0x10000
+// const STATUS_SUMMON_DISABLED = 0x20000
+// const STATUS_ACTIVATE_DISABLED = 0x40000
+// const STATUS_EFFECT_REPLACED = 0x80000
+// const STATUS_FLIP_SUMMONING = 0x100000
+// const STATUS_ATTACK_CANCELED = 0x200000
+// const STATUS_INITIALIZING = 0x400000
+// const STATUS_TO_HAND_WITHOUT_CONFIRM = 0x800000
+// const STATUS_JUST_POS = 0x1000000
+// const STATUS_CONTINUOUS_POS = 0x2000000
+export const STATUS_FORBIDDEN = 0x4000000;
+// const STATUS_ACT_FROM_HAND = 0x8000000
+// const STATUS_OPPO_BATTLE = 0x10000000
+// const STATUS_FLIP_SUMMON_TURN = 0x20000000
+// const STATUS_SPSUMMON_TURN = 0x40000000
+// const STATUS_FLIP_SUMMON_DISABLED = 0x80000000

src/service/duel/reloadField.ts

@@ -41,6 +41,7 @@ export default (container: Container, field: MsgReloadField) => {
                 selectable: false,
                 selected: false,
               },
+              status: 0,
             }),
         ),
       )

src/service/duel/start.ts

@@ -77,6 +77,7 @@ export default async (
             selectable: false,
             selected: false,
           },
+          status: 0,
         }),
       ),
     ),

src/service/duel/updateData.ts

@@ -53,6 +53,9 @@ export default async (container: Container, updateData: MsgUpdateData) => {
           if (action?.defense >= 0) {
             meta.data.def = action.defense;
           }
+          if (action?.status >= 0) {
+            target.status = action.status;
+          }
           // TODO: counters
         } else {
           console.warn(

src/service/utils/fetchCheckCardMeta.ts

 import type { ygopro } from "@/api";
 import { fetchCard, getCardStr } from "@/api/cards";
 import { Context } from "@/container";
+import { isCardDisabled } from "@/stores";
 import type { Option } from "@/ui/Duel/Message";
 
 const helper = async (
@@ -52,6 +53,7 @@ const helper = async (
     effectDesc,
     response,
     targeted: target?.targeted,
+    disabled: target ? isCardDisabled(target) : false,
   };
 
   if (selected) {

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; // 一张卡的唯一标识
@@ -22,6 +25,7 @@ export interface CardType {
     selected: boolean; // 是否已经被选择
     response?: number; // 被选择时发送给服务器的值
   };
+  status: number; // Current status, STATUS_DISABLED, etc.
 }
 
 export class CardStore implements NeosStore {
@@ -93,4 +97,9 @@ export class CardStore implements NeosStore {
   }
 }
 
+// TODO: provided in class
+export function isCardDisabled(card: CardType): boolean {
+  return (card.status & (STATUS_DISABLED | STATUS_FORBIDDEN)) > 0;
+}
+
 export const cardStore = proxy(new CardStore());

src/ui/Duel/Message/PositionModal/index.tsx

@@ -108,8 +108,8 @@ export const PositionModal = () => {
       footer={<></>}
     >
       <div className={styles.container}>
-        {positions.map((position) => (
-          <Button onClick={() => onSummit(position)}>
+        {positions.map((position, idx) => (
+          <Button key={idx} onClick={() => onSummit(position)}>
             {cardPosition(position)}
           </Button>
         ))}

src/ui/Duel/Message/SelectCardsModal/index.tsx

@@ -197,6 +197,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                               <YgoCard
                                 code={card.meta.id}
                                 targeted={card.targeted}
+                                disabled={card.disabled}
                                 className={styles.card}
                               />
                             }
@@ -286,6 +287,7 @@ export interface Option {
   level2?: number;
   response?: number;
   targeted?: boolean;
+  disabled?: boolean;
   // 便于直接返回这个信息
   //
   // 尽量不要用这个字段

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,11 +28,13 @@ export const YgoCard: React.FC<Props> = (props) => {
     // cardName,
     isBack = false,
     targeted = false,
+    disabled = false,
     width,
     style,
     onClick,
     onLoad,
   } = props;
+
   return useMemo(
     () => (
       <div
@@ -56,8 +59,15 @@ export const YgoCard: React.FC<Props> = (props) => {
         ) : (
           <></>
         )}
+        {disabled ? (
+          <div className={styles.disabled}>
+            <img src={`${assetsPath}/disabled.png`} />
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     ),
-    [code],
+    [code, targeted, disabled],
   );
 };