/** * This enhanced DNDoodle app now includes a feature for the poll creator to set the end date of the poll, * and a checkbox for users to indicate if they are the DM. The DM's availability is treated as special * and is displayed differently in the results view. * The app uses React for the frontend and SQLite for data persistence. * It features improved styling, interactive elements, and email functionality. */ /** @jsxImportSource https://esm.sh/react */ import { addDays, format, parse } from "https://esm.sh/date-fns"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [creatorEmail, setCreatorEmail] = useState(""); const [groupCode, setGroupCode] = useState(""); const [groupName, setGroupName] = useState(""); const [availability, setAvailability] = useState({}); const [groupAvailability, setGroupAvailability] = useState({}); const [bestDate, setBestDate] = useState(""); const [isCreatingGroup, setIsCreatingGroup] = useState(false); const [createdGroupCode, setCreatedGroupCode] = useState(""); const [createdGroupName, setCreatedGroupName] = useState(""); const [isLoading, setIsLoading] = useState(false); const [message, setMessage] = useState(""); const [editToken, setEditToken] = useState(""); const [editLink, setEditLink] = useState(""); const [groupShareLink, setGroupShareLink] = useState(""); const [confirmNoEmail, setConfirmNoEmail] = useState(false); const [allRespondents, setAllRespondents] = useState([]); const [totalResponses, setTotalResponses] = useState(0); const [sessionJoined, setSessionJoined] = useState(false); const [pollDuration, setPollDuration] = useState(2); // Default to 2 weeks const [pollEndDate, setPollEndDate] = useState(""); const [isDM, setIsDM] = useState(false); const [showDatesWithoutDM, setShowDatesWithoutDM] = useState(false); useEffect(() => { const params = new URLSearchParams(window.location.search); const code = params.get("code"); const token = params.get("token"); if (code) { setGroupCode(code); fetchGroupAvailability(code); } if (token) { setEditToken(token); fetchUserAvailability(token); } }, []); const fetchGroupAvailability = async (code) => { setIsLoading(true); try { const response = await fetch(`/availability?code=${code}`); if (!response.ok) { throw new Error("Session Poll not found"); } const data = await response.json(); setGroupAvailability(data.availability); setBestDate(data.bestDate); setGroupName(data.groupName); setAllRespondents(data.allRespondents); setTotalResponses(data.totalResponses); setPollEndDate(data.pollEndDate); setSessionJoined(true); } catch (error) { setMessage( error.message === "Session Poll not found" ? "This session poll doesn't exist. Please check the code and try again." : "Failed to load session poll data. Please try again.", ); setGroupCode(""); setSessionJoined(false); } finally { setIsLoading(false); } }; const fetchUserAvailability = async (token) => { setIsLoading(true); try { const response = await fetch(`/user-availability?token=${token}`); const data = await response.json(); setName(data.name); setEmail(data.email); setAvailability(data.availability); setGroupCode(data.groupCode); setIsDM(data.isDM); fetchGroupAvailability(data.groupCode); setMessage("Your availability data loaded successfully!"); setTimeout(() => setMessage(""), 3000); } catch (error) { setMessage("Failed to load your availability data. Please try again."); } finally { setIsLoading(false); } }; const handleSubmit = async (e) => { e.preventDefault(); if (!email && !confirmNoEmail) { setConfirmNoEmail(true); setMessage( "Are you sure you want to submit without an email? You won't be able to edit your response later if you lose the link.", ); return; } setIsLoading(true); try { const response = await fetch("/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, email, availability, groupCode, editToken, isDM }), }); const data = await response.json(); setEditToken(data.editToken); const newEditLink = `${window.location.origin}?code=${groupCode}&token=${data.editToken}`; setEditLink(newEditLink); fetchGroupAvailability(groupCode); setMessage( "Availability submitted successfully!" + (email ? " You can use the link below to edit your response." : " Remember to save your edit link, as you won't be able to recover it without an email."), ); } catch (error) { setMessage("Failed to submit availability. Please try again."); } finally { setIsLoading(false); setConfirmNoEmail(false); } }; const toggleAvailability = (date) => { setAvailability(prev => { const currentState = prev[date] || 0; const newState = (currentState + 1) % 3; return { ...prev, [date]: newState }; }); }; const createGroup = async () => { setIsLoading(true); try { const response = await fetch("/create-group", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ groupName, pollDuration, creatorEmail }), }); const { code, endDate } = await response.json(); setCreatedGroupCode(code); setCreatedGroupName(groupName); setPollEndDate(endDate); setIsCreatingGroup(false); const shareLink = `${window.location.origin}?code=${code}`; setGroupShareLink(shareLink); setMessage("New session poll created successfully!"); } catch (error) { setMessage("Failed to create session poll. Please try again."); } finally { setIsLoading(false); } }; const joinSession = () => { if (groupCode) { fetchGroupAvailability(groupCode); } }; const getDates = () => { const endDate = pollEndDate ? new Date(pollEndDate) : addDays(new Date(), 14); const dates = []; let currentDate = new Date(); while (currentDate <= endDate) { dates.push(format(currentDate, "yyyy-MM-dd")); currentDate = addDays(currentDate, 1); } return dates; }; const getAvailabilityClass = (state) => { switch (state) { case 1: return "available"; case 2: return "maybe"; default: return ""; } }; const toggleShowDatesWithoutDM = () => { setShowDatesWithoutDM(!showDatesWithoutDM); }; return (

🎲 DNDoodle

{message &&

{message}

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

Join a Session Poll

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

)} {isCreatingGroup && !sessionJoined && (

Create a New Session Poll

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

)} {createdGroupCode && !sessionJoined && (

Your Session Poll: {createdGroupName}

Session Poll Code: {createdGroupCode}

Share this link with your players:

{groupShareLink}

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

)} {sessionJoined && !isCreatingGroup && (

Session Poll: {groupName}

Code: {groupCode}

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

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

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

{getDates().map(date => ( ))}

Available Maybe Unavailable

{editLink && (

Your Edit Link:

{editLink}

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

)}

Session Poll Availability

Total Responses: {totalResponses}

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

Dates with DM Available:

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

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

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

{data.maybe.length > 0 && (

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

)}

))} {showDatesWithoutDM && (

Dates without DM Available:

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

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

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

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

))}

)} {bestDate && (

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

)}

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

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