recent damage counter

my-app/src/Components/Buttons/CommanderDamageBar.tsx

@@ -63,6 +63,7 @@ type CommanderDamageBarProps = {
   opponents: Player[];
   player: Player;
   onPlayerChange: (updatedPlayer: Player) => void;
+  setLifeTotal: (lifeTotal: number) => void;
 };
 
 const CommanderDamageBar = ({
@@ -70,16 +71,12 @@ const CommanderDamageBar = ({
   lifeTotal,
   player,
   onPlayerChange,
+  setLifeTotal,
 }: CommanderDamageBarProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
 
-  const handleLifeChange = (updatedLifeTotal: number) => {
-    const updatedPlayer = { ...player, lifeTotal: updatedLifeTotal };
-    onPlayerChange(updatedPlayer);
-  };
-
   const handleCommanderDamageChange = (
     index: number,
     increment: number,
@@ -99,7 +96,7 @@ const CommanderDamageBar = ({
         commanderDamage: updatedCommanderDamage,
       };
       onPlayerChange(updatedPlayer);
-      handleLifeChange(lifeTotal - increment);
+      setLifeTotal(lifeTotal - increment);
       return;
     }
     if (currentCommanderDamage.damageTotal === 0 && increment === -1) {
@@ -114,7 +111,7 @@ const CommanderDamageBar = ({
       commanderDamage: updatedCommanderDamage,
     };
     onPlayerChange(updatedPlayer);
-    handleLifeChange(lifeTotal - increment);
+    setLifeTotal(lifeTotal - increment);
   };
 
   const handleDownInput = (index: number) => {

my-app/src/Components/LifeCounter/LifeCounter.style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const LifeCounterWrapper = styled.div<{ backgroundColor?: string }>`
   position: relative;
@@ -51,3 +51,29 @@ export const LifeCounterText = styled.p`
   -webkit-user-select: none;
   -ms-user-select: none;
 `;
+
+const fadeOut = keyframes`
+  0% {
+    opacity: 1;
+  }
+  33% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
+
+export const RecentDifference = styled.span`
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-shadow: none;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  padding: 5px 10px;
+  font-size: 5vmin;
+  color: #333333;
+  animation: ${fadeOut} 3s 1s ease-out forwards;
+`;

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import * as S from './LifeCounter.style';
 import { Player } from '../../Types/Player';
 import { useSwipeable } from 'react-swipeable';
@@ -23,11 +23,24 @@ const LifeCounter = ({
   onPlayerChange,
 }: LifeCounterProps) => {
   const handleLifeChange = (updatedLifeTotal: number) => {
+    const difference = updatedLifeTotal - player.lifeTotal;
     const updatedPlayer = { ...player, lifeTotal: updatedLifeTotal };
+    setRecentDifference(recentDifference + difference);
     onPlayerChange(updatedPlayer);
+    setKey(Date.now());
   };
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
+  const [recentDifference, setRecentDifference] = useState(0);
+  const [key, setKey] = useState(Date.now());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setRecentDifference(0);
+    }, 3000); // Adjust the duration as needed (3000ms = 3 seconds)
+
+    return () => clearTimeout(timer);
+  }, [recentDifference]);
 
   const swipeHandlers = useSwipeable({
     onSwipedUp: () =>
@@ -44,6 +57,7 @@ const LifeCounter = ({
           opponents={opponents}
           player={player}
           onPlayerChange={onPlayerChange}
+          setLifeTotal={handleLifeChange}
         />
         <SettingsButton
           onClick={() => {
@@ -55,7 +69,15 @@ const LifeCounter = ({
             lifeTotal={player.lifeTotal}
             setLifeTotal={handleLifeChange}
           />
-          <S.LifeCounterText>{player.lifeTotal}</S.LifeCounterText>
+          <S.LifeCounterText>
+            {player.lifeTotal}
+            {recentDifference !== 0 && (
+              <S.RecentDifference key={key}>
+                {recentDifference > 0 ? '+' : ''}
+                {recentDifference}
+              </S.RecentDifference>
+            )}
+          </S.LifeCounterText>
           <AddLifeButton
             lifeTotal={player.lifeTotal}
             setLifeTotal={handleLifeChange}