Add animations to points on scoreboard

components/Scoreboard.tsx

@@ -1,10 +1,41 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Player } from '../types';
-import { motion } from 'framer-motion';
+import { motion, useSpring, useTransform } from 'framer-motion';
 import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, LabelList } from 'recharts';
 import { Loader2 } from 'lucide-react';
 import { PlayerAvatar } from './PlayerAvatar';
 
+const AnimatedScoreLabel: React.FC<{
+  x: number;
+  y: number;
+  width: number;
+  value: number;
+}> = ({ x, y, width, value }) => {
+  const spring = useSpring(0, { duration: 500 });
+  const display = useTransform(spring, (latest) => Math.round(latest));
+  const [displayValue, setDisplayValue] = useState(0);
+
+  useEffect(() => {
+    spring.set(value);
+    const unsubscribe = display.on('change', (v) => setDisplayValue(v));
+    return () => unsubscribe();
+  }, [value, spring, display]);
+
+  return (
+    <text
+      x={x + width + 15}
+      y={y}
+      dy={35}
+      fill="black"
+      fontSize={24}
+      fontWeight={900}
+      fontFamily="Fredoka"
+    >
+      {displayValue}
+    </text>
+  );
+};
+
 interface ScoreboardProps {
   players: Player[];
   onNext: () => void;
@@ -55,22 +86,14 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
                   dataKey="score" 
                   position="right" 
                   offset={15}
-                  content={({ x, y, width, value, index }) => {
+                  content={({ x, y, width, value }) => (
-                    const player = sortedPlayers[index as number];
+                    <AnimatedScoreLabel
-                    return (
+                      x={x as number}
-                      <text
-                        x={(x as number) + (width as number) + 15}
                       y={y as number}
-                        dy={35}
+                      width={width as number}
-                        fill={player?.color || 'var(--theme-primary)'}
+                      value={value as number}
-                        fontSize={24}
+                    />
-                        fontWeight={900}
+                  )}
-                        fontFamily="Fredoka"
-                      >
-                        {value}
-                      </text>
-                    );
-                  }}
                 />
               </Bar>
             </BarChart>