update MatchModal.tsx to adjust pre-release

neos.config.json

@@ -10,6 +10,11 @@
         "name":"mycard-athletic",
         "ip":"tiramisu.moecube.com",
         "port":"8912"
+      },
+      {
+        "name":"pre-release",
+        "ip":"koishi.momobako.com",
+        "port":"889"
       }
    ],
    "assetsPath":"/neos-assets",

src/ui/Match/MatchModal.module.scss

@@ -11,4 +11,8 @@
     height: 3rem;
     margin: 0.25rem;
   }
+
+  .select {
+    margin: 0.25rem 0;
+  }
 }

src/ui/Match/MatchModal.tsx

@@ -5,12 +5,17 @@ import { proxy, useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
 import { accountStore, roomStore } from "@/stores";
+import { Select } from "@/ui/Shared";
 
 import styles from "./MatchModal.module.scss";
 import { connectSrvpro } from "./util";
+
 const NeosConfig = useConfig();
 const serverConfig = NeosConfig.servers;
 
+const KOISHI = "koishi";
+const PRERELEASE = "pre-release";
+
 const {
   defaults: { defaultPlayer, defaultPassword },
   automation: { isAiMode },
@@ -33,17 +38,26 @@ export const MatchModal: React.FC = ({}) => {
   const { joined, errorMsg } = useSnapshot(roomStore);
   const [player, setPlayer] = useState(user?.name ?? defaultPlayer);
   const [passwd, setPasswd] = useState(defaultPassword);
-  const [server, setServer] = useState(
-    `${serverConfig[0].ip}:${serverConfig[0].port}`,
-  );
+  const [serverId, setServerId] = useState(0);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const navigate = useNavigate();
 
   let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPlayer(event.target.value);
   };
-  let handleServerChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setServer(event.target.value);
+  let handleServerChange = (value: any) => {
+    switch (value) {
+      case KOISHI: {
+        setServerId(0);
+        break;
+      }
+      case PRERELEASE: {
+        setServerId(2);
+        break;
+      }
+      default:
+        break;
+    }
   };
   let handlePasswdChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPasswd(event.target.value);
@@ -51,7 +65,11 @@ export const MatchModal: React.FC = ({}) => {
 
   const handleSubmit = async () => {
     setConfirmLoading(true);
-    await connectSrvpro({ player, ip: server, passWd: passwd });
+    await connectSrvpro({
+      player,
+      ip: genServerAddress(serverId),
+      passWd: passwd,
+    });
   };
 
   useEffect(() => {
@@ -91,6 +109,22 @@ export const MatchModal: React.FC = ({}) => {
       centered
     >
       <div className={styles["inputs-container"]}>
+        <Select
+          className={styles.select}
+          title="服务器"
+          value={KOISHI}
+          options={[
+            {
+              value: KOISHI,
+              label: "Koishi服",
+            },
+            {
+              value: PRERELEASE,
+              label: "超先行服",
+            },
+          ]}
+          onChange={handleServerChange}
+        />
         <Input
           className={styles.input}
           type="text"
@@ -99,14 +133,6 @@ export const MatchModal: React.FC = ({}) => {
           onChange={handlePlayerChange}
           required
         />
-        <Input
-          className={styles.input}
-          type="text"
-          placeholder="服务器(IP+端口)"
-          value={server}
-          onChange={handleServerChange}
-          required
-        />
         <Input
           className={styles.input}
           type="text"
@@ -119,3 +145,7 @@ export const MatchModal: React.FC = ({}) => {
     </Modal>
   );
 };
+
+const genServerAddress = (id: number) => {
+  return `${serverConfig[id].ip}:${serverConfig[id].port}`;
+};