Scroll to Match instead of team and animate with enlargement

js/components/FavoriteBar.js

@@ -58,24 +58,24 @@ export function FavoriteBar({teams}) {
             return;
         }
 
-        const stageElements = document.querySelectorAll(`[id^='favorite-team-level-'][id$='-${favorite.id}']`);
+        const matchesWithFavoriteParticipation = document.querySelectorAll(`[data-team-level-ids*='-${favorite.id}']`);
-        let lowestStageEl = null;
+        let lowestMatch = null; // lowest means lowest stage number > latest game of the favorite
         let lowestStageNum = Infinity;
 
-        stageElements.forEach(el => {
+        matchesWithFavoriteParticipation.forEach(el => {
-            const match = el.id.match(/^favorite-team-level-(\d+)-(\d+)$/);
+            const dataTeamLevelIds = el.getAttribute('data-team-level-ids').split(',');
-            if (match) {
+            dataTeamLevelIds.forEach(pair => {
-                const stage = parseInt(match[1]);
+                const [stage, teamId] = pair.split('-').map(Number);
-                if (stage < lowestStageNum) {
+                if (teamId === favorite.id && stage < lowestStageNum) {
                     lowestStageNum = stage;
-                    lowestStageEl = el;
+                    lowestMatch = el;
-                }
                 }
             });
+        });
 
         let scrollTo;
-        if (lowestStageEl) {
+        if (lowestMatch) {
-            scrollTo = lowestStageEl;
+            scrollTo = lowestMatch;
         } else {
             const groupElements = document.querySelectorAll('[data-teams]');
             groupElements.forEach(groupEl => {

js/components/Match.js

@@ -122,9 +122,20 @@ export class Match extends React.Component {
         const groupInformation = this.state.match.group ?
             <div className="mb-2 mt-2">Gr. {this.state.match.group.number}</div> :
             '';
-
+        let team1Id; let team2Id;
+        if (this.props.stageLevel !== undefined) {
+            team1Id = `${this.props.stageLevel}-${this.props.match.team1.id}`;
+            team2Id = `${this.props.stageLevel}-${this.props.match.team2.id}`;
+        } else {
+            team1Id = undefined;
+            team2Id = undefined;
+        }
         return (<div className='mb-3'>
-            <Card className={'shadow-sm match '} onClick={this.toggleModal}>
+            <Card
+                className={'shadow-sm match'}
+                onClick={this.toggleModal}
+                data-team-level-ids={`${team1Id},${team2Id}`}
+            >
                 <div className="d-flex flex-row">
                     <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
                         <MatchTable

js/components/MatchTable.js

@@ -41,21 +41,13 @@ export function MatchTable(props) {
             </tbody>
         </Table>);
     } else {
-        let team1Id; let team2Id;
-        if (props.stageLevel !== undefined) {
-            team1Id = `favorite-team-level-${props.stageLevel}-${props.match.team1.id}`;
-            team2Id = `favorite-team-level-${props.stageLevel}-${props.match.team2.id}`;
-        } else {
-            team1Id = undefined;
-            team2Id = undefined;
-        }
         return (<Table className='mb-0'>
             <tbody>
-                <tr id={team1Id}>
+                <tr>
                     <th className='stage border-top-0'>{props.match.team1.score}</th>
                     <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
                 </tr>
-                <tr id={team2Id}>
+                <tr>
                     <th className={'stage border-bottom-0 ' + props.borderColor}>{props.match.team2.score}</th>
                     <td className={'border-bottom-0 ' + props.borderColor + ' ' + team2Class}>
                         {props.match.team2.name}

public/static/css/tournament.css

@@ -47,6 +47,10 @@
     animation: pulse 1s infinite;
 }
 
+.scroll-to-highlight {
+    animation: pulse 1s ease-in-out;
+}
+
 .favorite-bar {
     max-height: 0;
     overflow: hidden;
@@ -69,18 +73,3 @@
     outline: none !important;
     box-shadow: none !important;
 }
-@keyframes blink {
-    0% {
-        background-color: transparent;
-    }
-    50% {
-        background-color: yellow;
-    }
-    100% {
-        background-color: transparent;
-    }
-}
-
-.scroll-to-highlight {
-    animation: blink 1s ease-in-out;
-}