Merge branch 'feat/ui/overlay' into 'main'

Feat/ui/overlay

See merge request !129

src/common.ts

@@ -167,3 +167,32 @@ export const Race2StringCodeMap: Map<number, number> = new Map([
   [RACE_WYRM, 1043],
   [RACE_CYBERSE, 1044],
 ]);
+
+// const REASON_DESTROY = 0x1; //
+// const REASON_RELEASE = 0x2; //
+// const REASON_TEMPORARY = 0x4; //
+export const REASON_MATERIAL = 0x8; //
+// const REASON_SUMMON = 0x10; //
+// const REASON_BATTLE = 0x20; //
+// const REASON_EFFECT = 0x40; //
+// const REASON_COST = 0x80; //
+// const REASON_ADJUST = 0x100; //
+// const REASON_LOST_TARGET = 0x200; //
+// const REASON_RULE = 0x400; //
+// const REASON_SPSUMMON = 0x800; //
+// const REASON_DISSUMMON = 0x1000; //
+// const REASON_FLIP = 0x2000; //
+// const REASON_DISCARD = 0x4000; //
+// const REASON_RDAMAGE = 0x8000; //
+// const REASON_RRECOVER = 0x10000; //
+// const REASON_RETURN = 0x20000; //
+// const REASON_FUSION = 0x40000; //
+// const REASON_SYNCHRO = 0x80000; //
+// const REASON_RITUAL = 0x100000; //
+// const REASON_XYZ = 0x200000; //
+// const REASON_REPLACE = 0x1000000; //
+// const REASON_DRAW = 0x2000000; //
+// const REASON_REDIRECT = 0x4000000; //
+// const REASON_REVEAL = 0x8000000; //
+// const REASON_LINK = 0x10000000; //
+// const REASON_LOST_OVERLAY = 0x20000000; //

src/reducers/duel/modal/cardListModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
 import { RootState } from "../../../store";
+import { CardMeta } from "../../../api/cards";
 
 // 更新卡牌列表弹窗打开状态
 export const setCardListModalIsOpenImpl: CaseReducer<
@@ -15,9 +16,7 @@ export const setCardListModalInfoImpl: CaseReducer<
   DuelState,
   PayloadAction<
     {
-      name?: string;
-      desc?: string;
-      imgUrl?: string;
+      meta?: CardMeta;
       interactivies: { desc: string; response: number }[];
     }[]
   >

src/reducers/duel/modal/mod.ts

@@ -12,9 +12,7 @@ export interface ModalState {
   cardListModal: {
     isOpen: boolean;
     list: {
-      name?: string;
-      desc?: string;
-      imgUrl?: string;
+      meta?: CardMeta;
       interactivies: { desc: string; response: number }[];
     }[];
   };

src/service/duel/move.ts

@@ -19,6 +19,7 @@ import { fetchCemeteryMeta } from "../../reducers/duel/cemeretySlice";
 import { insertHandMeta } from "../../reducers/duel/handsSlice";
 import { fetchExclusionMeta } from "../../reducers/duel/exclusionSlice";
 import { fetchExtraDeckMeta } from "../../reducers/duel/extraDeckSlice";
+import { REASON_MATERIAL } from "../../common";
 
 const OVERLAY_STACK: { code: number; sequence: number }[] = [];
 
@@ -26,7 +27,7 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
   const code = move.code;
   const from = move.from;
   const to = move.to;
-  // TODO: reason
+  const reason = move.reason;
 
   switch (from.location) {
     case ygopro.CardZone.HAND: {
@@ -165,8 +166,8 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
       break;
     }
     case ygopro.CardZone.OVERLAY: {
-      if (to.sequence > 6) {
-        // 超量素材在进行超量召唤时，若玩家未选择超量怪兽的位置，会“沉到决斗盘下面”，这时候素材们的sequence会暂时大于6
+      if (reason == REASON_MATERIAL) {
+        // 超量素材在进行超量召唤时，若玩家未选择超量怪兽的位置，会“沉到决斗盘下面”，`reason`字段值是`REASON_MATERIAL`
         // 这时候将它们放到一个栈中，待超量怪兽的Move消息到来时从栈中获取超量素材补充到状态中
         OVERLAY_STACK.push({ code, sequence: to.overlay_sequence });
       } else {

src/ui/Duel/cardListModal.tsx

@@ -9,8 +9,9 @@ import {
   clearAllIdleInteractivities,
   setCardListModalIsOpen,
 } from "../../reducers/duel/mod";
-import { Modal, List, Button } from "antd";
+import { Drawer, List, Button } from "antd";
 import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import NeosConfig from "../../../neos.config.json";
 
 const CARD_WIDTH = 100;
 
@@ -24,7 +25,7 @@ const CardListModal = () => {
   };
 
   return (
-    <Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
+    <Drawer open={isOpen} onClose={handleOkOrCancel}>
       <List
         itemLayout="horizontal"
         dataSource={list}
@@ -45,17 +46,20 @@ const CardListModal = () => {
             ))}
             extra={
               <img
-                alt={item.name}
-                src={item.imgUrl}
+                alt={item.meta?.text.name}
+                src={`${NeosConfig.cardImgUrl}/${item.meta?.id}.jpg`}
                 style={{ width: CARD_WIDTH }}
               />
             }
           >
-            <List.Item.Meta title={item.name} description={item.desc} />
+            <List.Item.Meta
+              title={item.meta?.text.name}
+              description={item.meta?.text.desc}
+            />
           </List.Item>
         )}
       ></List>
-    </Modal>
+    </Drawer>
   );
 };
 

src/ui/Duel/fixedSlot.tsx

@@ -6,6 +6,8 @@ import { useClick } from "./hook";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import {
+  setCardListModalInfo,
+  setCardListModalIsOpen,
   setCardModalInteractivies,
   setCardModalIsOpen,
   setCardModalMeta,
@@ -54,6 +56,7 @@ const FixedSlot = (props: {
         dispatch(props.clearPlaceInteractivitiesAction(0));
         dispatch(props.clearPlaceInteractivitiesAction(1));
       } else if (props.state.occupant) {
+        // 中央弹窗展示选中卡牌信息
         dispatch(setCardModalMeta(props.state.occupant));
         dispatch(
           setCardModalInteractivies(
@@ -66,6 +69,24 @@ const FixedSlot = (props: {
           )
         );
         dispatch(setCardModalIsOpen(true));
+
+        // 侧边栏展示超量素材信息
+        if (
+          props.state.overlay_materials &&
+          props.state.overlay_materials.length > 0
+        ) {
+          dispatch(
+            setCardListModalInfo(
+              props.state.overlay_materials?.map((overlay) => {
+                return {
+                  meta: overlay,
+                  interactivies: [],
+                };
+              }) || []
+            )
+          );
+          dispatch(setCardListModalIsOpen(true));
+        }
       }
     },
     planeRef,

src/ui/Duel/main.tsx

@@ -73,14 +73,14 @@ const NeosDuel = () => {
 };
 
 const NeosSider = () => (
-  <div>
+  <>
     <Row>
       <DuelTimeLine />
     </Row>
     <Row>
       <SendBox />
     </Row>
-  </div>
+  </>
 );
 
 const NeosCanvas = () => (

src/ui/Duel/singleSlot.tsx

@@ -38,9 +38,7 @@ const SingleSlot = (props: {
               )
               .map((item) => {
                 return {
-                  name: item.occupant?.text.name,
-                  desc: item.occupant?.text.desc,
-                  imgUrl: `${NeosConfig.cardImgUrl}/${item.occupant?.id}.jpg`,
+                  meta: item.occupant,
                   interactivies: item.idleInteractivities.map((interactivy) => {
                     return {
                       desc: interactTypeToString(interactivy.interactType),