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

…to feat-mvp
Mississippi-Labs · Oct 18, 2023 · dac3ff1 · dac3ff1
2 parents e0283ae + 61544e2
commit dac3ff1
Show file tree

Hide file tree

Showing 22 changed files with 261 additions and 68 deletions.
diff --git a/packages/client/src/components/Fog/styles.scss b/packages/client/src/components/Fog/styles.scss
@@ -1,10 +1,10 @@
 .mi-map-fog {
     position: absolute;
     z-index: 10;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: radial-gradient(circle closest-side at 50% 50%, #00000000 200px, #000000ff 80%);
+    left: -150vw;
+    top: -150vh;
+    width: 300vw;
+    height: 300vh;
+    background: radial-gradient(circle closest-side at 50% 50%, #00000000 200px, #000000ff 24%);
     pointer-events: none;
 }
diff --git a/packages/client/src/components/Map/index.tsx b/packages/client/src/components/Map/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { IPlayer } from '../Player';
 import MapCell, { ICellClassCache, ICoordinate } from '../MapCell';
 import './styles.scss';
@@ -22,6 +22,8 @@ const Map = (props: IProps) => {
   const { width, height, vertexCoordinate, data = [], players, curId, onPlayerMove } = props;
   const { x: startX, y: startY } = vertexCoordinate;
 
+  const [prevActionCoordinate, setPrevActionCoordinate] = useState({ x: -1, y: -1});
+
   const staticData = useMemo(() => {
     return Array(height).fill(0).map(() => Array(width).fill(0));
   }, [width, height]);
@@ -35,7 +37,11 @@ const Map = (props: IProps) => {
   const playerData = useMemo(() => {
     const obj = {};
     players.forEach((player) => {
-      obj[`${player.x}-${player.y}`] = player;
+      if (obj[`${player.x}-${player.y}`]) {
+        obj[`${player.x}-${player.y}`].push(player)
+      } else {
+        obj[`${player.x}-${player.y}`] = [player];
+      }
     });
     return obj;
   }, [players]);
@@ -71,9 +77,11 @@ const Map = (props: IProps) => {
                         x,
                         y
                       }}
+                      prevActionCoordinate={prevActionCoordinate}
+                      onExeAction={setPrevActionCoordinate}
                       mapData={data}
                       cellClassCache={cellClassCache.current}
-                      player={playerData[`${x}-${y}`]}
+                      players={playerData[`${x}-${y}`]}
                       onMoveTo={onMoveTo}
                     />
                   )

diff --git a/packages/client/src/components/Map/styles.scss b/packages/client/src/components/Map/styles.scss
@@ -7,7 +7,6 @@
     height: 100%;
 
     .mi-map-content {
-        border: 1px solid;
         width: $cellSize * 24;
     }
 

diff --git a/packages/client/src/components/MapCell/index.tsx b/packages/client/src/components/MapCell/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { CellType } from '../../constants';
 import { getCellClass, isMovable } from '@/utils';
 import './styles.scss';
@@ -27,29 +27,68 @@ interface IProps {
   coordinate: ICoordinate,
   mapData: number[][];
   cellClassCache: ICellClassCache;
-  player?: IPlayer;
+  players?: IPlayer[];
   onMoveTo: (ICoordinate) => void;
+  prevActionCoordinate: ICoordinate;
+  onExeAction: (ICoordinate) => void;
 }
 
 const MapCell = (props: IProps) => {
-  const { coordinate: { x, y}, mapData, cellClassCache, player, onMoveTo } = props;
+  const { coordinate: { x, y}, mapData, cellClassCache, players, onMoveTo, onExeAction, prevActionCoordinate } = props;
+
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [activePlayerId, setActivePlayerId] = useState(-1);
+
   if (!cellClassCache[`${y}-${x}`]) {
     cellClassCache[`${y}-${x}`] = getCellClass(mapData, { x, y});
   }
 
   const { transforms, classList } = cellClassCache[`${y}-${x}`];
 
   const onContextMenu = (e) => {
+    onExeAction({ x, y});
     e.preventDefault();
     const curMapDataType = mapData[y][x];
-    if (isMovable(curMapDataType) && !player) {
+    if (isMovable(curMapDataType)) {
       onMoveTo({ x, y});
     }
+  }
+
+  const onClick = () => {
+    onExeAction({ x, y});
+    if (!players || players?.length === 0) {
+      return;
+    }
+    setMenuVisible(true);
+    setActivePlayerId(players[0].id)
+  }
 
+  const exeAction = (e, action) => {
+    e.stopPropagation();
+    setMenuVisible(false);
+    switch (action) {
+      case 'move':
+        onMoveTo({x, y});
+        break;
+      case 'info':
+        break;
+      case 'attack':
+        break;
+    }
   }
 
+  useEffect(() => {
+    if (prevActionCoordinate.x !== x || prevActionCoordinate.y !== y) {
+      setMenuVisible(false);
+    }
+  }, [prevActionCoordinate.x, prevActionCoordinate.y])
+
   return (
-    <div className="mi-map-cell" onContextMenu={onContextMenu}>
+    <div
+      className="mi-map-cell"
+      onContextMenu={onContextMenu}
+      onClick={onClick}
+    >
       <div className="cell-map-box">
         {
           classList.map((item, index) => {
@@ -67,8 +106,47 @@ const MapCell = (props: IProps) => {
           })
         }
       </div>
+
+      {
+        players && players.map((player) => <Player {...player}/>)
+      }
       {
-        player && <Player {...player}/>
+        menuVisible && (
+          <div className="mi-cell-user-menu">
+            {
+              players?.length > 1 && (
+                <ul className="mi-cell-username-list">
+                  {
+                    players?.slice(0, 3).map((player) => {
+                      return (
+                        <li
+                          key={player.id}
+                          className={player.id === activePlayerId ? 'active' : ''}
+                          onClick={(e) => {
+                            setActivePlayerId(player.id);
+                            e.stopPropagation();
+                          }}
+                        >{player.username}</li>
+                      )
+                    })
+                  }
+                </ul>
+              )
+            }
+
+            <ul className="mi-cell-action-menu">
+              <li>
+                <button className="mi-btn" onClick={(e) => exeAction(e, 'move')}>move</button>
+              </li>
+              <li>
+                <button className="mi-btn" onClick={(e) => exeAction(e, 'attack')}>attack</button>
+              </li>
+              <li>
+                <button className="mi-btn" onClick={(e) => exeAction(e, 'info')}>info</button>
+              </li>
+            </ul>
+          </div>
+        )
       }
     </div>
   );

diff --git a/packages/client/src/components/MapCell/styles.scss b/packages/client/src/components/MapCell/styles.scss
@@ -13,4 +13,43 @@
             background: url("/src/assets/wall/wall_#{$i}.png") no-repeat center 100% / cover;
         }
     }
+
+    .mi-cell-user-menu {
+        position: absolute;
+        z-index: 20;
+        left: 100%;
+        top: 0;
+        display: flex;
+
+        li {
+            margin-bottom: 4px;
+        }
+
+        .mi-cell-username-list {
+            margin-right: 10px;
+
+            li {
+                padding-left: 10px;
+                width: 144px;
+                height: 44px;
+                font-size: 24px;
+                line-height: 42px;
+                color: #fff;
+                background: rgba(0, 0, 0, 0.8);
+                border-radius: 5px;
+
+                &.active {
+                    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
+                    border: 1px solid #000;
+                    background: #FED982;
+                }
+            }
+        }
+
+        .mi-btn {
+            font-size: 24px;
+            width: 136px;
+            height: 46px;
+        }
+    }
 }
diff --git a/packages/client/src/components/Player/index.tsx b/packages/client/src/components/Player/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import './styles.scss';
+import { CurIdMockData } from '@/mock/data';
+import Fog from '@/components/Fog';
 
 export interface IPlayer {
   x: number;
@@ -13,6 +15,9 @@ const Player = (props: IPlayer) => {
     <div className="mi-player">
       <div className="player-name">{props.username}</div>
       <div className="player-body avatar-box avatar-panda"/>
+      {
+        props.id === CurIdMockData && <Fog />
+      }
     </div>
   );
 };

diff --git a/packages/client/src/config/index.ts b/packages/client/src/config/index.ts
@@ -1,4 +1,9 @@
 export const MapConfig = {
   visualWidth: 24,
   visualHeight: 16,
+}
+
+export const LimitSpace = {
+  x: ~~(MapConfig.visualWidth / 2),
+  y: ~~(MapConfig.visualHeight / 2)
 }
diff --git a/packages/client/src/mock/data.ts b/packages/client/src/mock/data.ts
@@ -36,7 +36,19 @@ export const PlayersMockData: IPlayer[] = [
     username: 'other',
     x: 18,
     y: 10,
-  }
+  },
+  {
+    id: 6,
+    username: 'other2',
+    x: 18,
+    y: 13,
+  },
+  {
+    id: 8,
+    username: 'other3',
+    x: 18,
+    y: 13,
+  },
 ];
 
 export const CurIdMockData = 3;