Merge branch 'optimize/nagivate' into 'main'

Optimize/nagivate

See merge request !117

src/api/ocgcore/ocgAdapter/adapter.ts

@@ -26,6 +26,7 @@ import StocSelectTp from "./stoc/stocSelectTp";
 import StocDeckCount from "./stoc/stocDeckCount";
 import StocTimeLimit from "./stoc/stocTimeLimit";
 import StocGameMsg from "./stoc/stocGameMsg/mod";
+import StocDuelStart from "./stoc/stocDuelStart";
 
 /*
  * 将[`ygoProPacket`]对象转换成[`ygopro.YgoStocMsg`]对象
@@ -87,7 +88,7 @@ export function adaptStoc(packet: YgoProPacket): ygopro.YgoStocMsg {
       break;
     }
     case STOC_DUEL_START: {
-      // TODO
+      pb = new StocDuelStart(packet).upcast();
 
       break;
     }

src/api/ocgcore/ocgAdapter/stoc/stocDuelStart.ts

+import { ygopro } from "../../idl/ocgcore";
+import { YgoProPacket, StocAdapter } from "../packet";
+
+/*
+ * STOC DuelStart
+ *
+ * @usage - 通知客户端决斗开始
+ * */
+export default class DuelStart implements StocAdapter {
+  packet: YgoProPacket;
+
+  constructor(packet: YgoProPacket) {
+    this.packet = packet;
+  }
+
+  upcast(): ygopro.YgoStocMsg {
+    return new ygopro.YgoStocMsg({
+      stoc_duel_start: new ygopro.StocDuelStart({}),
+    });
+  }
+}

src/reducers/moraSlice.ts

@@ -6,11 +6,13 @@ import { createSlice } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 
 export interface moraState {
+  duelStart: boolean;
   selectHandAble: boolean;
   selectTpAble: boolean;
 }
 
 const initialState: moraState = {
+  duelStart: false,
   selectHandAble: false,
   selectTpAble: false,
 };
@@ -19,6 +21,9 @@ const moraSlice = createSlice({
   name: "mora",
   initialState,
   reducers: {
+    duelStart: (state) => {
+      state.duelStart = true;
+    },
     selectHandAble: (state) => {
       state.selectHandAble = true;
     },
@@ -35,11 +40,13 @@ const moraSlice = createSlice({
 });
 
 export const {
+  duelStart,
   selectHandAble,
   unSelectHandAble,
   selectTpAble,
   unSelectTpAble,
 } = moraSlice.actions;
+export const selectDuelStart = (state: RootState) => state.mora.duelStart;
 export const selectHandSelectAble = (state: RootState) =>
   state.mora.selectHandAble;
 export const selectTpSelectAble = (state: RootState) => state.mora.selectTpAble;

src/service/onSocketMessage.ts

@@ -15,6 +15,7 @@ import handleSelectTp from "./mora/selectTp";
 import handleDeckCount from "./mora/deckCount";
 import handleGameMsg from "./duel/gameMsg";
 import handleTimeLimit from "./duel/timeLimit";
+import handleDuelStart from "./room/duelStart";
 
 /*
  * 先将从长连接中读取到的二进制数据通过Adapter转成protobuf结构体，
@@ -78,8 +79,7 @@ export default function handleSocketMessage(e: MessageEvent) {
       break;
     }
     case "stoc_duel_start": {
-      // TODO
-      console.log("TODO: handle STOC DuleStart.");
+      handleDuelStart(pb);
 
       break;
     }

src/service/room/duelStart.ts

+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { duelStart } from "../../reducers/moraSlice";
+import { store } from "../../store";
+
+export default function handleDuelStart(_pb: ygopro.YgoStocMsg) {
+  const dispatch = store.dispatch;
+
+  dispatch(duelStart());
+}

src/ui/WaitRoom.tsx

@@ -40,7 +40,8 @@ import {
 } from "@ant-design/icons";
 import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice";
 import type { MenuProps, UploadProps } from "antd";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { selectDuelStart } from "../reducers/moraSlice";
 
 const READY_STATE = "ready";
 
@@ -84,6 +85,7 @@ const WaitRoom = () => {
   const isHost = useAppSelector(selectIsHost);
   const player0 = useAppSelector(selectPlayer0);
   const player1 = useAppSelector(selectPlayer1);
+  const duelStart = useAppSelector(selectDuelStart);
   const [api, contextHolder] = notification.useNotification();
   const [deckTitle, setDeckTitle] = useState("请选择卡组");
   // FIXME: 这些数据应该从`store`中获取
@@ -153,6 +155,13 @@ const WaitRoom = () => {
       api.info({ message: "Chat", description: chat, placement: "bottom" });
     }
   }, [chat]);
+  useEffect(() => {
+    // 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面；
+    // 否则停留在当前页面。
+    if (duelStart) {
+      navigate(`/mora/${player}/${passWd}/${ip}`);
+    }
+  }, [duelStart]);
 
   return (
     <>
@@ -181,21 +190,8 @@ const WaitRoom = () => {
               </Space>
               <Space wrap size={10}>
                 <Avatar size={25} icon={<SendOutlined />} />
-                <Button onClick={handleChoseStart}>
-                  <Link
-                    to={
-                      // 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面；
-                      // 否则停留在当前页面。
-                      !isHost ||
-                      !joined ||
-                      player0.state !== READY_STATE ||
-                      player1.state !== READY_STATE
-                        ? {}
-                        : { pathname: `/mora/${player}/${passWd}/${ip}` }
-                    }
-                  >
-                    开始游戏
-                  </Link>
+                <Button onClick={handleChoseStart} disabled={!isHost}>
+                  开始游戏
                 </Button>
               </Space>
             </Space>