From eb4ea304041f259f4b4b733da6bca51ca0ce1275 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Tue, 13 Jan 2026 11:40:53 -0700
Subject: [PATCH] Add animations to points on scoreboard

---
 components/Scoreboard.tsx | 59 +++++++++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 18 deletions(-)

diff --git a/components/Scoreboard.tsx b/components/Scoreboard.tsx
index c8c952d..61a00d5 100644
--- a/components/Scoreboard.tsx
+++ b/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 }) => {
-                    const player = sortedPlayers[index as number];
-                    return (
-                      <text
-                        x={(x as number) + (width as number) + 15}
-                        y={y as number}
-                        dy={35}
-                        fill={player?.color || 'var(--theme-primary)'}
-                        fontSize={24}
-                        fontWeight={900}
-                        fontFamily="Fredoka"
-                      >
-                        {value}
-                      </text>
-                    );
-                  }}
+                  content={({ x, y, width, value }) => (
+                    <AnimatedScoreLabel
+                      x={x as number}
+                      y={y as number}
+                      width={width as number}
+                      value={value as number}
+                    />
+                  )}
                 />
               </Bar>
             </BarChart>