Update index.html

index.html

@@ -51,7 +51,6 @@
             transition: transform 0.2s, box-shadow 0.2s;
             touch-action: none;
             user-select: none;
-            position: relative;
         }
         .member-card:active { cursor: grabbing; transform: scale(0.98); }
         .member-card:hover {
@@ -59,58 +58,6 @@
             border-color: #3b82f6;
         }
 
-        /* iPhone-style drag handle (челка) */
-        .drag-handle {
-            position: absolute;
-            top: 8px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 36px;
-            height: 5px;
-            background: rgba(255, 255, 255, 0.5);
-            border-radius: 2.5px;
-            z-index: 10;
-            cursor: grab;
-            display: none; /* Hidden by default on desktop */
-        }
-        
-        /* Show drag handle on mobile and when hovering */
-        @media (max-width: 768px) {
-            .drag-handle {
-                display: block;
-            }
-        }
-        .member-card:hover .drag-handle {
-            display: block;
-            background: rgba(255, 255, 255, 0.7);
-        }
-        .member-card.dragging .drag-handle {
-            display: block;
-            background: #3b82f6;
-        }
-
-        /* Mobile drag ghost with челка */
-        .drag-ghost {
-            position: fixed;
-            width: 140px;
-            height: 187px;
-            background: rgba(30, 41, 59, 0.95);
-            border: 2px solid #3b82f6;
-            border-radius: 16px;
-            z-index: 9999;
-            pointer-events: none;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            overflow: hidden;
-            transform: translate(-50%, -50%);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-        }
-        .drag-ghost .drag-handle {
-            display: block;
-            background: #3b82f6;
-        }
-
         /* Spinner */
         .spinner {
             border: 3px solid rgba(255,255,255,0.3);
@@ -129,14 +76,6 @@
         @media (max-width: 768px) {
             .roster-slot { min-width: 100px; }
             #playersContainer { grid-template-columns: repeat(2, 1fr); }
-            .drag-ghost {
-                width: 120px;
-                height: 160px;
-            }
-            .drag-handle {
-                width: 32px;
-                height: 4px;
-            }
         }
 
         /* Share modal */
@@ -285,15 +224,6 @@
         </div>
     </div>
 
-    <!-- DRAG GHOST FOR MOBILE (with челка) -->
-    <div id="dragGhost" class="drag-ghost hidden">
-        <div class="drag-handle"></div>
-        <div class="relative z-10 text-center w-full bg-gradient-to-t from-black via-black/80 to-transparent pt-6 pb-2 px-1">
-            <div id="ghostRole" class="text-[9px] font-bold uppercase tracking-widest text-cyan-400 mb-0.5"></div>
-            <div id="ghostName" class="text-xs font-bold text-white truncate w-full leading-tight shadow-black drop-shadow-md"></div>
-        </div>
-    </div>
-
     <!-- SHARE MODAL -->
     <div id="shareModal" class="share-modal">
         <div class="share-content">
@@ -347,16 +277,11 @@
         window.teamsCache = {};
         window.isSharedMode = false;
         
-        // Drag & Drop variables
-        let isDragging = false;
-        let dragData = null;
-        let currentDragCard = null;
-        let draggedFromSlot = null;
-        let touchStartTime = 0;
+        // Touch drag & drop variables
+        let touchDragData = null;
         let touchStartX = 0;
         let touchStartY = 0;
-        let isEditMode = false;
-        let longPressTimer = null;
+        let touchStartTime = 0;
 
         // Check if we're in shared mode (has teamId in URL)
         const urlParams = new URLSearchParams(window.location.search);
@@ -420,22 +345,6 @@
 
         // --- TOUCH DRAG & DROP (Mobile Support) ---
         window.touchStart = function(event) {
-            const target = event.target;
-            
-            // If clicking on drag handle, start drag immediately
-            if (target.classList.contains('drag-handle') || target.closest('.drag-handle')) {
-                const card = target.closest('.member-card');
-                if (card) {
-                    event.preventDefault();
-                    const touch = event.touches[0];
-                    touchStartX = touch.clientX;
-                    touchStartY = touch.clientY;
-                    touchStartTime = Date.now();
-                    startDragFromTouch(card, touch.clientX, touch.clientY);
-                }
-                return;
-            }
-            
             touchStartX = event.touches[0].clientX;
             touchStartY = event.touches[0].clientY;
             touchStartTime = Date.now();
@@ -457,58 +366,16 @@
             const timeDiff = touchEndTime - touchStartTime;
             
             // If it's a tap (small movement, short time) and we have drag data, drop it
-            if (distX < 10 && distY < 10 && timeDiff < 500 && dragData) {
+            if (distX < 10 && distY < 10 && timeDiff < 500 && touchDragData) {
                 const slot = event.target.closest('.roster-slot');
                 if (slot) {
-                    handleDrop(slot, dragData);
-                    dragData = null;
-                    isDragging = false;
-                    if (currentDragCard) {
-                        currentDragCard.classList.remove('dragging');
-                        currentDragCard = null;
-                    }
+                    handleDrop(slot, touchDragData);
+                    touchDragData = null;
                 }
             }
             event.preventDefault();
         }
 
-        // Start drag from touch
-        function startDragFromTouch(card, clientX, clientY) {
-            const name = card.querySelector('.name-in').value;
-            const role = card.querySelector('.role-in').value;
-            
-            if (!name) { 
-                showNotif("Please enter player name first", "error");
-                return; 
-            }
-            
-            // Get Image from data-url or src
-            const imgObj = card.querySelector('.member-img');
-            let img = '';
-            if (imgObj.getAttribute('data-url')) {
-                img = imgObj.getAttribute('data-url');
-            } else if (imgObj.src && imgObj.src !== window.location.href && !imgObj.src.startsWith('data:')) {
-                img = imgObj.src;
-            }
-            
-            const id = card.getAttribute('data-id') || 'temp_' + Date.now();
-            
-            dragData = { id, name, role, img };
-            currentDragCard = card;
-            isDragging = true;
-            
-            // Check if dragging from a slot
-            const slot = card.closest('.roster-slot');
-            if (slot) {
-                draggedFromSlot = slot;
-            }
-            
-            // Show ghost for mobile
-            showDragGhost(name, role, img, clientX, clientY);
-            
-            card.classList.add('dragging');
-        }
-
         // --- DRAG & DROP LOGIC (Desktop & Mobile) ---
         const ROLE_LIMITS = { 'coach': 1, 'striker': 2, 'keeper': 1, 'sweeper': 1, 'libero': 1, 'guide': 1 };
 
@@ -547,9 +414,7 @@
             ev.dataTransfer.setData("text/plain", payload);
             
             // For mobile touch
-            dragData = { id, name, role, img };
-            currentDragCard = card;
-            card.classList.add('dragging');
+            touchDragData = { id, name, role, img };
         }
 
         window.drop = function(ev) {
@@ -587,71 +452,6 @@
             renderSlot(slot, data);
         }
 
-        // Show drag ghost
-        function showDragGhost(name, role, img, x, y) {
-            const ghost = document.getElementById('dragGhost');
-            document.getElementById('ghostName').textContent = name;
-            document.getElementById('ghostRole').textContent = role;
-            
-            if (img) {
-                ghost.style.backgroundImage = `url('${img}')`;
-                ghost.style.backgroundSize = 'cover';
-                ghost.style.backgroundPosition = 'center';
-            } else {
-                ghost.style.background = 'rgba(30, 41, 59, 0.95)';
-            }
-            
-            ghost.style.left = x + 'px';
-            ghost.style.top = y + 'px';
-            ghost.classList.remove('hidden');
-        }
-
-        // Update ghost position on touch move
-        document.addEventListener('touchmove', function(event) {
-            if (isDragging && dragData) {
-                event.preventDefault();
-                const touch = event.touches[0];
-                const ghost = document.getElementById('dragGhost');
-                ghost.style.left = touch.clientX + 'px';
-                ghost.style.top = touch.clientY + 'px';
-                
-                // Check if over a slot
-                const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
-                const slot = elements.find(el => el.classList.contains('roster-slot'));
-                
-                // Remove drag-over from all slots
-                document.querySelectorAll('.roster-slot.drag-over').forEach(s => {
-                    s.classList.remove('drag-over');
-                });
-                
-                // Add drag-over to current slot
-                if (slot) {
-                    slot.classList.add('drag-over');
-                }
-            }
-        }, { passive: false });
-
-        // Hide ghost on touch end
-        document.addEventListener('touchend', function(event) {
-            if (isDragging) {
-                const ghost = document.getElementById('dragGhost');
-                ghost.classList.add('hidden');
-                
-                // Remove drag-over from all slots
-                document.querySelectorAll('.roster-slot.drag-over').forEach(s => {
-                    s.classList.remove('drag-over');
-                });
-                
-                if (currentDragCard) {
-                    currentDragCard.classList.remove('dragging');
-                }
-                
-                isDragging = false;
-                dragData = null;
-                currentDragCard = null;
-            }
-        });
-
         // --- RENDER SLOT ---
         function renderSlot(slot, data) {
             slot.setAttribute('data-player-id', data.id);
@@ -922,13 +722,10 @@
 
             const html = `
             <div id="row-${uid}" draggable="true" ondragstart="drag(event)" 
-                 ontouchstart="touchStart(event)"
+                 ontouchstart="drag(event)"
                  class="member-card aspect-[3/4] bg-slate-800 border border-slate-700 rounded-xl flex flex-col relative group overflow-hidden" 
                  data-id="${pid}">
                 
-                <!-- iPhone-style drag handle (челка) -->
-                <div class="drag-handle"></div>
-                
                 <button onclick="document.getElementById('row-${uid}').remove()" 
                     class="absolute top-2 right-2 z-20 bg-black/60 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity">
                     ✕
@@ -986,4 +783,4 @@
         });
     </script>
 </body>
-</html>
+</html>