diff --git a/js/components/FavoriteBar.js b/js/components/FavoriteBar.js index 92e2817..dc09e88 100644 --- a/js/components/FavoriteBar.js +++ b/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)} > - + {favorite && ( )} diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js index 1135e15..10487a2 100644 --- a/js/components/GroupStage.js +++ b/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 ( - - + +

Gruppe {this.state.number} @@ -118,16 +124,16 @@ function GroupScoresTable(props) { return ( - - - - - - - + + + + + + + - {props.scores.map(groupScore => )} + {props.scores.map(groupScore => )}
#TeamPkt.Dif.Gew.
#TeamPkt.Dif.Gew.
); diff --git a/public/static/css/tournament.css b/public/static/css/tournament.css index b145445..66dbbc0 100644 --- a/public/static/css/tournament.css +++ b/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; } \ No newline at end of file