Soltär: Touch Support

solitaire/index.html

@@ -175,6 +175,19 @@
             transform: translateY(-5px);
         }
 
+        /* Touch-spezifische Styles */
+        @media (hover: none) {
+            .card:hover {
+                transform: none;
+            }
+            
+            .tableau:empty:hover,
+            .stock:empty:hover {
+                border-color: rgba(255, 255, 255, 0.3);
+                background: none;
+            }
+        }
+
         .foundation {
             border: 2px dashed rgba(255, 255, 255, 0.3);
         }
@@ -383,6 +396,12 @@
         const values = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'];
         let deck = [];
 
+        // Touch-Variablen
+        let touchStartX = 0;
+        let touchStartY = 0;
+        let isDragging = false;
+        let touchedCard = null;
+
         // Spielfunktionen
         function createDeck() {
             deck = [];
@@ -467,6 +486,10 @@
                 cardElement.style.backgroundImage = `url('cards/${card.value}_${card.suit}.png')`;
             }
 
+            // Touch-Events hinzufügen
+            cardElement.addEventListener('touchstart', handleTouchStart, { passive: false });
+            cardElement.addEventListener('touchmove', handleTouchMove, { passive: false });
+            cardElement.addEventListener('touchend', handleTouchEnd);
             cardElement.addEventListener('click', handleCardClick);
             return cardElement;
         }
@@ -769,6 +792,13 @@
                     }
                 });
             });
+
+            // Touch-Support für Stock-Stapel
+            const stock = document.querySelector('.stock');
+            stock.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                handleStockClick();
+            });
         }
 
         function handleStockClick() {
@@ -832,6 +862,85 @@
             document.getElementById('invalidMoveModal').classList.remove('show');
         }
 
+        function handleTouchStart(e) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            touchStartX = touch.clientX;
+            touchStartY = touch.clientY;
+            touchedCard = e.target.closest('.card');
+
+            if (touchedCard && !touchedCard.classList.contains('face-down')) {
+                if (!gameStarted) {
+                    startGame();
+                }
+                selectCard(touchedCard);
+                isDragging = true;
+            }
+        }
+
+        function handleTouchMove(e) {
+            if (!isDragging || !touchedCard) return;
+            e.preventDefault();
+
+            const touch = e.touches[0];
+            const deltaX = touch.clientX - touchStartX;
+            const deltaY = touch.clientY - touchStartY;
+
+            touchedCard.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+            touchedCard.style.zIndex = '1000';
+        }
+
+        function handleTouchEnd(e) {
+            if (!isDragging || !touchedCard) return;
+
+            const touch = e.changedTouches[0];
+            const endX = touch.clientX;
+            const endY = touch.clientY;
+
+            // Finde das Element unter dem Finger
+            const elemBelow = document.elementFromPoint(endX, endY);
+            const targetStack = elemBelow ? elemBelow.closest('.card-stack') : null;
+            const targetCard = elemBelow ? elemBelow.closest('.card') : null;
+
+            touchedCard.style.transform = '';
+            touchedCard.style.zIndex = '';
+
+            if (targetStack) {
+                if (targetCard && targetCard !== touchedCard) {
+                    tryMoveCard(targetCard);
+                } else if (!targetCard && targetStack.classList.contains('tableau')) {
+                    tryMoveCard(null);
+                } else if (targetStack.classList.contains('foundation')) {
+                    const cards = targetStack.children;
+                    if (cards.length === 0) {
+                        if (touchedCard.dataset.value === '1') {
+                            moveCard(touchedCard, targetStack);
+                            moves++;
+                            updateScore(10);
+                        } else {
+                            showInvalidMove();
+                        }
+                    } else {
+                        const topCard = cards[cards.length - 1];
+                        if (isValidMove(touchedCard, topCard)) {
+                            moveCard(touchedCard, targetStack);
+                            moves++;
+                            updateScore(10);
+                        } else {
+                            showInvalidMove();
+                        }
+                    }
+                }
+            }
+
+            isDragging = false;
+            touchedCard = null;
+            if (selectedCard) {
+                selectedCard.classList.remove('selected');
+                selectedCard = null;
+            }
+        }
+
         // Spiel initialisieren
         newGame();
         showRules(); // Zeige Spielregeln beim Start