Is It A Word?

\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, {\n passive: false,\n });\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 \n {cards.length > 0 && (\n \n

\n {currentCardIndex + 1}/{cards.length}\n

{cards[currentCardIndex].word}

{cards[currentCardIndex].word.length}

{username}

↑ Sort of

\n )}\n \n

← Definitely not a word

Definitely is a word →

\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 Is It A Word?\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-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 300px;\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 margin-bottom: 20px;\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-labels-container {\n display: flex;\n justify-content: space-between;\n width: 100%;\n max-width: 300px;\n}\n.swipe-label {\n font-size: 12px;\n color: #888;\n text-align: center;\n width: 40%;\n}\n.swipe-label.left {\n text-align: left;\n}\n.swipe-label.right {\n text-align: right;\n}\n.swipe-label.up {\n position: absolute;\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`;","deleted","label",[99],"permalink","https://www.val.town/x/alexwein/judgeWords/code/main.tsx","extension","actionData","errors"]