Merge branch 'feat-mvp' of tiankonglan.github.com:Mississippi-Labs/mi…

…ssissippi into feat-mvp
Mississippi-Labs · Oct 25, 2023 · 961fb38 · 961fb38
2 parents dc13499 + c5bab14
commit 961fb38
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 94 deletions.
diff --git a/packages/client/src/assets/img/duck_default.png b/packages/client/src/assets/img/duck_default.png
diff --git a/packages/client/src/common.scss b/packages/client/src/common.scss
@@ -56,6 +56,10 @@ button {
     unicode-range: U+0025-00FF;
 }
 
+button[disabled] {
+    cursor: not-allowed;
+}
+
 .mi-btn {
     position: relative;
     font-family: MISS, sans-serif;

diff --git a/packages/client/src/components/Appearance/index.tsx b/packages/client/src/components/Appearance/index.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
 import './styles.scss';
 import userImg from '@/assets/img/duck_default.png';
+import { PlayerToward } from '@/components/Player';
 
 interface IProps {
   head?: string;
   clothes?: string;
   handheld?: string;
+  toward?: PlayerToward;
 }
 
 const Appearance = (props: IProps) => {
 
-  const { handheld, head, clothes } = props;
+  const { handheld, head, clothes, toward } = props;
 
   return (
-    <div className={'mi-appearance-wrapper'}>
+    <div className={`mi-appearance-wrapper ${toward === 'Right' ? 'appearance-right' : ''}`}>
       <img src={'/src/assets/img/duck_default.png'} alt="" className={'user-appearance'}/>
       {
         clothes && <img src={`/src/assets/img/duck/Clothes/${clothes}.png`} alt=""/>

diff --git a/packages/client/src/components/Appearance/styles.scss b/packages/client/src/components/Appearance/styles.scss
@@ -2,6 +2,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+    z-index: 1;
 
     img {
         position: absolute;

diff --git a/packages/client/src/components/MapCell/index.tsx b/packages/client/src/components/MapCell/index.tsx
@@ -32,18 +32,17 @@ interface IProps {
   players?: IPlayer[];
   treasureChest?: ITreasureChest[];
   onMoveTo: (ICoordinate) => void;
-  openTreasureChest: (id: number) => void;
   prevActionCoordinate: ICoordinate;
   onExeAction: (ICoordinate) => void;
 }
 
 const MapCell = (props: IProps) => {
-  const { coordinate: { x, y}, cellClassCache, treasureChest, players, onMoveTo, onExeAction, prevActionCoordinate } = props;
+  const { coordinate: { x, y}, cellClassCache, treasureChest = [], players = [], onMoveTo, onExeAction, prevActionCoordinate } = props;
 
   const [menuVisible, setMenuVisible] = useState(false);
   const [activePlayerId, setActivePlayerId] = useState(-1);
 
-  const { mapData, openTreasureChest, setStartBattle } = useContext(GameContext);
+  const { mapData, openTreasureChest, setStartBattle, showUserInfo, curId } = useContext(GameContext);
 
   const isDelivery = DELIVERY.x === x && DELIVERY.y === y;
 
@@ -57,18 +56,22 @@ const MapCell = (props: IProps) => {
     onExeAction({ x, y});
     e.preventDefault();
     const curMapDataType = mapData[y][x];
+    if (players.length > 0 || treasureChest.length > 0) {
+      onClick();
+      return;
+    }
     if (isMovable(curMapDataType)) {
       onMoveTo({ x, y});
     }
   }
 
   const onClick = () => {
     onExeAction({ x, y});
-    if (treasureChest) {
+    if (treasureChest.length > 0) {
       openTreasureChest(treasureChest[0].id);
       return;
     }
-    if (!players || players?.length === 0) {
+    if (players.length === 0) {
       return;
     }
     setMenuVisible(true);
@@ -78,14 +81,16 @@ const MapCell = (props: IProps) => {
   const exeAction = (e, action) => {
     e.stopPropagation();
     setMenuVisible(false);
+    const activePlayer = players.find((item) => item.id === activePlayerId);
     switch (action) {
       case 'move':
         onMoveTo({x, y});
         break;
       case 'info':
+        showUserInfo(activePlayer);
         break;
       case 'attack':
-        setStartBattle({x, y});
+        setStartBattle(activePlayer);
         break;
     }
   }
@@ -125,20 +130,20 @@ const MapCell = (props: IProps) => {
       }
 
       {
-        treasureChest && treasureChest.map((item) => <TreasureChest {...item} key={item.id} />)
+        treasureChest.map((item) => <TreasureChest {...item} key={item.id} />)
       }
 
       {
-        players && players.map((player) => <Player key={player.id} {...player}/>)
+        players.map((player) => <Player key={player.id} {...player}/>)
       }
       {
         menuVisible && (
           <div className="mi-cell-user-menu">
             {
-              players?.length > 1 && (
+              players.length > 1 && (
                 <ul className="mi-cell-username-list">
                   {
-                    players?.slice(0, 3).map((player) => {
+                    players.slice(0, 3).map((player) => {
                       return (
                         <li
                           key={player.id}
@@ -156,12 +161,20 @@ const MapCell = (props: IProps) => {
             }
 
             <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>
+              {
+                activePlayerId !== curId && (
+                  <li>
+                    <button className="mi-btn" onClick={(e) => exeAction(e, 'move')}>move</button>
+                  </li>
+                )
+              }
+              {
+                activePlayerId !== curId && (
+                  <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>

diff --git a/packages/client/src/components/Player/index.tsx b/packages/client/src/components/Player/index.tsx
@@ -4,12 +4,15 @@ import { CurIdMockData } from '@/mock/data';
 import Fog from '@/components/Fog';
 import Appearance from '@/components/Appearance';
 
+export type PlayerToward = 'Left' | 'Right';
+
 export interface IPlayer {
   x: number;
   y: number;
   id: number;
   username: string;
   gem: number;
+  toward?: PlayerToward;
   equip: {
     head: string;
     handheld: string;
@@ -19,7 +22,7 @@ export interface IPlayer {
 
 const Player = (props: IPlayer) => {
 
-  const { username, id, equip, gem = 0 } = props;
+  const { username, id, equip, gem = 0, toward } = props;
   return (
     <div className="mi-player">
       <div className="player-info">
@@ -29,7 +32,7 @@ const Player = (props: IPlayer) => {
         <span className="player-username">{username}</span>
 
       </div>
-      <Appearance {...equip} />
+      <Appearance toward={toward as PlayerToward} {...equip} />
       {
         id === CurIdMockData && <Fog />
       }

diff --git a/packages/client/src/components/Player/styles.scss b/packages/client/src/components/Player/styles.scss
@@ -12,7 +12,17 @@
         display: flex;
         font-size: 16px;
         font-family: MISS, sans-serif;
+        left: 0;
         bottom: 100%;
+        width: 100%;
+    }
+
+    .mi-appearance-wrapper {
+        transform: scale(1.8);
+
+        &.appearance-right {
+            transform: rotateY(180deg) scale(1.8);
+        }
     }
 
     .gem-num {
@@ -22,7 +32,9 @@
     }
 
     .player-username {
+        flex: 1;
         color: #000;
+        text-align: center;
         text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
     }
 

diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx
@@ -7,13 +7,14 @@ export interface IUserInfo {
   head: string;
   clothes: string;
   handheld: string;
-  minting?: boolean;
-  gem: number;
+  gem?: number;
 }
 
 const UserInfo = (props: IUserInfo) => {
 
-  const { handheld, head, clothes, minting = false, gem } = props;
+  const { handheld, head, clothes, gem = 0 } = props;
+  const lootHasLoaded = handheld && head && clothes;
+  console.log(handheld, head, clothes, lootHasLoaded);
 
   return (
     <div className={'mi-userinfo-wrapper'}>
@@ -25,38 +26,38 @@ const UserInfo = (props: IUserInfo) => {
               <Appearance clothes={clothes} handheld={handheld} head={head}/>
             </div>
           </div>
-          <div className={`loot-wrapper ${minting ? '' : 'loaded'}`}>
+          <div className={`loot-wrapper ${lootHasLoaded ? 'loaded' : ''}`}>
             <div className="loot-detail">
 
             </div>
             <div className="loot-detail">
 
             </div>
           </div>
-          <div className={`user-attr-wrapper ${minting ? '' : 'loaded'}`}>
+          <div className={`user-attr-wrapper ${lootHasLoaded ? 'loaded' : ''}`}>
             <dl>
               <dt>HP</dt>
-              <dd><span className="base-attr">{minting ? 0 : 100}</span><span className="extra-attr">100</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 100 : 0}</span><span className="extra-attr">100</span></dd>
             </dl>
             <dl>
               <dt>Attack</dt>
-              <dd><span className="base-attr">{minting ? 0 : 20}</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 20 : 0}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>AttackRange</dt>
-              <dd><span className="base-attr">{minting ? 0 : 5}</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 5 : 0}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>Speed</dt>
-              <dd><span className="base-attr">{minting ? 0 : 2}</span><span className="extra-attr">2</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 2 : 0}</span><span className="extra-attr">2</span></dd>
             </dl>
             <dl>
               <dt>Strength</dt>
-              <dd><span className="base-attr">{minting ? 0 : 20}</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 20 : 0}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>Space</dt>
-              <dd><span className="base-attr">{minting ? 0 : 10}</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{lootHasLoaded ? 10 : 0}</span><span className="extra-attr">1</span></dd>
             </dl>
           </div>
         </div>