Card Stack

\n );\n}\n\nfunction App() {\n const [cards, setCards] = useState([]);\n const [currentCardIndex, setCurrentCardIndex] = useState(0);\n const [touchStart, setTouchStart] = useState(null);\n const [touchEnd, setTouchEnd] = useState(null);\n const [cardPosition, setCardPosition] = useState({ x: 0, y: 0 });\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [username, setUsername] = useState(\"\");\n\n const fetchWords = useCallback(() => {\n fetch(\"/words\")\n .then(response => response.json())\n .then(data => {\n setCards(data);\n setCurrentCardIndex(0);\n });\n }, []);\n\n useEffect(() => {\n fetchWords();\n }, [fetchWords]);\n\n useEffect(() => {\n const preventDefault = (e) => e.preventDefault();\n document.body.addEventListener(\"touchmove\", preventDefault, { passive: false });\n return () => {\n document.body.removeEventListener(\"touchmove\", preventDefault);\n };\n }, []);\n\n const sendJudgment = useCallback((id, judgment) => {\n fetch(\"/judge\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ id, judgment, username }),\n }).then(response => {\n if (!response.ok) {\n console.error(\"Failed to send judgment\");\n }\n });\n }, [username]);\n\n const handleDirection = useCallback((direction) => {\n if (isTransitioning) return;\n\n setIsTransitioning(true);\n let newPosition = { x: 0, y: 0 };\n let judgment = 0;\n\n switch (direction) {\n case \"left\":\n newPosition = { x: -100, y: 0 };\n judgment = 0;\n break;\n case \"right\":\n newPosition = { x: 100, y: 0 };\n judgment = 5;\n break;\n case \"up\":\n newPosition = { x: 0, y: -100 };\n judgment = 2;\n break;\n }\n\n setCardPosition(newPosition);\n\n const currentCard = cards[currentCardIndex];\n sendJudgment(currentCard.id, judgment);\n\n setTimeout(() => {\n setCurrentCardIndex((prevIndex) => {\n const nextIndex = (prevIndex + 1) % cards.length;\n if (nextIndex === 0) {\n // If we've reached the end of the stack, fetch new words\n fetchWords();\n }\n return nextIndex;\n });\n setCardPosition({ x: 0, y: 0 });\n setIsTransitioning(false);\n }, 300);\n }, [cards, currentCardIndex, isTransitioning, fetchWords, sendJudgment]);\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n setTouchEnd(null);\n setTouchStart({\n x: e.targetTouches[0].clientX,\n y: e.targetTouches[0].clientY,\n });\n };\n\n const handleTouchMove = (e) => {\n e.preventDefault();\n setTouchEnd({\n x: e.targetTouches[0].clientX,\n y: e.targetTouches[0].clientY,\n });\n };\n\n const handleTouchEnd = (e) => {\n e.preventDefault();\n if (!touchStart || !touchEnd) return;\n const xDiff = touchStart.x - touchEnd.x;\n const yDiff = touchStart.y - touchEnd.y;\n const absDiffX = Math.abs(xDiff);\n const absDiffY = Math.abs(yDiff);\n\n if (Math.max(absDiffX, absDiffY) > 50) {\n if (absDiffX > absDiffY) {\n handleDirection(xDiff > 0 ? \"left\" : \"right\");\n } else {\n if (yDiff > 0) handleDirection(\"up\");\n }\n }\n };\n\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (e.repeat) return; // Ignore held down keys\n switch (e.key) {\n case \"ArrowLeft\":\n handleDirection(\"left\");\n break;\n case \"ArrowRight\":\n handleDirection(\"right\");\n break;\n case \"ArrowUp\":\n handleDirection(\"up\");\n break;\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleDirection]);\n\n if (!username) {\n return ;\n }\n\n return (\n \n {cards.length > 0 && (\n \n

{currentCardIndex + 1}/{cards.length}

{cards[currentCardIndex].word}

{username}

← Definitely not a word

Definitely is a word →

↑ Sort of

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n if (request.url.endsWith(\"/words\")) {\n const result = await sqlite.execute(`\n SELECT id, word\n FROM judgments\n WHERE judgment IS NULL\n ORDER BY RANDOM()\n LIMIT 20\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.url.endsWith(\"/judge\") && request.method === \"POST\") {\n const { id, judgment, username } = await request.json();\n const judgeQuery = (id, judgment, judged_by) =>\n `UPDATE judgments SET judgment = ${judgment}, judged_by = '${judged_by}', judged_at = CURRENT_TIMESTAMP WHERE id = ${id};`;\n\n await sqlite.execute(judgeQuery(id, judgment, username));\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n Card Stack\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nhtml, body {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n}\nbody {\n font-family: system-ui, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f0f0f0;\n touch-action: none;\n}\n#root {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.card-stack {\n position: relative;\n width: 80vw;\n height: 120vw;\n max-width: 300px;\n max-height: 450px;\n perspective: 1000px;\n}\n.card {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n font-size: 24px;\n user-select: none;\n backface-visibility: hidden;\n}\n.card-index {\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 14px;\n color: #888;\n}\n.card-word {\n font-size: 32px;\n font-weight: bold;\n}\n.username {\n position: absolute;\n bottom: 10px;\n right: 10px;\n font-size: 14px;\n color: #888;\n}\n.swipe-label {\n position: absolute;\n font-size: 12px;\n color: #888;\n text-align: center;\n width: 100%;\n}\n.swipe-label.left {\n left: -110%;\n bottom: 10px;\n transform: translateY(-50%);\n}\n.swipe-label.right {\n right: -110%;\n bottom: 10px;\n transform: translateY(-50%);\n}\n.swipe-label.up {\n top: -40px;\n left: 50%;\n transform: translateX(-50%);\n}\n.name-prompt {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n width: 80%;\n max-width: 300px;\n}\n.name-prompt form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.name-prompt input {\n padding: 5px;\n font-size: 16px;\n}\n.name-prompt button {\n padding: 5px 10px;\n font-size: 16px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n.name-prompt button:hover {\n background-color: #0056b3;\n}\n.error {\n color: red;\n font-size: 14px;\n}\n`;",[],[100],"files",[155,174],"counts",{"_186":32,"_187":123,"_188":32,"_189":190,"_193":194},"pulls","branches","forks","envVars",{"_191":32,"_192":32},"count","emptyCount","connections",{"_191":32,"_195":32},"unfilledCount","contents",[],{"_105":175,"_96":100,"_158":118,"_160":-5,"_161":143,"_162":102,"_163":22,"_107":199,"_101":177,"_165":178,"_167":179,"_169":22,"_170":-5,"_99":200},["D",1739926392565],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":209,"_153":214,"_182":221,"_166":222,"_196":224,"_225":-5,"_226":-5,"_227":-5,"_228":-5,"_229":230,"_189":-5},{"_105":106,"_96":97,"_107":210,"_109":-5,"_110":111,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":111,"_120":-5,"_121":-5,"_122":123,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":211,"_137":212,"_140":213,"_152":22},["D",1746220191495],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":116},{"_101":142,"_96":44,"_105":143,"_144":106,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":97,"_151":95},[215,218],{"_105":156,"_96":157,"_158":159,"_160":-5,"_161":143,"_162":123,"_163":111,"_107":164,"_101":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":216,"_99":217},[],[157],{"_105":175,"_96":100,"_158":118,"_160":-5,"_161":143,"_162":102,"_163":22,"_107":176,"_101":177,"_165":178,"_167":179,"_169":22,"_170":-5,"_171":219,"_99":220},[],[100],[215,218],{"_105":175,"_96":100,"_158":118,"_160":-5,"_161":143,"_162":102,"_163":22,"_107":199,"_101":177,"_165":178,"_167":179,"_169":22,"_170":-5,"_99":223},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

alexwein

judgeWords