decouple DeckZone

src/ui/BuildDeck/index.tsx

@@ -207,7 +207,23 @@ export const DeckEditor: React.FC<{
       </Space>
       <ScrollableArea className={styles["deck-zone"]}>
         {(["main", "extra", "side"] as const).map((type) => (
-          <DeckZone key={type} type={type} />
+          <DeckZone
+            key={type}
+            type={type}
+            cards={[...snapEditDeck[type]]}
+            canAdd={editDeckStore.canAdd}
+            onChange={(card, source, destination) => {
+              editDeckStore.add(destination, card);
+              if (source !== "search") {
+                editDeckStore.remove(source, card);
+              }
+            }}
+            onElementClick={(card) => {
+              selectedCard.id = card.id;
+              selectedCard.open = true;
+            }}
+            onElementRightClick={(card) => editDeckStore.remove(type, card)}
+          />
         ))}
       </ScrollableArea>
     </div>
@@ -397,9 +413,28 @@ const Search: React.FC = () => {
 /** 正在组卡的zone，包括main/extra/side */
 const DeckZone: React.FC<{
   type: Type;
-}> = ({ type }) => {
+  cards: CardMeta[];
+  canAdd: (
+    card: CardMeta,
+    type: Type,
+    source: Type | "search",
+  ) => { result: boolean; reason: string };
+  onChange: (
+    card: CardMeta,
+    source: Type | "search",
+    destination: Type,
+  ) => void;
+  onElementClick: (card: CardMeta) => void;
+  onElementRightClick: (card: CardMeta) => void;
+}> = ({
+  type,
+  cards,
+  canAdd,
+  onChange,
+  onElementClick,
+  onElementRightClick,
+}) => {
   const { message } = App.useApp();
-  const cards = useSnapshot(editDeckStore)[type];
   const [allowToDrop, setAllowToDrop] = useState(false);
   const [{ isOver }, dropRef] = useDrop({
     accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
@@ -407,21 +442,16 @@ const DeckZone: React.FC<{
     // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
     drop: ({ value, source }: { value: CardMeta; source: Type | "search" }) => {
       if (type === source) return;
-      const { result, reason } = editDeckStore.canAdd(value, type, source);
+      const { result, reason } = canAdd(value, type, source);
       if (result) {
-        editDeckStore.add(type, value);
-        if (source !== "search") {
-          editDeckStore.remove(source, value);
-        }
+        onChange(value, source, type);
       } else {
         message.error(reason);
       }
     },
     hover: ({ value, source }) => {
       setAllowToDrop(
-        type !== source
-          ? editDeckStore.canAdd(value, type, source).result
-          : true,
+        type !== source ? canAdd(value, type, source).result : true,
       );
     },
     collect: (monitor) => ({
@@ -443,10 +473,11 @@ const DeckZone: React.FC<{
             key={card.id + i + type}
             source={type}
             onClick={() => {
-              selectedCard.id = card.id;
-              selectedCard.open = true;
+              onElementClick(card);
+            }}
+            onRightClick={() => {
+              onElementRightClick(card);
             }}
-            onRightClick={() => editDeckStore.remove(type, card)}
           />
         ))}
         <div className={styles["editing-zone-name"]}>