feat: add interact emoji message

bbb169 · Oct 22, 2023 · 1dea957 · 1dea957
1 parent ab9bb30
commit 1dea957
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 11 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,6 +6,6 @@ import './index.css';
 const root = document.getElementById('root') as HTMLElement;
 const reactRoot = createRoot(root);
 
-reactRoot.render(<React.StrictMode>
+reactRoot.render(<>
     <App />
-</React.StrictMode>);
+</>);
diff --git a/src/pages/playRoom/component/playerBox/index.tsx b/src/pages/playRoom/component/playerBox/index.tsx
@@ -1,26 +1,52 @@
 import PlayerAvatar from '@/component/playerAvatar/index.js';
 import { boxHoverShadow } from '@/styles/animation.js';
+import { emitSocket } from '@/utils/api.js';
+// import { emitSocket } from '@/utils/api.js';
+import { css } from '@emotion/react';
 import { Tooltip } from 'antd';
 import { usePlayerAudioInfo } from '../../store/playerInfo.js';
 import { PlayerInfoType } from '../../type.js';
 import { ripplePlayerBoxCss, UsersBoxFlexCss } from './style.js';
 
+const interactEmojis = ['sweat_smile', 'heart_eyes', 'hot_face'];
+
 export default function PlayerBox ({ player } : { player: PlayerInfoType }) {
     const { playingPlayer } = usePlayerAudioInfo((state) => state);
     const isBarking = playingPlayer[0].has(player.name);
 
     const getPlayerSize = () => {
         return player.status.includes('calling') ? 64 : 32;
     };
-
+    
     const size = getPlayerSize();
 
-    const playerInfo = <div>
-        <div>{`${player.name} ${player.status}`}</div>
-        <div>持有: {player.holdCent}</div>
-        <div>已下注: {player.calledChips}</div>
-        <div>已负债: {player.debt}</div>
-        {isBarking && <div>正在狗叫...</div>}
+    const playerInfo = <div  css={css`
+            display: flex;
+        `}>
+        <div>
+            <div>{`${player.name} ${player.status}`}</div>
+            <div>持有: {player.holdCent}</div>
+            <div>已下注: {player.calledChips}</div>
+            <div>已负债: {player.debt}</div>
+            {isBarking && <div>正在狗叫...</div>}
+        </div>
+        <div css={css`
+            display: flex;
+            flex-direction: column;
+        `}>
+            {
+                interactEmojis.map(emoji => {
+                    return <span key={emoji} onClick={() => {
+                        emitSocket('sendEmoji', { 
+                            target: player.name,
+                            emoji,
+                        });
+                    }}>
+                        <em-emoji id={emoji} size="1.3em"></em-emoji>
+                    </span>;
+                })
+            }
+        </div>
     </div>;
 
     return <>

diff --git a/src/pages/playRoom/component/talkRoomButton/index.tsx b/src/pages/playRoom/component/talkRoomButton/index.tsx
@@ -12,7 +12,7 @@ export default function TalkRommButton () {
 
     return <>
         <Popconfirm
-            title="聊天室"
+            title="狗叫室"
             description={<ChatRoom/>}
             okText="关闭"
             showCancel={false}

diff --git a/...ages/playRoom/hooks/useInfosFromSocket.ts → ...ges/playRoom/hooks/useInfosFromSocket.tsx b/...ages/playRoom/hooks/useInfosFromSocket.ts → ...ges/playRoom/hooks/useInfosFromSocket.tsx
@@ -1,9 +1,10 @@
 import { apiHost, apiPort, emitSocket, initSocket } from '@/utils/api.js';
+import { SmileOutlined } from '@ant-design/icons';
 import { message } from 'antd';
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { io, Socket } from 'socket.io-client';
-import { GptPredicateRes, PlayerInfoType, RoomInfo, VictoryInfo } from '../type.js';
+import { EmojiInfo, GptPredicateRes, PlayerInfoType, RoomInfo, VictoryInfo } from '../type.js';
 import useChatMessage from './useChatMessage.js';
 import usePlayersInfo from './usePlayersInfo.js';
 import useRoom from './useRoom.js';
@@ -41,6 +42,20 @@ export default function useInfosFromSocket (): [PlayerInfoType[], PlayerInfoType
                     console.log('getGptPredicate', res);
                 });
 
+                socket.on('receiveEmoji', (msg: EmojiInfo) => {
+                    message.open({
+                        icon: <SmileOutlined />,
+                        content: userName === msg.target ? <>
+                            有人向你<em-emoji id={msg.emoji}></em-emoji>
+                        </> : <>
+                            {
+                                `${msg.target} 收到`
+                            }
+                            <em-emoji id={msg.emoji}></em-emoji>
+                        </>,
+                    });
+                });
+
                 // give room and player message to node serve
                 emitSocket('connectRoom', {
                     roomId,

diff --git a/src/pages/playRoom/index.tsx b/src/pages/playRoom/index.tsx
@@ -9,6 +9,11 @@ import { SettleMoal } from './component/settleMoal/index.js';
 import { CustomFloatButton } from './component/customFloatButton/index.js';
 import { isEmpty } from '@/utils/index.js';
 import { CardType } from './type.js';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+import { css } from '@emotion/react';
+import React from 'react';
+const TypedPicker = Picker as unknown as (props: any) => React.JSX.Element;
 
 export function PlayRoom () {
     const [otherPlayers, player, room, victoryPlayers, socket] = useInfosFromSocket();
@@ -21,6 +26,11 @@ export function PlayRoom () {
         victoryPlayers,
         socket,
     }}>
+        {/* pre load */}
+        <div css={css`
+            position: absolute;
+            visibility: hidden;
+        `}><TypedPicker data={data}/></div>
         <div css={palyRoomPageCss}>
             <CustomFloatButton/>
             <SettleMoal/>

diff --git a/src/pages/playRoom/type.ts b/src/pages/playRoom/type.ts
@@ -58,4 +58,10 @@ export interface ChatMessageType {
   key: string | number, 
   player: PlayerInfoType, 
   msg: string 
+}
+
+
+export interface EmojiInfo { 
+  target: string;
+  emoji: string;
 }