Optimized code for better performance and maintainability

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

@@ -15,15 +15,15 @@ const Appearance = (props: IProps) => {
 
   return (
     <div className={`mi-appearance-wrapper ${toward === 'Right' ? 'appearance-right' : ''}`}>
-      <img src={'/assets/img/duck/default.png'} alt="" className={'user-appearance'}/>
+      <img src={'/assets/img/duck/default.png'} alt="" className={'user-appearance'} />
       {
-        clothes && <img src={`/assets/img/duck/Clothes/${clothes}.png`} alt=""/>
+        clothes && <img src={`/assets/img/duck/Clothes/${clothes}.png`} alt="" />
       }
       {
-        handheld && <img src={`/assets/img/duck/Handheld/${handheld}.png`} alt=""/>
+        handheld && <img src={`/assets/img/duck/Handheld/${handheld}.png`} alt="" />
       }
       {
-        head && <img src={`/assets/img/duck/Head/${head}.png`} alt=""/>
+        head && <img src={`/assets/img/duck/Head/${head}.png`} alt="" />
       }
     </div>
   );

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

@@ -9,7 +9,7 @@ import { message } from 'antd';
 import CountDown from '@/hooks/useCountDown';
 import GameContext from '@/context';
 
-let interval:any = null
+let interval: any = null
 let nonceHex = ''
 
 let curType = ''
@@ -19,7 +19,7 @@ let isFirst = false
 export default function Battle(props) {
   const duel = useRef<IDuelFieldMethod>();
 
-  let {battleId, curPlayer, targetPlayer} = props
+  let { battleId, curPlayer, targetPlayer } = props
   const [tacticsStep, setTacticsStep] = useState(1);
   const [confirmBattleData, setConfirmBattleData] = useState([]);
   const [battleData, setBattleData] = useState({});
@@ -55,13 +55,13 @@ export default function Battle(props) {
     if (seconds == 0) {
       forceEndFun()
     } else {
-      return (<p style={{height: '20px', background: '#fff', width: (seconds / 30 * 100) + '%'}}>{seconds}</p>)
+      return (<p style={{ height: '20px', background: '#fff', width: (seconds / 30 * 100) + '%' }}>{seconds}</p>)
     }
   }
 
   const forceEndFun = async () => {
     try {
-      let resultBattle:any = await forceEnd(battleId)
+      let resultBattle: any = await forceEnd(battleId)
       if (resultBattle?.type && resultBattle?.type == 'error') {
       } else if (resultBattle?.isEnd && resultBattle?.winner) {
         isFirst = true
@@ -316,7 +316,7 @@ export default function Battle(props) {
     )
   }
 
-  const confirmBattleFun = async (arg:Number) => {
+  const confirmBattleFun = async (arg: Number) => {
     if (battleState != 0) return
     let action = confirmBattleData[0] || 'attack'
     let actionHex = ethers.utils.formatBytes32String(action);
@@ -335,12 +335,12 @@ export default function Battle(props) {
       if (curType == 'attacker' && data?.attackerState == 0) {
         setBattleState(0)
         localStorage.removeItem('confirmBattleData')
-        setTimeout(() => {confirmBattleFun(arg)}, 100)
+        setTimeout(() => { confirmBattleFun(arg) }, 100)
         return
       } else if (curType == 'defender' && data?.defenderState == 0) {
         setBattleState(0)
         localStorage.removeItem('confirmBattleData')
-        setTimeout(() => {confirmBattleFun(arg)}, 100)
+        setTimeout(() => { confirmBattleFun(arg) }, 100)
         return
       }
       setTimeout(() => {
@@ -383,7 +383,7 @@ export default function Battle(props) {
               <div className="mi-battle-character-card" >
                 <div className="mi-battle-character-card-hp">
                   <div className='user-info'>
-                    <div style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis'}}>{targetPlayer?.name}</div>
+                    <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{targetPlayer?.name}</div>
                     <div>ATK:{targetPlayer?.attack.toString()}</div>
                   </div>
                   <div className='hp-wrap'>
@@ -407,7 +407,7 @@ export default function Battle(props) {
                 </div>
               </div>
             </div>
-            <div style={{position: 'absolute', top: '50px', height: '380px'}}>
+            <div style={{ position: 'absolute', top: '50px', height: '380px' }}>
               <DuelField
                 ref={duel}
                 leftPlayer={curPlayer}
@@ -432,24 +432,24 @@ export default function Battle(props) {
                     }
                   </div> : battleState == 3 ? getDom() : battleState == 4 ? <p>{battle?.winner.toLocaleLowerCase() == curPlayer.addr.toLocaleLowerCase() ? `You win the battle! Click anywhere on the screen to continue you adventure` : `You loss the battle! Don't worry. Click anywhere on the screen to return to the Base`}</p> : null
                 }
-                
+
               </div>
               <div className='battle-tactics'>
                 {
-                  tacticsStep == 1 ? (<div style={{display: 'flex', alignItems: 'center', flexWrap: 'wrap', color: battleState != 0 ? 'rgba(217, 217, 217, 0.58)' : '#FFF'}}>
+                  tacticsStep == 1 ? (<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', color: battleState != 0 ? 'rgba(217, 217, 217, 0.58)' : '#FFF' }}>
                     <div className='tactics-item' onClick={() => setTacticsStepFun(2, 'attack')}>Attack</div>
                     <div className='tactics-item bag'>Bag</div>
                     <div className='tactics-item' onClick={() => setTacticsStepFun(2, 'escape')}>Escape</div>
                   </div>) : tacticsStep == 2 ? (
-                    <div style={{display: 'flex', alignItems: 'center', flexWrap: 'wrap', color: battleState != 0 ? 'rgba(217, 217, 217, 0.58)' : '#FFF'}} >
+                    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', color: battleState != 0 ? 'rgba(217, 217, 217, 0.58)' : '#FFF' }} >
                       <div className='tactics-item' onClick={() => setSelectTactic(1)}>Sprint</div>
                       <div className='tactics-item' onClick={() => setSelectTactic(2)}>Sneak</div>
                       <div className='tactics-item' onClick={() => setSelectTactic(3)}>Magic</div>
-                      <div className='tactics-item' onClick={() => setTacticsStepFun(1)}><span style={{transform: 'rotate(180deg)', marginBottom: '2px', marginRight: '4px'}}>→</span>Back</div>
+                      <div className='tactics-item' onClick={() => setTacticsStepFun(1)}><span style={{ transform: 'rotate(180deg)', marginBottom: '2px', marginRight: '4px' }}>→</span>Back</div>
                     </div>
                   ) : null
                 }
-                
+
               </div>
             </div>
           </div>

packages/client/src/components/Battle/styles.scss

@@ -65,6 +65,7 @@
         box-sizing: border-box;
         position: relative;
         width: 300px;
+
         // left: 40px;
         .user-info {
           display: flex;
@@ -78,6 +79,7 @@
           line-height: normal;
           margin-bottom: 8px;
         }
+
         .hp-wrap {
           border: 4px solid #2d2d2d;
           height: 30px;
@@ -86,6 +88,7 @@
           width: 280px;
           position: relative;
           box-sizing: border-box;
+
           .hp-text {
             display: flex;
             align-items: center;
@@ -98,8 +101,9 @@
             line-height: 1;
             box-sizing: border-box;
           }
-          
+
         }
+
         .hp-loss {
           position: absolute;
           right: -60px;
@@ -113,6 +117,7 @@
           transform: rotate(-10.07deg);
           -webkit-text-stroke: 1px #000;
         }
+
         .confirm-info {
           position: absolute;
           top: -50px;
@@ -121,6 +126,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
+
           img {
             margin-right: 12px;
             width: 36px;
@@ -133,9 +139,11 @@
         &.attack {
           transform: translateX(400px);
         }
+
         &.back {
           transform: translateX(-30px);
         }
+
         img {
           transform: scaleX(-1);
         }
@@ -145,10 +153,12 @@
         &.attack {
           transform: translateX(-400px);
         }
+
         &.back {
           transform: translateX(30px);
         }
       }
+
       .dark-attacker {
         position: relative;
         top: 20px;
@@ -177,12 +187,15 @@
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
-      line-height: 26px; /* 162.5% */
+      line-height: 26px;
+
+      /* 162.5% */
       .character-info {
         color: #000;
       }
     }
   }
+
   .battle-action {
     margin-top: 14px;
     font-family: MISS;
@@ -196,6 +209,7 @@
     line-height: normal;
     position: relative;
     z-index: 9;
+
     .action-step {
       width: 510px;
       flex: 0 0 510px;
@@ -206,6 +220,7 @@
       box-sizing: border-box;
       line-height: 2;
     }
+
     .battle-tactics {
       flex: 1;
       height: 108px;
@@ -214,6 +229,7 @@
       padding: 22px;
       box-sizing: border-box;
       margin-left: 20px;
+
       .tactics-item {
         width: 130px;
         flex: 0 0 130px;
@@ -222,6 +238,7 @@
         cursor: pointer;
         display: flex;
         align-items: center;
+
         &.bag {
           color: rgba(217, 217, 217, 0.58);
           cursor: default;
@@ -247,10 +264,12 @@
         height: 64px;
         margin-right: 39px;
         cursor: pointer;
+
         .icon-bg {
           width: 64px;
           height: 64px;
         }
+
         .icon-btn {
           width: 64px;
           height: 64px;
@@ -261,15 +280,18 @@
           bottom: 0;
           margin: auto;
         }
+
         &.icon-r {
           margin-left: 17px;
           margin-right: 0;
+
           .icon-btn {
             width: 64px;
             height: 64px;
           }
         }
       }
+
       img {
         width: 64px;
         height: 64px;
@@ -310,10 +332,12 @@
         margin: 16px auto;
         position: relative;
         cursor: pointer;
+
         img {
           width: 179px;
           height: 59px;
         }
+
         .confirm-text {
           position: absolute;
           left: 0;
@@ -330,7 +354,7 @@
           font-size: 18px;
           font-style: normal;
           font-weight: 400;
-          line-height: normal; 
+          line-height: normal;
         }
       }
     }
@@ -344,6 +368,7 @@
   border-radius: 7px;
   background: #DCC7AF;
   box-shadow: 5px 4px 4px -1px rgba(0, 0, 0, 0.25);
+
   .info-title {
     padding: 25px 18px 0;
     box-sizing: border-box;
@@ -354,10 +379,12 @@
     font-weight: 400;
     line-height: normal;
   }
+
   .action-section {
     margin-top: 48px;
     padding: 0 18px;
     box-sizing: border-box;
+
     .section-title {
       margin-bottom: 8px;
       font-family: MISS;
@@ -366,14 +393,17 @@
       font-weight: 400;
       text-transform: capitalize;
     }
+
     .action-item {
       margin-bottom: 16px;
       display: flex;
       align-items: center;
+
       img {
         width: 42px;
         height: 42px;
       }
+
       p {
         margin-left: 25px;
         font-family: MISS;
@@ -384,10 +414,12 @@
       }
     }
   }
+
   .tactic-section {
     padding: 0 9px;
     box-sizing: border-box;
     margin-top: 55px;
+
     .section-title {
       margin-bottom: 4px;
       font-family: MISS;
@@ -396,10 +428,12 @@
       font-weight: 400;
       text-transform: capitalize;
     }
+
     img {
       width: 26px;
       height: 26px;
     }
+
     p {
       color: #000;
       font-family: Inter;

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

@@ -41,7 +41,7 @@ const Chests = (props: IProps) => {
           return (
             <Container position={[item.x * cellSize, item.y * cellSize]} key={item.id}>
               {
-                openingBox === item.id && <ProgressBar width={cellSize} animate={true}/>
+                openingBox === item.id && <ProgressBar width={cellSize} animate={true} />
               }
               <Sprite
                 width={cellSize}