optimize replay navigate

src/service/duel/start.ts

@@ -7,6 +7,7 @@ import { fetchCard, ygopro } from "@/api";
 import { useConfig } from "@/config";
 import { sleep } from "@/infra";
 import { cardStore, CardType, matStore } from "@/stores";
+import { replayStart } from "@/ui/Replay";
 const TOKEN_SIZE = 13; // 每人场上最多就只可能有13个token
 
 export default async (start: ygopro.StocGameMessage.MsgStart) => {
@@ -74,6 +75,10 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
     .at(ygopro.CardZone.EXTRA, 1 - opponent)
     .forEach((card) => (card.code = myExtraDeckCodes.pop() ?? 0));
 
+  if (matStore.isReplay) {
+    replayStart();
+  }
+
   // 初始化完后，sleep 1s，让UI初始化完成，
   // 否则在和AI对战时，由于后端给传给前端的`MSG`频率太高，会导致一些问题。
   await sleep(useConfig().startDelay);

src/stores/matStore/store.ts

@@ -80,6 +80,7 @@ export const matStore: MatState = proxy<MatState>({
     enableM2: false, // 允许进入M2阶段
     enableEp: false, // 允许回合结束
   },
+  isReplay: false,
   unimplemented: 0,
   handResults: {
     me: 0,

src/stores/matStore/types.ts

@@ -28,6 +28,8 @@ export interface MatState {
 
   phase: PhaseState;
 
+  isReplay: boolean; // 是否是回放模式
+
   result?: {
     isWin: boolean;
     reason: string;

src/ui/Replay/index.tsx

@@ -2,17 +2,24 @@ import "../../styles/core.scss";
 
 import { UploadOutlined } from "@ant-design/icons";
 import { Button, message, Modal, Upload, UploadProps } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import rustInit from "rust-src";
+import { proxy, useSnapshot } from "valtio";
 
 import { initStrings } from "@/api";
 import { useConfig } from "@/config";
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
+import { matStore } from "@/stores";
 const NeosConfig = useConfig();
 
+const localStore = proxy({
+  hasStart: false,
+});
+
 const ReplayModal: React.FC = () => {
+  const { hasStart } = useSnapshot(localStore);
   const [replay, setReplay] = useState<null | ArrayBuffer>(null);
   const uploadProps: UploadProps = {
     name: "replay",
@@ -29,6 +36,13 @@ const ReplayModal: React.FC = () => {
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (hasStart) {
+      // 跳转
+      navigate(`/duel/neos/replay/${NeosConfig.replayUrl}`);
+    }
+  }, [hasStart]);
+
   return (
     <Modal
       title="选择回放"
@@ -38,6 +52,9 @@ const ReplayModal: React.FC = () => {
         if (replay === null) {
           message.error("请先上传录像文件");
         } else {
+          // 标记为回放模式
+          matStore.isReplay = true;
+
           // 初始化wasm
           const url =
             import.meta.env.BASE_URL === "/"
@@ -70,9 +87,6 @@ const ReplayModal: React.FC = () => {
 
           // 初始化文案
           await initStrings();
-
-          // 跳转
-          navigate(`/duel/neos/replay/${NeosConfig.replayUrl}`);
         }
       }}
       onCancel={() => {
@@ -89,4 +103,8 @@ const ReplayModal: React.FC = () => {
   );
 };
 
+export const replayStart = () => {
+  localStore.hasStart = true;
+};
+
 export default ReplayModal;