/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [page, setPage] = useState("home"); const [groupId, setGroupId] = useState(""); const [participants, setParticipants] = useState([]); const [newParticipant, setNewParticipant] = useState(""); const [exclusions, setExclusions] = useState([]); const [selectedParticipant, setSelectedParticipant] = useState(""); const [match, setMatch] = useState(""); useEffect(() => { const params = new URLSearchParams(window.location.search); const id = params.get("id"); if (id) { setGroupId(id); setPage("participate"); fetchParticipants(id); // Check for stored participant const storedParticipant = localStorage.getItem(`secretSanta_${id}`); if (storedParticipant) { setSelectedParticipant(storedParticipant); getMatch(id, storedParticipant); } } }, []); const fetchParticipants = async (id) => { const response = await fetch(`/participants?id=${id}`); const data = await response.json(); setParticipants(data); }; const addParticipant = (e) => { e.preventDefault(); if (newParticipant && !participants.includes(newParticipant)) { setParticipants([...participants, newParticipant]); setNewParticipant(""); } }; const removeParticipant = (participant) => { setParticipants(participants.filter(p => p !== participant)); setExclusions(exclusions.filter(([p1, p2]) => p1 !== participant && p2 !== participant)); }; const createGroup = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("participants", JSON.stringify(participants)); formData.append("exclusions", JSON.stringify(exclusions)); const response = await fetch("/create-group", { method: "POST", body: formData, }); const data = await response.json(); setGroupId(data.id); setPage("share"); }; const addExclusion = (e) => { e.preventDefault(); const person1 = e.target.person1.value; const person2 = e.target.person2.value; if ( person1 !== person2 && !exclusions.some(([p1, p2]) => (p1 === person1 && p2 === person2) || (p1 === person2 && p2 === person1)) ) { setExclusions([...exclusions, [person1, person2]]); } e.target.reset(); }; const removeExclusion = (index) => { setExclusions(exclusions.filter((_, i) => i !== index)); }; const getMatch = async (id, participant) => { const response = await fetch(`/get-match?id=${id}&participant=${participant}`); const data = await response.json(); setMatch(data.match); localStorage.setItem(`secretSanta_${id}`, participant); }; if (page === "home") { return (

Secret Santa

Create a new Secret Santa group

Exclusions

{p1} cannot be matched with {p2}

); } if (page === "share") { return (

Share this link with your friends

Group ID: {groupId}

Link: {window.location.origin}?id={groupId}

); } if (page === "participate") { return (

Secret Santa Participation

Group ID: {groupId}

{!selectedParticipant ? ( <> ) : (

Your name: {selectedParticipant}

)} {match && (

Your Secret Santa Match

{match}

)}

); } } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const url = new URL(request.url); const SCHEMA_VERSION = 3; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_groups_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, participants TEXT NOT NULL, exclusions TEXT NOT NULL ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_matches_${SCHEMA_VERSION} ( group_id TEXT NOT NULL, giver TEXT NOT NULL, receiver TEXT NOT NULL, PRIMARY KEY (group_id, giver) ) `); if (url.pathname === "/create-group") { if (request.method === "POST") { const formData = await request.formData(); const participants = JSON.parse(formData.get("participants")); const exclusions = JSON.parse(formData.get("exclusions")); const id = Math.random().toString(36).substr(2, 9); await sqlite.execute( `INSERT INTO ${KEY}_groups_${SCHEMA_VERSION} (id, participants, exclusions) VALUES (?, ?, ?)`, [id, JSON.stringify(participants), JSON.stringify(exclusions)], ); return new Response(JSON.stringify({ id }), { headers: { "Content-Type": "application/json" } }); } } if (url.pathname === "/participants") { const id = url.searchParams.get("id"); const result = await sqlite.execute( `SELECT participants FROM ${KEY}_groups_${SCHEMA_VERSION} WHERE id = ?`, [id], ); if (result.rows.length > 0) { const participants = JSON.parse(result.rows[0].participants); return new Response(JSON.stringify(participants), { headers: { "Content-Type": "application/json" } }); } } if (url.pathname === "/get-match") { const id = url.searchParams.get("id"); const participant = url.searchParams.get("participant"); // Check if a match already exists const existingMatch = await sqlite.execute( `SELECT receiver FROM ${KEY}_matches_${SCHEMA_VERSION} WHERE group_id = ? AND giver = ?`, [id, participant], ); if (existingMatch.rows.length > 0) { return new Response(JSON.stringify({ match: existingMatch.rows[0].receiver }), { headers: { "Content-Type": "application/json" }, }); } // If no match exists, create a new one const groupData = await sqlite.execute( `SELECT participants, exclusions FROM ${KEY}_groups_${SCHEMA_VERSION} WHERE id = ?`, [id], ); if (groupData.rows.length > 0) { const participants = JSON.parse(groupData.rows[0].participants); const exclusions = JSON.parse(groupData.rows[0].exclusions); const takenMatches = (await sqlite.execute( `SELECT receiver FROM ${KEY}_matches_${SCHEMA_VERSION} WHERE group_id = ?`, [id], )).rows.map(row => row.receiver); const availableMatches = participants.filter(p => p !== participant && !takenMatches.includes(p) && !exclusions.some(([p1, p2]) => (p1 === participant && p2 === p) || (p2 === participant && p1 === p)) ); if (availableMatches.length > 0) { const match = availableMatches[Math.floor(Math.random() * availableMatches.length)]; await sqlite.execute( `INSERT INTO ${KEY}_matches_${SCHEMA_VERSION} (group_id, giver, receiver) VALUES (?, ?, ?)`, [id, participant, match], ); return new Response(JSON.stringify({ match }), { headers: { "Content-Type": "application/json" } }); } else { return new Response(JSON.stringify({ error: "No available matches" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } } } return new Response( ` Secret Santa App

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` :root { --primary-color: #e63946; --secondary-color: #457b9d; --background-color: #f1faee; --text-color: #1d3557; --card-background: #ffffff; } body { font-family: 'Nunito', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } h1, h2, h3 { font-family: 'DM Serif Display', cursive; color: var(--primary-color); } h1 { font-size: 3.5rem; text-align: center; margin-bottom: 2rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } h2 { font-size: 2.5rem; } h3 { font-size: 2rem; } .card { background-color: var(--card-background); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem; } .form-group { margin-bottom: 1rem; } .input, .select { width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: 'Nunito', sans-serif; } .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 1rem; font-family: 'Nunito', sans-serif; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-secondary { background-color: var(--secondary-color); color: white; } .btn-danger { background-color: #e76f51; color: white; } .btn-small { font-size: 0.8rem; padding: 0.3rem 0.6rem; } .btn-large { font-size: 1.2rem; padding: 0.7rem 1.4rem; } .btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn:disabled { background-color: #ccc; cursor: not-allowed; } .list { list-style-type: none; padding: 0; } .list-item { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 0.5rem 1rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .match-result { text-align: center; margin-top: 2rem; padding: 1rem; background-color: #e9ecef; border-radius: 4px; } .match-name { font-size: 2rem; font-weight: bold; color: var(--primary-color); } .participant-name { font-size: 1.2rem; margin-bottom: 1rem; } .footer-link { text-align: center; margin-top: 2rem; font-family: 'Nunito', sans-serif; } .footer-link a { color: var(--secondary-color); text-decoration: none; } .footer-link a:hover { text-decoration: underline; } @media (max-width: 600px) { .container { padding: 10px; } .card { padding: 1rem; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } } `;

secretsanta