Rotafilio_Vantive/contenido/08.html

<style>
  .fake {
    background-image: url(img/bg04.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .hr-style {
    opacity: 1;
    width: 85%;
  }

  .custom-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 1280px; /* Esto limita el ancho total */
    margin: 0 auto;
    width: 100%;
  }

  .card-container {
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
  }

  .card-container.disabled {
    filter: grayscale(1);
    pointer-events: none;
  }

</style>
<div class='page-sco py-2 py-md-4 h-100'>
  <div class='container h-100'>
    <div class='row justify-content-center align-items-center h-100'>
      <div class='col-12'>
        <div class='row justify-content-center'>
          <div class="col-10 mb-2">
            <h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?</h2>
            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
          </div>
          <div class="col-10 px-0 mb-1">
            <div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
              <div class="d-flex justify-content-center align-items-center flex-row">
                <img src="img/08.0.png" class="img-fluid mx-3">
                <p class="mb-0"><strong>Instrucciones:</strong> Da clic en las tarjetas para encontrar los pares y descubrir los elementos necesarios para llevar a cabo la DPCA.</p>
              </div>
            </div>
          </div>
          <div class="col-12">
            <di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
              <div class="row-questions custom-grid" id="row-questions">
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.1.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.2.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.3.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.4.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.5.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.6.png" class="img-fluid">
                  </div>
                </div>
              </div>
              <div class="row-answer custom-grid" id="row-answer">
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.1c.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.2c.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.3c.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.4c.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.5c.png" class="img-fluid">
                  </div>
                </div>
                <div class="card-container">
                  <div class="front">
                    <img src="img/08.front.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/08.6c.png" class="img-fluid">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="d-none">
  <div id="retro-pop">
    <div class="container-fluid">
      <div class=" w-100 text-center">
        <img src="img/3.5.png" class="img-fluid">
      </div>
      <div class="row justify-content-center">
        <div class="col-12 text-center mb-2">
          <h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
        </div>
        <div class="col-12 text-center">
          <p class="mb-0">Has concluido la actividad.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.wrap-course-content').addClass('fake');
    const flip_sound = CourseNav.createSound('audio/flip.mp3');
    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');

    // Función para asignar pares a cada tarjeta
    function assignPairs(fatherId) {
      const optionsContainer = document.getElementById(fatherId);
      const optionsArray = Array.from(optionsContainer.children);
      optionsArray.forEach((option, index) => {
        option.setAttribute('data-par', index);
      });
    }

    // Función para mezclar las tarjetas dentro del contenedor especificado
    function randomizeOptions(fatherId) {
      const optionsContainer = document.getElementById(fatherId);
      const optionsArray = Array.from(optionsContainer.children);
      const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
      shuffledOptions.forEach(option => optionsContainer.appendChild(option));
    }

    // Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
    function initializeFlip() {
      let flippedCards = [];
      let lastFlippedRow = ""; // Para rastrear la última fila girada

      $(".card-container").flip({
        trigger: 'manual' // Control manual del volteo
      });

      $(".card-container").on("click", function () {
        const $card = $(this);
        const currentRow = $card.closest(".row-answer").length > 0 ? "row-answer" : "row-questions";

        // Limitar el giro a una carta por fila y evitar tres giros
        if (flippedCards.length < 2 && (flippedCards.length === 0 || currentRow !== lastFlippedRow)) {
          $card.flip(true);
          flippedCards.push($card);
          lastFlippedRow = currentRow;
          flip_sound.play();
          // Si hay dos cartas volteadas, verificar coincidencia
          if (flippedCards.length === 2) {
            const [firstCard, secondCard] = flippedCards;

            if (firstCard.data("par") === secondCard.data("par")) {
              // Las tarjetas coinciden, dejarlas volteadas y marcar como emparejadas
              firstCard.addClass("disabled");
              secondCard.addClass("disabled");
              // Agregar el efecto de resplandor
              gsap.to(firstCard, {
                duration: 1,
                boxShadow: "0px 0px 20px 10px #fff",
                onComplete: function () {
                  // Quitar el efecto de resplandor después de 2 segundos
                  gsap.to(firstCard, {
                    duration: 1,
                    delay: 1,
                    boxShadow: "0px 0px 0px 0px #fff"
                  });
                }
              });
              // Agregar el efecto de resplandor
              gsap.to(secondCard, {
                duration: 1,
                boxShadow: "0px 0px 20px 10px #fff",
                onComplete: function () {
                  // Quitar el efecto de resplandor después de 2 segundos
                  gsap.to(secondCard, {
                    duration: 1,
                    delay: 1,
                    boxShadow: "0px 0px 0px 0px #fff"
                  });
                }
              });
              CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
              flippedCards = [];
              checkGameCompletion();
            } else {
              CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
              // Las tarjetas no coinciden, voltearlas de nuevo después de un breve retraso
              setTimeout(() => {
                firstCard.flip(false);
                secondCard.flip(false);
                flippedCards = [];
                lastFlippedRow = ""; // Reiniciar el rastreo de fila
              }, 850);
            }
          }
        }
      });
    }

    // Verificar si todas las tarjetas han sido emparejadas
    function checkGameCompletion() {
      const totalPairs = $(".card-container").length / 2;
      const matchedPairs = $(".card-container.disabled").length / 2;

      if (matchedPairs === totalPairs) {
        setTimeout(showFeedbackPopup, 250);
      }
    }

    function showFeedbackPopup() {
      const html = $("#retro-pop").html();
      Swal.fire({
        html: html,
        target: document.getElementById('wrap-course-content'),
        customClass: {
          popup: 'pop_html_style border border-3 border-primary rounded-4',
          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
        },
        confirmButtonText: "Cerrar",
        showConfirmButton: true,
        allowOutsideClick: false,
        allowEscapeKey: false,
        backdrop: "rgba(65, 60, 60, .95)",
        width: "35em",
        didClose: () => {
          CourseNav.setSlideVisited();
        }
      });
    }

    assignPairs('row-answer');
    assignPairs('row-questions');
    randomizeOptions('row-answer');
    randomizeOptions('row-questions');
    initializeFlip();
  });
</script>