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.

frontend/package-lock.json

@@ -624,9 +624,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
-      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1073,9 +1073,9 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.50",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.50.tgz",
-      "integrity": "sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==",
+      "version": "1.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
+      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1428,19 +1428,19 @@
       "optional": true
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.2.tgz",
-      "integrity": "sha512-iHmwV3QcVGGvSC1BG5bZ4z6iwa1SOpAPWmnjOErd4Ske+lZua5K9TtAVdx0gMBClJ28DViCbSmZitjWZsWO3LA==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
+      "integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rolldown/pluginutils": "1.0.0-beta.50"
+        "@rolldown/pluginutils": "1.0.0-beta.53"
       },
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
         "vue": "^3.2.25"
       }
     },
@@ -2077,9 +2077,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
-      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2089,7 +2089,7 @@
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.1",
+        "@eslint/js": "9.39.2",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",

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);
+            }
         }
     }
 };

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>

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;

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}