On group scroll highlight group

js/components/FavoriteBar.js

@@ -76,10 +76,17 @@ export function FavoriteBar({teams}) {
         if (lowestStageEl) {
             lowestStageEl.scrollIntoView({behavior: 'smooth', block: 'end'});
         } else {
-            const groupEl = document.getElementById(`favorite-team-groupstage-${favorite.id}`);
-            if (groupEl) {
-                groupEl.scrollIntoView({behavior: 'smooth', block: 'end'});
-            }
+            const groupElements = document.querySelectorAll('[data-teams]');
+            groupElements.forEach(groupEl => {
+                const teamIds = groupEl.getAttribute('data-teams').split(',').map(id => parseInt(id, 10));
+                if (teamIds.includes(favorite.id)) {
+                    groupEl.scrollIntoView({behavior: 'smooth', block: 'center'});
+                    groupEl.classList.add('highlight');
+                    setTimeout(() => {
+                        groupEl.classList.remove('highlight');
+                    }, 2000);
+                }
+            });
         }
         setIsPulsing(false);
     };
@@ -101,7 +108,7 @@ export function FavoriteBar({teams}) {
                         title="{isVisible ? 'Favoriten schließen' : 'Favoriten öffnen'}"
                         onClick={() => setIsVisible(!isVisible)}
                     >
-                        <FaHeartCirclePlus />
+                        <FaHeartCirclePlus/>
                     </Button>
                     {favorite && (
                         <Button
@@ -110,7 +117,7 @@ export function FavoriteBar({teams}) {
                             className={isPulsing ? 'pulse-animation' : ''}
                             innerRef={scrollButtonRef}
                         >
-                            <FaArrowTurnDown />
+                            <FaArrowTurnDown/>
                         </Button>
                     )}
                 </ButtonGroup>

js/components/GroupStage.js

@@ -65,7 +65,7 @@ export class Group extends Component {
     }
 
     handleToggle() {
-        this.setState(prevState => ({ showMatches: !prevState.showMatches }));
+        this.setState(prevState => ({showMatches: !prevState.showMatches}));
         if (this.props.groupRef.current) {
             this.props.groupRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
         }
@@ -84,9 +84,15 @@ export class Group extends Component {
     }
 
     render() {
+        const teamIds = new Set();
+        this.state.matches.forEach(match => {
+            teamIds.add(match.team1.id);
+            teamIds.add(match.team2.id);
+        });
+        const teamIdsString = Array.from(teamIds).join(',');
         return (
-            <Col className="minw-25 py-2" ref={this.props.groupRef}>
-                <Card>
+            <Col className="minw-25 py-2">
+                <Card ref={this.props.groupRef} data-teams={teamIdsString}>
                     <CardBody className="position-relative">
                         <h3 className="custom-font">
                             Gruppe {this.state.number}
@@ -118,16 +124,16 @@ function GroupScoresTable(props) {
     return (
         <Table className="mt-4" striped size="sm" responsive>
             <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Team</th>
-                    <th><span title="Punkte">Pkt.</span></th>
-                    <th><span title="Becherdifferenz">Dif.</span></th>
-                    <th><span title="Getroffene Becher (Geworfen)">Gew.</span></th>
-                </tr>
+            <tr>
+                <th>#</th>
+                <th>Team</th>
+                <th><span title="Punkte">Pkt.</span></th>
+                <th><span title="Becherdifferenz">Dif.</span></th>
+                <th><span title="Getroffene Becher (Geworfen)">Gew.</span></th>
+            </tr>
             </thead>
             <tbody>
-                {props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
+            {props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
             </tbody>
         </Table>
     );

public/static/css/tournament.css

@@ -68,4 +68,19 @@
 .button-no-focus:active {
     outline: none !important;
     box-shadow: none !important;
+}
+@keyframes blink {
+    0% {
+        background-color: transparent;
+    }
+    50% {
+        background-color: yellow;
+    }
+    100% {
+        background-color: transparent;
+    }
+}
+
+.highlight {
+    animation: blink 1s ease-in-out;
 }