From e94a12cd208e225725a7ef36e663ba060e0ce6fa Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 21 Dec 2025 11:38:26 +0100
Subject: [PATCH] feat(tournament): enhance match interaction and navigation

- Refactored match highlighting logic in TournamentGroupsTab to use a dedicated handleMatchClick method for better readability and functionality.
- Added a new event emission for navigating to match results in TournamentResultsTab, allowing users to seamlessly transition to the results view.
- Implemented styling for match states in TournamentResultsTab to visually distinguish between finished, live, and active matches, improving user experience.
---
 .../tournament/TournamentGroupsTab.vue        | 21 ++++++--
 .../tournament/TournamentResultsTab.vue       | 53 +++++++++++++++++++
 frontend/src/views/TournamentTab.vue          | 20 +++++++
 3 files changed, 91 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tournament/TournamentGroupsTab.vue b/frontend/src/components/tournament/TournamentGroupsTab.vue
index c521b10..8f71735 100644
--- a/frontend/src/components/tournament/TournamentGroupsTab.vue
+++ b/frontend/src/components/tournament/TournamentGroupsTab.vue
@@ -104,7 +104,7 @@
                                     <td v-for="(opponent, oppIdx) in groupRankings[group.groupId]" 
                                         :key="`match-${pl.id}-${opponent.id}`"
                                         :class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`), 'diagonal-cell': idx === oppIdx }]"
-                                        @click="idx !== oppIdx ? $emit('highlight-match', pl.id, opponent.id, group.groupId) : null">
+                                        @click="idx !== oppIdx ? handleMatchClick(pl.id, opponent.id, group.groupId) : null">
                                         <span v-if="idx === oppIdx" class="diagonal"></span>
                                         <span v-else-if="getMatchLiveResult(pl.id, opponent.id, group.groupId)" 
                                               :class="getMatchCellClasses(pl.id, opponent.id, group.groupId)">
@@ -207,8 +207,9 @@ export default {
         'randomize-groups',
         'reset-groups',
         'reset-matches',
-    'create-matches',
-        'highlight-match'
+        'create-matches',
+        'highlight-match',
+        'go-to-match'
     ],
     computed: {
         filteredGroupMatches() {
@@ -384,6 +385,20 @@ export default {
             
             const position = liveStats.findIndex(p => p.id === playerId) + 1;
             return position || groupPlayers.findIndex(p => p.id === playerId) + 1;
+        },
+        handleMatchClick(player1Id, player2Id, groupId) {
+            // Highlight das Match
+            this.$emit('highlight-match', player1Id, player2Id, groupId);
+            // Finde das Match und gehe zum Ergebnistab
+            const match = this.matches.find(m => 
+                m.round === 'group' && 
+                m.groupId === groupId &&
+                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
+                 (m.player1.id === player2Id && m.player2.id === player1Id))
+            );
+            if (match) {
+                this.$emit('go-to-match', match.id);
+            }
         }
     }
 };
diff --git a/frontend/src/components/tournament/TournamentResultsTab.vue b/frontend/src/components/tournament/TournamentResultsTab.vue
index 224a524..fa1337f 100644
--- a/frontend/src/components/tournament/TournamentResultsTab.vue
+++ b/frontend/src/components/tournament/TournamentResultsTab.vue
@@ -506,3 +506,56 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+/* Farbmarkierungen für Spiele */
+.match-finished {
+    background-color: #e9ecef !important;
+}
+
+.match-finished td {
+    color: #626262 !important;
+}
+
+.match-live {
+    background-color: #d4edda !important;
+}
+
+.match-live:not(.match-finished) td {
+    color: #155724 !important;
+}
+
+.match-finished.match-live {
+    background-color: #e9ecef !important;
+}
+
+.match-finished.match-live td {
+    color: #626262 !important;
+}
+
+/* Aktives Match hervorheben - auch wenn es abgeschlossen ist */
+.active-match {
+    background-color: #fff3cd !important;
+    border-left: 3px solid #ffc107 !important;
+}
+
+.active-match.match-finished {
+    background-color: #fff3cd !important;
+}
+
+.active-match.match-finished td {
+    color: #856404 !important;
+}
+
+.active-match.match-live {
+    background-color: #fff3cd !important;
+}
+
+.active-match.match-live td {
+    color: #856404 !important;
+}
+
+.active-match:hover {
+    background-color: #ffe69c !important;
+}
+</style>
diff --git a/frontend/src/views/TournamentTab.vue b/frontend/src/views/TournamentTab.vue
index c14f182..17703a4 100644
--- a/frontend/src/views/TournamentTab.vue
+++ b/frontend/src/views/TournamentTab.vue
@@ -177,6 +177,7 @@
                 @reset-matches="resetMatches()"
                 @create-matches="createMatches()"
                 @highlight-match="highlightMatch"
+                @go-to-match="goToMatch"
             />
 
             <!-- Tab: Ergebnisse -->
@@ -2231,6 +2232,25 @@ export default {
                 el.classList.remove('match-highlight');
             });
         },
+        
+        goToMatch(matchId) {
+            // Wechsle zum Ergebnistab
+            this.setActiveTab('results');
+            // Setze activeMatchId für Hervorhebung
+            this.activeMatchId = matchId;
+            // Scrolle zum Match nach einem kurzen Delay, damit der Tab geladen ist
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    const matchElement = document.querySelector(`tr[data-match-id="${matchId}"]`);
+                    if (matchElement) {
+                        matchElement.scrollIntoView({ 
+                            behavior: 'smooth', 
+                            block: 'center' 
+                        });
+                    }
+                }, 100);
+            });
+        },
 
         async updateParticipantSeeded(participant, event) {
             const seeded = event.target.checked;