Update app.py

app.py

@@ -23,45 +23,60 @@ def render_board():
     html_content = f"""
         <style>
             #chess-board {{
-                user-select: none;
                 position: relative;
                 width: 400px;
                 margin: auto;
             }}
-            .dragging {{
-                opacity: 0.8;
-                cursor: grabbing !important;
+            #chess-board svg {{
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+            }}
+            #chess-board svg * {{
+                pointer-events: auto;
             }}
             .piece {{
                 cursor: grab;
+                pointer-events: auto;
+            }}
+            .piece.dragging {{
+                cursor: grabbing;
             }}
             .square {{
-                cursor: pointer;
+                pointer-events: auto;
             }}
             .highlight {{
-                fill: yellow;
-                opacity: 0.5;
+                fill: rgba(255, 255, 0, 0.3);
+            }}
+            .possible-move {{
+                fill: rgba(0, 255, 0, 0.3);
             }}
-            .last-move {{
-                fill: #aaf;
-                opacity: 0.5;
+            .ghost-piece {{
+                opacity: 0.3;
+                pointer-events: none;
             }}
         </style>
         
         <div id="chess-board">
             {board_svg}
+            <div id="drag-layer" style="position: absolute; top: 0; left: 0; pointer-events: none;"></div>
         </div>
 
         <script>
             (function() {{
                 const board = document.querySelector('#chess-board');
-                let draggedPiece = null;
+                const svg = board.querySelector('svg');
+                const dragLayer = document.getElementById('drag-layer');
+                let selectedPiece = null;
+                let ghostPiece = null;
                 let startSquare = null;
+                let currentSquare = null;
                 let isDragging = false;
-                let dragStartX = 0;
-                let dragStartY = 0;
-                let originalTransform = null;
-                
+                let offset = {{ x: 0, y: 0 }};
+
                 // Convertir les coordonnées en notation algébrique
                 function getSquareFromCoords(x, y) {{
                     const boardRect = board.getBoundingClientRect();
@@ -74,46 +89,55 @@ def render_board():
                     return null;
                 }}
 
-                // Déplacer la pièce
-                function movePiece(piece, x, y) {{
-                    const deltaX = x - dragStartX;
-                    const deltaY = y - dragStartY;
-                    piece.style.transform = `translate(${{deltaX}}px, ${{deltaY}}px)`;
+                // Créer une copie fantôme de la pièce pour le glissement
+                function createGhostPiece(piece) {{
+                    const clone = piece.cloneNode(true);
+                    clone.classList.add('ghost-piece');
+                    return clone;
                 }}
 
-                // Début du glissement
-                board.addEventListener('mousedown', function(e) {{
+                // Mettre à jour la position du fantôme
+                function updateGhostPosition(x, y) {{
+                    if (ghostPiece) {{
+                        ghostPiece.style.transform = `translate(${{x - offset.x}}px, ${{y - offset.y}}px)`;
+                    }}
+                }}
+
+                // Gérer le début du glissement
+                svg.addEventListener('mousedown', function(e) {{
                     const piece = e.target.closest('.piece');
                     if (piece && piece.classList.contains('white')) {{
-                        isDragging = true;
-                        draggedPiece = piece;
-                        dragStartX = e.clientX;
-                        dragStartY = e.clientY;
-                        startSquare = getSquareFromCoords(e.clientX, e.clientY);
-                        originalTransform = window.getComputedStyle(piece).transform;
-                        
-                        piece.classList.add('dragging');
                         e.preventDefault();
+                        selectedPiece = piece;
+                        const rect = piece.getBoundingClientRect();
+                        offset.x = e.clientX - rect.left;
+                        offset.y = e.clientY - rect.top;
+                        
+                        // Créer et positionner le fantôme
+                        ghostPiece = createGhostPiece(piece);
+                        dragLayer.appendChild(ghostPiece);
+                        updateGhostPosition(e.clientX, e.clientY);
+                        
+                        startSquare = getSquareFromCoords(e.clientX, e.clientY);
+                        isDragging = true;
+                        selectedPiece.classList.add('dragging');
                     }}
                 }});
 
-                // Glissement
+                // Gérer le glissement
                 document.addEventListener('mousemove', function(e) {{
-                    if (isDragging && draggedPiece) {{
-                        movePiece(draggedPiece, e.clientX, e.clientY);
+                    if (isDragging && ghostPiece) {{
+                        e.preventDefault();
+                        updateGhostPosition(e.clientX, e.clientY);
+                        currentSquare = getSquareFromCoords(e.clientX, e.clientY);
                     }}
                 }});
 
-                // Fin du glissement
+                // Gérer la fin du glissement
                 document.addEventListener('mouseup', function(e) {{
-                    if (isDragging && draggedPiece) {{
+                    if (isDragging && selectedPiece) {{
                         const endSquare = getSquareFromCoords(e.clientX, e.clientY);
                         
-                        // Réinitialiser la position de la pièce
-                        draggedPiece.style.transform = originalTransform;
-                        draggedPiece.classList.remove('dragging');
-                        
-                        // Envoyer le coup si valide
                         if (startSquare && endSquare && startSquare !== endSquare) {{
                             window.parent.postMessage({{
                                 type: 'chess_move',
@@ -122,9 +146,14 @@ def render_board():
                             }}, '*');
                         }}
                         
+                        // Nettoyer
+                        if (ghostPiece) {{
+                            dragLayer.removeChild(ghostPiece);
+                            ghostPiece = null;
+                        }}
+                        selectedPiece.classList.remove('dragging');
+                        selectedPiece = null;
                         isDragging = false;
-                        draggedPiece = null;
-                        startSquare = null;
                     }}
                 }});
             }})();