function MainComponent({ onImageChange, pixelSize, onPixelSizeChange, previewImage, originalImage }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "image-upload", accept: "image/jpeg, image/png, image/bmp, image/webp", onChange: onImageChange, className: "mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", name: "pixel-size", min: "1", max: "50", value: pixelSize, onChange: onPixelSizeChange, className: "w-full mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex w-full space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-[480px] overflow-hidden", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: originalImage, alt: "Original Image", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-[480px] overflow-hidden", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: previewImage, alt: "Pixel Art Preview", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const [imageFile, setImageFile] = React.useState(null); const [pixelSize, setPixelSize] = React.useState(10); const [previewImage, setPreviewImage] = React.useState(null); const [originalImage, setOriginalImage] = React.useState(null); const handleImageChange = (event)=>{ const file = event.target.files[0]; setImageFile(file); const reader = new FileReader(); reader.onload = (e)=>{ setOriginalImage(e.target.result); setPreviewImage(e.target.result); pixelateImage(e.target.result, pixelSize); }; reader.readAsDataURL(file); }; const handlePixelSizeChange = (event)=>{ setPixelSize(event.target.value); if (originalImage) { pixelateImage(originalImage, event.target.value); } }; const pixelateImage = (imageData, size)=>{ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = imageData; image.onload = ()=>{ const pixelSize = Math.max(1, parseInt(size)); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, canvas.width, canvas.height); for(let y = 0; y < canvas.height; y += pixelSize){ for(let x = 0; x < canvas.width; x += pixelSize){ const pixelData = ctx.getImageData(x, y, pixelSize, pixelSize); const rgba = averageColor(pixelData); ctx.fillStyle = `rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`; ctx.fillRect(x, y, pixelSize, pixelSize); } } const pixelatedImageUrl = canvas.toDataURL(); setPreviewImage(pixelatedImageUrl); }; }; const averageColor = (data)=>{ const buffer = data.data; let r = 0, g = 0, b = 0; const count = buffer.length / 4; for(let i = 0; i < buffer.length; i += 4){ r += buffer[i]; g += buffer[i + 1]; b += buffer[i + 2]; } r = Math.round(r / count); g = Math.round(g / count); b = Math.round(b / count); // Convert to nearest 8-bit game color r = Math.round(r / 32) * 32; g = Math.round(g / 32) * 32; b = Math.round(b / 32) * 32; return [ r, g, b ]; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onImageChange: handleImageChange, pixelSize: pixelSize, onPixelSizeChange: handlePixelSizeChange, previewImage: previewImage, originalImage: originalImage, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); }