Feat animate (#155)

* animate * fix playerlist * fix battle hp
HelheimLabs · Sep 4, 2023 · 3a8fb6c · 3a8fb6c
1 parent 24cd37e
commit 3a8fb6c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/packages/client/src/hooks/useChessboard.ts b/packages/client/src/hooks/useChessboard.ts
@@ -111,8 +111,8 @@ const useChessboard = () => {
             enemy: isEnemy,
             image: getHeroImg(piece.creatureId),
             tier: getHeroTier(piece.creatureId),
-            ...piece,
             ...creature,
+            ...piece,
             maxHealth: creature?.health,
           });
         }

diff --git a/packages/client/src/index.css b/packages/client/src/index.css
@@ -2,6 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes shake-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.animate-shake-horizontal {
+  animation-name: shake-horizontal;
+  animation-duration: 0.4s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.2s;
+}
+
 .shop-modal {
   .ant-card-body {
     padding: 2px !important;

diff --git a/packages/client/src/ui/Chessboard.tsx b/packages/client/src/ui/Chessboard.tsx
@@ -112,7 +112,7 @@ const Chessboard = () => {
         {squares[i] && percent ? (
           <DragItem key={i} data={squares[i]}>
             <Tooltip title={showHP}>
-              <div className="relative">
+              <div className="relative animate-shake-horizontal">
                 <div className=" absolute  -top-5 -left-1">
                   <Progress
                     status="active"

diff --git a/packages/client/src/ui/Playlist.tsx b/packages/client/src/ui/Playlist.tsx
@@ -21,7 +21,8 @@ const PlayerList: React.FC = () => {
     <div className="playerList fixed right-4 top-[120px]">
       <div className="playerList-tit mx-[10px]">Players Info</div>
       {playerListData?.map((player) => {
-        const isCurrentUser = player.id.toLocaleLowerCase() === currentUserId;
+        const isCurrentUser =
+          player.id.toLocaleLowerCase() === currentUserId.toLocaleLowerCase();
         const healthPercentage = (player.hp / player.maxHp) * 100;
         return (
           <div