update NewMatch

neos.config.json

@@ -2,6 +2,7 @@
    "version":4960,
    "servers":[
       {
+         "name":"koishi",
          "ip":"koishi.momobako.com",
          "port":"7211"
       }

neos.config.prod.json

@@ -2,6 +2,7 @@
    "version":4960,
    "servers":[
       {
+         "name":"koishi",
          "ip":"koishi-r.momobako.com",
          "port":"7211"
       }

src/ui/NewMatch/index.tsx

 import { EditFilled, SettingFilled } from "@ant-design/icons";
 import { Space } from "antd";
-import { type LoaderFunction } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { type LoaderFunction, useNavigate } from "react-router-dom";
+import { useSnapshot } from "valtio";
 
 import { CookieKeys, setCookie } from "@/api";
-import { accountStore, type User } from "@/stores";
+import { useConfig } from "@/config";
+import { accountStore, deckStore, IDeck, roomStore, type User } from "@/stores";
 import { Background, IconFont, Select } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 import { MatchModal, matchStore } from "./MatchModal";
 import { ReplayModal, replayOpen } from "./ReplayModal";
+import { init } from "./util";
 
 export const loader: LoaderFunction = () => {
   const sso = new URLSearchParams(location.search).get("sso");
@@ -21,7 +25,26 @@ export const loader: LoaderFunction = () => {
   return null;
 };
 
+const NeosConfig = useConfig();
+
 export const Component: React.FC = () => {
+  const serverList = NeosConfig.servers;
+  const [server, setServer] = useState(
+    `${serverList[0].ip}:${serverList[0].port}`
+  );
+  const { decks } = useSnapshot(deckStore);
+  const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
+  const { user } = useSnapshot(accountStore);
+  const { joined } = useSnapshot(roomStore);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 人机对战跳转
+    if (joined) {
+      navigate(`/waitroom`);
+    }
+  }, [joined]);
+
   return (
     <>
       <Background />
@@ -31,26 +54,35 @@ export const Component: React.FC = () => {
             <Select
               title="服务器"
               showSearch
-              defaultValue="lucy"
+              value={server}
               style={{ width: 200 }}
-              options={[
-                { value: "jack", label: "Jack" },
-                { value: "lucy", label: "Lucy" },
-                { value: "Yiminghe", label: "yiminghe" },
-                { value: "disabled", label: "Disabled", disabled: true },
-              ]}
+              onChange={
+                // @ts-ignore
+                (value) => setServer(value)
+              }
+              options={serverList.map((item) => ({
+                value: `${item.ip}:${item.port}`,
+                label: item.name,
+              }))}
             />
             <Select
               title="卡组"
               showSearch
-              defaultValue="lucy"
+              value={deck.deckName}
               style={{ width: 200 }}
-              options={[
-                { value: "jack", label: "Jack" },
-                { value: "lucy", label: "Lucy" },
-                { value: "Yiminghe", label: "yiminghe" },
-                { value: "disabled", label: "Disabled", disabled: true },
-              ]}
+              onChange={(value) => {
+                // @ts-ignore
+                const item = deckStore.get(value);
+                if (item) {
+                  setDeck(item);
+                } else {
+                  alert(`Deck ${value} not found`);
+                }
+              }}
+              options={decks.map((deck) => ({
+                value: deck.deckName,
+                label: deck.deckName,
+              }))}
             />
           </Space>
           <div className={styles["mode-select"]}>
@@ -68,6 +100,16 @@ export const Component: React.FC = () => {
               title="单人模式"
               desc="开启与AI的决斗，验证自己的卡组，或者只是打发时间。"
               icon={<IconFont type="icon-chip" size={26} />}
+              onClick={async () => {
+                // TODO: 有时间可以做一个Loading
+
+                // 初始化，然后等待后端通知成功加入房间后跳转页面
+                await init({
+                  ip: server,
+                  player: user?.name ?? "Guest",
+                  passWd: "AI",
+                });
+              }}
             />
             <Mode
               title="自定义房间"