Add basic scroll to favorite behaviour

js/components/FavoriteBar.js

@@ -31,6 +31,15 @@ export function FavoriteBar({ teams }) {
         }
     };
 
+    const scrollToFavorite = () => {
+        if (favorite) {
+            const el = document.getElementById(`favorite-team-groupstage-${favorite.id}`);
+            if (el) {
+                el.scrollIntoView({behavior: 'smooth', block: 'end'});
+            }
+        }
+    };
+
     if (isLoading) {
         return <div>Loading...</div>;
     }
@@ -38,11 +47,16 @@ export function FavoriteBar({ teams }) {
     return (
         <div>
             <div style={{display: 'flex', alignItems: 'center'}}>
-                <h2 style={{ marginRight: '10px' }}>Favorit:</h2>
+                <h2>Favorit:</h2>
-                <p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
+                <p>{favorite ? favorite.name : ''}</p>
                 <Button onClick={() => setIsVisible(!isVisible)}>
                     <FontAwesomeIcon icon={faHeartCirclePlus}/>
                 </Button>
+                {favorite && (
+                    <Button onClick={scrollToFavorite}>
+                        Jump to Favorite Team's Last Game
+                    </Button>
+                )}
             </div>
             {isVisible && (
                 <div className="favorite-bar">
@@ -56,7 +70,7 @@ export function FavoriteBar({ teams }) {
                                     />
                                 </Button>
                                 <span>
-                                    {team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
+                                    {team.name}
                                 </span>
                             </div>
                         ))}

js/components/GroupStage.js

@@ -94,11 +94,14 @@ function GroupScoresTable(props) {
 
 
 function GroupScoresTableRow(props) {
-    return (<tr>
+    const teamId = `favorite-team-groupstage-${props.score.team.id}`;
+    return (
+        <tr id={teamId}>
             <td>{props.score.position}</td>
             <td>{props.score.team.name}</td>
             <td>{props.score.group_points}</td>
             <td>{props.score.difference_in_points}</td>
             <td>{props.score.scored_points}</td>
-    </tr>);
+        </tr>
+    );
 }