@srsergio/taptapp-ar 1.0.0

package/src/astro/overlays/ErrorOverlay.astro

@@ -0,0 +1,40 @@
+<div id="error-overlay" class="custom-overlay hidden bg-gradient-to-br from-red-700 to-purple-700">
+  <div class="mb-5 text-5xl">⚠️</div>
+  <div class="font-semibold tracking-wide text-white/95 text-xl">No se pudo iniciar</div>
+  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
+    Verifique los permisos de cámara o intente con otro dispositivo
+  </div>
+  <button
+    onclick="location.reload()"
+    class="mt-6 rounded-lg bg-blue-500 px-6 py-2.5 font-semibold text-white transition-all hover:bg-blue-600 hover:shadow-lg"
+  >
+    Reintentar
+  </button>
+</div>
+
+<style>
+  #error-overlay {
+    background: linear-gradient(135deg, #c0392b, #8e44ad);
+  }
+
+  .error-icon {
+    font-size: 50px;
+    margin-bottom: 20px;
+  }
+
+  .retry-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .retry-button:hover {
+    background-color: #2980b9;
+  }
+</style>

package/src/astro/overlays/LoadingOverlay.astro

@@ -0,0 +1,28 @@
+<div id="loading-overlay" class="custom-overlay bg-gradient-to-br from-gray-800 to-gray-900">
+  <div class="loader"></div>
+  <div class="mt-5 font-semibold tracking-wide text-white/95 text-xl">Preparando...</div>
+  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
+    Un momento mientras optimizamos su experiencia
+  </div>
+</div>
+
+<style>
+  .loader {
+    width: 60px;
+    height: 60px;
+    border: 5px solid rgba(255, 255, 255, 0.2);
+    border-top: 5px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/src/astro/overlays/ScanningOverlay.astro

@@ -0,0 +1,119 @@
+---
+interface Props {
+  targetImage?: string;
+}
+
+const { targetImage } = Astro.props;
+---
+
+<div
+  id="scanning-overlay"
+  class="custom-overlay relative flex flex-col items-center justify-center"
+>
+  <div class="scan-region relative mb-8 h-[300px] w-[300px] overflow-hidden">
+    <!-- Esquinas del recuadro de escaneo -->
+    <div class="corner top-left"></div>
+    <div class="corner top-right"></div>
+    <div class="corner bottom-left"></div>
+    <div class="corner bottom-right"></div>
+
+    <div class="absolute inset-0 p-6">
+      <img id="target-preview" src={targetImage} class="h-full w-full object-contain opacity-90" />
+    </div>
+
+    <div class="scan-animation"></div>
+  </div>
+
+  <div class="font-semibold tracking-wide text-white/95 text-2xl">Escaneando...</div>
+  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
+    Centre el sticker dentro del marco
+  </div>
+</div>
+
+<style>
+  .scan-region img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.7;
+  }
+
+  .scan-animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(
+      90deg,
+      rgba(52, 152, 219, 0),
+      rgba(52, 152, 219, 0.8),
+      rgba(155, 89, 182, 0.8),
+      rgba(52, 152, 219, 0)
+    );
+    box-shadow:
+      0 0 10px rgba(52, 152, 219, 0.7),
+      0 0 20px rgba(155, 89, 182, 0.4);
+    animation: scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes scan {
+    0% {
+      transform: translateY(0);
+      opacity: 0.8;
+    }
+    15% {
+      opacity: 1;
+    }
+    50% {
+      transform: translateY(298px);
+      opacity: 1;
+    }
+    85% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0.8;
+    }
+  }
+
+  /* Estilos para las esquinas */
+  .corner {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border-color: white;
+    border-style: solid;
+    opacity: 0.7;
+    z-index: 1;
+  }
+
+  .top-left {
+    top: 6px;
+    left: 6px;
+    border-width: 2px 0 0 2px;
+    border-top-left-radius: 6px;
+  }
+
+  .top-right {
+    top: 6px;
+    right: 6px;
+    border-width: 2px 2px 0 0;
+    border-top-right-radius: 6px;
+  }
+
+  .bottom-left {
+    bottom: 6px;
+    left: 6px;
+    border-width: 0 0 2px 2px;
+    border-bottom-left-radius: 6px;
+  }
+
+  .bottom-right {
+    bottom: 6px;
+    right: 6px;
+    border-width: 0 2px 2px 0;
+    border-bottom-right-radius: 6px;
+  }
+</style>

package/src/astro/scripts/ARScripts.astro

@@ -0,0 +1,118 @@
+<script is:inline>
+  // Lógica mejorada para reproducción de video
+  let started = false;
+  let playing = false;
+
+  window.addEventListener("click", async function () {
+    try {
+      let video = document.querySelector("#ar-video");
+      let avideo = document.querySelector("a-video");
+
+      if (!video || !avideo) {
+        console.error("Elementos de video no encontrados");
+        return;
+      }
+
+      if (!started) {
+        await video.play();
+        avideo.setAttribute("opacity", 1);
+        started = true;
+        playing = true;
+      } else {
+        if (playing) {
+          video.pause();
+          playing = false;
+        } else {
+          await video.play();
+          playing = true;
+        }
+      }
+    } catch (error) {
+      console.error("Error en la reproducción del video:", error);
+    }
+  });
+</script>
+
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", function () {
+    const scene = document.querySelector("a-scene");
+    const errorOverlay = document.getElementById("error-overlay");
+    const scanningOverlay = document.getElementById("scanning-overlay");
+    const videoEl = document.querySelector("#ar-video");
+    const mainVideo = document.querySelector("#main-video");
+    const targetImage = document.querySelector("#target-image");
+
+    if (!scene || !errorOverlay || !scanningOverlay || !videoEl || !mainVideo || !targetImage) {
+      console.error("Elementos críticos no encontrados");
+      if (errorOverlay) errorOverlay.classList.remove("hidden");
+      return;
+    }
+
+    // Verificación de recursos
+    targetImage.addEventListener("error", () => {
+      console.error("Error al cargar la imagen objetivo");
+      errorOverlay.classList.remove("hidden");
+    });
+
+    videoEl.addEventListener("error", () => {
+      console.error("Error al cargar el video");
+      errorOverlay.classList.remove("hidden");
+    });
+
+    // Gestión mejorada de errores AR
+    scene.addEventListener("arError", (event) => {
+      console.error("Error AR:", event);
+      errorOverlay.classList.remove("hidden");
+    });
+
+    // Verificar si MindAR está disponible
+    if (!window.MINDAR || !window.MINDAR.IMAGE) {
+      console.error("MindAR no está disponible");
+      errorOverlay.classList.remove("hidden");
+      return;
+    }
+
+    // Manejo de eventos de target
+    const targetEntity = document.querySelector("a-entity[mindar-image-target]");
+
+    targetEntity.addEventListener("targetFound", () => {
+      console.log("¡Objetivo encontrado!");
+      scanningOverlay.classList.add("hidden");
+
+      // Hacer visible el video
+      mainVideo.setAttribute("opacity", "1");
+
+      // Intentar reproducir
+      videoEl.play().catch((err) => {
+        console.error("Error reproduciendo video:", err);
+      });
+    });
+
+    targetEntity.addEventListener("targetLost", () => {
+      console.log("Objetivo perdido");
+      scanningOverlay.classList.remove("hidden");
+      mainVideo.setAttribute("opacity", "0");
+    });
+
+    // Función para aplicar estilos adaptativos
+    function applyVideoStyles() {
+      // Estilos del elemento video HTML
+      if (videoEl) {
+        videoEl.style.width = "100%";
+        videoEl.style.height = "100%";
+        videoEl.style.objectFit = "contain";
+      }
+    }
+
+    // Aplicar estilos al inicio y cuando cambie la orientación
+    applyVideoStyles();
+    window.addEventListener("resize", applyVideoStyles);
+
+    // Manejar toques para dispositivos móviles
+    document.addEventListener("touchstart", () => {
+      if (videoEl.paused && mainVideo.getAttribute("opacity") === "1") {
+        videoEl.play().catch((e) => console.log("Error en touchstart:", e));
+      }
+    });
+  });
+</script>

package/src/astro/styles/ARStyles.astro

@@ -0,0 +1,147 @@
+<style is:global>
+  /* Estilos globales básicos de A-Frame */
+  .a-enter-vr,
+  .a-enter-vr-button {
+    display: none !important;
+  }
+
+  body,
+  a-scene {
+    background-color: transparent !important;
+    font-family: "Montserrat", sans-serif;
+  }
+
+  .a-canvas {
+    background-color: transparent !important;
+    width: 100% !important;
+    height: 100% !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+  }
+
+  /* Clase base compartida para overlays */
+  .custom-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    color: white;
+    text-align: center;
+    transition: opacity 0.5s ease;
+  }
+
+  .custom-overlay.hidden {
+    display: none;
+  }
+
+  /* Texto compartido */
+  .status-text {
+    font-size: 18px;
+    font-weight: 600;
+    margin-top: 20px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .instruction-text {
+    font-size: 14px;
+    max-width: 80%;
+    margin-top: 10px;
+    opacity: 0.8;
+  }
+
+  /* Estilos para las pantallas de UI personalizadas */
+  .custom-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0);
+    color: white;
+    text-align: center;
+    transition: opacity 0.5s ease;
+  }
+
+  .custom-overlay.hidden {
+    display: none;
+  }
+
+  /* Pantalla de carga */
+  #loading-overlay {
+    background: linear-gradient(135deg, #2c3e50, #1a1a2e);
+  }
+
+  .loader {
+    width: 60px;
+    height: 60px;
+    border: 5px solid rgba(255, 255, 255, 0.2);
+    border-top: 5px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Pantalla de error */
+  #error-overlay {
+    background: linear-gradient(135deg, #c0392b, #8e44ad);
+  }
+
+  .error-icon {
+    font-size: 50px;
+    margin-bottom: 20px;
+  }
+
+  /* Pantalla de escaneo */
+  #scanning-overlay {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  /* Botón para reintentar */
+  .retry-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .retry-button:hover {
+    background-color: #2980b9;
+  }
+
+  video {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+</style>