@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
145 lines (144 loc) • 6.29 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, children, className, gradientColors = [
"#A97CF8",
"#F38CB8",
"#FDCC92"
] })=>{
const canvasRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
const [isScratching, setIsScratching] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const [isComplete, setIsComplete] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const controls = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useAnimation)();
(0, __WEBPACK_EXTERNAL_MODULE_react__.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
]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
const handleDocumentMouseMove = (event)=>{
if (!isScratching) return;
scratch(event.clientX, event.clientY);
};
const handleDocumentTouchMove = (event)=>{
if (!isScratching) return;
const touch = event.touches[0];
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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative select-none", className),
style: {
width,
height,
cursor: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"
},
animate: controls,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("canvas", {
ref: canvasRef,
width: width,
height: height,
className: "absolute left-0 top-0",
onMouseDown: handleMouseDown,
onTouchStart: handleTouchStart
}),
children
]
});
};
export { Scratcher };
//# sourceMappingURL=scratcher.js.map