feat: player msg

packages/client/src/components/PIXIAPP/index.tsx

@@ -20,6 +20,7 @@ import {
   isValidPlayer,
   updatePlayerPosition
 } from '@/utils/player';
+import PIXIMsg from '@/components/PIXIMsg';
 
 
 PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
@@ -29,7 +30,7 @@ const { cellSize, visualWidth, visualHeight } = MapConfig;
 const PIXIAPP = () => {
 
   const { openingBox, simpleMapData, players, curAddr, showUserInfo, openTreasureChest, treasureChest, isMovablePlayer,
-    onMoveToDelivery, onPlayerMove, setStartBattle, blockTime = 1500 } = useContext(GameContext);
+    onMoveToDelivery, onPlayerMove, setStartBattle, blockTime = 1500, msgMap } = useContext(GameContext);
   const [previewPaths, setPreviewPaths] = useState([]);
   const [offset, setOffset] = useState({ x: 0, y: 0});
 
@@ -284,7 +285,13 @@ const PIXIAPP = () => {
             data={treasureChest}
             openingBox={openingBox}
           />
-          <PIXIPlayers data={renderPlayers} huntingPlayerId={huntingPlayerId} playerUpdateTime={playerUpdateTime}/>
+          <PIXIPlayers
+            data={renderPlayers}
+            huntingPlayerId={huntingPlayerId}
+            playerUpdateTime={playerUpdateTime}
+            msgMap={msgMap}
+          />
+          <PIXIMsg players={renderPlayers} msgMap={msgMap}/>
           <PIXIFog position={curPlayer ? [curPlayer.x, curPlayer.y] : [4, 5]}/>
         </Container>
       </Stage>

packages/client/src/components/PIXIMsg/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { IPlayer } from '@/components/PIXIPlayers/Player';
+import { Container, Sprite } from '@pixi/react';
+import { isDelivery } from '@/utils/map';
+import { getValidMsgContent } from '@/utils/player';
+import { MapConfig } from '@/config/map';
+
+const { cellSize } = MapConfig;
+
+interface IMsgMap {
+  [key: string]: {
+    content: string;
+    time: number;
+  }
+}
+
+interface IProps {
+  players: IPlayer[];
+  msgMap: IMsgMap;
+}
+
+
+const PIXIMsg = (props: IProps) => {
+  const { players, msgMap } = props;
+  return (
+    <Container>
+      {
+        players.filter(player => !isDelivery(player) && getValidMsgContent(player.addr, msgMap)).map((player) => (
+          <Container position={[player.x * cellSize, player.y * cellSize]} key={player.addr}>
+            <Sprite
+              image={'/assets/img/meme/box.svg'}
+              width={40}
+              height={37}
+              x={cellSize + 18}
+              y={-20}
+              anchor={0.5}
+              zIndex={10}
+            />
+            <Sprite
+              image={`/assets/img/meme/${getValidMsgContent(player.addr, msgMap)}.svg`}
+              width={22}
+              height={22}
+              x={cellSize + 21}
+              y={-20}
+              anchor={0.5}
+              zIndex={11}
+            />
+          </Container>
+        ))
+      }
+    </Container>
+  );
+};
+
+export default PIXIMsg;

packages/client/src/config/hero.ts

@@ -281,4 +281,6 @@ export const EffectCfg = {
     width: 265,
     height: 265
   }
-}
+}
+
+export const MsgShowTime = 10;

packages/client/src/pages/game/index.tsx

@@ -73,6 +73,7 @@ const Game = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalType, setModalType] = useState('');
   const [gotBox, setGotBox] = useState(null);
+  const [msgMap, setMsgMap] = useState({});
 
   const curId = account;
 
@@ -270,7 +271,13 @@ const Game = () => {
 
 
   const showMsg = async (msg) => {
-    console.log(msg)
+    const addr = msg.username.split('_')[0];
+    msgMap[addr] = {
+      content: msg.content,
+      time: Date.now(),
+    }
+    setMsgMap({ ...msgMap });
+    console.log(msg, 'show')
     // const userData = await getUserPublicProfileRequest({
     //   did_type: 'web3mq',
     //   did_value: msg.from,
@@ -308,7 +315,7 @@ const Game = () => {
             setClientData(client)
           }
           if (event.type === 'message.getList') {
-            console.log(client.message.messageList);
+            console.log(client.message.messageList, 'message.getList');
 
             let lastMsg = client.message.messageList[client.message.messageList.length - 1]
             showMsg(lastMsg)
@@ -588,7 +595,8 @@ const Game = () => {
         setStartBattle,
         isMovablePlayer,
         onMoveToDelivery,
-        battles: BattleListData
+        battles: BattleListData,
+        msgMap
       }}
     >
       <div className="mi-game" tabIndex={0}>

packages/client/src/utils/player.ts

@@ -1,4 +1,6 @@
 import { IPlayer } from '@/components/PIXIPlayers/Player';
+import { IMsgMap } from '@/components/PIXIPlayers';
+import { MsgShowTime } from '@/config/hero';
 
 export const updatePlayerPosition = (player: IPlayer, next: IPlayer) => {
   const updateX = player.x - next.x;
@@ -48,4 +50,11 @@ export const createPathInterpolator = (path, steps = 24) => {
 
 export const isValidPlayer = (player: IPlayer) => {
   return player.state === 2;
+}
+
+export const getValidMsgContent = (addr: string, msgMap: IMsgMap) => {
+  if (msgMap[addr] && (Date.now() - msgMap[addr].time < MsgShowTime * 1000)) {
+    return msgMap[addr].content;
+  }
+  return '';
 }