Commit 93ca14a9 authored by Chunchi Che's avatar Chunchi Che

support chat room

parent 42e2a5c7
Pipeline #22942 failed with stages
in 12 minutes and 49 seconds
......@@ -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;
}
......@@ -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 = "";
......
......@@ -17,6 +17,9 @@
.dialogs {
padding: 8px 0;
overflow-y: scroll;
scroll-behavior: smooth;
max-height: 85vh;
@include utils.scrollbar;
.item {
vertical-align: baseline;
......
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}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment