From cdb1bc52dd42ad5e9c1aca96b150ab51a3025a8b Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Mon, 17 Mar 2025 23:02:28 +0100
Subject: [PATCH] Scroll to Match instead of team and animate with enlargement

---
 js/components/FavoriteBar.js     | 22 +++++++++++-----------
 js/components/Match.js           | 15 +++++++++++++--
 js/components/MatchTable.js      | 12 ++----------
 public/static/css/tournament.css | 19 ++++---------------
 4 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/js/components/FavoriteBar.js b/js/components/FavoriteBar.js
index 9fdaf9b..f072634 100644
--- a/js/components/FavoriteBar.js
+++ b/js/components/FavoriteBar.js
@@ -58,24 +58,24 @@ export function FavoriteBar({teams}) {
             return;
         }
 
-        const stageElements = document.querySelectorAll(`[id^='favorite-team-level-'][id$='-${favorite.id}']`);
-        let lowestStageEl = null;
+        const matchesWithFavoriteParticipation = document.querySelectorAll(`[data-team-level-ids*='-${favorite.id}']`);
+        let lowestMatch = null; // lowest means lowest stage number > latest game of the favorite
         let lowestStageNum = Infinity;
 
-        stageElements.forEach(el => {
-            const match = el.id.match(/^favorite-team-level-(\d+)-(\d+)$/);
-            if (match) {
-                const stage = parseInt(match[1]);
-                if (stage < lowestStageNum) {
+        matchesWithFavoriteParticipation.forEach(el => {
+            const dataTeamLevelIds = el.getAttribute('data-team-level-ids').split(',');
+            dataTeamLevelIds.forEach(pair => {
+                const [stage, teamId] = pair.split('-').map(Number);
+                if (teamId === favorite.id && stage < lowestStageNum) {
                     lowestStageNum = stage;
-                    lowestStageEl = el;
+                    lowestMatch = el;
                 }
-            }
+            });
         });
 
         let scrollTo;
-        if (lowestStageEl) {
-            scrollTo = lowestStageEl;
+        if (lowestMatch) {
+            scrollTo = lowestMatch;
         } else {
             const groupElements = document.querySelectorAll('[data-teams]');
             groupElements.forEach(groupEl => {
diff --git a/js/components/Match.js b/js/components/Match.js
index 55e6df8..104957e 100644
--- a/js/components/Match.js
+++ b/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
diff --git a/js/components/MatchTable.js b/js/components/MatchTable.js
index c8adf57..5fa509a 100644
--- a/js/components/MatchTable.js
+++ b/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}
diff --git a/public/static/css/tournament.css b/public/static/css/tournament.css
index 9031447..4280300 100644
--- a/public/static/css/tournament.css
+++ b/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;
-}
\ No newline at end of file