feat: life bar using spring

package-lock.json

@@ -27,6 +27,7 @@
         "google-protobuf": "^3.21.2",
         "lodash-es": "^4.17.21",
         "react": "^18.2.0",
+        "react-animated-numbers": "^0.16.0",
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-router-dom": "^6.10.0",
@@ -20627,6 +20628,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-animated-numbers": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/react-animated-numbers/-/react-animated-numbers-0.16.0.tgz",
+      "integrity": "sha512-MUoOsf8fLzwyUL9l6NEMma+29QtfbeYmt8x2LLt4IeLHQWJQfGa4WIUXB/VDVBXEhg74BhCRytdyvhHR3IiHsw==",
+      "dependencies": {
+        "@react-spring/web": "^9.4.5",
+        "react-intersection-observer": "^8.33.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz",
@@ -21260,6 +21274,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
     },
+    "node_modules/react-intersection-observer": {
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz",
+      "integrity": "sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -44269,6 +44291,15 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-animated-numbers": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/react-animated-numbers/-/react-animated-numbers-0.16.0.tgz",
+      "integrity": "sha512-MUoOsf8fLzwyUL9l6NEMma+29QtfbeYmt8x2LLt4IeLHQWJQfGa4WIUXB/VDVBXEhg74BhCRytdyvhHR3IiHsw==",
+      "requires": {
+        "@react-spring/web": "^9.4.5",
+        "react-intersection-observer": "^8.33.1"
+      }
+    },
     "react-app-polyfill": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz",
@@ -44763,6 +44794,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
     },
+    "react-intersection-observer": {
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz",
+      "integrity": "sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "google-protobuf": "^3.21.2",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
+    "react-animated-numbers": "^0.16.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-router-dom": "^6.10.0",

src/ui/Duel/PlayMat/LifeBar/index.tsx

 import "./index.scss";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useSnapshot } from "valtio";
 
 import { matStore, playerStore } from "@/stores";
 import classNames from "classnames";
 
+import AnimatedNumbers from "react-animated-numbers";
+
+// 三个候选方案
+// https://snack.expo.dev/?platform=web
+// https://github.com/heyman333/react-animated-numbers
+// https://www.npmjs.com/package/react-countup?activeTab=dependents
+
 export const LifeBar: React.FC = () => {
   const snap = useSnapshot(matStore.initInfo);
   const snapPlayer = useSnapshot(playerStore);
   const { currentPlayer } = useSnapshot(matStore);
 
+  const [meLife, setMeLife] = React.useState(0);
+  const [opLife, setOpLife] = React.useState(0);
+
+  useEffect(() => {
+    setMeLife(snap.me.life);
+  }, [snap.me.life]);
+
+  useEffect(() => {
+    setOpLife(snap.op.life);
+  }, [snap.op.life]);
+
   return (
     <div id="life-bar-container">
       <div
@@ -19,7 +37,9 @@ export const LifeBar: React.FC = () => {
         })}
       >
         <div className="name">{snapPlayer.getOpPlayer().name}</div>
-        <div className="life">{snap.op.life}</div>
+        <div className="life">
+          {<AnimatedNumbers animateToNumber={opLife} />}
+        </div>
       </div>
       <div
         className={classNames("life-bar", {
@@ -27,7 +47,9 @@ export const LifeBar: React.FC = () => {
         })}
       >
         <div className="name">{snapPlayer.getMePlayer().name}</div>
-        <div className="life">{snap.me.life}</div>
+        <div className="life">
+          <AnimatedNumbers animateToNumber={meLife} />
+        </div>
       </div>
     </div>
   );