44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { motion } from "framer-motion"
|
|
import { GatoMascota } from "./gato-mascota"
|
|
|
|
interface AudioUnlockProps {
|
|
onUnlock: () => void
|
|
}
|
|
|
|
export default function AudioUnlock({ onUnlock }: AudioUnlockProps) {
|
|
const [pressed, setPressed] = useState(false)
|
|
|
|
const handleUnlock = () => {
|
|
if (typeof window !== "undefined") {
|
|
const AudioCtx = window.AudioContext || (window as any).webkitAudioContext
|
|
if (AudioCtx) {
|
|
const ctx = new AudioCtx()
|
|
ctx.resume().then(() => {
|
|
ctx.close()
|
|
})
|
|
}
|
|
}
|
|
setPressed(true)
|
|
setTimeout(onUnlock, 600)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-dvh bg-background flex flex-col items-center justify-center p-8 gap-8">
|
|
<GatoMascota mood="happy" message="¡Hola! Tocá la pantalla para empezar" size="lg" />
|
|
|
|
<motion.button
|
|
onClick={handleUnlock}
|
|
disabled={pressed}
|
|
className="bg-primary text-primary-foreground touch-target-lg rounded-full text-2xl px-12 py-6 font-display font-bold shadow-lg"
|
|
whileTap={{ scale: 0.95 }}
|
|
animate={pressed ? { scale: 1.1, opacity: 0 } : {}}
|
|
>
|
|
{pressed ? "¡Empezamos!" : "TOCÁ ACÁ"}
|
|
</motion.button>
|
|
</div>
|
|
)
|
|
}
|