update

contenido/06.html

@@ -76,7 +76,7 @@
       return shuffled;
     }
 
-    const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
+    // const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
 
     // Crear y mezclar las tarjetas
     function createShuffledCards() {
@@ -96,7 +96,7 @@
                         <div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
                              data-order="${number}"
                              style="cursor:grab;">
-                          <div class='position-relative w-100 nums'><img src="${imgNums[number-1]}" class="img-fluid"></div>
+
                           <div class="card-body bg-verde-claro px-0 py-0">
                             <img src="img/5.${number}b.png" class="img-fluid">
                             </div>
@@ -104,16 +104,28 @@
                     `;
         container.append(cardHtml);
       });
+
+      // Actualizar números después de crear las tarjetas
+      // updateCardNumbers();
     }
 
+    // Actualizar números mostrados según posición actual
+    // function updateCardNumbers() {
+    //   $('#sortable-cards .card-sort').each(function (index) {
+    //     $(this).find('.nums img').attr('src', imgNums[index]);
+    //   });
+    // }
+
     // Verificar si las tarjetas están en orden correcto
     function checkOrder() {
       let correct = true;
       $('#sortable-cards .card-sort').each(function (index) {
         if ($(this).data('order') === index + 1) {
           $(this).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
+          $(this).addClass('locked').css('cursor', 'default');
         } else {
           $(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
+          $(this).removeClass('locked').css('cursor', 'grab');
           correct = false;
         }
       });
@@ -131,7 +143,9 @@
       tolerance: 'pointer',
       helper: "clone",
       cursorAt: { top: 50, left: 50 },
+      cancel: '.locked',
       update: function (event, ui) {
+        // updateCardNumbers();
         if (checkOrder()) {
           $('#sortable-cards').sortable('disable');
           const html = $("#pop0").html();
@@ -164,6 +178,9 @@
         }
       },
       start: function (event, ui) {
+        if (ui.item.hasClass('locked')) {
+          return false;
+        }
         ui.item.addClass('ui-sortable-helper');
         if (ui.position) {
           ui.position.left = 0;