function Footer({ href }) { return /*#__PURE__*/ React.createElement("footer", { className: "flex flex-col items-center justify-center w-full p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-white text-xs md:text-base mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Designed by Jackeline Torres on Create"), /*#__PURE__*/ React.createElement("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-[48px] h-[48px] bg-[#0A66C2] rounded-[12px] hover:bg-[#004182] transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 text-white font-bold text-2xl flex items-center justify-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "in"))); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { href: "https://www.linkedin.com/in/jackelinetorres/", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameStarted, setGameStarted] = React.useState(false); const [photos, setPhotos] = React.useState([]); const [tiles, setTiles] = React.useState([]); const [flippedTiles, setFlippedTiles] = React.useState([]); const [matchedTiles, setMatchedTiles] = React.useState([]); const [score, setScore] = React.useState(0); const [attempts, setAttempts] = React.useState(0); const [isSpanish, setIsSpanish] = React.useState(true); const [webcamFlipped, setWebcamFlipped] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); const [gameWon, setGameWon] = React.useState(false); const [showWebcam, setShowWebcam] = React.useState(false); const webcamRef = React.useRef(null); const translations = { title: { en: "Memory-ando", es: "Memory-ando" }, salute: { en: "Take some pictures and play memory in your own way ;)", es: "Toma algunas fotos y juega memoria a tu manera ;)" }, steps: { en: 'Steps\n1. Tap "Take Pics"\n2. Take 6 photos of fun things around you\n3. Use your memory and find the matching pairs!', es: 'Pasos\n1. Toca "Tomar Fotos"\n2. Toma 6 fotos de cosas divertidas a tu alrededor\n3. Usa tu memoria y encuentra las parejas!' }, takePics: { en: "Take Pics", es: "Tomar Fotos" }, startGame: { en: "Start Game", es: "Iniciar Juego" }, translate: { en: "Translate", es: "Traducir" }, ready: { en: "Ready", es: "Listo" }, congratulations: { en: "Congratulations!\n\nDid you know that playing memory games for 15 min a day can improve your cognitive ability? Your memory got a tad better today! 😊", es: "¡Felicidades!\n\n¿Sabías que jugar juegos de memoria durante 15 minutos al día puede mejorar tu capacidad cognitiva? ¡Tu memoria mejoró un poco hoy! 😊" }, restartGame: { en: "Restart Game", es: "Reiniciar Juego" }, photosNeeded: { en: "Taken:", es: "Capturas:" }, smile: { en: "Smile! 😁", es: "¡Sonríe! 😁" }, changeLanguages: { en: "-> Change languages if needed!", es: "-> ¡Cambia de idioma si lo necesitas!" } }; const t = (key)=>translations[key][isSpanish ? "es" : "en"]; React.useEffect(()=>{ if (webcamRef.current && showWebcam) { navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ webcamRef.current.srcObject = stream; }).catch((err)=>console.error("Error accessing webcam:", err)); } }, [ showWebcam ]); const takePhoto = ()=>{ if (webcamRef.current && photos.length < 6) { const canvas = document.createElement("canvas"); canvas.width = webcamRef.current.videoWidth; canvas.height = webcamRef.current.videoHeight; canvas.getContext("2d").drawImage(webcamRef.current, 0, 0); const photoData = canvas.toDataURL("image/jpeg"); setPhotos((prev)=>[ ...prev, photoData ]); setShowTooltip(true); setTimeout(()=>setShowTooltip(false), 2000); } }; const startGame = ()=>{ if (photos.length === 6) { const duplicatedPhotos = [ ...photos, ...photos ]; const shuffledPhotos = duplicatedPhotos.sort(()=>Math.random() - 0.5); setTiles(shuffledPhotos.map((photo, index)=>({ id: index, photo }))); setGameStarted(true); setScore(0); setAttempts(0); setFlippedTiles([]); setMatchedTiles([]); setGameWon(false); setShowWebcam(false); } }; const restartGame = ()=>{ setGameStarted(false); setPhotos([]); setTiles([]); setFlippedTiles([]); setMatchedTiles([]); setScore(0); setAttempts(0); setShowTooltip(false); setGameWon(false); setShowWebcam(false); }; const flipTile = (id)=>{ if (flippedTiles.length === 1 && flippedTiles[0] === id) return; if (flippedTiles.length === 2 || matchedTiles.includes(id)) return; setFlippedTiles((prev)=>[ ...prev, id ]); setAttempts((prev)=>prev + 1); if (flippedTiles.length === 1) { const [firstTileId] = flippedTiles; const firstTile = tiles.find((tile)=>tile.id === firstTileId); const secondTile = tiles.find((tile)=>tile.id === id); if (firstTile.photo === secondTile.photo) { setMatchedTiles((prev)=>[ ...prev, firstTileId, id ]); setScore((prev)=>prev + 1); if (score + 1 === tiles.length / 2) { setGameWon(true); } } setTimeout(()=>{ setFlippedTiles([]); }, 1000); } }; const flipWebcam = ()=>{ setWebcamFlipped((prev)=>!prev); if (webcamRef.current && webcamRef.current.srcObject) { const tracks = webcamRef.current.srcObject.getTracks(); tracks.forEach((track)=>track.stop()); } navigator.mediaDevices.getUserMedia({ video: { facingMode: webcamFlipped ? "user" : "environment" } }).then((stream)=>{ webcamRef.current.srcObject = stream; }).catch((err)=>console.error("Error flipping webcam:", err)); }; const getButtonText = ()=>{ if (!gameStarted && photos.length < 6) return t("takePics"); if (photos.length === 6) return t("startGame"); return t("startGame"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#681B75] p-4 w-full mx-auto font-roboto", __source: { fileName: "", lineNumber: 144, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#F3C60E] mb-7", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, t("title")), !showWebcam && !gameStarted && /*#__PURE__*/ React.createElement("div", { className: "text-white mb-7 max-w-md", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-center mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, t("salute")), /*#__PURE__*/ React.createElement("p", { className: "text-lg whitespace-pre-line leading-relaxed", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, t("steps")), /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-4", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, t("changeLanguages"))), !gameStarted && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center mb-8 space-x-4", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (!gameStarted && photos.length < 6) { setShowWebcam(true); } else if (photos.length === 6) { startGame(); } }, className: `px-6 py-3 text-white font-bold rounded-full transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 ${photos.length === 6 ? "bg-green-600 hover:bg-green-700" : "bg-blue-600 hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, getButtonText()), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsSpanish(!isSpanish), className: "px-6 py-3 text-white font-bold rounded-full transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 border-2 border-white border-opacity-20", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, t("translate"), " ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-language", __source: { fileName: "", lineNumber: 178, columnNumber: 30 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center w-full", __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }, showWebcam && /*#__PURE__*/ React.createElement("div", { className: "relative mb-8 md:mr-8", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center mb-2", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, t("smile")), /*#__PURE__*/ React.createElement("video", { ref: webcamRef, autoPlay: true, playsInline: true, muted: true, className: "w-64 h-64 rounded-full object-cover border-2 border-gray-300", style: { transform: webcamFlipped ? "scaleX(-1)" : "none" }, __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this })), gameStarted && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-4 gap-2 mb-8", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, tiles.map((tile)=>/*#__PURE__*/ React.createElement("div", { key: tile.id, onClick: ()=>flipTile(tile.id), className: `w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 rounded-lg border-2 border-white cursor-pointer overflow-hidden ${matchedTiles.includes(tile.id) ? "border-green-500" : ""} ${!flippedTiles.includes(tile.id) && !matchedTiles.includes(tile.id) ? "bg-white bg-opacity-20" : ""}`, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, (flippedTiles.includes(tile.id) || matchedTiles.includes(tile.id)) && /*#__PURE__*/ React.createElement("img", { src: tile.photo, alt: "Memory tile featuring a captured scene", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }))))), showWebcam && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-24 right-4 z-10 flex flex-col items-center", __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: flipWebcam, className: "w-[60px] h-[60px] bg-[#F3C60E] text-gray-800 rounded-full flex items-center justify-center mb-2 hover:bg-[#D3A60E] transition-colors duration-300", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }))), showWebcam && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 z-10 flex flex-col items-center", __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: takePhoto, className: "w-[60px] h-[60px] bg-[#F3C60E] text-gray-800 rounded-full flex items-center justify-center mb-2 hover:bg-[#D3A60E] transition-colors duration-300", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this })), showTooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute -left-32 top-1/2 transform -translate-y-1/2 bg-green-500 text-white px-2 py-1 rounded font-bold", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, photos.length === 6 ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, t("ready")) : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, t("photosNeeded"), " ", photos.length))), gameStarted && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-white", __source: { fileName: "", lineNumber: 261, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, "Score: ", score, " | Attempts: ", Math.floor(attempts / 2))), gameWon && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8 rounded-lg bg-white", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-[#26C10E] mb-4", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, t("congratulations").split("\n\n")[0]), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#1146B0]", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, t("congratulations").split("\n\n")[1]))), gameStarted && /*#__PURE__*/ React.createElement("button", { onClick: restartGame, className: "px-6 py-3 bg-red-600 text-white font-bold rounded-full hover:bg-red-700 transition-colors duration-300 mt-4", __source: { fileName: "", lineNumber: 282, columnNumber: 9 }, __self: this }, t("restartGame")), /*#__PURE__*/ React.createElement(Footer, { href: "https://www.linkedin.com/in/jackelinetorres/", __source: { fileName: "", lineNumber: 290, columnNumber: 7 }, __self: this })); }