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 (
+
+ {displayValue}
+
+ );
+};
+
interface ScoreboardProps {
players: Player[];
onNext: () => void;
@@ -55,22 +86,14 @@ export const Scoreboard: React.FC = ({ players, onNext, isHost,
dataKey="score"
position="right"
offset={15}
- content={({ x, y, width, value, index }) => {
- const player = sortedPlayers[index as number];
- return (
-
- {value}
-
- );
- }}
+ content={({ x, y, width, value }) => (
+
+ )}
/>