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

…to feat-mvp
Mississippi-Labs · Nov 1, 2023 · f4bac60 · f4bac60
2 parents 9353599 + 678b40b
commit f4bac60
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/packages/client/src/components/MapCell/index.tsx b/packages/client/src/components/MapCell/index.tsx
@@ -6,6 +6,7 @@ import Player, { IPlayer } from '@/components/Player';
 import { DELIVERY } from '@/config/map';
 import TreasureChest, { ITreasureChest } from '@/components/TreasureChest';
 import GameContext from '@/context';
+import { getDistance } from '@/utils/map';
 
 interface ITransform {
   index: number;
@@ -42,7 +43,7 @@ const MapCell = (props: IProps) => {
   const [menuVisible, setMenuVisible] = useState(false);
   const [activePlayerId, setActivePlayerId] = useState(-1);
 
-  const { mapData, openTreasureChest, setStartBattle, showUserInfo, curId, previewPath, renderPreviewPaths = [] } = useContext(GameContext);
+  const { mapData, openTreasureChest, setStartBattle, showUserInfo, previewPath, renderPreviewPaths = [], curAddr } = useContext(GameContext);
 
   const isDelivery = DELIVERY.x === x && DELIVERY.y === y;
   const movable = isMovable(mapData[y][x]);
@@ -67,21 +68,25 @@ const MapCell = (props: IProps) => {
 
   const onClick = () => {
     onExeAction({ x, y});
-    if (treasureChest.length > 0) {
+    const curPlayer = players.find(item => item.addr === curAddr);
+    if (!curPlayer) {
+      return;
+    }
+    if (treasureChest.length > 0 && getDistance({ x, y}, curPlayer) <= 1) {
       openTreasureChest(treasureChest[0].id);
       return;
     }
     if (players.length === 0) {
       return;
     }
     setMenuVisible(true);
-    setActivePlayerId(players[0].id)
+    setActivePlayerId(players[0].addr)
   }
 
   const exeAction = (e, action) => {
     e.stopPropagation();
     setMenuVisible(false);
-    const activePlayer = players.find((item) => item.id === activePlayerId);
+    const activePlayer = players.find((item) => item.addr === activePlayerId);
     switch (action) {
       case 'move':
         onMoveTo({x, y});
@@ -145,7 +150,7 @@ const MapCell = (props: IProps) => {
       }
 
       {
-        players.map((player) => <Player key={player.id} {...player}/>)
+        players.map((player) => <Player key={player.addr} {...player}/>)
       }
       {
         menuVisible && (
@@ -157,10 +162,10 @@ const MapCell = (props: IProps) => {
                     players.slice(0, 3).map((player) => {
                       return (
                         <li
-                          key={player.id}
-                          className={player.id === activePlayerId ? 'active' : ''}
+                          key={player.addr}
+                          className={player.addr === activePlayerId ? 'active' : ''}
                           onClick={(e) => {
-                            setActivePlayerId(player.id);
+                            setActivePlayerId(player.addr);
                             e.stopPropagation();
                           }}
                         >{player.username}</li>
@@ -173,14 +178,14 @@ const MapCell = (props: IProps) => {
 
             <ul className="mi-cell-action-menu">
               {
-                activePlayerId !== curId && (
+                activePlayerId !== curAddr && (
                   <li>
                     <button className="mi-btn" onClick={(e) => exeAction(e, 'move')}>move</button>
                   </li>
                 )
               }
               {
-                activePlayerId !== curId && (
+                activePlayerId !== curAddr && (
                   <li>
                     <button className="mi-btn" onClick={(e) => exeAction(e, 'attack')}>attack</button>
                   </li>

diff --git a/packages/client/src/components/TreasureChest/styles.scss b/packages/client/src/components/TreasureChest/styles.scss
@@ -24,7 +24,7 @@
         &.opening {
             visibility: visible;
             .progress {
-                width: 100%;
+                width: 90%;
             }
         }
     }

diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
@@ -320,6 +320,7 @@ const Game = () => {
         clearInterval(interval)
         let boxData = await revealBox(id)
         boxData.id = id
+        boxs[boxIndex].opening = false;
         getCollectionsFun(boxData);
       }
     }, 1000)

diff --git a/packages/client/src/utils/map.ts b/packages/client/src/utils/map.ts
@@ -404,4 +404,8 @@ export const triggerVertexUpdate = (cur, before, mapData, vertexCoordinate) => {
   return({
     ...vertexCoordinate,
   });
-};
+};
+
+export const getDistance = (p1, p2) => {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}