Merge branch 'feat-mvp' of github.com:Mississippi-Labs/mississippi in…

…to feat-mvp

.gitignore

@@ -18,3 +18,5 @@ packages/contracts/types/*
 !packages/contracts/out/User.sol/
 !packages/contracts/out/Plugin.sol/
 !packages/contracts/out/IWorld.sol/
+
+packages/client/dist/*

packages/client/package.json

@@ -21,6 +21,8 @@
     "@latticexyz/utils": "2.0.0-next.14",
     "@latticexyz/world": "2.0.0-next.14",
     "@pixi/react": "^7.1.1",
+    "@types/node": "^18.15.11",
+    "@vitejs/plugin-react": "^4.1.1",
     "antd": "^5.12.1",
     "buffer": "^6.0.3",
     "contracts": "workspace:*",

packages/client/src/App.tsx

@@ -5,7 +5,6 @@
 //     systemCalls: { addTask, toggleTask, deleteTask },
 //   } = useMUD();
 
-//   console.log("tables", tables);
 
 //   const tasks = useStore((state) => {
 //     const records = Object.values(state.getRecords(tables.Tasks));

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

@@ -51,7 +51,6 @@ export default function Battle(props) {
   }
 
   const setTimer = (s) => {
-    console.log(s)
     const seconds = Number(s)
     if (seconds == 0) {
       forceEndFun()
@@ -119,11 +118,9 @@ export default function Battle(props) {
         }
       }
     } else if (battleState == 2) {
-      console.log(battleState, battle)
       if (curType == 'attacker' && (battle?.attackerState == 2 || battle?.attackerState == 0)) {
         if (battle?.defenderState == 2 || battle?.defenderState == 0) {
           setBattleState(3)
-          console.log(3)
         }
       } else if (curType == 'defender' && (battle?.defenderState == 2 || battle?.defenderState == 0)) {
         if (battle?.attackerState == 2 || battle?.attackerState == 0) {
@@ -185,7 +182,6 @@ export default function Battle(props) {
   }
 
   const afterAttack = (role: string) => {
-    console.log(role)
     let attackType = battle.defenderArg.toString() == '1' ? 'sprint' : battle.defenderArg.toString() == '2' ? 'sneak' : 'magic'
     let data = JSON.parse(JSON.stringify(battleData))
     if (role == 'left') {
@@ -278,7 +274,6 @@ export default function Battle(props) {
   }, [battleState])
 
   const setTacticsStepFun = (step, action) => {
-    console.log(step)
     if (battleState != 0) return
     if (action) {
       setConfirmBattleData([action])
@@ -287,7 +282,6 @@ export default function Battle(props) {
   }
 
   const setSelectTactic = (tactic: number) => {
-    console.log(tactic)
     if (battleState != 0) return
     if (tactic) {
       confirmBattleFun(tactic)
@@ -337,7 +331,6 @@ export default function Battle(props) {
       localStorage.removeItem('confirmBattleData')
       return
     } else {
-      console.log(res)
       let data = res.data
       if (curType == 'attacker' && data?.attackerState == 0) {
         setBattleState(0)

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

@@ -43,7 +43,6 @@ const DuelField = React.forwardRef<IDuelFieldMethod>((props: IProps, ref) => {
       setLeftAction('slash');
       setRightAction('blink');
       setEffectPositionX(680);
-      console.log(leftPlayer.name, 'attack', type);
       if (textureMap.current[type]) {
         setAttackType(type);
       }

packages/client/src/components/Log/index.jsx

@@ -2,7 +2,6 @@ import React, { useRef, useState, useEffect } from 'react';
 import './styles.scss';
 import eventEmitter from '../../utils/eventEmitter';
 
-console.log('eventEmitter', eventEmitter);
 
 const Log = () => {
   const [logs, setLogs] = useState([]);

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

@@ -58,7 +58,6 @@ const Map = (props: IProps) => {
   const cellClassCache = useRef<ICellClassCache>({});
 
   const onMoveTo = (coordinate) => {
-    console.log(players, coordinate, 'onMoveTo', curId)
     const { x, y, speed } = players.find((player) => player.addr.toLocaleLowerCase() === curId.toLocaleLowerCase());
     const paths = bfs(simpleMapData, { x, y }, coordinate).slice(1).slice(0, Number(speed));
     onPlayerMove(paths, formatMovePath(paths));

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

@@ -21,6 +21,7 @@ import {
   updatePlayerPosition
 } from '@/utils/player';
 
+
 PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 const { cellSize, visualWidth, visualHeight } = MapConfig;
 
@@ -42,22 +43,27 @@ const PIXIAPP = () => {
   const [activePlayerId, setActivePlayerId] = useState('');
   const [huntingPlayerId, setHuntingActivePlayerId] = useState('');
 
-  const [renderPlayers, setRenderPlayers] = useState<IPlayer[]>([]);
+  // const [renderPlayers, setRenderPlayers] = useState<IPlayer[]>([]);
+
+  const renderPlayersRef = useRef<IPlayer[]>([]);
+  const [playerUpdateTime, setPlayerUpdateTime] = useState(0);
+  const renderPlayers = renderPlayersRef.current;
   const curPlayer = renderPlayers.find(item => item.addr === curAddr)
   const moveTasks = useRef([]);
   const clickedCoordinate = useRef({ x: -1, y : -1})
   const playersCache = getPlayersCache(players);
   useEffect(() => {
-    let renderPlayersArr = [...renderPlayers];
-    players.filter((player) => isValidPlayer(player)).forEach((player) => {
+    // let renderPlayersArr = [...renderPlayers];
+    const validPlayer = players.filter((player) => isValidPlayer(player));
+    validPlayer.forEach((player) => {
       const renderPlayer = renderPlayers.find((rPlayer) => rPlayer.addr === player.addr);
       if (renderPlayer) {
         // update
         if (isSamePosition(player, renderPlayer)) {
           // Maybe other fields changed
           Object.assign(renderPlayer, player);
         } else {
-          if (!renderPlayer.moving && !renderPlayer.waiting) {
+          if (!renderPlayer.moving && !renderPlayer.waiting && getDistance(renderPlayer, player) <= MapConfig.maxAnimateDistance) {
             moveTasks.current.push({
               player: renderPlayer,
               target: {
@@ -69,22 +75,23 @@ const PIXIAPP = () => {
           Object.assign(renderPlayer, { ...player, x: renderPlayer.x, y: renderPlayer.y});
         }
       } else {
-        renderPlayersArr.push({ ...player });
+        renderPlayers.push({ ...player });
         if (player.addr === curAddr) {
           setOffset(calculateOffset(player));
         }
         console.log(`load player ${player.name}`)
       }
     });
     // filter non-existent player
-    renderPlayersArr = renderPlayersArr.filter((player) => {
-      const hasFound = players.find((p) => p.addr === player.addr);
+    renderPlayersRef.current = renderPlayers.filter((player) => {
+      const hasFound = validPlayer.find((p) => p.addr === player.addr);
       if (!hasFound) {
         console.log(`removed player ${player.name}`)
       }
       return hasFound;
     });
-    setRenderPlayers(renderPlayersArr);
+    setPlayerUpdateTime(Date.now());
+    // setRenderPlayers(renderPlayersArr);
     exeMoveTasks();
   }, [playersCache]);
 
@@ -117,12 +124,14 @@ const PIXIAPP = () => {
       updatePlayerPosition(movingPlayer, linePath[index]);
       movingPlayer.action = 'run';
       movingPlayer.moving = true;
-      setRenderPlayers([...renderPlayers]);
+      // setRenderPlayers([...renderPlayers]);
+      setPlayerUpdateTime(Date.now());
       index++;
       if (index >= linePath.length) {
         movingPlayer.action = 'idle';
         movingPlayer.moving = false;
-        setRenderPlayers([...renderPlayers]);
+        // setRenderPlayers([...renderPlayers]);
+        setPlayerUpdateTime(Date.now());
         clearInterval(interval);
         onFinish?.()
       }
@@ -175,15 +184,13 @@ const PIXIAPP = () => {
         }
         return [];
       })
-      if (isDelivery(coordinate)) {
-        let path = paths[paths.length - 1];
-        if (path.x === 4 && path.y === 5) {
-          onMoveToDelivery();
-        }
+      if (isDelivery(paths[paths.length - 1])) {
+        onMoveToDelivery();
       } else {
         tryHunt();
       }
-      setRenderPlayers([...renderPlayers]);
+      // setRenderPlayers([...renderPlayers]);
+      setPlayerUpdateTime(Date.now());
     });
 
   }
@@ -208,6 +215,10 @@ const PIXIAPP = () => {
         setMenuVisible(false);
         break;
       case 'click':
+        // it will ignore the event when click delivery
+        if (isDelivery(coordinate)) {
+          return;
+        }
         targetChests = treasureChest.filter(item => item.x === coordinate.x && item.y === coordinate.y);
         if (targetChests.length > 0 && getDistance(curPlayer, coordinate) < 2) {
           openTreasureChest(targetChests[0].id);
@@ -280,7 +291,7 @@ const PIXIAPP = () => {
             data={treasureChest}
             openingBox={openingBox}
           />
-          <PIXIPlayers data={renderPlayers} huntingPlayerId={huntingPlayerId}/>
+          <PIXIPlayers data={renderPlayers} huntingPlayerId={huntingPlayerId} playerUpdateTime={playerUpdateTime}/>
           <PIXIFog position={curPlayer ? [curPlayer.x, curPlayer.y] : [4, 5]}/>
         </Container>
       </Stage>

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

@@ -27,7 +27,6 @@ const Player = (props: IPlayer) => {
   const { username, addr, equip, gem = 0, toward, waiting, x, y } = props;
   const { curAddr } = useContext(GameContext);
 
-  // console.log(addr, curAddr, 'addr curid')
   return (
     <div>
     {

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

@@ -15,7 +15,6 @@ interface IProps {
 const Rank = (props: IProps) => {
 
   const { data, curId } = props;
-  console.log(data)
   const curIndex = data.findIndex(item => item.id === 1);
   const [visible, setVisible] = useState(false);
 

packages/client/src/components/Typewriter/index.jsx

@@ -20,7 +20,6 @@ function Typewriter({ text, typingSpeed, step, name }) {
   }, [text, typingSpeed, currentIndex]);
 
   useEffect(() => {
-    console.log(1)
     setDisplayText('');
     setCurrentIndex(0);
   }, [step]);

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

@@ -1,13 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import './styles.scss';
 import UserPackage from '@/components/UserPackage';
-import Appearance from '@/components/Appearance';
 import * as PIXI from 'pixi.js';
 import { Stage } from '@pixi/react';
 import Player, { IPlayer } from '@/components/PIXIPlayers/Player';
-import { MapConfig } from '@/config/map';
 import Equipment from '@/components/Equipment';
-const { cellSize } = MapConfig;
 import defaultFoot from '@/assets/default-equip/Foot.png';
 import defaultHand from '@/assets/default-equip/hand1.png';
 import defaultNeck from '@/assets/default-equip/neck.png';

packages/client/src/config/map.ts

@@ -79,5 +79,6 @@ export const MapConfig = {
   spriteCellSize: 16,
   width: MAP_CFG[0].length,
   height: MAP_CFG.length,
+  maxAnimateDistance: 7,
 }
 

packages/client/src/hooks/useMerkel.tsx

@@ -58,7 +58,6 @@ const useMerkel = (mapData) => {
       keccak256,
       { sortPairs: true }
     );
-    // console.log(merkel.current?.getHexRoot(), 'root')
   }, [mapData]);
 
   return formatMovePath;

packages/client/src/mud/createSystemCalls.ts

@@ -9,6 +9,8 @@ import { SetupNetworkResult } from "./setupNetwork";
 import eventEmitter from '../utils/eventEmitter';
 import { message } from 'antd';
 
+import { delay } from '../utils/delay';
+
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
 let wait = false;
@@ -42,13 +44,10 @@ export function createSystemCalls(
   }
 
   const transfer = async (addr: any, transferData: any) => {
-    console.log('transfer', new Date().getTime());
     try {
       const tx = await worldContract.write.transfer([addr, ...transferData]);
       await waitForTransaction(tx);
-      console.log('transfer success', new Date().getTime(), tx);
     } catch (error) {
-      console.log('transfer', error);
       message.error(error.cause.reason || error.cause.details);
     }
   }
@@ -64,7 +63,6 @@ export function createSystemCalls(
       const tx = await worldContract.write.move([steps]);
       await waitForTransaction(tx);
       const receipt = await publicClient.getTransactionReceipt({ hash: tx });
-      console.log(receipt)
       // let receipt = r.receipt
       log.block = await getBlockNumber(tx)
       eventEmitter.emit('log', log)
@@ -79,11 +77,10 @@ export function createSystemCalls(
   };
 
   const selectBothNFT = async (userTokenId: any, lootTokenId: any, address: any) => {
-    console.log('selectBothNFT', new Date().getTime());
     try {
       const tx = await worldContract.write.selectBothNFT([userTokenId, lootTokenId]);
       await waitForTransaction(tx);
-      console.log('selectBothNFT success', new Date().getTime(), tx);
+      await delay(300)
       return {
         playerData: useStore.getState().getValue(tables.PlayerParams, { addr: address }),
         lootData: useStore.getState().getValue(tables.LootList1, { addr: address })
@@ -182,6 +179,7 @@ export function createSystemCalls(
       eventEmitter.emit('log', log)
       console.log('revealBox success', new Date().getTime(), tx);
       wait = false
+      await delay(300)
       return useStore.getState().getValue(tables.BoxList, { boxId })
     } catch (error) {
       console.log(error)
@@ -207,6 +205,7 @@ export function createSystemCalls(
       log.block = await getBlockNumber(tx)
       eventEmitter.emit('log', log)
       wait = false
+      await delay(300)
       return {
         type: 'success'
       }
@@ -262,6 +261,7 @@ export function createSystemCalls(
       log.block = await getBlockNumber(tx)
       eventEmitter.emit('log', log)
       wait = false
+      await delay(300)
       return {
         type: 'success',
         data: useStore.getState().getValue(tables.BattleList, { battleId })
@@ -294,6 +294,7 @@ export function createSystemCalls(
       log.block = await getBlockNumber(tx)
       eventEmitter.emit('log', log)
       wait = false
+      await delay(300)
       return {
         type: 'success',
         data: useStore.getState().getValue(tables.BattleList, { battleId })
@@ -326,6 +327,7 @@ export function createSystemCalls(
       log.block = await getBlockNumber(tx)
       eventEmitter.emit('log', log)
       wait = false
+      await delay(300)
       return useStore.getState().getValue(tables.BattleList, { battleId })
     } catch (error) {
       log.type = 'error'