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

…to feat-mvp

.gitignore

@@ -20,3 +20,4 @@ packages/contracts/types/*
 !packages/contracts/out/IWorld.sol/
 
 packages/client/dist/*
+.idea/*

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

@@ -22,6 +22,7 @@ import {
 } from '@/utils/player';
 import PIXIMsg from '@/components/PIXIMsg';
 import MiniMap from '@/components/MiniMap';
+import showFPS from '@/utils/fps';
 
 
 PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
@@ -110,13 +111,14 @@ const PIXIAPP = () => {
   }
 
   const animateMove = (player, paths, onFinish) => {
+    console.log('moving', player.name);
     let index = 0;
     const moveTime = calculateMoveTime(paths, blockTime);
     const linePath = createPathInterpolator(paths, ~~(moveTime / 16));
-    const interval = setInterval(() => {
+    const _move = () => {
       const movingPlayer = renderPlayers.find(item => item.addr === player.addr);
       if (!movingPlayer) {
-        clearInterval(interval);
+        // clearInterval(interval);
         return;
       }
       if (movingPlayer.addr === curPlayer?.addr) {
@@ -131,10 +133,35 @@ const PIXIAPP = () => {
         movingPlayer.action = 'idle';
         movingPlayer.moving = false;
         setPlayerUpdateTime(Date.now());
-        clearInterval(interval);
-        onFinish?.()
+        // clearInterval(interval);
+        onFinish?.();
+        return;
       }
-    }, 16)
+      requestAnimationFrame(_move);
+    };
+    _move();
+    // const interval = setInterval(() => {
+    //   const movingPlayer = renderPlayers.find(item => item.addr === player.addr);
+    //   if (!movingPlayer) {
+    //     clearInterval(interval);
+    //     return;
+    //   }
+    //   if (movingPlayer.addr === curPlayer?.addr) {
+    //     setOffset(calculateOffset(linePath[index]));
+    //   }
+    //   updatePlayerPosition(movingPlayer, linePath[index]);
+    //   movingPlayer.action = 'run';
+    //   movingPlayer.moving = true;
+    //   setPlayerUpdateTime(Date.now());
+    //   index++;
+    //   if (index >= linePath.length) {
+    //     movingPlayer.action = 'idle';
+    //     movingPlayer.moving = false;
+    //     setPlayerUpdateTime(Date.now());
+    //     clearInterval(interval);
+    //     onFinish?.()
+    //   }
+    // }, 16)
 
   }
 
@@ -149,10 +176,12 @@ const PIXIAPP = () => {
 
     document.body.addEventListener('keydown', (e) => {
       if (e.key === 'Tab') {
-        console.log('tab')
         setMiniMapVisible((prevState => !prevState));
       }
-    })
+    });
+    if (location.hostname === 'localhost') {
+      showFPS.go();
+    }
   }, []);
 
   const createPreviewPath = (coordinate: ICoordinate) => {
@@ -280,6 +309,9 @@ const PIXIAPP = () => {
     }
   }
 
+  const curPlayerPosition = curPlayer ? [curPlayer.x, curPlayer.y] : [4, 5];
+
+
   return (
     <div style={{ position: 'relative' }}>
       <Stage
@@ -300,10 +332,10 @@ const PIXIAPP = () => {
             data={renderPlayers}
             huntingPlayerId={huntingPlayerId}
             playerUpdateTime={playerUpdateTime}
-            msgMap={msgMap}
+            curPlayerPosition={curPlayerPosition}
           />
           <PIXIMsg players={renderPlayers} msgMap={msgMap}/>
-          <PIXIFog position={curPlayer ? [curPlayer.x, curPlayer.y] : [4, 5]}/>
+          <PIXIFog position={curPlayerPosition}/>
         </Container>
       </Stage>
 

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

@@ -9,7 +9,7 @@ import * as PIXI from 'pixi.js';
 
 const { cellSize } = MapConfig;
 
-interface IMsgMap {
+export interface IMsgMap {
   [key: string]: {
     content: string;
     time: number;

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

@@ -2,21 +2,30 @@ import React from 'react';
 import { Container } from '@pixi/react';
 import Player, { IPlayer } from '@/components/PIXIPlayers/Player';
 import { isDelivery } from '@/utils/map';
+import { MapConfig } from '@/config';
 
 interface IProps {
   data: IPlayer[];
   huntingPlayerId?: string;
+  curPlayerPosition: number[];
 }
 
 const PIXIPlayers = (props: IProps) => {
 
-  const { data = [], huntingPlayerId } = props;
+  const { data = [], huntingPlayerId, curPlayerPosition } = props;
+
+  const isRenderable = (player) => {
+    return (Math.abs(player.x - curPlayerPosition[0]) < MapConfig.visualWidth)
+      && (Math.abs(player.y - curPlayerPosition[1]) < MapConfig.visualHeight)
+      && !isDelivery(player)
+  }
+
   return (
     <Container>
       {
-        data.filter(player => !isDelivery(player)).map((player, index) => {
+        data.filter(isRenderable).map((player, index) => {
 
-          return <Player key={index} hpVisible hunted={huntingPlayerId === player.addr} {...player}/>;
+          return <Player key={player.addr} hpVisible hunted={huntingPlayerId === player.addr} {...player}/>;
         })
       }
     </Container>

packages/client/src/pages/ffa/header/styles.scss

@@ -1,6 +1,6 @@
 .home-header {
   position: fixed;
-  z-index: 2;
+  z-index: 999;
   display: flex;
   align-items: center;
   top: 0;

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

@@ -123,12 +123,25 @@ const Game = () => {
       return item
     }).sort((a, b) => b.oreBalance - a.oreBalance);
   });
+
+  const lootCache = useRef({});
   const PlayersData = useStore((state: any) => {
     const records = Object.values(state.getRecords(tables.Player));
     return records.map((e:any) => {
       let playerItem = Object.assign(e.value, {addr: e.key.addr})
       //LootList1Data
-      let loot = LootList1Data.find((loot: any) => loot.addr == e.key.addr) || {}
+      let loot = LootList1Data.find((loot: any) => loot.addr == e.key.addr) || {};
+      // if (!lootCache.current[loot.addr]) {
+      //   // playerItem.equip = lootCache.current[loot.addr]
+      //   let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")
+      //   let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")
+      //   let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")
+      //   lootCache.current[loot.addr] = playerItem.equip = {
+      //     clothes,
+      //     handheld,
+      //     head,
+      //   }
+      // }
       let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")
       let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")
       let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"")

packages/client/src/utils/fps.ts

@@ -0,0 +1,54 @@
+/**
+ * Created by ui on 2016/6/13.
+ */
+const showFPS = (function () {
+  const requestAnimationFrame =
+    window.requestAnimationFrame;
+  // 去他大爷的兼容
+  //|| //Chromium
+  //window.webkitRequestAnimationFrame || //Webkit
+  //window.mozRequestAnimationFrame || //Mozilla Geko
+  //window.oRequestAnimationFrame || //Opera Presto
+  //window.msRequestAnimationFrame || //IE Trident?
+  //function(callback) { //Fallback function
+  //    window.setTimeout(callback, 1000/60);
+  //}
+  let e, pe, pid, fps, last, offset;
+
+  fps = 0;
+  last = Date.now();
+  const step = function () {
+    offset = Date.now() - last;
+    fps += 1;
+    if (offset >= 1000) {
+      last += offset;
+      appendFps(fps);
+      fps = 0;
+    }
+    requestAnimationFrame(step);
+  };
+  //显示fps; 如果未指定元素id，默认<body>标签
+  const appendFps = function (fps) {
+    if (!e) e = document.createElement('span');
+    e.style = `
+      position: fixed;
+      right: 0;
+      top: 0;
+      color: red;
+      z-index: 999;
+    `
+    pe = pid ? document.getElementById(pid) : document.getElementsByTagName('body')[0];
+    e.innerHTML = "fps: " + fps;
+    pe.appendChild(e);
+  }
+  return {
+    setParentElementId: function (id) {
+      pid = id;
+    },
+    go: function () {
+      step();
+    }
+  }
+})();
+
+export default showFPS;

packages/client/src/utils/player.ts

@@ -1,5 +1,5 @@
 import { IPlayer } from '@/components/PIXIPlayers/Player';
-import { IMsgMap } from '@/components/PIXIPlayers';
+import { IMsgMap } from '@/components/PIXIMsg';
 import { MsgShowTime } from '@/config/hero';
 
 export const updatePlayerPosition = (player: IPlayer, next: IPlayer) => {