[{"_1":2,"_167":-5,"_168":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","2f607f7b74b4e52529fb75176d403d8b5b284eb1","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_147":148,"_164":165,"_166":-5},"handle","dcm31","name","funLimeBuzzard","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":107,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":107,"_115":-5,"_116":32,"_14":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":127,"_130":131,"_133":134,"_146":20},"id","9ca3e326-2783-11f0-b46e-569c3dd06744","createdAt",["D",1746210667065],"deletedAt","legacyEnvVars",true,"privacy","public","description","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","screenshotVersion","likeCount","d663a026-6449-42f6-9156-1d4a2d64d38c","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_128":129},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","org",{"_93":94,"_132":129},"avatar","branch",{"_135":136,"_95":43,"_101":137,"_138":102,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},"version",1,"9ca44d0c-2783-11f0-b46e-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":149,"_95":98,"_150":151,"_152":-5,"_153":137,"_154":136,"_155":107,"_103":156,"_135":32,"_157":158,"_159":160,"_161":20,"_162":-5,"_97":163},"9ca86db0-2783-11f0-b46e-569c3dd06744","fileId","9ca86e6e-2783-11f0-b46e-569c3dd06744","parentId","branchId","branchVersion","latest",["D",1743255188809],"fileType","script","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef } from \"https://esm.sh/react\";\n\nconst HandDrawnCardsLogo = () => {\n const logoRef = useRef(null);\n \n useEffect(() => {\n if (logoRef.current) {\n const svg = logoRef.current;\n \n // Clear previous content\n while (svg.firstChild) {\n svg.removeChild(svg.firstChild);\n }\n \n // Create a function to generate hand-drawn paths with waviness\n function createWavyPath(points, magnitude = 2, smoothness = 0.25) {\n // Helper to add waviness to points\n function addWaviness(points, magnitude) {\n return points.map(p => {\n // If this is a marker for a critical point, keep it exact\n if (p.critical) {\n return p;\n }\n \n // Add more random variation for rougher look\n const waviness = (Math.random() - 0.5) * magnitude * 1.5; // Increased from magnitude to magnitude * 1.5\n const randomOffset = (Math.random() - 0.5) * magnitude * 0.8; // Additional random offset in different direction\n return {\n x: p.x + waviness,\n y: p.y + randomOffset, // More randomness for y coordinate\n critical: false\n };\n });\n }\n \n // Add waviness to the points\n const wavyPoints = addWaviness(points, magnitude);\n \n // Start with the first point\n let path = `M ${wavyPoints[0].x},${wavyPoints[0].y}`;\n \n // Helper to calculate control points for smooth curves\n function getControlPoints(p0, p1, p2, smoothness = 0.2) {\n // Calculate distances between points\n const d01 = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));\n const d12 = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n \n // Calculate control point distances proportional to segment lengths\n const fa = smoothness * d01 / (d01 + d12);\n const fb = smoothness * d12 / (d01 + d12);\n \n // Calculate control points\n const c1x = p1.x - fa * (p2.x - p0.x);\n const c1y = p1.y - fa * (p2.y - p0.y);\n const c2x = p1.x + fb * (p2.x - p0.x);\n const c2y = p1.y + fb * (p2.y - p0.y);\n \n return {\n cp1: { x: c1x, y: c1y },\n cp2: { x: c2x, y: c2y }\n };\n }\n \n // Add each point with a smooth curve\n for (let i = 1; i < wavyPoints.length - 1; i++) {\n const p0 = i === 1 ? wavyPoints[0] : wavyPoints[i - 1];\n const p1 = wavyPoints[i];\n const p2 = wavyPoints[i + 1];\n \n // Special handling for critical control points\n if (p1.critical) {\n path += ` L ${p1.x},${p1.y}`;\n } else {\n // Use a cubic bezier curve for smooth transitions\n const cp = getControlPoints(p0, p1, p2, smoothness);\n path += ` C ${cp.cp1.x},${cp.cp1.y} ${cp.cp2.x},${cp.cp2.y} ${p1.x},${p1.y}`;\n }\n }\n \n // Add the last point\n if (wavyPoints.length > 1) {\n path += ` L ${wavyPoints[wavyPoints.length-1].x},${wavyPoints[wavyPoints.length-1].y}`;\n }\n \n return path;\n }\n \n // Create hand-drawn card outline with properly placed corners\n function createCardOutline(x, y, width, height, cornerRadius) {\n // Points per edge for waviness\n const numPointsPerEdge = 6;\n const numPointsPerCorner = 6;\n const points = [];\n \n // Define the transition points where edges meet corners\n const transitionPoints = {\n topLeft: { x: x + cornerRadius, y: y, critical: true },\n topRight: { x: x + width - cornerRadius, y: y, critical: true },\n rightTop: { x: x + width, y: y + cornerRadius, critical: true },\n rightBottom: { x: x + width, y: y + height - cornerRadius, critical: true },\n bottomRight: { x: x + width - cornerRadius, y: y + height, critical: true },\n bottomLeft: { x: x + cornerRadius, y: y + height, critical: true },\n leftBottom: { x: x, y: y + height - cornerRadius, critical: true },\n leftTop: { x: x, y: y + cornerRadius, critical: true }\n };\n \n // Start with top-left transition point\n points.push(transitionPoints.topLeft);\n \n // Top edge (left to right)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeX = transitionPoints.topLeft.x + t * (transitionPoints.topRight.x - transitionPoints.topLeft.x);\n points.push({\n x: edgeX,\n y: y,\n critical: false\n });\n }\n points.push(transitionPoints.topRight);\n \n // Top-right corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = -Math.PI/2 + t * (Math.PI/2);\n points.push({\n x: x + width - cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.rightTop);\n \n // Right edge (top to bottom)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeY = transitionPoints.rightTop.y + t * (transitionPoints.rightBottom.y - transitionPoints.rightTop.y);\n points.push({\n x: x + width,\n y: edgeY,\n critical: false\n });\n }\n points.push(transitionPoints.rightBottom);\n \n // Bottom-right corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = 0 + t * (Math.PI/2);\n points.push({\n x: x + width - cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + height - cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.bottomRight);\n \n // Bottom edge (right to left)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeX = transitionPoints.bottomRight.x - t * (transitionPoints.bottomRight.x - transitionPoints.bottomLeft.x);\n points.push({\n x: edgeX,\n y: y + height,\n critical: false\n });\n }\n points.push(transitionPoints.bottomLeft);\n \n // Bottom-left corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = Math.PI/2 + t * (Math.PI/2);\n points.push({\n x: x + cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + height - cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.leftBottom);\n \n // Left edge (bottom to top)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeY = transitionPoints.leftBottom.y - t * (transitionPoints.leftBottom.y - transitionPoints.leftTop.y);\n points.push({\n x: x,\n y: edgeY,\n critical: false\n });\n }\n points.push(transitionPoints.leftTop);\n \n // Top-left corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = Math.PI + t * (Math.PI/2);\n points.push({\n x: x + cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n \n // Close the shape by connecting back to the first point\n points.push(transitionPoints.topLeft);\n \n // Create the path with the correct waviness\n return createWavyPath(points, 2.5, 0.2); // Increased magnitude from 1.5 to 2.5\n }\n \n // Mini cards have rougher edges\n function createMiniCard(x, y, width, height, rotation = 0) {\n const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n group.setAttribute('transform', `translate(${x}, ${y}) rotate(${rotation})`);\n \n // Card outline\n const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n const pathData = createCardOutline(0, 0, width, height, 8);\n \n path.setAttribute('d', pathData);\n path.setAttribute('fill', 'white');\n path.setAttribute('stroke', '#333');\n path.setAttribute('stroke-width', '2');\n path.setAttribute('stroke-linecap', 'round');\n path.setAttribute('stroke-linejoin', 'round');\n \n group.appendChild(path);\n \n // Add some horizontal lines to suggest content with more randomness\n const numLines = 3;\n const lineSpacing = height / (numLines + 1);\n \n for (let i = 1; i <= numLines; i++) {\n const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n \n // Create more wavy line\n const lineY = i * lineSpacing;\n const marginX = width * 0.15;\n const linePoints = [];\n \n const segments = 8;\n for (let j = 0; j <= segments; j++) {\n const t = j / segments;\n linePoints.push({\n x: marginX + t * (width - 2 * marginX),\n y: lineY + (Math.random() - 0.5) * 3.0, // Increased waviness from 1.5 to 3.0\n critical: false\n });\n }\n \n line.setAttribute('d', createWavyPath(linePoints, 2, 0.3)); // Increased from 1 to 2\n line.setAttribute('fill', 'none');\n line.setAttribute('stroke', '#333');\n line.setAttribute('stroke-width', '1.2');\n line.setAttribute('stroke-linecap', 'round');\n \n group.appendChild(line);\n }\n \n return group;\n }\n \n // Main container\n const width = 301;\n const height = 113.266;\n const cornerRadius = 15;\n \n // Background with hand-drawn border\n const backgroundPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n const borderPathData = createCardOutline(2, 2, width - 4, height - 4, cornerRadius);\n \n backgroundPath.setAttribute('d', borderPathData);\n backgroundPath.setAttribute('fill', '#f8f9fa');\n backgroundPath.setAttribute('stroke', 'black');\n backgroundPath.setAttribute('stroke-width', '3.5'); // Slightly thicker border\n backgroundPath.setAttribute('stroke-linecap', 'round');\n backgroundPath.setAttribute('stroke-linejoin', 'round');\n \n svg.appendChild(backgroundPath);\n \n // Create a pattern of small hand-drawn cards\n const patternGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n \n // Add mini cards\n patternGroup.appendChild(createMiniCard(30, 30, 40, 30, -10));\n patternGroup.appendChild(createMiniCard(80, 20, 40, 30, 15));\n patternGroup.appendChild(createMiniCard(180, 25, 40, 30, -5));\n patternGroup.appendChild(createMiniCard(230, 30, 40, 30, 12));\n \n // Apply clip path to keep the cards within the rounded rectangle\n // Define clipping path to match our hand-drawn border\n const clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');\n clipPath.setAttribute('id', 'cardClip');\n \n const clipPathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n clipPathElement.setAttribute('d', borderPathData);\n \n clipPath.appendChild(clipPathElement);\n svg.appendChild(clipPath);\n \n patternGroup.setAttribute('clip-path', 'url(#cardClip)');\n patternGroup.setAttribute('opacity', '0.3');\n svg.appendChild(patternGroup);\n \n // Title text\n const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n text.setAttribute('x', '150.5');\n text.setAttribute('y', '65');\n text.setAttribute('font-family', \"'Alegreya Sans SC', sans-serif\");\n text.setAttribute('font-size', '32');\n text.setAttribute('font-weight', '700');\n text.setAttribute('fill', '#333');\n text.setAttribute('text-anchor', 'middle');\n text.textContent = 'Hand-Drawn';\n \n svg.appendChild(text);\n }\n }, []);\n \n return (\n \n );\n};\n\nexport default HandDrawnCardsLogo;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/funLimeBuzzard/code/main.tsx","extension","actionData","errors"]