merge

Mississippi-Labs · Oct 21, 2023 · 6a5d126 · 6a5d126
2 parents 93765ee + 7ec88f1
commit 6a5d126
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 43 deletions.
diff --git a/packages/client/src/common.scss b/packages/client/src/common.scss
@@ -84,7 +84,7 @@ button {
         padding: 20px;
         font-size: 16px;
         line-height: 2;
-        //font-family: MISS, sans-serif;
+        font-family: MISS, sans-serif;
         text-align: center;
         color: #5D2E1C;
 

diff --git a/packages/client/src/components/Battle/index.tsx b/packages/client/src/components/Battle/index.tsx
@@ -103,6 +103,7 @@ export default function Battle(props) {
                 battle1.classList.remove('back');
                 setPlayer1LossData(0);
                 setConfirmBattleData([]);
+                setConfirmBattle2Data([]);
                 setRoundData(roundData + 1);
               }, 400);
             }, 400);

diff --git a/packages/client/src/components/TreasureChest/index.tsx b/packages/client/src/components/TreasureChest/index.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import './styles.scss';
 
 export interface ITreasureChest {
-  id: number | string;
-  x: number;
-  y: number;
-  gem: number;
+  id?: number | string;
+  x?: number;
+  y?: number;
+  gem?: number;
   opening?: boolean;
 }
 

diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx
@@ -40,30 +40,30 @@ const UserInfo = (props: IProps) => {
 
             </div>
           </div>
-          <div className="user-attr-wrapper">
+          <div className={`user-attr-wrapper ${minting ? '' : 'loaded'}`}>
             <dl>
               <dt>HP</dt>
-              <dd><span className="base-attr">100</span><span className="extra-attr">100</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 100}</span><span className="extra-attr">100</span></dd>
             </dl>
             <dl>
               <dt>Attack</dt>
-              <dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 20}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>AttackRange</dt>
-              <dd><span className="base-attr">5</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 5}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>Speed</dt>
-              <dd><span className="base-attr">2</span><span className="extra-attr">2</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 2}</span><span className="extra-attr">2</span></dd>
             </dl>
             <dl>
               <dt>Strength</dt>
-              <dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 20}</span><span className="extra-attr">1</span></dd>
             </dl>
             <dl>
               <dt>Space</dt>
-              <dd><span className="base-attr">10</span><span className="extra-attr">1</span></dd>
+              <dd><span className="base-attr">{minting ? 0 : 10}</span><span className="extra-attr">1</span></dd>
             </dl>
           </div>
         </div>

diff --git a/packages/client/src/components/UserInfo/styles.scss b/packages/client/src/components/UserInfo/styles.scss
@@ -77,7 +77,14 @@
             color: #fff;
         }
 
+        &.loaded {
+            .extra-attr {
+                visibility: visible;
+            }
+        }
+
         .extra-attr {
+            visibility: hidden;
             color: red;
 
             &::before {

diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
@@ -25,7 +25,7 @@ const Game = () => {
   });
 
   const [players, setPlayers] = useState(PlayersMockData);
-  const [curPlayer, setCurPlayer] = useState(null);
+  const [curPlayerState, setCurPlayerState] = useState(null);
   const [targetPlayer, setTargetPlayer] = useState(null);
   const [treasureChest, setTreasureChest] = useState(TreasureChestMockData);
   const curId = CurIdMockData;
@@ -58,29 +58,8 @@ const Game = () => {
     setStartBattleData(false);
     if (e == 1) {
       console.log('win');
-      const curPlayer = players.find((item) => item.id === curId);
-      curPlayer.gem += targetPlayer.gem;
-      setPlayers([...players]);
-      setContent(
-        <div className={'mi-modal-content-wrapper'}>
-          <div className="mi-modal-content">
-            Congrats,you got {targetPlayer.gem} gems!
-
-            <div className="mi-treasure-chest-wrapper">
-              <TreasureChest
-                opening={false}
-              />
-            </div>
-          </div>
-          <div className="mi-modal-footer">
-            <button className="mi-btn" onClick={() => {
-              setTargetPlayer(null);
-              close();
-            }}>OK</button>
-          </div>
-        </div>
-      );
-      open();
+      getWinTreasureChest(targetPlayer.gem)
+      setTargetPlayer(null);
     } else if (e == 2) {
       console.log('lose');
     }
@@ -107,7 +86,7 @@ const Game = () => {
     let curPlayerData = players.find((item) => item.id === curId);
     let targetPlayerData = players.find((item) => item.x === x && item.y === y);
     if (curPlayerData && targetPlayerData) {
-      setCurPlayer(curPlayerData);
+      setCurPlayerState(curPlayerData);
       setTargetPlayer(targetPlayerData);
       setStartBattleData(true);
     }
@@ -128,10 +107,7 @@ const Game = () => {
             Congrats,you got {treasureChest[targetIndex].gem} gems!
 
             <div className="mi-treasure-chest-wrapper">
-              <TreasureChest
-                {...treasureChest[targetIndex]}
-                opening={false}
-              />
+              <TreasureChest/>
             </div>
           </div>
           <div className="mi-modal-footer">
@@ -147,6 +123,29 @@ const Game = () => {
     }, 3000);
   }
 
+  const getWinTreasureChest = (gem = 1) => {
+    const curPlayer = players.find((item) => item.id === curId);
+    curPlayer.gem += gem;
+    const targetPlayerData = players.find((item) => item.x === targetPlayer.x && item.y === targetPlayer.y);
+    targetPlayerData.gem -= gem;
+    setPlayers([...players]);
+    setContent(
+      <div className={'mi-modal-content-wrapper'}>
+        <div className="mi-modal-content">
+          Congrats,you got {gem} gems!
+
+          <div className="mi-treasure-chest-wrapper">
+            <TreasureChest/>
+          </div>
+        </div>
+        <div className="mi-modal-footer">
+          <button className="mi-btn" onClick={close}>OK</button>
+        </div>
+      </div>
+    );
+    open();
+  }
+
   const triggerVertexUpdate = (cur, before) => {
     const xDegree = cur.x - before.x;
     const yDegree = cur.y - before.y;
@@ -215,7 +214,8 @@ const Game = () => {
         onPlayerMove: movePlayer,
         treasureChest,
         openTreasureChest,
-        setStartBattle
+        setStartBattle,
+        getWinTreasureChest
       }}
     >
       <div className="mi-game" tabIndex={0}>
@@ -239,7 +239,7 @@ const Game = () => {
           vertexCoordinate={vertexCoordinate}
         />
         {
-          startBattleData ? <Battle curPlayer={curPlayer} targetPlayer={targetPlayer} finishBattle={finishBattle} /> : null
+          startBattleData ? <Battle curPlayer={curPlayerState} targetPlayer={targetPlayer} finishBattle={finishBattle} /> : null
         }
         <div className="opt-wrapper">
           <button className="mi-btn">Rank</button>