Hand-Drawn UI Elements with Rough.js

\n {children}\n \n

\n );\n};\n\n// HandDrawnButton component\nconst HandDrawnButton = ({ children, x, y, roughness = 1.5, onClick }) => {\n const [isHovering, setIsHovering] = useState(false);\n const buttonRef = useRef(null);\n const [buttonSize, setButtonSize] = useState({ width: 120, height: 40 });\n \n useEffect(() => {\n if (buttonRef.current) {\n // Get content size + some padding\n const rect = buttonRef.current.getBoundingClientRect();\n setButtonSize({\n width: Math.max(rect.width + 40, 120),\n height: Math.max(rect.height + 20, 40)\n });\n }\n }, [children]);\n \n const position = { x, y, width: buttonSize.width, height: buttonSize.height };\n \n return (\n setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onClick={onClick}\n >\n \n {children}\n \n \n \n );\n};\n\n// Component to store canvas drawing data that will be rendered by the main canvas\nconst CanvasDrawingData = ({ type, position, roughness, isHovering }) => {\n const context = React.useContext(DrawingContext);\n \n useEffect(() => {\n // Add this drawing to the context\n const id = Math.random().toString(36).substring(2);\n context.addDrawing(id, { type, position, roughness, isHovering });\n \n // Remove when unmounted\n return () => context.removeDrawing(id);\n }, [type, position.x, position.y, position.width, position.height, roughness, isHovering]);\n \n return null;\n};\n\n// Context for managing all canvas drawings\nconst DrawingContext = React.createContext({\n drawings: {},\n addDrawing: () => {},\n removeDrawing: () => {}\n});\n\n// Main app component\nfunction App() {\n const canvasRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });\n const [drawings, setDrawings] = useState({});\n \n // Handle window resize\n useEffect(() => {\n const handleResize = () => {\n setDimensions({ width: window.innerWidth, height: window.innerHeight });\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n \n // Drawing context functions\n const addDrawing = (id, drawingData) => {\n setDrawings(prev => ({ ...prev, [id]: drawingData }));\n };\n \n const removeDrawing = (id) => {\n setDrawings(prev => {\n const newDrawings = { ...prev };\n delete newDrawings[id];\n return newDrawings;\n });\n };\n \n // Render canvas when dimensions or drawings change\n useEffect(() => {\n if (!canvasRef.current) return;\n \n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n const rc = new RoughCanvas(canvas);\n \n // Clear the canvas\n ctx.clearRect(0, 0, dimensions.width, dimensions.height);\n \n // Draw header line\n rc.line(0, 50, dimensions.width, 50, { \n roughness: 2, \n strokeWidth: 2,\n bowing: 3\n });\n \n // Draw site title\n ctx.font = '30px \"Nanum Pen Script\", cursive';\n ctx.fillText('Rough.js UI Demo', 20, 35);\n \n // Draw all registered elements\n Object.values(drawings).forEach(drawing => {\n const { type, position, roughness, isHovering } = drawing;\n const { x, y, width, height } = position;\n \n if (type === 'card') {\n const cardPath = drawRoundedRectPath(x, y, width, height, 15);\n rc.path(cardPath, { \n fill: 'rgba(255, 255, 255, 0.5)', \n fillStyle: 'hachure', \n roughness: roughness,\n stroke: 'black',\n strokeWidth: 2,\n hachureAngle: 60,\n hachureGap: 8\n });\n } else if (type === 'button') {\n const buttonPath = drawRoundedRectPath(x, y, width, height, 10);\n rc.path(buttonPath, { \n fill: isHovering ? 'rgba(220, 220, 220, 0.8)' : 'rgba(200, 200, 200, 0.7)', \n fillStyle: 'zigzag', \n roughness: roughness,\n stroke: 'black',\n strokeWidth: 2\n });\n }\n });\n \n }, [dimensions, drawings]);\n \n // Helper function to create SVG-like rounded rectangle path\n function drawRoundedRectPath(x, y, width, height, radius) {\n return [\n `M${x + radius},${y}`,\n `L${x + width - radius},${y}`,\n `Q${x + width},${y},${x + width},${y + radius}`,\n `L${x + width},${y + height - radius}`,\n `Q${x + width},${y + height},${x + width - radius},${y + height}`,\n `L${x + radius},${y + height}`,\n `Q${x},${y + height},${x},${y + height - radius}`,\n `L${x},${y + radius}`,\n `Q${x},${y},${x + radius},${y}`,\n 'Z'\n ].join(' ');\n }\n \n // Demo message state\n const [message, setMessage] = useState(\"\");\n \n return (\n \n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Hand-Drawn UI Elements with Rough.js\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n body {\n margin: 0;\n padding: 0;\n font-family: 'Nanum Pen Script', cursive;\n background-color: #f9f7f1;\n font-size: 22px;\n }\n .container {\n width: 100%;\n min-height: 100vh;\n }\n .content {\n max-width: 800px;\n margin: 0 auto;\n padding: 60px 20px 20px 20px;\n }\n h1 {\n margin-top: 10px;\n text-align: center;\n font-size: 42px;\n margin-bottom: 40px;\n }\n p {\n margin: 10px 0;\n line-height: 1.4;\n }\n .button-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin: 30px 0;\n }\n .message {\n font-size: 24px;\n color: #d35400;\n }\n .source-link {\n margin-top: 60px;\n text-align: center;\n font-size: 20px;\n }\n a {\n color: #2980b9;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n @media (max-width: 600px) {\n .content {\n padding: 60px 15px 15px 15px;\n }\n h1 {\n font-size: 36px;\n }\n body {\n font-size: 20px;\n }\n }\n`;\n","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/thoughtfulAquaSilverfish/code/main.tsx","extension","actionData","errors"]