integrate side

src/service/duel/start.ts

@@ -6,7 +6,14 @@ import PlayerType = ygopro.StocGameMessage.MsgStart.PlayerType;
 import { fetchCard, ygopro } from "@/api";
 import { useConfig } from "@/config";
 import { sleep } from "@/infra";
-import { cardStore, CardType, matStore, RoomStage, roomStore } from "@/stores";
+import {
+  cardStore,
+  CardType,
+  matStore,
+  RoomStage,
+  roomStore,
+  sideStore,
+} from "@/stores";
 import { replayStart } from "@/ui/Match/ReplayModal";
 const TOKEN_SIZE = 13; // 每人场上最多就只可能有13个token
 
@@ -23,6 +30,11 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
   // 这行在该函数中的位置不能随便放，否则可能会block住
   roomStore.stage = RoomStage.DUEL_START;
 
+  // 关闭side
+  sideStore.siding = false;
+  sideStore.waiting = false;
+  sideStore.ready = false;
+
   matStore.initInfo.set(0, {
     life: start.life1,
     deckSize: start.deckSize1,

src/service/room/duelStart.ts

 import { ygopro } from "@/api";
-import { RoomStage, roomStore } from "@/stores";
+import { RoomStage, roomStore, sideStore } from "@/stores";
 
 export default function handleDuelStart(_pb: ygopro.YgoStocMsg) {
   roomStore.stage = RoomStage.MORA;
+  if (sideStore.siding) {
+    // 副卡组更换完毕
+    sideStore.ready = true;
+  }
 }

src/ui/Duel/Main.tsx

 import React from "react";
 
+import { SideModal } from "../Side";
 import {
   Alert,
   AnnounceModal,
@@ -37,6 +38,7 @@ export const Component: React.FC = () => {
       <AnnounceModal />
       <SimpleSelectCardsModal />
       <EndModal />
+      <SideModal />
     </>
   );
 };

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

 import React, { CSSProperties } from "react";
-import { useNavigate } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region } from "@/api";
@@ -25,11 +24,10 @@ export const EndModal: React.FC = () => {
   const { isOpen, isWin, reason } = useSnapshot(localStore);
   const { isReplay } = useSnapshot(matStore);
 
-  const navigate = useNavigate();
   const onReturn = () => {
     resetUniverse();
     rs();
-    navigate("/match");
+    // TODO: 这里暂时不自动跳转，决斗结束后让玩家自己手动选择回到主页
   };
 
   return (

src/ui/NeosRouter.tsx

@@ -28,10 +28,6 @@ const router = createBrowserRouter([
         path: "/duel",
         lazy: () => import("./Duel/Main"),
       },
-      {
-        path: "/side",
-        lazy: () => import("./Side"),
-      },
     ],
   },
 ]);

src/ui/Side/index.tsx

@@ -2,23 +2,40 @@ import { App, Button, Modal } from "antd";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { useSnapshot } from "valtio";
 
-import { deckStore } from "@/stores";
+import { CardMeta, sendUpdateDeck } from "@/api";
+import { deckStore, sideStore } from "@/stores";
 
 import { DeckEditor } from "../BuildDeck";
 import { editDeckStore } from "../BuildDeck/store";
 import { iDeckToEditingDeck } from "../BuildDeck/utils";
 import { Background } from "../Shared";
 
-export const Component: React.FC = () => {
+export const SideModal: React.FC = () => {
   const deck = deckStore.decks[0];
   const { message } = App.useApp();
+  const { deckName, main, extra, side } = editDeckStore;
+  const { siding } = useSnapshot(sideStore);
+
+  const cardMeta2Id = (meta: CardMeta) => meta.id;
+  const handleSummit = () => {
+    const newDeck = {
+      deckName: deckName,
+      main: main.map(cardMeta2Id),
+      extra: extra.map(cardMeta2Id),
+      side: side.map(cardMeta2Id),
+    };
+    sendUpdateDeck(newDeck);
+    editDeckStore.edited = false;
+  };
+
   return (
     <Modal
       title="请选择更换副卡组"
-      open={true}
+      open={siding}
       width={700}
-      footer={<Button onClick={() => {}}>副卡组更换完毕</Button>}
+      footer={<Button onClick={handleSummit}>副卡组更换完毕</Button>}
     >
       <DndProvider backend={HTML5Backend}>
         <Background />