@arolariu/components/dist/cjs/components/ui/scratcher.cjs.map

🎨 60+ 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! ⚡

{"version":3,"file":"components\\ui\\scratcher.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/scratcher.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { motion, useAnimation } from \"motion/react\";\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\n\r\ninterface ScratcherProps {\r\n  children: React.ReactNode;\r\n  width: number;\r\n  height: number;\r\n  minScratchPercentage?: number;\r\n  className?: string;\r\n  onComplete?: () => void;\r\n  gradientColors?: [string, string, string];\r\n}\r\n\r\nexport const Scratcher: React.FC<ScratcherProps> = ({\r\n  width,\r\n  height,\r\n  minScratchPercentage = 50,\r\n  onComplete,\r\n  children,\r\n  className,\r\n  gradientColors = [\"#A97CF8\", \"#F38CB8\", \"#FDCC92\"],\r\n}) => {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const [isScratching, setIsScratching] = useState(false);\r\n  const [isComplete, setIsComplete] = useState(false);\r\n\r\n  const controls = useAnimation();\r\n\r\n  useEffect(() => {\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      ctx.fillStyle = \"#ccc\";\r\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n      const gradient = ctx.createLinearGradient(\r\n        0,\r\n        0,\r\n        canvas.width,\r\n        canvas.height,\r\n      );\r\n      gradient.addColorStop(0, gradientColors[0]);\r\n      gradient.addColorStop(0.5, gradientColors[1]);\r\n      gradient.addColorStop(1, gradientColors[2]);\r\n      ctx.fillStyle = gradient;\r\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n    }\r\n  }, [gradientColors]);\r\n\r\n  useEffect(() => {\r\n    const handleDocumentMouseMove = (event: MouseEvent) => {\r\n      if (!isScratching) return;\r\n      scratch(event.clientX, event.clientY);\r\n    };\r\n\r\n    const handleDocumentTouchMove = (event: TouchEvent) => {\r\n      if (!isScratching) return;\r\n      const touch = event.touches[0];\r\n      scratch(touch.clientX, touch.clientY);\r\n    };\r\n\r\n    const handleDocumentMouseUp = () => {\r\n      setIsScratching(false);\r\n      checkCompletion();\r\n    };\r\n\r\n    const handleDocumentTouchEnd = () => {\r\n      setIsScratching(false);\r\n      checkCompletion();\r\n    };\r\n\r\n    document.addEventListener(\"mousedown\", handleDocumentMouseMove);\r\n    document.addEventListener(\"mousemove\", handleDocumentMouseMove);\r\n    document.addEventListener(\"touchstart\", handleDocumentTouchMove);\r\n    document.addEventListener(\"touchmove\", handleDocumentTouchMove);\r\n    document.addEventListener(\"mouseup\", handleDocumentMouseUp);\r\n    document.addEventListener(\"touchend\", handleDocumentTouchEnd);\r\n    document.addEventListener(\"touchcancel\", handleDocumentTouchEnd);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", handleDocumentMouseMove);\r\n      document.removeEventListener(\"mousemove\", handleDocumentMouseMove);\r\n      document.removeEventListener(\"touchstart\", handleDocumentTouchMove);\r\n      document.removeEventListener(\"touchmove\", handleDocumentTouchMove);\r\n      document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\r\n      document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\r\n      document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd);\r\n    };\r\n  }, [isScratching]);\r\n\r\n  const handleMouseDown = () => setIsScratching(true);\r\n\r\n  const handleTouchStart = () => setIsScratching(true);\r\n\r\n  const scratch = (clientX: number, clientY: number) => {\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      const rect = canvas.getBoundingClientRect();\r\n      const x = clientX - rect.left + 16;\r\n      const y = clientY - rect.top + 16;\r\n      ctx.globalCompositeOperation = \"destination-out\";\r\n      ctx.beginPath();\r\n      ctx.arc(x, y, 30, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    }\r\n  };\r\n\r\n  const startAnimation = async () => {\r\n    await controls.start({\r\n      scale: [1, 1.5, 1],\r\n      rotate: [0, 10, -10, 10, -10, 0],\r\n      transition: { duration: 0.5 },\r\n    });\r\n\r\n    // Call onComplete after animation finishes\r\n    if (onComplete) {\r\n      onComplete();\r\n    }\r\n  };\r\n\r\n  const checkCompletion = () => {\r\n    if (isComplete) return;\r\n\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\r\n      const pixels = imageData.data;\r\n      const totalPixels = pixels.length / 4;\r\n      let clearPixels = 0;\r\n\r\n      for (let i = 3; i < pixels.length; i += 4) {\r\n        if (pixels[i] === 0) clearPixels++;\r\n      }\r\n\r\n      const percentage = (clearPixels / totalPixels) * 100;\r\n\r\n      if (percentage >= minScratchPercentage) {\r\n        setIsComplete(true);\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        startAnimation();\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <motion.div\r\n      className={cn(\"relative select-none\", className)}\r\n      style={{\r\n        width,\r\n        height,\r\n        cursor:\r\n          \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\r\n      }}\r\n      animate={controls}\r\n    >\r\n      <canvas\r\n        ref={canvasRef}\r\n        width={width}\r\n        height={height}\r\n        className=\"absolute left-0 top-0\"\r\n        onMouseDown={handleMouseDown}\r\n        onTouchStart={handleTouchStart}\r\n      ></canvas>\r\n      {children}\r\n    </motion.div>\r\n  );\r\n};\r\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","Scratcher","width","height","minScratchPercentage","onComplete","children","className","gradientColors","canvasRef","useRef","isScratching","setIsScratching","useState","isComplete","setIsComplete","controls","useAnimation","useEffect","canvas","ctx","gradient","handleDocumentMouseMove","event","scratch","handleDocumentTouchMove","touch","handleDocumentMouseUp","checkCompletion","handleDocumentTouchEnd","document","handleMouseDown","handleTouchStart","clientX","clientY","rect","x","y","Math","startAnimation","imageData","pixels","totalPixels","clearPixels","i","percentage","motion","cn"],"mappings":"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"}