Wobble Shape Generator

\n \n \n

\n {plate && (\n

\n Color: \n updatePlate('color', e.target.value)}\n className=\"w-16 h-8\"\n />\n

\n {['wobbliness', 'wobbleFrequency', 'wobbleIrregularity', 'rotation'].map((prop) => (\n

\n {prop.charAt(0).toUpperCase() + prop.slice(1)}: \n updatePlate(prop, Number(e.target.value))}\n className=\"w-48 mr-2\"\n />\n \n {prop === 'rotation' \n ? `${plate[prop]}°` \n : plate[prop].toFixed(prop === 'wobbleFrequency' ? 0 : 2)}\n \n

\n ))}\n

\n )}\n \n

\n        <p className=\"mt-4 text-sm text-gray-500\">\n          <small>\n            View source: <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} className=\"underline\">val.town</a>\n          </small>\n        </p>\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise<Response> {\n  return new Response(`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Wobble Shape Generator</title>\n        <script src=\"https://cdn.tailwindcss.com\"></script>\n      </head>\n      <body class=\"bg-gray-100\">\n        <div id=\"root\" class=\"flex items-center justify-center min-h-screen\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `,\n  {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/yawnxyz/WobbleShapes/code/main.tsx","extension","actionData","errors"]
</article></body></html>