import React, { useState, useEffect, useRef } from 'react'; const PALETTE_PRESETS = { 'custom': { name: 'Custom', colors: [ '#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#800080' ] }, 'gameboy': { name: 'Game Boy', colors: [ '#0f380f', '#306230', '#8bac0f', '#9bbc0f' ] }, 'nes': { name: 'NES', colors: [ '#000000', '#fcfcfc', '#f8f8f8', '#bcbcbc', '#7c7c7c', '#a4e4fc', '#3cbcfc', '#0078f8', '#0000fc', '#b8b8f8', '#6888fc', '#944428', '#f83800', '#f87858', '#fca044', '#f8b800' ] }, 'cga': { name: 'CGA', colors: [ '#000000', '#ffffff', '#55ffff', '#ff55ff', '#ff5555', '#55ff55', '#5555ff', '#ffff55' ] }, 'zxspectrum': { name: 'ZX Spectrum', colors: [ '#000000', '#0000d8', '#d80000', '#d800d8', '#00d800', '#00d8d8', '#d8d800', '#d8d8d8' ] }, 'c64': { name: 'Commodore 64', colors: [ '#000000', '#ffffff', '#68372b', '#70a4b2', '#6f3d86', '#588d43', '#352879', '#b8c76f', '#6f4f25', '#433900', '#9a6759', '#444444', '#6c6c6c', '#9ad284', '#6c5eb5', '#959595' ] } }; const COLORS = PALETTE_PRESETS.custom.colors; const CANVAS_SIZES = [ { label: '16×16', width: 16, height: 16, pixelSize: 24 }, { label: '32×32', width: 32, height: 32, pixelSize: 16 }, { label: '64×64', width: 64, height: 64, pixelSize: 8 } ]; export const PixelCanvas = () => { const [drawing, setDrawing] = useState(false); const [color, setColor] = useState('#000000'); const [tool, setTool] = useState('pencil'); const [currentPalette, setCurrentPalette] = useState('custom'); const [colors, setColors] = useState(PALETTE_PRESETS.custom.colors); const [canvasSize, setCanvasSize] = useState(CANVAS_SIZES[1]); // Default to 32x32 const [showPaletteDropdown, setShowPaletteDropdown] = useState(false); // Close dropdown when clicking outside useEffect(() => { const handleClickOutside = (event) => { if (!event.target.closest('.palette-dropdown')) { setShowPaletteDropdown(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const canvasRef = useRef(null); const contextRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; canvas.width = canvasSize.width * canvasSize.pixelSize; canvas.height = canvasSize.height * canvasSize.pixelSize; const context = canvas.getContext('2d'); context.imageSmoothingEnabled = false; contextRef.current = context; // Fill with white background context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, canvas.width, canvas.height); }, [canvasSize]); const drawPixel = (x, y) => { const context = contextRef.current; const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const canvasX = Math.floor((x * scaleX) / canvasSize.pixelSize) * canvasSize.pixelSize; const canvasY = Math.floor((y * scaleY) / canvasSize.pixelSize) * canvasSize.pixelSize; context.fillStyle = tool === 'eraser' ? '#FFFFFF' : color; context.fillRect(canvasX, canvasY, canvasSize.pixelSize, canvasSize.pixelSize); }; const floodFill = (startX, startY, targetColor, fillColor) => { const context = contextRef.current; const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; // Convert coordinates to grid positions const gridX = Math.floor((startX * scaleX) / canvasSize.pixelSize); const gridY = Math.floor((startY * scaleY) / canvasSize.pixelSize); // Get color at clicked position const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const startPos = (gridY * canvasSize.pixelSize * canvas.width + gridX * canvasSize.pixelSize) * 4; const targetR = imageData.data[startPos]; const targetG = imageData.data[startPos + 1]; const targetB = imageData.data[startPos + 2]; // Convert fill color from hex to RGB const fillColorEl = document.createElement('div'); fillColorEl.style.backgroundColor = fillColor; document.body.appendChild(fillColorEl); const fillColorRGB = window.getComputedStyle(fillColorEl).backgroundColor; document.body.removeChild(fillColorEl); const [r, g, b] = fillColorRGB.match(/\d+/g).map(Number); // Don't fill if colors are the same if (targetR === r && targetG === g && targetB === b) return; const stack = [[gridX, gridY]]; const visited = new Set(); while (stack.length > 0) { const [x, y] = stack.pop(); const key = `${x},${y}`; if (visited.has(key)) continue; if (x < 0 || x >= canvasSize.width || y < 0 || y >= canvasSize.height) continue; const pos = (y * canvasSize.pixelSize * canvas.width + x * canvasSize.pixelSize) * 4; const currentR = imageData.data[pos]; const currentG = imageData.data[pos + 1]; const currentB = imageData.data[pos + 2]; if (currentR !== targetR || currentG !== targetG || currentB !== targetB) continue; // Fill the current pixel context.fillStyle = fillColor; context.fillRect(x * canvasSize.pixelSize, y * canvasSize.pixelSize, canvasSize.pixelSize, canvasSize.pixelSize); visited.add(key); // Add neighbors to stack stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]); } }; const handleMouseDown = (e) => { setDrawing(true); const rect = canvasRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; if (tool === 'fill') { const canvas = canvasRef.current; const context = contextRef.current; const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const targetColor = imageData.data; floodFill(x, y, targetColor, color); } else { drawPixel(x, y); } }; const handleMouseMove = (e) => { if (!drawing) return; const rect = canvasRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; drawPixel(x, y); }; const handleMouseUp = () => { setDrawing(false); }; const clearCanvas = () => { const context = contextRef.current; context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height); }; return (

{CANVAS_SIZES.map((size) => ( ))}

{showPaletteDropdown && (

{Object.entries(PALETTE_PRESETS).map(([key, palette]) => (

{ setCurrentPalette(key); setColors(palette.colors); setColor(palette.colors[0]); setShowPaletteDropdown(false); }} > {palette.name}

{palette.colors.slice(0, 4).map((c, i) => (

))}

)}

{colors.map((c) => (

); };