feat(match3): Optimierung der L-Form-Match-Erkennung und Anpassung der Tile-Darstellung

- Überarbeitung der Logik zur Erkennung von L-Form-Matches, um die Überprüfung der vertikalen und horizontalen Linien zu verbessern.
- Anpassung der Darstellung von Tiles, um Power-Up-Tiles korrekt zu behandeln und die Benutzeroberfläche zu vereinheitlichen.
- Erweiterung der Debug-Ausgaben zur besseren Nachverfolgbarkeit von L-Form-Matches und deren Längen.

frontend/src/views/minigames/Match3Game.vue

@@ -106,13 +106,7 @@
                      @touchstart="onTileMouseDown($event, index)"
                      @touchend="onTileMouseUp($event, index)"
                      @dblclick="handleDoubleClick(index, $event)">
-                  <span v-if="tile && !isPowerUpTile(tile.type)" class="tile-symbol">{{ getTileSymbol(tile.type) }}</span>
-                  <span v-else-if="tile && isRocketTile(tile.type)" class="rocket-symbol">
-                    🚀
-                  </span>
-                  <span v-else-if="tile && tile.type === 'bomb'" class="bomb-symbol">
-                    💣
-                  </span>
+                  <span v-if="tile" class="tile-symbol">{{ getTileSymbol(tile.type) }}</span>
                 </div>
               </template>
             </div>
@@ -1045,106 +1039,220 @@ export default {
       const matches = [];
       
       // L-Form Matches finden (alle 4 Richtungen) - PRIORITÄT vor regulären Matches
-      for (let row = 0; row < this.boardHeight - 2; row++) {
-        for (let col = 0; col < this.boardWidth - 2; col++) {
+      for (let row = 0; row < this.boardHeight; row++) {
+        for (let col = 0; col < this.boardWidth; col++) {
+          // Prüfe ob an dieser Position ein Tile existiert
+          const centerIndex = this.coordsToIndex(row, col);
+          if (!centerIndex || !board[centerIndex]) continue;
+          
+          const centerType = board[centerIndex].type;
+          if (this.isPowerUpTile(centerType)) continue; // Power-ups können nicht Teil von L-Formen sein
+          
           // L-Form nach rechts unten (┌)
           if (row + 2 < this.boardHeight && col + 2 < this.boardWidth) {
-            const verticalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row + 1, col),
-              this.coordsToIndex(row + 2, col)
-            ];
-            const horizontalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row, col + 1),
-              this.coordsToIndex(row, col + 2)
-            ];
+            // Prüfe vertikale Linie nach unten
+            let verticalLength = 1;
+            for (let r = row + 1; r < this.boardHeight; r++) {
+              const index = this.coordsToIndex(r, col);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                verticalLength++;
+              } else {
+                break;
+              }
+            }
             
-            // Prüfe ob alle Indizes gültig sind und Tiles existieren
-            if (verticalIndices.every(idx => idx !== null && board[idx]) && 
-                horizontalIndices.every(idx => idx !== null && board[idx]) &&
-                this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) &&
-                this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) {
+            // Prüfe horizontale Linie nach rechts
+            let horizontalLength = 1;
+            for (let c = col + 1; c < this.boardWidth; c++) {
+              const index = this.coordsToIndex(row, c);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                horizontalLength++;
+              } else {
+                break;
+              }
+            }
+            
+            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
+            if (verticalLength >= 3 && horizontalLength >= 3) {
+              const lShapeIndices = [];
               
-              const cornerIndex = this.coordsToIndex(row, col);
-              const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])];
-              matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'bottom-right' });
-              if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit 3er vertikal und 3er horizontal`);
+              // Sammle alle Indizes der vertikalen Linie
+              for (let r = row; r < row + verticalLength; r++) {
+                const index = this.coordsToIndex(r, col);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
+              for (let c = col + 1; c < col + horizontalLength; c++) {
+                const index = this.coordsToIndex(row, c);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              matches.push({ 
+                type: 'l-shape', 
+                indices: lShapeIndices, 
+                corner: centerIndex, 
+                direction: 'bottom-right',
+                verticalLength,
+                horizontalLength
+              });
+              if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
             }
           }
           
           // L-Form nach links unten (┐)
           if (row + 2 < this.boardHeight && col >= 2) {
-            const verticalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row + 1, col),
-              this.coordsToIndex(row + 2, col)
-            ];
-            const horizontalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row, col - 1),
-              this.coordsToIndex(row, col - 2)
-            ];
+            // Prüfe vertikale Linie nach unten
+            let verticalLength = 1;
+            for (let r = row + 1; r < this.boardHeight; r++) {
+              const index = this.coordsToIndex(r, col);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                verticalLength++;
+              } else {
+                break;
+              }
+            }
             
-            if (verticalIndices.every(idx => idx !== null && board[idx]) && 
-                horizontalIndices.every(idx => idx !== null && board[idx]) &&
-                this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) &&
-                this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) {
+            // Prüfe horizontale Linie nach links
+            let horizontalLength = 1;
+            for (let c = col - 1; c >= 0; c--) {
+              const index = this.coordsToIndex(row, c);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                horizontalLength++;
+              } else {
+                break;
+              }
+            }
+            
+            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
+            if (verticalLength >= 3 && horizontalLength >= 3) {
+              const lShapeIndices = [];
               
-              const cornerIndex = this.coordsToIndex(row, col);
-              const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])];
-              matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'bottom-left' });
-              if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit 3er vertikal und 3er horizontal`);
+              // Sammle alle Indizes der vertikalen Linie
+              for (let r = row; r < row + verticalLength; r++) {
+                const index = this.coordsToIndex(r, col);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
+              for (let c = col - 1; c >= col - horizontalLength; c--) {
+                const index = this.coordsToIndex(row, c);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              matches.push({ 
+                type: 'l-shape', 
+                indices: lShapeIndices, 
+                corner: centerIndex, 
+                direction: 'bottom-left',
+                verticalLength,
+                horizontalLength
+              });
+              if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
             }
           }
           
           // L-Form nach rechts oben (└)
           if (row >= 2 && col + 2 < this.boardWidth) {
-            const verticalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row - 1, col),
-              this.coordsToIndex(row - 2, col)
-            ];
-            const horizontalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row, col + 1),
-              this.coordsToIndex(row, col + 2)
-            ];
+            // Prüfe vertikale Linie nach oben
+            let verticalLength = 1;
+            for (let r = row - 1; r >= 0; r--) {
+              const index = this.coordsToIndex(r, col);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                verticalLength++;
+              } else {
+                break;
+              }
+            }
             
-            if (verticalIndices.every(idx => idx !== null && board[idx]) && 
-                horizontalIndices.every(idx => idx !== null && board[idx]) &&
-                this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) &&
-                this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) {
+            // Prüfe horizontale Linie nach rechts
+            let horizontalLength = 1;
+            for (let c = col + 1; c < this.boardWidth; c++) {
+              const index = this.coordsToIndex(row, c);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                horizontalLength++;
+              } else {
+                break;
+              }
+            }
+            
+            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
+            if (verticalLength >= 3 && horizontalLength >= 3) {
+              const lShapeIndices = [];
               
-              const cornerIndex = this.coordsToIndex(row, col);
-              const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])];
-              matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'top-right' });
-              if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit 3er vertikal und 3er horizontal`);
+              // Sammle alle Indizes der vertikalen Linie
+              for (let r = row; r >= row - verticalLength; r--) {
+                const index = this.coordsToIndex(r, col);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
+              for (let c = col + 1; c < col + horizontalLength; c++) {
+                const index = this.coordsToIndex(row, c);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              matches.push({ 
+                type: 'l-shape', 
+                indices: lShapeIndices, 
+                corner: centerIndex, 
+                direction: 'top-right',
+                verticalLength,
+                horizontalLength
+              });
+              if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
             }
           }
           
           // L-Form nach links oben (┘)
           if (row >= 2 && col >= 2) {
-            const verticalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row - 1, col),
-              this.coordsToIndex(row - 2, col)
-            ];
-            const horizontalIndices = [
-              this.coordsToIndex(row, col),
-              this.coordsToIndex(row, col - 1),
-              this.coordsToIndex(row, col - 2)
-            ];
+            // Prüfe vertikale Linie nach oben
+            let verticalLength = 1;
+            for (let r = row - 1; r >= 0; r--) {
+              const index = this.coordsToIndex(r, col);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                verticalLength++;
+              } else {
+                break;
+              }
+            }
             
-            if (verticalIndices.every(idx => idx !== null && board[idx]) && 
-                horizontalIndices.every(idx => idx !== null && board[idx]) &&
-                this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) &&
-                this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) {
+            // Prüfe horizontale Linie nach links
+            let horizontalLength = 1;
+            for (let c = col - 1; c >= 0; c--) {
+              const index = this.coordsToIndex(row, c);
+              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
+                horizontalLength++;
+              } else {
+                break;
+              }
+            }
+            
+            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
+            if (verticalLength >= 3 && horizontalLength >= 3) {
+              const lShapeIndices = [];
               
-              const cornerIndex = this.coordsToIndex(row, col);
-              const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])];
-              matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'top-left' });
-              if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit 3er vertikal und 3er horizontal`);
+              // Sammle alle Indizes der vertikalen Linie
+              for (let r = row; r >= row - verticalLength; r--) {
+                const index = this.coordsToIndex(r, col);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
+              for (let c = col - 1; c >= col - horizontalLength; c--) {
+                const index = this.coordsToIndex(row, c);
+                if (index) lShapeIndices.push(index);
+              }
+              
+              matches.push({ 
+                type: 'l-shape', 
+                indices: lShapeIndices, 
+                corner: centerIndex, 
+                direction: 'top-left',
+                verticalLength,
+                horizontalLength
+              });
+              if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
             }
           }
         }
@@ -1278,8 +1386,6 @@ export default {
         }
       }
       
-
-      
       if (showDebug) {
         console.log(`🔍 Gefundene Matches: ${matches.length}`, matches);
       }