add Replay component

src/ui/Login.tsx

@@ -9,6 +9,7 @@
 import "../styles/core.scss";
 
 import { Input } from "antd";
+import Link from "antd/es/typography/Link";
 import React, { ChangeEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -88,6 +89,9 @@ export default function Login() {
           <a href="https://doc.neos.moe">Player Guide</a>
           <span className="fa fa-arrow-right"></span>
         </p>
+        <p>
+          <Link href="replay">Clik here to play ygo replay</Link>
+        </p>
       </div>
       <div className="sign-in__actions clearfix">
         <ul>

src/ui/Neos.tsx

@@ -7,6 +7,7 @@ const Login = React.lazy(() => import("./Login"));
 const WaitRoom = React.lazy(() => import("./WaitRoom"));
 const Mora = React.lazy(() => import("./Mora"));
 const NeosDuel = React.lazy(() => import("./Duel/Main"));
+const Replay = React.lazy(() => import("./Replay"));
 
 export default function () {
   return (
@@ -28,6 +29,14 @@ export default function () {
           </Suspense>
         }
       />
+      <Route
+        path="/replay"
+        element={
+          <Suspense fallback={<Loading />}>
+            <Replay />
+          </Suspense>
+        }
+      />
       <Route
         path="/duel/:player/:passWd/:ip"
         element={

src/ui/Replay/index.tsx

+import "../../styles/core.scss";
+
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, message, Modal, Upload, UploadProps } from "antd";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const ReplayModal: React.FC = () => {
+  const [replay, setReplay] = useState<null | ArrayBuffer>(null);
+  const uploadProps: UploadProps = {
+    name: "replay",
+    onChange(info) {
+      info.file.status = "done";
+    },
+    beforeUpload(file, _) {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+
+      reader.onload = (e) => setReplay(e.target?.result as ArrayBuffer);
+    },
+  };
+
+  const navigate = useNavigate();
+
+  return (
+    <Modal
+      title="选择回放"
+      open={true}
+      maskClosable={false}
+      onOk={() => {
+        if (replay === null) {
+          message.error("请先上传录像文件");
+        } else {
+          // 跳转
+          // TODO
+        }
+      }}
+      onCancel={() => {
+        // 断开websocket连接
+        // TODO
+        // 回到初始界面
+        navigate("/");
+      }}
+    >
+      <Upload {...uploadProps}>
+        <Button icon={<UploadOutlined />}>点击上传录像文件</Button>
+      </Upload>
+    </Modal>
+  );
+};
+
+export default ReplayModal;