style upgrades

src/features/matches/components/animated-score.module.css

@@ -0,0 +1,20 @@
+.value {
+    display: inline-block;
+}
+
+.pulse {
+    animation: score-pulse 250ms ease-out;
+}
+
+@keyframes score-pulse {
+    from {
+        transform: scale(1.3);
+        color: var(--mantine-color-red-filled);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .pulse {
+        animation: none;
+    }
+}

src/features/matches/components/animated-score.tsx

@@ -0,0 +1,34 @@
+import { Text, TextProps } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import classes from "./animated-score.module.css";
+
+interface AnimatedScoreProps extends TextProps {
+  value: number;
+}
+
+const AnimatedScore = ({ value, ...textProps }: AnimatedScoreProps) => {
+  const previousValueRef = useRef<number>(value);
+  const [pulseKey, setPulseKey] = useState(0);
+
+  useEffect(() => {
+    if (previousValueRef.current !== value) {
+      previousValueRef.current = value;
+      setPulseKey((key) => key + 1);
+    }
+  }, [value]);
+
+  return (
+    <Text {...textProps}>
+      <span
+        key={pulseKey}
+        className={
+          pulseKey > 0 ? `${classes.value} ${classes.pulse}` : classes.value
+        }
+      >
+        {value}
+      </span>
+    </Text>
+  );
+};
+
+export default AnimatedScore;

src/features/matches/components/match-card.tsx

@@ -8,6 +8,7 @@ import { Suspense } from "react";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
+import AnimatedScore from "./animated-score";
 
 interface MatchCardProps {
   match: Match;
@@ -146,14 +147,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                   </Text>
                 ))}
               </Stack>
-              <Text
+              <AnimatedScore
                 size="xl"
                 fw={700}
                 c={"dimmed"}
                 display={match.status === "ended" ? undefined : "none"}
-              >
-                {match.home_cups}
-              </Text>
+                value={match.home_cups}
+              />
             </Group>
 
             <Group justify="space-between" align="center">
@@ -192,14 +192,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                   </Text>
                 ))}
               </Stack>
-              <Text
+              <AnimatedScore
                 size="xl"
                 fw={700}
                 c={"dimmed"}
                 display={match.status === "ended" ? undefined : "none"}
-              >
-                {match.away_cups}
-              </Text>
+                value={match.away_cups}
+              />
             </Group>
           </Stack>
         </Paper>