@arolariu/components/dist/components/ui/scratcher.js

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utilities.js";
import { motion, useAnimation } from "motion/react";
import { useEffect, useRef, useState } from "react";
const defaultGradientColors = [
    "#A97CF8",
    "#F38CB8",
    "#FDCC92"
];
const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, children, className, gradientColors = defaultGradientColors })=>{
    const canvasRef = useRef(null);
    const [isScratching, setIsScratching] = useState(false);
    const [isComplete, setIsComplete] = useState(false);
    const controls = useAnimation();
    useEffect(()=>{
        const canvas = canvasRef.current;
        const ctx = canvas?.getContext("2d");
        if (canvas && ctx) {
            ctx.fillStyle = "#ccc";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, gradientColors[0]);
            gradient.addColorStop(0.5, gradientColors[1]);
            gradient.addColorStop(1, gradientColors[2]);
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
    }, [
        gradientColors
    ]);
    useEffect(()=>{
        const handleDocumentMouseMove = (event)=>{
            if (!isScratching) return;
            scratch(event.clientX, event.clientY);
        };
        const handleDocumentTouchMove = (event)=>{
            if (!isScratching) return;
            const [touch] = event.touches;
            if (!touch) return;
            scratch(touch.clientX, touch.clientY);
        };
        const handleDocumentMouseUp = ()=>{
            setIsScratching(false);
            checkCompletion();
        };
        const handleDocumentTouchEnd = ()=>{
            setIsScratching(false);
            checkCompletion();
        };
        document.addEventListener("mousedown", handleDocumentMouseMove);
        document.addEventListener("mousemove", handleDocumentMouseMove);
        document.addEventListener("touchstart", handleDocumentTouchMove);
        document.addEventListener("touchmove", handleDocumentTouchMove);
        document.addEventListener("mouseup", handleDocumentMouseUp);
        document.addEventListener("touchend", handleDocumentTouchEnd);
        document.addEventListener("touchcancel", handleDocumentTouchEnd);
        return ()=>{
            document.removeEventListener("mousedown", handleDocumentMouseMove);
            document.removeEventListener("mousemove", handleDocumentMouseMove);
            document.removeEventListener("touchstart", handleDocumentTouchMove);
            document.removeEventListener("touchmove", handleDocumentTouchMove);
            document.removeEventListener("mouseup", handleDocumentMouseUp);
            document.removeEventListener("touchend", handleDocumentTouchEnd);
            document.removeEventListener("touchcancel", handleDocumentTouchEnd);
        };
    }, [
        isScratching
    ]);
    const handleMouseDown = ()=>setIsScratching(true);
    const handleTouchStart = ()=>setIsScratching(true);
    const scratch = (clientX, clientY)=>{
        const canvas = canvasRef.current;
        const ctx = canvas?.getContext("2d");
        if (canvas && ctx) {
            const rect = canvas.getBoundingClientRect();
            const x = clientX - rect.left + 16;
            const y = clientY - rect.top + 16;
            ctx.globalCompositeOperation = "destination-out";
            ctx.beginPath();
            ctx.arc(x, y, 30, 0, 2 * Math.PI);
            ctx.fill();
        }
    };
    const startAnimation = async ()=>{
        await controls.start({
            scale: [
                1,
                1.5,
                1
            ],
            rotate: [
                0,
                10,
                -10,
                10,
                -10,
                0
            ],
            transition: {
                duration: 0.5
            }
        });
        if (onComplete) onComplete();
    };
    const checkCompletion = ()=>{
        if (isComplete) return;
        const canvas = canvasRef.current;
        const ctx = canvas?.getContext("2d");
        if (canvas && ctx) {
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const pixels = imageData.data;
            const totalPixels = pixels.length / 4;
            let clearPixels = 0;
            for(let i = 3; i < pixels.length; i += 4)if (0 === pixels[i]) clearPixels++;
            const percentage = clearPixels / totalPixels * 100;
            if (percentage >= minScratchPercentage) {
                setIsComplete(true);
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                startAnimation();
            }
        }
    };
    return /*#__PURE__*/ jsxs(motion.div, {
        className: cn("relative select-none", className),
        style: {
            width,
            height,
            cursor: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"
        },
        animate: controls,
        children: [
            /*#__PURE__*/ jsx("canvas", {
                ref: canvasRef,
                width: width,
                height: height,
                className: "absolute top-0 left-0",
                onMouseDown: handleMouseDown,
                onTouchStart: handleTouchStart
            }),
            children
        ]
    });
};
export { Scratcher };

//# sourceMappingURL=scratcher.js.map