feat: hot reload

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 
 # scss type
 *.module.scss.d.ts
+
+*.yrp3d

package.json

@@ -79,6 +79,7 @@
     "sass": "^1.65.1",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
+    "vite-plugin-arraybuffer": "^0.0.6",
     "vite-plugin-sass-dts": "^1.3.9",
     "vite-plugin-wasm-pack": "^0.1.12",
     "vite-tsconfig-paths": "^4.2.0",

src/ui/Duel/Main.tsx

 import React, { useEffect } from "react";
-import { LoaderFunction, useNavigate } from "react-router-dom";
+import { LoaderFunction, useNavigate, useSearchParams } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
+import { ygopro } from "@/api";
 import { AudioActionType, changeScene } from "@/infra/audio";
 import { matStore, SideStage, sideStore } from "@/stores";
 
@@ -35,6 +36,19 @@ export const Component: React.FC = () => {
   const { duelEnd } = useSnapshot(matStore);
   const navigate = useNavigate();
 
+  // 如果处于开发时的本地文件回放模式，则重新跳回Match且保持record参数，从而开始下一轮播放
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const devReplayFile = searchParams.get("record");
+    if (
+      searchParams &&
+      matStore.selfType === ygopro.StocTypeChange.SelfType.UNKNOWN
+    ) {
+      navigate(`/match?record=${devReplayFile}`);
+    }
+  }, []);
+
   useEffect(() => {
     if (stage === SideStage.SIDE_CHANGING) {
       // 跳转更换Side

src/ui/Match/ReplayModal/index.tsx

-import { Button, message, Modal, UploadProps } from "antd";
+import { Button, message, Modal, type UploadProps } from "antd";
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
 import { replayStore } from "@/stores";
@@ -38,26 +38,32 @@ export const ReplayModal: React.FC = () => {
     } else {
       setLoading(true);
 
-      // 标记为回放模式
-      replayStore.isReplay = true;
-
-      await connectSrvpro({
-        ip: "",
-        player: "",
-        passWd: "",
-        replay: true,
-        replayData: replay,
-      });
+      await launchReplay(replay);
     }
   };
 
+  // 开发时的回放模式：路径跳转到duel
+  const [searchParams] = useSearchParams();
+  const recordName = searchParams.get("record");
+
+  // 如处于回放模式且有回放文件，则导入播放
+  useEffect(() => {
+    if (recordName) {
+      import(
+        /* @vite-ignore */ `../../../../neos-assets/records/${recordName}.yrp3d?arraybuffer`
+      )
+        .then((res) => launchReplay(res.default))
+        .catch(() => console.error(`Local record '${recordName}' not found`));
+    }
+  }, []);
+
   useEffect(() => {
     if (hasStart) {
       setLoading(false);
       localStore.open = false;
       localStore.hasStart = false;
       // 跳转
-      navigate(`/duel`);
+      navigate(recordName ? `/duel?record=${recordName}` : "/duel");
     }
   }, [hasStart]);
 
@@ -91,3 +97,17 @@ export const replayOpen = () => {
 export const replayStart = () => {
   localStore.hasStart = true;
 };
+
+/** 单独抽离出来，以便可以在 Match.tsx 中调用，跳过Modal直接加载回放，便于开发 */
+export const launchReplay = async (replayData: ArrayBuffer) => {
+  // 标记为回放模式
+  replayStore.isReplay = true;
+
+  await connectSrvpro({
+    ip: "",
+    player: "",
+    passWd: "",
+    replay: true,
+    replayData,
+  });
+};

tsconfig.json

@@ -36,6 +36,7 @@
   },
   "include": [
     "src",
-    "rust-src/pkg"
+    "rust-src/pkg",
+    "neos-assets"
   ]
 }

vite.config.ts

@@ -6,6 +6,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import wasmPack from "vite-plugin-wasm-pack";
 import sassDts from "vite-plugin-sass-dts";
 import path from "path";
+import arraybuffer from "vite-plugin-arraybuffer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,6 +14,7 @@ export default defineConfig({
     react(),
     svgr(),
     ydkLoader(),
+    arraybuffer(),
     tsconfigPaths(),
     wasmPack("./rust-src"),
     sassDts({