Merge branch 'optimize/ui/checkcard' into 'main'

Optimize/ui/checkcard

See merge request mycard/Neos!161

src/reducers/duel/modal/checkCardModalSlice.ts

@@ -6,7 +6,7 @@ import {
 } from "@reduxjs/toolkit";
 import { RootState } from "../../../store";
 import { DuelState } from "../mod";
-import { findCardByLocation, judgeSelf } from "../util";
+import { cmpCardLocation, findCardByLocation, judgeSelf } from "../util";
 import { fetchCard, getCardStr } from "../../../api/cards";
 import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
 
@@ -65,17 +65,11 @@ export const fetchCheckCardMeta = createAsyncThunk(
   }) => {
     // FIXME: 这里如果传的`controler`如果是对手，对应的`code`会为零，这时候就无法更新对应的`Meta`信息了，后续需要修复。`fetchCheckCardMetaV2`和`fetchCheckCardMetaV3`同理
     const meta = await fetchCard(param.option.code, true);
-    const effectDesc = param.option.effectDescCode
-      ? getCardStr(meta, param.option.effectDescCode & 0xf)
-      : undefined;
     const response = {
-      controler: param.option.location.controler,
       tagName: param.tagName,
-      meta: {
-        code: meta.id,
-        name: meta.text.name,
-        desc: meta.text.desc,
-        effectDesc,
+      option: {
+        meta,
+        location: param.option.location.toObject(),
       },
     };
 
@@ -91,6 +85,7 @@ export const checkCardModalCase = (
     const code = action.meta.arg.option.code;
     const location = action.meta.arg.option.location;
     const controler = location.controler;
+    const effectDescCode = action.meta.arg.option.effectDescCode;
     const response = action.meta.arg.option.response;
 
     const combinedTagName = judgeSelf(controler, state)
@@ -100,24 +95,28 @@ export const checkCardModalCase = (
     const newID =
       code != 0 ? code : findCardByLocation(state, location)?.occupant?.id || 0;
 
-    if (newID) {
+    const newOption = {
+      meta: { id: newID, data: {}, text: {} },
+      location: location.toObject(),
+      effectDescCode,
+      response,
+    };
     for (const tag of state.modalState.checkCardModal.tags) {
       if (tag.tagName === combinedTagName) {
-          tag.options.push({ code: newID, response });
+        tag.options.push(newOption);
         return;
       }
     }
 
     state.modalState.checkCardModal.tags.push({
       tagName: combinedTagName,
-        options: [{ code: newID, response }],
+      options: [newOption],
     });
-    }
   });
   builder.addCase(fetchCheckCardMeta.fulfilled, (state, action) => {
-    const controler = action.payload.controler;
     const tagName = action.payload.tagName;
-    const meta = action.payload.meta;
+    const option = action.payload.option;
+    const controler = option.location.controler!;
 
     const combinedTagName = judgeSelf(controler, state)
       ? `我方的${tagName}`
@@ -125,11 +124,20 @@ export const checkCardModalCase = (
 
     for (const tag of state.modalState.checkCardModal.tags) {
       if (tag.tagName === combinedTagName) {
-        for (const option of tag.options) {
-          if (option.code == meta.code) {
-            option.name = meta.name;
-            option.desc = meta.desc;
-            option.effectDesc = meta.effectDesc;
+        for (const old of tag.options) {
+          if (
+            option.meta.id == old.meta.id &&
+            cmpCardLocation(option.location, old.location)
+          ) {
+            const cardID = old.meta.id;
+            old.meta = option.meta;
+            old.meta.id = cardID;
+
+            const effectDescCode = old.effectDescCode;
+            const effectDesc = effectDescCode
+              ? getCardStr(old.meta, effectDescCode & 0xf)
+              : undefined;
+            old.effectDesc = effectDesc;
           }
         }
       }

src/reducers/duel/modal/mod.ts

 import { CardMeta } from "../../../api/cards";
 import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+type CardLocation = ReturnType<typeof ygopro.CardLocation.prototype.toObject>;
 
 export interface ModalState {
   // 卡牌弹窗
@@ -28,9 +29,9 @@ export interface ModalState {
     tags: {
       tagName: string;
       options: {
-        code: number;
-        name?: string;
-        desc?: string;
+        meta: CardMeta;
+        location?: CardLocation;
+        effectDescCode?: number;
         effectDesc?: string;
         response: number;
       }[];

src/reducers/duel/util.ts

@@ -8,6 +8,10 @@ import { Draft } from "@reduxjs/toolkit";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { CardState } from "./generic";
 
+type Location =
+  | ygopro.CardLocation
+  | ReturnType<typeof ygopro.CardLocation.prototype.toObject>;
+
 /*
  * 通过`player`和`selfType`判断是应该处理自己还是对手
  * */
@@ -29,9 +33,7 @@ export function judgeSelf(player: number, state: Draft<DuelState>): boolean {
  * 通过`controler`,`zone`和`sequence`获取卡牌状态*/
 export function findCardByLocation(
   state: Draft<DuelState>,
-  location:
-    | ygopro.CardLocation
-    | ReturnType<typeof ygopro.CardLocation.prototype.toObject>
+  location: Location
 ): CardState | undefined {
   const controler = location.controler!;
   const zone = location.location;
@@ -73,3 +75,19 @@ export function findCardByLocation(
     }
   }
 }
+
+export function cmpCardLocation(
+  left: Location,
+  right?: Location,
+  strict?: boolean
+): boolean {
+  if (strict) {
+    return JSON.stringify(left) === JSON.stringify(right);
+  } else {
+    return (
+      left.controler === right?.controler &&
+      left.location === right?.location &&
+      left.sequence === right?.sequence
+    );
+  }
+}

src/ui/Duel/checkCardModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
@@ -14,11 +14,12 @@ import {
   setCheckCardModalIsOpen,
 } from "../../reducers/duel/mod";
 import { Button, Row, Col, Popover } from "antd";
-import { CheckCard } from "@ant-design/pro-components";
+import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
 import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "../../api/ocgcore/ocgHelper";
+import { ThunderboltOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../neos.config.json";
 import DragModal from "./dragModal";
 
@@ -32,18 +33,7 @@ const CheckCardModal = () => {
   const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
   const [response, setResponse] = useState<number[]>([]);
   const defaultValue: number[] = [];
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   // TODO: 这里可以考虑更好地封装
   const sendResponseHandler = (
     handlerName: string | undefined,
@@ -65,11 +55,10 @@ const CheckCardModal = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择${min}到${max}张卡片`,
-        open: isOpen,
-        closable: false,
-        footer: (
+      title={`请选择${min}到${max}张卡片`}
+      open={isOpen}
+      closable={false}
+      footer={
         <>
           <Button
             disabled={response.length < min || response.length > max}
@@ -78,8 +67,6 @@ const CheckCardModal = () => {
               dispatch(setCheckCardModalIsOpen(false));
               dispatch(resetCheckCardModal());
             }}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
             onFocus={() => {}}
             onBlur={() => {}}
           >
@@ -94,8 +81,6 @@ const CheckCardModal = () => {
                 dispatch(setCheckCardModalIsOpen(false));
                 dispatch(resetCheckCardModal());
               }}
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
               onFocus={() => {}}
               onBlur={() => {}}
             >
@@ -105,11 +90,8 @@ const CheckCardModal = () => {
             <></>
           )}
         </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+      }
+      width={800}
     >
       <CheckCard.Group
         multiple
@@ -127,30 +109,24 @@ const CheckCardModal = () => {
               {tab.options.map((option, idx) => {
                 return (
                   <Col span={4} key={idx}>
-                    <Popover
-                      content={
-                        <div>
-                          <p>{option.name}</p>
-                          <p>{option.effectDesc}</p>
-                        </div>
-                      }
-                    >
-                      <CheckCard
-                        title={option.name}
-                        description={option.desc}
+                    <HoverCheckCard
+                      hoverContent={option.effectDesc}
+                      title={option.meta.text.name}
+                      description={option.meta.text.desc}
                       style={{ width: 120 }}
                       cover={
                         <img
-                            alt={option.code.toString()}
-                            src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
+                          alt={option.meta.id.toString()}
+                          src={
+                            option.meta.id
+                              ? `${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`
+                              : `${NeosConfig.assetsPath}/card_back.jpg`
+                          }
                           style={{ width: 100 }}
                         />
                       }
-                        onMouseEnter={onMouseOver}
-                        onMouseLeave={onMouseOut}
                       value={option.response}
                     />
-                    </Popover>
                   </Col>
                 );
               })}
@@ -162,4 +138,28 @@ const CheckCardModal = () => {
   );
 };
 
+const HoverCheckCard = (props: CheckCardProps & { hoverContent?: string }) => {
+  const [hover, setHover] = useState(false);
+
+  const onMouseEnter = () => setHover(true);
+  const onMouseLeave = () => setHover(false);
+
+  return (
+    <>
+      <CheckCard {...props} />
+      {props.hoverContent ? (
+        <Popover content={<p>{props.hoverContent}</p>} open={hover}>
+          <Button
+            icon={<ThunderboltOutlined />}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          ></Button>
+        </Popover>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
 export default CheckCardModal;

src/ui/Duel/checkCardModalV2.tsx

-import React, { useRef, useState } from "react";
+import React from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button, Card, Row, Col } from "antd";
@@ -32,18 +32,7 @@ const CheckCardModalV2 = () => {
   );
   const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions);
   const responseable = useAppSelector(selectCheckCardModalV2ResponseAble);
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   const onFinish = () => {
     sendSelectUnselectCardResponse({ cancel_or_finish: true });
     dispatch(setCheckCardModalV2IsOpen(false));
@@ -57,34 +46,20 @@ const CheckCardModalV2 = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择未选择的卡片，最少${min}张，最多${max}张`,
-        open: isOpen,
-        closable: false,
-        footer: (
+      title={`请选择未选择的卡片，最少${min}张，最多${max}张`}
+      open={isOpen}
+      closable={false}
+      footer={
         <>
-            <Button
-              disabled={!finishable || !responseable}
-              onClick={onFinish}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
+          <Button disabled={!finishable || !responseable} onClick={onFinish}>
             finish
           </Button>
-            <Button
-              disabled={!cancelable || !responseable}
-              onClick={onCancel}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
+          <Button disabled={!cancelable || !responseable} onClick={onCancel}>
             cancel
           </Button>
         </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+      }
+      width={800}
     >
       <CheckCard.Group
         bordered
@@ -114,8 +89,6 @@ const CheckCardModalV2 = () => {
                     />
                   }
                   value={option.response}
-                  onMouseEnter={onMouseOver}
-                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );

src/ui/Duel/checkCardModalV3.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button, Card, Row, Col } from "antd";
@@ -32,18 +32,7 @@ const CheckCardModalV3 = () => {
     .concat(selectedOptions)
     .map((option) => option.level2)
     .reduce((sum, current) => sum + current, 0);
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   const responseable =
     (overflow
       ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
@@ -61,26 +50,17 @@ const CheckCardModalV3 = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择卡片，最少${min}张，最多${max}张`,
-        open: isOpen,
-        closable: false,
-        footer: (
+      title={`请选择卡片，最少${min}张，最多${max}张`}
+      open={isOpen}
+      closable={false}
+      footer={
         <>
-            <Button
-              disabled={!responseable}
-              onClick={onFinish}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
+          <Button disabled={!responseable} onClick={onFinish}>
             finish
           </Button>
         </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+      }
+      width={800}
     >
       <CheckCard.Group
         bordered
@@ -107,8 +87,6 @@ const CheckCardModalV3 = () => {
                     />
                   }
                   value={option}
-                  onMouseEnter={onMouseOver}
-                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );

src/ui/Duel/checkCounterModal.tsx

 import { Button, Row, Col, Card, InputNumber } from "antd";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper";
 import { fetchStrings } from "../../api/strings";
 import { useAppSelector } from "../../hook";
@@ -19,7 +19,6 @@ const CheckCounterModal = () => {
   const [selected, setSelected] = useState(new Array(options.length));
   const sum = selected.reduce((sum, current) => sum + current, 0);
   const finishable = sum == min;
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   const onFinish = () => {
     sendSelectCounterResponse(selected);
@@ -28,18 +27,14 @@ const CheckCounterModal = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请移除${min}个${counterName}`,
-        open: isOpen,
-        closable: false,
-        footer: (
+      title={`请移除${min}个${counterName}`}
+      open={isOpen}
+      closable={false}
+      footer={
         <Button disabled={!finishable} onClick={onFinish}>
           finish
         </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      }
     >
       <Row>
         {options.map((option, idx) => {

src/ui/Duel/dragModal.tsx

 // 经过封装的可拖拽`Modal`
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import type { DraggableData, DraggableEvent } from "react-draggable";
 import Draggable from "react-draggable";
 import { Modal, ModalProps } from "antd";
 
-export interface DragModalProps {
-  modalProps: ModalProps;
-  dragRef: React.RefObject<HTMLDivElement>;
-  draggable: boolean;
-  children?: React.ReactNode;
-}
+export interface DragModalProps extends ModalProps {}
 
 const DragModal = (props: DragModalProps) => {
+  const dragRef = useRef<HTMLDivElement>(null);
   const [bounds, setBounds] = useState({
     left: 0,
     top: 0,
@@ -20,7 +16,7 @@ const DragModal = (props: DragModalProps) => {
   });
   const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
     const { clientWidth, clientHeight } = window.document.documentElement;
-    const targetRect = props.dragRef.current?.getBoundingClientRect();
+    const targetRect = dragRef.current?.getBoundingClientRect();
     if (!targetRect) {
       return;
     }
@@ -34,14 +30,10 @@ const DragModal = (props: DragModalProps) => {
 
   return (
     <Modal
-      {...props.modalProps}
+      {...props}
       modalRender={(modal) => (
-        <Draggable
-          disabled={!props.draggable}
-          bounds={bounds}
-          onStart={onStart}
-        >
-          <div ref={props.dragRef}>{modal}</div>
+        <Draggable bounds={bounds} onStart={onStart}>
+          <div ref={dragRef}>{modal}</div>
         </Draggable>
       )}
     >

src/ui/Duel/optionModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -19,15 +19,13 @@ const OptionModal = () => {
   const isOpen = useAppSelector(selectOptionModalIsOpen);
   const options = useAppSelector(selectOptionModalOptions);
   const [selected, setSelected] = useState<number | undefined>(undefined);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: "请选择需要发动的效果",
-        open: isOpen,
-        closable: false,
-        footer: (
+      title="请选择需要发动的效果"
+      open={isOpen}
+      closable={false}
+      footer={
         <Button
           disabled={selected === undefined}
           onClick={() => {
@@ -40,10 +38,7 @@ const OptionModal = () => {
         >
           submit
         </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      }
     >
       <CheckCard.Group
         bordered

src/ui/Duel/positionModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -22,15 +22,13 @@ const PositionModal = () => {
   const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
     undefined
   );
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: "请选择表示形式",
-        open: isOpen,
-        closable: false,
-        footer: (
+      title="请选择表示形式"
+      open={isOpen}
+      closable={false}
+      footer={
         <Button
           disabled={selected === undefined}
           onClick={() => {
@@ -43,10 +41,7 @@ const PositionModal = () => {
         >
           submit
         </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      }
     >
       <CheckCard.Group
         bordered

src/ui/Duel/sortCardModal.tsx

-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   DndContext,
   closestCenter,
@@ -21,8 +21,7 @@ import { selectSortCardModal } from "../../reducers/duel/modal/sortCardModalSlic
 import { sendSortCardResponse } from "../../api/ocgcore/ocgHelper";
 import { store } from "../../store";
 import { resetSortCardModal } from "../../reducers/duel/mod";
-import DragModal from "./dragModal";
-import { Button, Card } from "antd";
+import { Modal, Button, Card } from "antd";
 import { CardMeta } from "../../api/cards";
 import NeosConfig from "../../../neos.config.json";
 
@@ -38,7 +37,6 @@ const SortCardModal = () => {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   const onFinish = () => {
     sendSortCardResponse(items.map((item) => item.response));
@@ -62,15 +60,11 @@ const SortCardModal = () => {
   }, [options]);
 
   return (
-    <DragModal
-      modalProps={{
-        title: "请为下列卡牌排序",
-        open: isOpen,
-        closable: false,
-        footer: <Button onClick={onFinish}>finish</Button>,
-      }}
-      dragRef={draggleRef}
-      draggable={false}
+    <Modal
+      title="请为下列卡牌排序"
+      open={isOpen}
+      closable={false}
+      footer={<Button onClick={onFinish}>finish</Button>}
     >
       <DndContext
         sensors={sensors}
@@ -90,7 +84,7 @@ const SortCardModal = () => {
           ))}
         </SortableContext>
       </DndContext>
-    </DragModal>
+    </Modal>
   );
 };
 

src/ui/Duel/status.tsx

@@ -8,7 +8,6 @@ import {
   selectMeInitInfo,
   selectOpInitInfo,
 } from "../../reducers/duel/initInfoSlice";
-import { selectCurrentPlayerIsMe } from "../../reducers/duel/turnSlice";
 import { selectWaiting } from "../../reducers/duel/mod";
 
 const Config = NeosConfig.ui.status;

src/ui/Duel/yesNoModal.tsx

-import React, { useRef } from "react";
+import React from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -14,16 +14,13 @@ const YesNoModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectYesNoModalIsOpen);
   const msg = useAppSelector(selectYesNOModalMsg);
-  // Draggable 相关
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: msg,
-        open: isOpen,
-        closable: false,
-        footer: (
+      title={msg}
+      open={isOpen}
+      closable={false}
+      footer={
         <>
           <Button
             onClick={() => {
@@ -42,10 +39,7 @@ const YesNoModal = () => {
             No
           </Button>
         </>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      }
     />
   );
 };