From 416a4fbc86e18496eee025b57286276342bb758b Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Fri, 14 Mar 2025 22:13:28 +0100
Subject: [PATCH] Add basic scroll to favorite behaviour

---
 js/components/FavoriteBar.js | 44 ++++++++++++++++++++++++------------
 js/components/GroupStage.js  | 17 ++++++++------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/js/components/FavoriteBar.js b/js/components/FavoriteBar.js
index f2f50d3..e0cd9c8 100644
--- a/js/components/FavoriteBar.js
+++ b/js/components/FavoriteBar.js
@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons';
-import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons';
-import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons';
+import React, {useState, useEffect} from 'react';
+import {Button} from 'reactstrap';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons';
+import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons';
+import {faHeartCirclePlus} from '@fortawesome/free-solid-svg-icons';
 
-export function FavoriteBar({ teams }) {
+export function FavoriteBar({teams}) {
     const [favorite, setFavorite] = useState(null);
     const [isVisible, setIsVisible] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
@@ -31,32 +31,46 @@ 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>;
     }
 
     return (
         <div>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-                <h2 style={{ marginRight: '10px' }}>Favorit:</h2>
-                <p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
+            <div style={{display: 'flex', alignItems: 'center'}}>
+                <h2>Favorit:</h2>
+                <p>{favorite ? favorite.name : ''}</p>
                 <Button onClick={() => setIsVisible(!isVisible)}>
-                    <FontAwesomeIcon icon={faHeartCirclePlus} />
+                    <FontAwesomeIcon icon={faHeartCirclePlus}/>
                 </Button>
+                {favorite && (
+                    <Button onClick={scrollToFavorite}>
+                        Jump to Favorite Team's Last Game
+                    </Button>
+                )}
             </div>
             {isVisible && (
                 <div className="favorite-bar">
                     <h3>All Teams</h3>
                     <div>
                         {teams.map(team => (
-                            <div key={team.id} style={{ display: 'flex', alignItems: 'center' }}>
-                                <Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}>
+                            <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
+                                <Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
                                     <FontAwesomeIcon
                                         icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
                                     />
                                 </Button>
                                 <span>
-                                    {team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
+                                    {team.name}
                                 </span>
                             </div>
                         ))}
@@ -65,4 +79,4 @@ export function FavoriteBar({ teams }) {
             )}
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js
index 17b45ed..6cc4f19 100644
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@@ -94,11 +94,14 @@ function GroupScoresTable(props) {
 
 
 function GroupScoresTableRow(props) {
-    return (<tr>
-        <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>);
+    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>
+    );
 }