add ChatBox

src/ui/Duel/Main.tsx

@@ -19,6 +19,7 @@ import {
   YesNoModal,
 } from "./Message";
 import { LifeBar, Mat, Menu, Underlying } from "./PlayMat";
+import { ChatBox } from "./PlayMat/ChatBox";
 
 export const Component: React.FC = () => {
   const { stage } = useSnapshot(sideStore);
@@ -57,6 +58,7 @@ export const Component: React.FC = () => {
       <SortCardModal />
       <SimpleSelectCardsModal />
       <EndModal />
+      <ChatBox />
     </>
   );
 };

src/ui/Duel/PlayMat/ChatBox/index.module.scss

+.chatbox {
+  position: relative;
+  height: 50% !important;
+  width: 80% !important;
+  left: 10%;
+  bottom: -40%;
+  border-radius: 6px;
+
+  :global(.ant-drawer-header) {
+    padding: 8px 4px;
+  }
+}

src/ui/Duel/PlayMat/ChatBox/index.tsx

+import { DownOutlined } from "@ant-design/icons";
+import { Drawer } from "antd";
+import React from "react";
+import { proxy, useSnapshot } from "valtio";
+
+import styles from "./index.module.scss";
+
+const store = proxy({ open: false });
+
+export const ChatBox: React.FC = () => {
+  const { open } = useSnapshot(store);
+  const onClose = () => (store.open = false);
+
+  return (
+    <Drawer
+      open={open}
+      placement="bottom"
+      mask={false}
+      className={styles.chatbox}
+      onClose={onClose}
+      closeIcon={<DownOutlined />}
+    ></Drawer>
+  );
+};
+
+export const openChatBox = () => (store.open = true);

src/ui/Duel/PlayMat/Menu/index.tsx

@@ -29,6 +29,7 @@ import { IconFont } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
+import { openChatBox } from "../ChatBox";
 
 const { phase: store } = matStore;
 const { useToken } = theme;
@@ -170,7 +171,11 @@ export const Menu = () => {
         ></Button>
       </DropdownWithTitle>
       <Tooltip title="聊天室">
-        <Button icon={<MessageFilled />} type="text"></Button>
+        <Button
+          icon={<MessageFilled />}
+          onClick={openChatBox}
+          type="text"
+        ></Button>
       </Tooltip>
       <DropdownWithTitle
         title="是否投降？"