Random Image Placement

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}",[],[103],{"_107":180,"_99":181,"_153":182,"_155":-5,"_156":139,"_157":183,"_159":121,"_109":184,"_104":185,"_162":186,"_164":187,"_166":27,"_167":-5,"_168":188,"_102":189},"b6f418fc-e595-11ef-82f4-e6cdfca9ef9f","constants","1bd7a3dc-f1ff-4361-a079-42614f4c4eb1",66,["D",1738961665402],7,"script","export const DATABASE_TABLENAME = \"VALENTINES_DAY_CARD_IMGS\";",[],[181],{"_107":191,"_99":192,"_153":119,"_155":-5,"_156":139,"_157":138,"_159":121,"_109":193,"_104":194,"_162":175,"_164":195,"_166":27,"_167":-5,"_168":196,"_102":197},"9c2ebeda-e597-11ef-a625-e6cdfca9ef9f","frontend_card",["D",1738962479481],41,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// import { getImages } from \"./get-images\";\n\n// const images = await getImages(\"image\", 12);\n// export const IMAGE_URLS = images;\n\n// mock data\nconst IMAGE_URLS = [\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957396306_pngtree-valentine-day-gift-box-open-love-heart-and-rose-potale-greeting-png-image_6564851.png\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959510139_2020-heart-pounding-animation.gif\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959545863_sugary-heart-valentine-png-5692911.png\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png\",\n];\n\nfunction Envelope({ onAnimationComplete }) {\n const [isOpening, setIsOpening] = useState(false);\n\n useEffect(() => {\n setTimeout(() => {\n setIsOpening(true);\n setTimeout(onAnimationComplete, 2000);\n }, 500);\n }, []);\n\n return (\n \n \n \n \n ❤️\n \n \n );\n}\n\nfunction DraggableImage({ imageUrl, initialPosition, index, onPositionChange, isCreating, delay = 0 }) {\n const [position, setPosition] = useState(initialPosition);\n const [isDragging, setIsDragging] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const dragOffset = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n setTimeout(() => {\n setIsVisible(true);\n }, delay);\n }, [delay]);\n\n const handleMouseDown = (e) => {\n if (!isCreating) return;\n setIsDragging(true);\n const rect = e.target.getBoundingClientRect();\n dragOffset.current = {\n x: e.clientX - rect.left,\n y: e.clientY - rect.top,\n };\n };\n\n const handleMouseMove = (e) => {\n if (!isDragging) return;\n\n const newPosition = {\n left: e.clientX - dragOffset.current.x,\n top: e.clientY - dragOffset.current.y,\n rotation: position.rotation,\n scale: position.scale,\n };\n\n setPosition(newPosition);\n onPositionChange(index, newPosition);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n }\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [isDragging]);\n\n return (\n \n \n \n );\n}\n\nfunction App() {\n const [message, setMessage] = useState(\"\");\n const [isCreating, setIsCreating] = useState(false);\n const [imagePositions, setImagePositions] = useState([]);\n const [showEnvelope, setShowEnvelope] = useState(false);\n const [contentVisible, setContentVisible] = useState(false);\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const urlMessage = urlParams.get(\"message\");\n const urlPositions = urlParams.get(\"positions\");\n\n if (urlMessage || urlPositions) {\n if (urlMessage) setMessage(decodeURIComponent(urlMessage));\n if (urlPositions) {\n setImagePositions(JSON.parse(decodeURIComponent(urlPositions)));\n } else {\n initializeRandomPositions();\n }\n setShowEnvelope(true);\n } else {\n setIsCreating(true);\n setContentVisible(true);\n initializeRandomPositions();\n }\n }, []);\n\n const initializeRandomPositions = () => {\n const positions = [...Array(12)].map(() => ({\n top: Math.random() * (window.innerHeight - 500) + 150,\n left: Math.random() * (window.innerWidth - 400) + 50,\n rotation: Math.random() * 40 - 20,\n scale: 0.8 + Math.random() * 0.4,\n }));\n setImagePositions(positions);\n };\n\n const handlePositionChange = (index, newPosition) => {\n const newPositions = [...imagePositions];\n newPositions[index] = newPosition;\n setImagePositions(newPositions);\n };\n\n const handleShare = () => {\n const url = new URL(window.location.href);\n url.searchParams.set(\"message\", message);\n url.searchParams.set(\"positions\", encodeURIComponent(JSON.stringify(imagePositions)));\n navigator.clipboard.writeText(url.toString());\n alert(\"URL copied to clipboard!\");\n };\n\n const handleEnvelopeComplete = () => {\n setShowEnvelope(false);\n setContentVisible(true);\n };\n\n if (!contentVisible && showEnvelope) {\n return ;\n }\n\n return (\n \n {isCreating\n ? (\n \n \n Valentine Note Generator\n \n setMessage(e.target.value)}\n placeholder=\"Enter your valentine message...\"\n style={{\n width: \"80%\",\n maxWidth: \"500px\",\n height: \"120px\",\n padding: \"10px\",\n borderRadius: \"5px\",\n border: \"1px solid #ccc\",\n resize: \"vertical\",\n fontFamily: \"arial\",\n fontSize: \"16px\",\n lineHeight: \"1.4\",\n }}\n />\n

\n Drag the images to arrange them\n

\n \n Share\n \n \n )\n : (\n {\n window.history.replaceState({}, \"\", window.location.pathname);\n setMessage(\"\");\n setIsCreating(true);\n initializeRandomPositions();\n }}\n style={{\n position: \"fixed\",\n top: \"20px\",\n right: \"20px\",\n padding: \"8px 20px\",\n backgroundColor: \"black\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n fontSize: \"14px\",\n zIndex: 1001,\n }}\n >\n Make Your Own\n \n )}\n\n {message && (\n \n {message}\n \n )}\n\n {imagePositions.map((position, index) => (\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 const url = new URL(request.url);\n const message = url.searchParams.get(\"message\") || \"\";\n\n return new Response(\n `\n \n \n Valentine's Message\n \n \n \n \n \n

\n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[192],{"_107":199,"_99":200,"_153":201,"_155":-5,"_156":139,"_157":202,"_159":121,"_109":203,"_104":204,"_162":186,"_164":205,"_166":27,"_167":-5,"_168":206,"_102":207},"7f8b262a-e596-11ef-9e5a-e6cdfca9ef9f","get-images","5ca2940a-e595-11ef-b12e-e6cdfca9ef9f",68,["D",1738962001940],4,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\n// export const manager = {\n// getImages(type: string, count: number): Promise {\n// return getImages(type, count);\n// },\n// };\n\nexport async function getImages(type: string, count: number): Promise {\n // Query to select random rows of the specified type\n const result = await sqlite.execute(\n `\n SELECT path \n FROM ${DATABASE_TABLENAME} \n WHERE type = ? \n ORDER BY RANDOM() \n LIMIT ?\n `,\n [type, count],\n );\n\n let images: string[] = [];\n console.log(result.rows);\n for (const row of result.rows) {\n const blobPath = await blob.get(row[\"path\"] as string);\n images.push(`https://shouser-blob_admin.web.val.run/api/public/${blobPath.url}`);\n }\n\n return images;\n // console.log(\"images\", await getImages(\"image\", 1));\n // Extract paths from the result rows\n // return result.rows.map(asyncrow => await blob.get(row.path as string));\n}\n\nconsole.log(await getImages(\"image\", 10));",[],[200],{"_107":209,"_99":210,"_153":211,"_155":-5,"_156":139,"_157":212,"_159":121,"_109":213,"_104":214,"_162":186,"_164":215,"_166":27,"_167":-5,"_168":216,"_102":217},"f3e871d2-e58f-11ef-a238-e6cdfca9ef9f","image_manager","27b3deb0-c96a-44e1-b333-0291b0d9e02b",33,["D",1738959190668],3,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\n// export const manager = {\n// getImages(type: string, count: number): Promise {\n// return getImages(type, count);\n// },\n// };\n\nexport async function getImages(type: string, count: number): Promise {\n // Query to select random rows of the specified type\n const result = await sqlite.execute(\n `\n SELECT path \n FROM ${DATABASE_TABLENAME} \n WHERE type = ? \n ORDER BY RANDOM() \n LIMIT ?\n `,\n [type, count],\n );\n\n // console.log(\"images\", await getImages(\"image\", 1));\n // Extract paths from the result rows\n return result.rows.map(row => await blob.get(row.path));\n}",[],[210],{"_107":219,"_99":220,"_153":221,"_155":-5,"_156":139,"_157":222,"_159":121,"_109":223,"_104":224,"_162":175,"_164":225,"_166":27,"_167":-5,"_168":226,"_102":227},"ed7cf110-e58f-11ef-9bdd-e6cdfca9ef9f","image_uploader","a5a53ffe-57c4-4b09-a7fe-aad4ad1aa6f9",32,["D",1738959179903],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",[],[220],"files",[150,171,179,190,198,208,218],"counts",{"_232":33,"_233":161,"_234":33,"_235":33},"pulls","branches","forks","envVars","contents",[],{"_107":172,"_99":103,"_153":173,"_155":-5,"_156":139,"_157":161,"_159":121,"_109":239,"_104":33,"_162":175,"_164":176,"_166":27,"_167":-5,"_102":240},["D",1738957295132],[103],"upstream",{"_107":243,"_99":100,"_115":-5,"_116":-5,"_113":114,"_21":244},"64b9a50c-e56d-11ef-a263-e6cdfca9ef9f",{"_97":245,"_134":246},"shouser","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":251,"_148":255,"_228":277,"_163":278,"_236":280,"_241":281,"_290":27,"_291":292},{"_107":108,"_99":100,"_109":252,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":253,"_136":254},["D",1738957295132],{"_97":98,"_134":135},{"_104":138,"_99":43,"_107":139,"_140":108,"_141":142,"_143":144,"_145":114,"_146":147},[256,259,262,265,268,271,274],{"_107":151,"_99":152,"_153":154,"_155":-5,"_156":139,"_157":158,"_159":121,"_109":160,"_104":161,"_162":163,"_164":165,"_166":27,"_167":-5,"_168":257,"_102":258},[],[152],{"_107":172,"_99":103,"_153":173,"_155":-5,"_156":139,"_157":161,"_159":121,"_109":174,"_104":33,"_162":175,"_164":176,"_166":27,"_167":-5,"_168":260,"_102":261},[],[103],{"_107":180,"_99":181,"_153":182,"_155":-5,"_156":139,"_157":183,"_159":121,"_109":184,"_104":185,"_162":186,"_164":187,"_166":27,"_167":-5,"_168":263,"_102":264},[],[181],{"_107":191,"_99":192,"_153":119,"_155":-5,"_156":139,"_157":138,"_159":121,"_109":193,"_104":194,"_162":175,"_164":195,"_166":27,"_167":-5,"_168":266,"_102":267},[],[192],{"_107":199,"_99":200,"_153":201,"_155":-5,"_156":139,"_157":202,"_159":121,"_109":203,"_104":204,"_162":186,"_164":205,"_166":27,"_167":-5,"_168":269,"_102":270},[],[200],{"_107":209,"_99":210,"_153":211,"_155":-5,"_156":139,"_157":212,"_159":121,"_109":213,"_104":214,"_162":186,"_164":215,"_166":27,"_167":-5,"_168":272,"_102":273},[],[210],{"_107":219,"_99":220,"_153":221,"_155":-5,"_156":139,"_157":222,"_159":121,"_109":223,"_104":224,"_162":175,"_164":225,"_166":27,"_167":-5,"_168":275,"_102":276},[],[220],[256,259,262,265,268,271,274],{"_107":172,"_99":103,"_153":173,"_155":-5,"_156":139,"_157":161,"_159":121,"_109":239,"_104":33,"_162":175,"_164":176,"_166":27,"_167":-5,"_102":279},[103],[],{"_107":142,"_109":282,"_283":284,"_99":43,"_140":243,"_104":285,"_141":-5,"_143":-5,"_286":287,"_132":27,"_113":114,"_288":245,"_289":100},["D",1738944347583],"updatedAt",["D",1739161625327],174,"lockfileKey","1744514714948-esm.town_v_shouser_valentines_day_card_generator@174-main","userHandle","projectName","showCompareCallout","pull",{"_107":293,"_115":294,"_295":296},"0619d4ae-e590-11ef-a769-e6cdfca9ef9f","little frontend for the card, wip","state","pending","routes/_app","actionData","errors"]