udpate CustomRoomContent

src/api/mycard/room.ts

@@ -12,9 +12,13 @@ export interface Room {
 // 通过房间ID和external_id加密得出房间密码
 //
 // 用于加入MC服房间
-export function getJoinRoomPasswd(roomID: string, external_id: number): string {
+export function getJoinRoomPasswd(
+  roomID: string,
+  external_id: number,
+  _private: boolean = false,
+): string {
   const optionsBuffer = new Uint8Array(6);
-  optionsBuffer[1] = 3 << 4;
+  optionsBuffer[1] = (_private ? 5 : 3) << 4;
 
   encryptBuffer(optionsBuffer, external_id);
 
@@ -70,6 +74,11 @@ function encryptBuffer(buffer: Uint8Array, external_id: number) {
   }
 }
 
+// 获取私密房间ID
+export function getPrivateRoomID(external_id: number): number {
+  return external_id ^ 0x54321;
+}
+
 /* 一些辅助函数 */
 
 function readUInt16LE(buffer: Uint8Array, offset: number): number {

src/ui/Match/CustomRoomContent/index.module.scss

@@ -3,9 +3,50 @@
   flex-direction: column;
   font: var(--theme-font);
   font-size: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  p {
+    font-size: 1.2rem;
+  }
+
+  .clipboard {
+    display: flex;
+    flex-direction: row;
+
+    .title {
+      margin-right: 3.5rem;
+    }
+
+    .input {
+      width: 50%;
+    }
+  }
+
+  .digit-option {
+    display: flex;
+    justify-content: space-between;
+
+    .input {
+      width: 60%;
+    }
+  }
+
+  .select-option {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .check {
+    font-size: 1rem;
+  }
 }
 
 .footer {
   text-align: right;
   gap: 1rem;
+
+  .btn {
+    margin-right: 0.5rem;
+  }
 }

src/ui/Match/CustomRoomContent/index.tsx

-import { Button } from "antd";
+import { CopyOutlined, KeyOutlined } from "@ant-design/icons";
+import { Button, Checkbox, Input } from "antd";
 import React from "react";
 
+import { Select } from "@/ui/Shared";
+
 import styles from "./index.module.scss";
 
 export const CustomRoomContent: React.FC = () => {
   return (
     <div className={styles.container}>
       <p>创建/加入私密房间</p>
+      <div className={styles.clipboard}>
+        <div className={styles.title}>
+          房间密码
+          <KeyOutlined />
+        </div>
+        <Input className={styles.input} type="text" />
+        <Button icon={<CopyOutlined />} />
+      </div>
+      <div className={styles["digit-option"]}>
+        <div className={styles.title}>初始LP</div>
+        <Input className={styles.input} type="text" />
+      </div>
+      <div className={styles["digit-option"]}>
+        <div className={styles.title}>初始手牌数</div>
+        <Input className={styles.input} type="text" />
+      </div>
+      <div className={styles["digit-option"]}>
+        <div className={styles.title}>每回合抽卡</div>
+        <Input className={styles.input} type="text" />
+      </div>
+      <div className={styles["select-option"]}>
+        <Select title="卡片允许" />
+      </div>
+      <div className={styles["select-option"]}>
+        <Select title="决斗模式" />
+      </div>
+      <div className={styles["select-option"]}>
+        <Select title="决斗规则" />
+      </div>
+      <Checkbox className={styles.check}>不检查卡组</Checkbox>
+      <Checkbox className={styles.check}>不切洗卡组</Checkbox>
+      <Checkbox className={styles.check}>40分自动加时</Checkbox>
     </div>
   );
 };
@@ -14,8 +49,8 @@ export const CustomRoomContent: React.FC = () => {
 export const CustomRoomFooter: React.FC = () => {
   return (
     <div className={styles.footer}>
-      <Button>创建私密房间</Button>
-      <Button>加入私密房间</Button>
+      <Button className={styles.btn}>创建私密房间</Button>
+      <Button className={styles.btn}>加入私密房间</Button>
     </div>
   );
 };