fix(game): fix leaderboard old state

packages/web/src/components/game/states/Leaderboard.tsx

@@ -1,35 +1,57 @@
 import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
-import { AnimatePresence, motion } from "motion/react"
+import { AnimatePresence, motion, useSpring, useTransform } from "motion/react"
 import { useEffect, useState } from "react"
 
 type Props = {
   data: ManagerStatusDataMap["SHOW_LEADERBOARD"]
 }
 
+const AnimatedPoints = ({ from, to }: { from: number; to: number }) => {
+  const spring = useSpring(from, { stiffness: 1000, damping: 30 })
+  const display = useTransform(spring, (value) => Math.round(value))
+  const [displayValue, setDisplayValue] = useState(from)
+
+  useEffect(() => {
+    spring.set(to)
+    const unsubscribe = display.on("change", (latest) => {
+      setDisplayValue(latest)
+    })
+
+    return unsubscribe
+  }, [to, spring, display])
+
+  return <span className="drop-shadow-md">{displayValue}</span>
+}
+
 const Leaderboard = ({ data: { oldLeaderboard, leaderboard } }: Props) => {
   const [displayedLeaderboard, setDisplayedLeaderboard] =
     useState(oldLeaderboard)
+  const [isAnimating, setIsAnimating] = useState(false)
 
   useEffect(() => {
     setDisplayedLeaderboard(oldLeaderboard)
+    setIsAnimating(false)
 
     const timer = setTimeout(() => {
+      setIsAnimating(true)
       setDisplayedLeaderboard(leaderboard)
-    }, 2000)
+    }, 1600)
 
-    return () => clearTimeout(timer)
+    return () => {
+      clearTimeout(timer)
+    }
   }, [oldLeaderboard, leaderboard])
 
   return (
-    <section className="relative mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center px-2">
+    <section className="relative mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center px-2">
       <h2 className="mb-6 text-5xl font-bold text-white drop-shadow-md">
         Leaderboard
       </h2>
       <div className="flex w-full flex-col gap-2">
         <AnimatePresence mode="popLayout">
-          {displayedLeaderboard.map(({ username, points }) => (
+          {displayedLeaderboard.map(({ id, username, points }) => (
             <motion.div
-              key={username}
+              key={id}
               layout
               initial={{ opacity: 0, y: 50 }}
               animate={{
@@ -51,7 +73,14 @@ const Leaderboard = ({ data: { oldLeaderboard, leaderboard } }: Props) => {
               className="bg-primary flex w-full justify-between rounded-md p-3 text-2xl font-bold text-white"
             >
               <span className="drop-shadow-md">{username}</span>
-              <span className="drop-shadow-md">{points}</span>
+              {isAnimating ? (
+                <AnimatedPoints
+                  from={oldLeaderboard.find((u) => u.id === id)?.points || 0}
+                  to={leaderboard.find((u) => u.id === id)?.points || 0}
+                />
+              ) : (
+                <span className="drop-shadow-md">{points}</span>
+              )}
             </motion.div>
           ))}
         </AnimatePresence>