update

neos.config.json

@@ -5,6 +5,11 @@
          "name":"koishi",
          "ip":"koishi.momobako.com",
          "port":"7211"
+      },
+      {
+        "name":"mycard",
+        "ip":"tiramisu.moecube.com",
+        "port":"7912"
       }
    ],
    "assetsPath":"/neos-assets",
@@ -18,7 +23,7 @@
    "profileUrl":"https://accounts.moecube.com/profiles",
    "athleticWatchUrl":"wss://tiramisu.moecube.com:8923",
    "entertainWatchUrl":"wss://tiramisu.moecube.com:7923",
-   "avatarApi": "https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
+   "avatarApi":"https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
    "streamInterval":20,
    "startDelay":1000,
    "ui":{

neos.config.prod.json

@@ -5,6 +5,11 @@
          "name":"koishi",
          "ip":"koishi.momobako.com",
          "port":"7211"
+      },
+      {
+        "name":"mycard",
+        "ip":"tiramisu.moecube.com",
+        "port":"7912"
       }
    ],
    "assetsPath":"/neos-assets",
@@ -18,7 +23,7 @@
    "profileUrl":"https://accounts.moecube.com/profiles",
    "athleticWatchUrl":"wss://tiramisu.moecube.com:8923",
    "entertainWatchUrl":"wss://tiramisu.moecube.com:7923",
-   "avatarApi": "https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
+   "avatarApi":"https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
    "streamInterval":20,
    "startDelay":1000,
    "ui":{

src/ui/Match/WatchModal.tsx

@@ -33,7 +33,9 @@ interface Options {
   auto_death: boolean;
 }
 
-export const WatchModal: React.FC = () => {
+export const WatchContent: React.FC<{
+  setWatchPasswd: React.Dispatch<React.SetStateAction<string | undefined>>;
+}> = ({ setWatchPasswd }) => {
   const [rooms, setRooms] = useState<Room[]>([]);
   const { message } = App.useApp();
   const url = new URL(athleticWatchUrl);
@@ -99,7 +101,7 @@ export const WatchModal: React.FC = () => {
       }}
       dataSource={rooms}
       renderItem={(room) => (
-        <List.Item key={room.id}>
+        <List.Item key={room.id} onClick={() => setWatchPasswd(room.id)}>
           <List.Item.Meta
             avatar={
               <Avatar

src/ui/Match/index.tsx

@@ -18,9 +18,9 @@ import styles from "./index.module.scss";
 import { MatchModal, matchStore } from "./MatchModal";
 import { ReplayModal, replayOpen } from "./ReplayModal";
 import { connectSrvpro } from "./util";
-import { WatchModal } from "./WatchModal";
+import { WatchContent } from "./WatchModal";
 
-const NeosConfig = useConfig();
+const { servers: serverList } = useConfig();
 
 export const loader: LoaderFunction = () => {
   // 在加载这个页面之前先重置一些store，清掉上局游戏遗留的数据
@@ -30,7 +30,6 @@ export const loader: LoaderFunction = () => {
 
 export const Component: React.FC = () => {
   const { message, modal } = App.useApp();
-  const serverList = NeosConfig.servers;
   const server = `${serverList[0].ip}:${serverList[0].port}`;
   const { decks } = deckStore;
   const [deckName, setDeckName] = useState(decks.at(0)?.deckName ?? "");
@@ -38,6 +37,8 @@ export const Component: React.FC = () => {
   const { joined } = useSnapshot(roomStore);
   const [singleLoading, setSingleLoading] = useState(false); // 单人模式的loading状态
   const [matchLoading, setMatchLoading] = useState(false); // 匹配模式的loading状态
+  const [watchLoading, setWatchLoading] = useState(false); // 观战模式的loading状态
+  const [watchPasswd, setWatchPasswd] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
 
   // 竞技匹配
@@ -63,6 +64,43 @@ export const Component: React.FC = () => {
     }
   };
 
+  // MC观战
+  const onMCWatch = () => {
+    if (!user) {
+      message.error("请先登录萌卡账号");
+    } else {
+      modal.info({
+        icon: null,
+        okText: "进入观战",
+        onOk: async () => {
+          if (watchPasswd) {
+            setWatchLoading(true);
+
+            const mcServer = serverList.find(
+              (server) => server.name === "mycard",
+            );
+            if (mcServer) {
+              await connectSrvpro({
+                ip: mcServer.ip + ":" + mcServer.port,
+                player: user.username,
+                passWd: watchPasswd,
+              });
+            } else {
+              message.error(
+                "Something unexpected happened, please contact <ccc@neos.moe> to fix",
+              );
+            }
+          } else {
+            message.error("请选择观战的房间");
+          }
+        },
+        centered: true,
+        maskClosable: true,
+        content: <WatchContent setWatchPasswd={setWatchPasswd} />,
+      });
+    }
+  };
+
   // 单人模式
   const onAIMatch = async () => {
     setSingleLoading(true);
@@ -82,6 +120,7 @@ export const Component: React.FC = () => {
     if (joined) {
       setSingleLoading(false);
       setMatchLoading(false);
+      setWatchLoading(false);
       navigate(`/waitroom`);
     }
   }, [joined]);
@@ -142,16 +181,8 @@ export const Component: React.FC = () => {
             <Mode
               title="MC观战列表"
               desc="观看萌卡MyCard上正在进行的决斗。"
-              icon={<PlayCircleFilled />}
-              onClick={() =>
-                modal.info({
-                  icon: null,
-                  footer: <></>,
-                  centered: true,
-                  maskClosable: true,
-                  content: <WatchModal />,
-                })
-              }
+              icon={watchLoading ? <LoadingOutlined /> : <PlayCircleFilled />}
+              onClick={onMCWatch}
             />
             <Mode
               title="单人模式"