🎲 DNDoodle

\n {message &&

{message}

}\n {!sessionJoined && !isCreatingGroup && !createdGroupCode && (\n

Join a Session Poll

\n setGroupCode(e.target.value)}\n placeholder=\"Enter session poll code\"\n className=\"input\"\n />\n \n

\n \n

\n )}\n {isCreatingGroup && !sessionJoined && (\n

Create a New Session Poll

\n setCreatorEmail(e.target.value)}\n placeholder=\"Your email\"\n className=\"input\"\n />\n setGroupName(e.target.value)}\n placeholder=\"Enter session poll name\"\n className=\"input\"\n />\n setPollDuration(Number(e.target.value))}\n className=\"input\"\n >\n \n \n \n \n \n \n \n

\n )}\n {createdGroupCode && !sessionJoined && (\n

\n Your Session Poll: {createdGroupName}\n

\n Session Poll Code: {createdGroupCode}\n

Share this link with your players:

\n {groupShareLink}\n

Poll End Date: {format(new Date(pollEndDate), \"EEE MMMM d, yyyy\")}

\n )}\n {sessionJoined && !isCreatingGroup && (\n

\n Session Poll: {groupName}\n

\n Code: {groupCode}\n

Poll End Date: {format(new Date(pollEndDate), \"EEE MMMM d, yyyy\")}

\n setName(e.target.value)}\n placeholder=\"Your name\"\n required\n className=\"input\"\n />\n setEmail(e.target.value)}\n placeholder=\"Your email (optional)\"\n className=\"input\"\n />\n

\n setIsDM(e.target.checked)}\n />\n I'm the DM\n

\n {getDates().map(date => (\n toggleAvailability(date)}\n className={`date-btn ${getAvailabilityClass(availability[date])}`}\n >\n {format(parse(date, \"yyyy-MM-dd\", new Date()), \"EEE MMM d\")}\n \n ))}\n

\n \n Available\n \n \n Maybe\n \n \n Unavailable\n \n

\n \n \n {editLink && (\n

Your Edit Link:

\n {editLink}\n

\n {email\n ? \"Use this link to edit your availability later. (It's been emailed to the address you provided too.)\"\n : \"Save this link to edit your availability later. You won't be able to recover it without an email.\"}\n

\n )}\n

Session Poll Availability

Total Responses: {totalResponses}

\n Respondents: {allRespondents.map(r => r.name).join(\", \")}\n

Dates with DM Available:

\n {Object.entries(groupAvailability).filter(([, data]) => data.available.some(a => a.isDM)).map((\n [date, data],\n ) => (\n

\n {format(parse(date, \"yyyy-MM-dd\", new Date()), \"EEE MMMM d\")}\n

\n \n

\n Available: {data.available.map(a => a.name).join(\", \")}\n

\n {data.maybe.length > 0\n && (\n

\n Maybe: {data.maybe.map(m => m.name).join(\", \")}\n

\n )}\n

\n ))}\n \n {showDatesWithoutDM && (\n

Dates without DM Available:

\n {Object.entries(groupAvailability).filter(([, data]) => !data.available.some(a => a.isDM)).map((\n [date, data],\n ) => (\n

\n {format(parse(date, \"yyyy-MM-dd\", new Date()), \"EEE MMMM d\")}\n

\n \n

\n Available: {data.available.map(a => a.name).join(\", \")}\n

\n Maybe: {data.maybe.map(m => m.name).join(\", \")}\n

\n ))}\n

\n )}\n {bestDate && (\n

\n Best Date:{\" \"}\n \n {format(parse(bestDate, \"yyyy-MM-dd\", new Date()), \"EEEE MMMM d, yyyy\")}\n \n

\n )}\n

\n \n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { nanoid } = await import(\"https://esm.sh/nanoid\");\n const { email: send } = await import(\"https://esm.town/v/std/email\");\n const SCHEMA_VERSION = 11;\n const KEY = \"dndoodle\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_groups_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n code TEXT UNIQUE NOT NULL,\n name TEXT NOT NULL,\n end_date TEXT NOT NULL,\n creator_email TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_availability_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n group_code TEXT NOT NULL,\n name TEXT NOT NULL,\n email TEXT,\n date TEXT NOT NULL,\n status INTEGER NOT NULL,\n edit_token TEXT NOT NULL,\n is_dm BOOLEAN NOT NULL DEFAULT 0,\n FOREIGN KEY (group_code) REFERENCES ${KEY}_groups_${SCHEMA_VERSION}(code)\n )\n `);\n\n if (request.method === \"POST\" && request.url.endsWith(\"/create-group\")) {\n const { groupName, pollDuration, creatorEmail } = await request.json();\n const code = nanoid(6);\n const endDate = new Date();\n endDate.setDate(endDate.getDate() + pollDuration * 7);\n const endDateStr = endDate.toISOString().split(\"T\")[0];\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_groups_${SCHEMA_VERSION} (code, name, end_date, creator_email) VALUES (?, ?, ?, ?)\n `,\n [code, groupName, endDateStr, creatorEmail],\n );\n\n if (creatorEmail) {\n const groupLink = `https://dndoodle.redfloatplane.lol/?code=${code}`;\n await send({\n to: creatorEmail,\n subject: \"Your DNDoodle Poll Created\",\n text: `Your poll \"${groupName}\" has been created successfully! Here is your poll link: ${groupLink}`,\n });\n }\n\n return new Response(JSON.stringify({ code, endDate: endDateStr }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && request.url.endsWith(\"/submit\")) {\n const { name, email, availability, groupCode, editToken, isDM } = await request.json();\n const newEditToken = editToken || nanoid(32);\n\n // Delete existing entries if edit_token is provided\n if (editToken) {\n await sqlite.execute(\n `\n DELETE FROM ${KEY}_availability_${SCHEMA_VERSION}\n WHERE edit_token = ?\n `,\n [editToken],\n );\n }\n\n for (const [date, status] of Object.entries(availability)) {\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_availability_${SCHEMA_VERSION} (group_code, name, email, date, status, edit_token, is_dm)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `,\n [groupCode, name, email, date, status, newEditToken, isDM ? 1 : 0],\n );\n }\n\n if (email) {\n const editUrl = `https://dndoodle.redfloatplane.lol/?code=${groupCode}&token=${newEditToken}`;\n await send({\n to: email,\n subject: \"Edit Your DNDoodle Availability!\",\n text: `Thanks for submitting! You can edit your availability using this link: ${editUrl}`,\n });\n }\n\n const creatorResult = await sqlite.execute(\n `SELECT creator_email FROM ${KEY}_groups_${SCHEMA_VERSION} WHERE code = ?`,\n [groupCode],\n );\n\n if (creatorResult.rows.length > 0 && creatorResult.rows[0].creator_email) {\n const creatorEmail = creatorResult.rows[0].creator_email.toString();\n await send({\n to: creatorEmail,\n subject: \"New Response Added to Your DNDDoodle Poll!\",\n text:\n `A new response has been added by ${name}! Check it here: https://dndoodle.redfloatplane.lol/?code=${groupCode}`,\n });\n }\n\n return new Response(JSON.stringify({ success: true, editToken: newEditToken }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.url.includes(\"/availability\")) {\n const url = new URL(request.url);\n const groupCode = url.searchParams.get(\"code\");\n\n // Check if the group exists\n const groupResult = await sqlite.execute(\n `SELECT name, end_date FROM ${KEY}_groups_${SCHEMA_VERSION} WHERE code = ?`,\n [groupCode],\n );\n\n if (groupResult.rows.length === 0) {\n return new Response(JSON.stringify({ error: \"Session Poll not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const groupName = groupResult.rows[0].name;\n const pollEndDate = groupResult.rows[0].end_date;\n\n const result = await sqlite.execute(\n `\n SELECT date, name, status, is_dm\n FROM ${KEY}_availability_${SCHEMA_VERSION}\n WHERE group_code = ?\n ORDER BY is_dm DESC, date ASC, status DESC, name ASC\n `,\n [groupCode],\n );\n\n const availability = {};\n const allRespondents = new Set();\n\n result.rows.forEach(row => {\n if (!availability[row.date]) {\n availability[row.date] = { available: [], maybe: [] };\n }\n const respondent = { name: row.name, isDM: row.is_dm === 1 };\n if (row.status === 1) {\n availability[row.date].available.push(respondent);\n } else if (row.status === 2) {\n availability[row.date].maybe.push(respondent);\n }\n allRespondents.add(JSON.stringify(respondent));\n });\n\n const totalResponses = allRespondents.size;\n\n const bestDate = Object.entries(availability)\n .sort(([, a], [, b]) => {\n const aDMAvailable = a.available.some(r => r.isDM);\n const bDMAvailable = b.available.some(r => r.isDM);\n if (aDMAvailable !== bDMAvailable) return bDMAvailable ? 1 : -1;\n return (b.available.length + b.maybe.length) - (a.available.length + a.maybe.length);\n })[0]?.[0] || null;\n\n return new Response(\n JSON.stringify({\n availability,\n bestDate,\n groupName,\n allRespondents: Array.from(allRespondents).map(JSON.parse),\n totalResponses,\n pollEndDate,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n if (request.url.includes(\"/user-availability\")) {\n const url = new URL(request.url);\n const editToken = url.searchParams.get(\"token\");\n const result = await sqlite.execute(\n `\n SELECT name, email, group_code, date, status, is_dm\n FROM ${KEY}_availability_${SCHEMA_VERSION}\n WHERE edit_token = ?\n `,\n [editToken],\n );\n if (result.rows.length === 0) {\n return new Response(JSON.stringify({ error: \"Invalid edit token\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n const { name, email, group_code: groupCode, is_dm: isDM } = result.rows[0];\n const availability = Object.fromEntries(result.rows.map(row => [row.date, row.status]));\n return new Response(JSON.stringify({ name, email, groupCode, availability, isDM: isDM === 1 }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n DNDoodle - Defeat the scheduling dragon\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f0f2f5;\n color: #333;\n }\n .container {\n max-width: 800px;\n margin: 0 auto;\n background-color: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n }\n .container:hover {\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n }\n .title {\n color: #4a4a4a;\n text-align: center;\n font-size: 2.5em;\n margin-bottom: 30px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n }\n h2, h3 {\n color: #2c3e50;\n text-align: center;\n margin-top: 20px;\n }\n .availability-form {\n margin-bottom: 30px;\n }\n .input {\n width: 100%;\n padding: 12px;\n margin-bottom: 20px;\n border: 2px solid #ddd;\n border-radius: 6px;\n font-size: 16px;\n transition: border-color 0.3s ease;\n }\n .input:focus {\n border-color: #3498db;\n outline: none;\n }\n .date-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n margin-bottom: 20px;\n }\n .date-btn {\n padding: 10px;\n background-color: #f8f9fa;\n border: 2px solid #e9ecef;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .date-btn:hover {\n background-color: #e9ecef;\n }\n .date-btn.available {\n background-color: #2ecc71;\n color: white;\n border-color: #27ae60;\n }\n .date-btn.maybe {\n background-color: #f1c40f;\n color: white;\n border-color: #f39c12;\n }\n .btn {\n padding: 12px 20px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n transition: all 0.3s ease;\n }\n .btn:hover {\n background-color: #2980b9;\n transform: translateY(-2px);\n }\n .btn:active {\n transform: translateY(0);\n }\n .btn-primary {\n background-color: #2ecc71;\n }\n .btn-primary:hover {\n background-color: #27ae60;\n }\n .results {\n margin-top: 30px;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 6px;\n }\n .availability-item {\n margin-bottom: 15px;\n }\n .date-info {\n display: flex;\n justify-content: space-between;\n margin-bottom: 5px;\n }\n .date {\n font-weight: bold;\n }\n .availability-bar {\n height: 20px;\n background-color: #ecf0f1;\n border-radius: 10px;\n overflow: hidden;\n display: flex;\n }\n .bar {\n height: 100%;\n transition: width 0.5s ease-in-out;\n }\n .bar.available {\n background-color: #2ecc71;\n }\n .bar.maybe {\n background-color: #f1c40f;\n }\n .available-names, .maybe-names {\n font-size: 0.9em;\n margin-top: 5px;\n }\n footer {\n text-align: center;\n margin-top: 30px;\n color: #7f8c8d;\n }\n footer a {\n color: #3498db;\n text-decoration: none;\n transition: color 0.3s ease;\n }\n footer a:hover {\n color: #2980b9;\n }\n .message {\n padding: 10px;\n margin-bottom: 20px;\n border-radius: 6px;\n text-align: center;\n background-color: #d4edda;\n color: #155724;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n }\n .message:not(:empty) {\n opacity: 1;\n }\n .highlight {\n color: #e74c3c;\n font-weight: bold;\n }\n .join-create, .create-group, .group-code {\n text-align: center;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .group-content {\n animation: fadeIn 0.5s ease-in-out;\n }\n .legend {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n }\n .legend-item {\n display: flex;\n align-items: center;\n margin: 0 10px;\n }\n .legend-color {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 5px;\n }\n .legend-color.available {\n background-color: #2ecc71;\n }\n .legend-color.maybe {\n background-color: #f1c40f;\n }\n .edit-link {\n margin-top: 20px;\n text-align: center;\n padding: 15px;\n background-color: #e8f4fd;\n border-radius: 6px;\n }\n .edit-link a {\n word-break: break-all;\n }\n .dm-checkbox {\n margin-bottom: 20px;\n }\n .dm-checkbox input[type=\"checkbox\"] {\n margin-right: 10px;\n }\n .dates-without-dm {\n margin-top: 20px;\n padding: 15px;\n background-color: #f8f9fa;\n border-radius: 6px;\n }\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/csl_/dndoodle/code/main.tsx","extension","actionData","errors"]