[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":57,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",24,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","a53526e6-27a9-11f0-9edc-569c3dd06744","name","fileType","http","content","/**\n * This web app creates a Side School Seminar location voting system.\n * Users can vote for their preferred seminar location from four options.\n * The app uses React for the frontend and SQLite for storing votes on the backend.\n * The design is inspired by Side.school and includes an image in the first frame.\n * It features a celebration animation when voting, a distinct style for the selected option,\n * and allows users to cancel their vote by clicking on the selected option again.\n */\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst locations = [\n { id: 1, name: \"Au camping\", emoji: \"⛺\" },\n { id: 2, name: \"Chez Ben\", emoji: \"🏢\" },\n { id: 3, name: \"Au Château\", emoji: \"🏰\" },\n { id: 4, name: \"Sur Saturne\", emoji: \"🪐\" },\n];\n\nfunction App() {\n const [votes, setVotes] = useState({});\n const [selectedLocation, setSelectedLocation] = useState(null);\n const [showCelebration, setShowCelebration] = useState(false);\n\n useEffect(() => {\n fetchVotes();\n }, []);\n\n const fetchVotes = async () => {\n try {\n const response = await fetch(\"/votes\");\n const data = await response.json();\n console.log(\"Fetched votes:\", data);\n setVotes(data);\n } catch (error) {\n console.error(\"Error fetching votes:\", error);\n }\n };\n\n const handleVote = async (locationId) => {\n console.log(\"Voting for location:\", locationId);\n try {\n const response = await fetch(\"/vote\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ locationId }),\n });\n\n if (response.ok) {\n const result = await response.json();\n console.log(\"Vote result:\", result);\n if (selectedLocation === locationId) {\n setSelectedLocation(null);\n } else {\n setSelectedLocation(locationId);\n setShowCelebration(true);\n setTimeout(() => setShowCelebration(false), 2000);\n }\n await fetchVotes();\n } else {\n console.error(\"Vote failed:\", await response.text());\n }\n } catch (error) {\n console.error(\"Error voting:\", error);\n }\n };\n\n return (\n

Side School Seminar

Choose the location:

\n {locations.map((location) => (\n handleVote(location.id)}\n className={location.id === selectedLocation ? \"selected\" : \"\"}\n >\n {location.emoji}\n {location.name}\n {votes[location.id] || 0} votes\n \n ))}\n

\n {selectedLocation !== null &&

Thank you for voting! Click your choice again to cancel.

}\n

\n {showCelebration &&

🎉🎊🥳

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = \"linkInBioTemplate\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_votes_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n location_id INTEGER NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === \"POST\" && request.url.endsWith(\"/vote\")) {\n const { locationId } = await request.json();\n console.log(\"Server received vote for location:\", locationId);\n try {\n const existingVote = await sqlite.execute(`SELECT * FROM ${KEY}_votes_${SCHEMA_VERSION} WHERE location_id = ?`, [locationId]);\n if (existingVote.rows.length > 0) {\n await sqlite.execute(`DELETE FROM ${KEY}_votes_${SCHEMA_VERSION} WHERE location_id = ? ORDER BY timestamp DESC LIMIT 1`, [locationId]);\n console.log(\"Deleted existing vote for location:\", locationId);\n } else {\n await sqlite.execute(`INSERT INTO ${KEY}_votes_${SCHEMA_VERSION} (location_id) VALUES (?)`, [locationId]);\n console.log(\"Inserted new vote for location:\", locationId);\n }\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error processing vote:\", error);\n return new Response(JSON.stringify({ success: false, error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (request.url.endsWith(\"/votes\")) {\n try {\n const result = await sqlite.execute(`\n SELECT location_id, COUNT(*) as count\n FROM ${KEY}_votes_${SCHEMA_VERSION}\n GROUP BY location_id\n `);\n const votes = Object.fromEntries(result.rows.map(row => [row.location_id, row.count]));\n console.log(\"Fetched votes:\", votes);\n return new Response(JSON.stringify(votes), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching votes:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(`\n \n \n Side School Seminar\n \n \n \n \n \n

Side School Seminar

Choose the location:

\n {selectedLocation !== null &&

Thank you for voting! Click your choice again to cancel.

}\n

\n {showCelebration &&

🎉🎊🥳

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = \"linkInBioTemplate\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_votes_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n location_id INTEGER NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === \"POST\" && request.url.endsWith(\"/vote\")) {\n const { locationId } = await request.json();\n console.log(\"Server received vote for location:\", locationId);\n try {\n await sqlite.execute(`INSERT INTO ${KEY}_votes_${SCHEMA_VERSION} (location_id) VALUES (?)`, [locationId]);\n console.log(\"Inserted new vote for location:\", locationId);\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error processing vote:\", error);\n return new Response(JSON.stringify({ success: false, error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (request.url.endsWith(\"/votes\")) {\n try {\n const result = await sqlite.execute(`\n SELECT location_id, COUNT(*) as count\n FROM ${KEY}_votes_${SCHEMA_VERSION}\n GROUP BY location_id\n `);\n const votes = Object.fromEntries(result.rows.map(row => [row.location_id, row.count]));\n console.log(\"Fetched votes:\", votes);\n return new Response(JSON.stringify(votes), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching votes:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(`\n \n \n Side School Seminar\n \n \n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\nbody {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f4f4f5;\n}\n.container {\n width: 800px;\n background-color: white;\n border-radius: 24px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n overflow: hidden;\n position: relative;\n}\n.image-frame {\n width: 100%;\n height: 300px;\n background-image: url('https://media.discordapp.net/attachments/1210186058440900690/1276662221681852446/paKC1TADWHlq2ilOrkbiQNwIbw.png?ex=66cc5218&is=66cb0098&hm=9e97febd99094480aa2c113488311f23db3c2d43af69c607212b05e55b794433&=&format=webp&quality=lossless&width=662&height=936');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n}\n.content {\n padding: 40px;\n}\nh1 {\n font-size: 36px;\n font-weight: 700;\n text-align: center;\n color: #111827;\n margin-bottom: 8px;\n}\nh2 {\n font-size: 24px;\n font-weight: 600;\n text-align: center;\n color: #4b5563;\n margin-bottom: 32px;\n}\n.locations {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n}\nbutton {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px;\n border: 2px solid #e5e7eb;\n border-radius: 16px;\n background-color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n}\nbutton:hover {\n border-color: #d1d5db;\n transform: translateY(-4px);\n}\nbutton.selected {\n background-color: #444;\n color: white;\n transform: scale(1.05);\n}\nbutton.selected .votes {\n color: #ccc;\n}\n.emoji {\n font-size: 48px;\n margin-bottom: 12px;\n}\n.name {\n font-size: 18px;\n font-weight: 600;\n color: #111827;\n margin-bottom: 8px;\n}\n.votes {\n font-size: 14px;\n color: #6b7280;\n}\np {\n text-align: center;\n margin-top: 24px;\n font-style: italic;\n color: #4b5563;\n font-size: 16px;\n}\n.celebration {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 64px;\n animation: celebrate 2s ease-out;\n}\n@keyframes celebrate {\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }\n 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }\n}\n`;\n\nexport default server;","createdAt",["D",1724618145645],"branchVersion","branchId","a532bfaa-27a9-11f0-9edc-569c3dd06744","id","a5326d98-27a9-11f0-9edc-569c3dd06744","linkInBioTemplate",["D",1746227002296],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","d88312c3-4d7d-4149-ab56-386657868885","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","535dff70-8363-4da7-bde1-b825cb7b11f8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":61,"_90":50,"_91":92,"_93":94,"_95":45,"_96":97},"isOwned",25,"main","projectId","forkedBranchId","6ab422d8-25f1-11f0-ad23-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","6ab3df4e-25f1-11f0-ad23-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","Olive","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJsOXdEbUJ0Z2RFTFlGVXNxVkNMU2p2OWhITiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":163,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":164,"_79":165,"_81":166,"_83":25},"tree",[158],"files",[158],"counts",{"_147":61,"_148":149,"_150":61,"_151":152,"_153":154},"contents",[139],"upstreamProject",{"_43":92,"_32":45,"_52":-5,"_53":-5,"_49":50,"_77":137},"upstreamBranch",{"_43":88,"_38":130,"_131":132,"_32":85,"_86":92,"_13":133,"_87":-5,"_89":-5,"_134":135,"_47":-5,"_83":25,"_49":50,"_96":136,"_62":94,"_95":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746037925597],"updatedAt",["D",1715373754419],39,"lockfileKey","1746062619592-esm.town_v_stevekrouse_linkInBioTemplate@39-main","stevekrouse",{"_98":136,"_105":138},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":143,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":146},"a5aafa06-27a9-11f0-9edc-569c3dd06744","parentId","latest",["D",1724618145645],23,"label",[28],"pulls","branches",1,"forks","envVars",{"_155":61,"_157":61},"connections",{"_155":61,"_156":61},"count","unfilledCount","emptyCount",{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":159,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_160":161,"_27":162},["D",1724618145645],"children",[],[28],["D",1746227002296],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":61,"_90":50,"_91":92,"_93":94,"_95":45,"_96":97},"ctx",{"_77":-5,"_127":200,"_201":202,"_203":204,"_205":25,"_206":25,"_207":25,"_208":57,"_209":-5,"_210":-7,"_211":-7,"_212":61,"_213":25,"_214":25,"_215":-5,"_216":25,"_217":25,"_218":25,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":85,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","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","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v24