support chat room

src/service/room/chat.ts

@@ -4,4 +4,5 @@ import { chatStore } from "@/stores";
 export default function handleChat(pb: ygopro.YgoStocMsg) {
   const chat = pb.stoc_chat;
   chatStore.message = chat.msg;
+  chatStore.sender = chat.player;
 }

src/stores/chatStore.ts

@@ -3,10 +3,12 @@ import { proxy } from "valtio";
 import { type NeosStore } from "./shared";
 
 export interface ChatState extends NeosStore {
+  sender: number;
   message: string;
 }
 
 export const chatStore = proxy<ChatState>({
+  sender: -1,
   message: "",
   reset() {
     chatStore.message = "";

src/ui/NewWaitRoom/Chat.module.scss

@@ -17,6 +17,9 @@
 
 .dialogs {
   padding: 8px 0;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  max-height: 85vh;
   @include utils.scrollbar;
   .item {
     vertical-align: baseline;

src/ui/NewWaitRoom/Chat.tsx

 import { Button, Input } from "antd";
+import { useEffect, useState } from "react";
+import { useSnapshot } from "valtio";
+
+import { sendChat } from "@/api";
+import { chatStore, roomStore } from "@/stores";
 
 import { IconFont } from "../Shared";
 import styles from "./Chat.module.scss";
 
+interface ChatItem {
+  name: string;
+  time: string;
+  content: string;
+}
+
 export const Chat: React.FC = () => {
+  const [chatlist, setChatlist] = useState<ChatItem[]>([]);
+  const [input, setInput] = useState<string | undefined>(undefined);
+  const chat = useSnapshot(chatStore);
+
+  useEffect(() => {
+    if (chatStore.sender >= 0 && chatStore.message.length != 0) {
+      const now = new Date();
+      const sender = chatStore.sender;
+      const name =
+        sender < roomStore.players.length
+          ? roomStore.players[sender].name
+          : (sender > 8 && sender < 11) || sender > 19
+          ? "?"
+          : "System";
+      setChatlist((prev) => [
+        ...prev,
+        {
+          name: name,
+          time: `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`,
+          content: chatStore.message,
+        },
+      ]);
+    }
+  }, [chat]);
+
   return (
     <div className={styles.chat}>
       <div className={styles.dialogs}>
-        <DialogItem
-          name="愧心Kanzo"
-          time="00:34:28"
-          content="白银城连抽了三张钟"
-        />
-        <DialogItem name="超级摆烂人" time="00:34:38" content="哦" />
-        <DialogItem
-          name="超级摆烂人"
-          time="00:35:42"
-          content="是烙印融合，寄"
-        />
+        {chatlist.map((item, idx) => (
+          <DialogItem key={idx} {...item} />
+        ))}
       </div>
       <div className={styles.input}>
         <Input.TextArea
           bordered={false}
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
           autoSize
           placeholder="请输入聊天内容"
         />
-        <Button type="text" icon={<IconFont type="icon-send" size={16} />} />
+        <Button
+          type="text"
+          icon={<IconFont type="icon-send" size={16} />}
+          onClick={() => {
+            if (input !== undefined) {
+              sendChat(input);
+              setInput(undefined);
+            }
+          }}
+        />
       </div>
     </div>
   );
 };
 
-const DialogItem: React.FC<{
-  name: string;
-  time: string;
-  content: string;
-}> = ({ name, time, content }) => {
+const DialogItem: React.FC<ChatItem> = ({ name, time, content }) => {
   return (
     <div className={styles.item}>
       <div className={styles.name}>