update

src/service/duel/start.ts

@@ -12,6 +12,7 @@ import {
   matStore,
   RoomStage,
   roomStore,
+  SideStage,
   sideStore,
 } from "@/stores";
 import { replayStart } from "@/ui/Match/ReplayModal";
@@ -30,10 +31,8 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
   // 这行在该函数中的位置不能随便放，否则可能会block住
   roomStore.stage = RoomStage.DUEL_START;
 
-  // 关闭side
-  sideStore.siding = false;
-  sideStore.waiting = false;
-  sideStore.ready = false;
+  // 更新Side状态
+  sideStore.stage = SideStage.DUEL_START;
 
   matStore.initInfo.set(0, {
     life: start.life1,

src/service/room/duelStart.ts

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

src/service/side/changeSide.ts

 import { ygopro } from "@/api";
-import { sideStore } from "@/stores";
+import { SideStage, sideStore } from "@/stores";
 export function handleChangeSide(_: ygopro.StocChangeSide) {
-  sideStore.siding = true;
+  sideStore.stage = SideStage.SIDE_CHANGING;
 }

src/service/side/waitingSide.ts

 import { ygopro } from "@/api";
-import { sideStore } from "@/stores";
+import { SideStage, sideStore } from "@/stores";
 export function handleWaitingSide(_: ygopro.StocWaitingSide) {
-  sideStore.waiting = true;
+  sideStore.stage = SideStage.WAITING;
 }

src/stores/index.ts

@@ -46,4 +46,12 @@ export const resetUniverse = () => {
   placeStore.reset();
   replayStore.reset();
   roomStore.reset();
+  sideStore.reset();
+};
+
+// 重置决斗相关的`Store`
+export const resetDuel = () => {
+  cardStore.reset();
+  matStore.reset();
+  placeStore.reset();
 };

src/stores/sideStore.ts

@@ -3,15 +3,26 @@ import { proxy } from "valtio";
 import { IDeck } from "./deckStore";
 import { type NeosStore } from "./shared";
 
+export enum SideStage {
+  NONE = 0, // 没有进入SIDE阶段
+  SIDE_CHANGING = 1, // 正在更换副卡组
+  SIDE_CHANGED = 2, // 副卡组更换完毕
+  HAND_SELECTING = 3, // 选择猜拳中
+  HAND_SELECTED = 4, // 猜拳选择完毕
+  TP_SELECTING = 5, // 正在选边
+  TP_SELECTED = 6, // 选边完成
+  DUEL_START = 7, // 决斗开始
+  WAITING = 8, // 观战者等待双方玩家
+}
+
+const emptyDeck: IDeck = { deckName: "", main: [], extra: [], side: [] };
+
 class SideStore implements NeosStore {
-  siding: boolean = false;
-  ready: boolean = false;
-  waiting: boolean = false; // 观战的时候等待双方更换副卡组
-  deck?: IDeck;
+  stage: SideStage = SideStage.WAITING;
+  deck: IDeck = emptyDeck;
   reset(): void {
-    this.siding = false;
-    this.ready = false;
-    this.deck = undefined;
+    this.stage = SideStage.NONE;
+    this.deck = emptyDeck;
   }
 }
 

src/ui/Duel/Main.tsx

-import React from "react";
+import React, { useEffect } from "react";
 
-import { SideModal } from "../Side";
+import { resetUniverse } from "@/stores";
+
+import { ChangeSideModal } from "../Side";
 import {
   Alert,
   AnnounceModal,
@@ -19,6 +21,13 @@ import {
 import { LifeBar, Mat, Menu, Underlying } from "./PlayMat";
 
 export const Component: React.FC = () => {
+  useEffect(() => {
+    return () => {
+      // Duel组件卸载的时候初始化一些store
+      resetUniverse();
+    };
+  }, []);
+
   return (
     <>
       <Underlying />
@@ -38,7 +47,7 @@ export const Component: React.FC = () => {
       <AnnounceModal />
       <SimpleSelectCardsModal />
       <EndModal />
-      <SideModal />
+      <ChangeSideModal />
     </>
   );
 };

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

@@ -2,7 +2,7 @@ import React, { CSSProperties } from "react";
 import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region } from "@/api";
-import { matStore, replayStore, resetUniverse } from "@/stores";
+import { matStore, replayStore, resetDuel } from "@/stores";
 
 import { NeosModal } from "../NeosModal";
 import styles from "./index.module.scss";
@@ -25,7 +25,7 @@ export const EndModal: React.FC = () => {
   const { isReplay } = useSnapshot(matStore);
 
   const onReturn = () => {
-    resetUniverse();
+    resetDuel();
     rs();
     // TODO: 这里暂时不自动跳转，决斗结束后让玩家自己手动选择回到主页
   };

src/ui/Side/ChangeSideModal/index.tsx

+import { App, Button, Modal } from "antd";
+import React, { useEffect } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useSnapshot } from "valtio";
+
+import { CardMeta, sendUpdateDeck } from "@/api";
+import { roomStore, SideStage, sideStore } from "@/stores";
+
+import { DeckEditor } from "../../BuildDeck";
+import { editDeckStore } from "../../BuildDeck/store";
+import { iDeckToEditingDeck } from "../../BuildDeck/utils";
+import { Background } from "../../Shared";
+
+export const ChangeSideModal: React.FC = () => {
+  const { message } = App.useApp();
+  const { deckName, main, extra, side } = editDeckStore;
+  const { stage } = useSnapshot(sideStore);
+  const { errorMsg } = useSnapshot(roomStore);
+
+  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;
+  };
+
+  useEffect(() => {
+    if (stage === SideStage.SIDE_CHANGED) {
+      message.info("副卡组更换成功，请耐心等待其他玩家更换卡组");
+    }
+  }, [stage]);
+  useEffect(() => {
+    if (errorMsg !== undefined && errorMsg !== "") {
+      message.error(errorMsg);
+      roomStore.errorMsg = undefined;
+    }
+  }, [errorMsg]);
+
+  return (
+    <Modal
+      title="请选择更换副卡组"
+      open={
+        stage === SideStage.SIDE_CHANGING || stage === SideStage.SIDE_CHANGED
+      }
+      width={700}
+      closable={false}
+      footer={
+        <Button
+          disabled={stage > SideStage.SIDE_CHANGING}
+          onClick={handleSummit}
+        >
+          副卡组更换完毕
+        </Button>
+      }
+    >
+      <DndProvider backend={HTML5Backend}>
+        <Background />
+        <DeckEditor
+          deck={sideStore.deck}
+          onClear={() => message.error("对局中清空卡组不怕找不回来吗?!")}
+          onSave={() => message.error("点击右下角按钮确认副卡组更换完毕")}
+          onReset={async () => {
+            editDeckStore.set(await iDeckToEditingDeck(sideStore.deck));
+          }}
+        />
+      </DndProvider>
+    </Modal>
+  );
+};

src/ui/Side/MoraTpModal/index.tsx

+import React from "react";
+
+export const MoraTpModal: React.FC = () => {
+  return <></>;
+};

src/ui/Side/index.tsx

-import { App, Button, Modal } from "antd";
-import React, { useEffect } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { useSnapshot } from "valtio";
-
-import { CardMeta, sendUpdateDeck } from "@/api";
-import { deckStore, roomStore, sideStore } from "@/stores";
-
-import { DeckEditor } from "../BuildDeck";
-import { editDeckStore } from "../BuildDeck/store";
-import { iDeckToEditingDeck } from "../BuildDeck/utils";
-import { Background } from "../Shared";
-
-export const SideModal: React.FC = () => {
-  const deck = deckStore.decks[0];
-  const { message } = App.useApp();
-  const { deckName, main, extra, side } = editDeckStore;
-  const { siding, ready } = useSnapshot(sideStore);
-  const { errorMsg } = useSnapshot(roomStore);
-
-  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;
-  };
-
-  useEffect(() => {
-    if (ready) {
-      message.info("副卡组更换成功，请耐心等待其他玩家更换卡组");
-    }
-  }, [ready]);
-  useEffect(() => {
-    if (errorMsg !== undefined && errorMsg !== "") {
-      message.error(errorMsg);
-      roomStore.errorMsg = undefined;
-    }
-  }, [errorMsg]);
-
-  return (
-    <Modal
-      title="请选择更换副卡组"
-      open={siding}
-      width={700}
-      closable={false}
-      footer={
-        <Button disabled={ready} onClick={handleSummit}>
-          副卡组更换完毕
-        </Button>
-      }
-    >
-      <DndProvider backend={HTML5Backend}>
-        <Background />
-        <DeckEditor
-          deck={deck}
-          onClear={() => message.error("对局中清空卡组不怕找不回来吗?!")}
-          onSave={() => message.error("点击右下角按钮确认副卡组更换完毕")}
-          onReset={async () => {
-            editDeckStore.set(await iDeckToEditingDeck(deck));
-          }}
-        />
-      </DndProvider>
-    </Modal>
-  );
-};
+export * from "./ChangeSideModal";
+export * from "./MoraTpModal";