React Hono Val Town Starter

\n \n \n \n",[],[159,216],"656e26b6-52b0-11f0-860a-f69ea79377d9","favicon.svg","266ef955-f81b-4a2b-b528-117a49775db9",6,["D",1750957801781],2,"\n",[],[159,223],"08ae25b0-54e6-11f0-9ba8-f69ea79377d9","ScoreBoard.tsx","08ae265a-54e6-11f0-9ba8-f69ea79377d9","8c2398a1-6a4d-42b0-814f-1cd6d4944e5f",30,["D",1751200741319],[],[159,239,232],"components","08ae1fac-54e6-11f0-9ba8-f69ea79377d9","Menu.tsx","08ae2092-54e6-11f0-9ba8-f69ea79377d9",["D",1751200741319],[],[159,239,241],"0f9f1890-5377-11f0-b09d-f69ea79377d9","History.tsx","0f9f1958-5377-11f0-b09d-f69ea79377d9",25,["D",1751043127672],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface HistoryEntry {\n word: string;\n path: string;\n}\n\ninterface HistoryProps {\n history: HistoryEntry[];\n}\n\nexport function History({ history }: HistoryProps) {\n if (history.length === 0) {\n return null;\n }\n\n return (\n

History

\n \n \n \n \n \n \n \n \n {history.map((entry, index) => (\n \n \n \n \n ))}\n \n

Word	Path
{entry.word}	{entry.path}

\n );\n}",[],[159,239,247],"37bb0b4c-54e7-11f0-84d9-f69ea79377d9","CurrentWord.tsx","f773731a-5376-11f0-bebf-f69ea79377d9",["D",1751201249749],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface CurrentWordProps {\n word: string;\n path: string[];\n onPathUpdate: (path: string[]) => void;\n onWordComplete: () => void;\n}\n\nexport function CurrentWord({ word, path, onPathUpdate, onWordComplete }: CurrentWordProps) {\n const containerRef = useRef(null);\n const isDragging = useRef(false);\n const lastHitbox = useRef(null);\n\n const getHitboxFromPoint = (x, y) => {\n const container = containerRef.current;\n if (!container) return null;\n\n const rect = container.getBoundingClientRect();\n const relativeX = x - rect.left;\n const relativeY = y - rect.top;\n\n // Check if point is within container bounds\n if (relativeX < 0 || relativeX > rect.width || relativeY < 0 || relativeY > rect.height) {\n return null;\n }\n\n // Determine which hitbox based on x position (left or right half)\n return relativeX < rect.width / 2 ? \"L\" : \"R\";\n };\n\n const handlePointerDown = (e) => {\n isDragging.current = true;\n const hitbox = getHitboxFromPoint(e.clientX, e.clientY);\n\n if (hitbox) {\n onPathUpdate([...path, hitbox]);\n lastHitbox.current = hitbox;\n }\n\n // Capture pointer to continue receiving events even if pointer moves outside element\n e.currentTarget.setPointerCapture(e.pointerId);\n };\n\n const handlePointerMove = (e) => {\n if (!isDragging.current) return;\n\n const currentHitbox = getHitboxFromPoint(e.clientX, e.clientY);\n\n // Only add to path if we're still inside the container and moved to a different hitbox\n if (currentHitbox && currentHitbox !== lastHitbox.current) {\n onPathUpdate([...path, currentHitbox]);\n lastHitbox.current = currentHitbox;\n }\n };\n\n const handlePointerUp = (e) => {\n isDragging.current = false;\n lastHitbox.current = null;\n e.currentTarget.releasePointerCapture(e.pointerId);\n\n // When dragging ends, trigger word completion if there's a path\n if (path.length > 0) {\n onWordComplete();\n }\n };\n\n return (\n \n

{word}

\n \n );\n}\n\ninterface LastWordProps {\n word: string;\n path: string;\n}\n\nexport function LastWord({ word, path }: LastWordProps) {\n if (!word || !path) {\n return null;\n }\n\n return (\n \n

Last Word

\n Word: {word}\n

\n Path:{\" \"}\n \n {path}\n \n

\n \n );\n}\n\nexport function NextWord({ word }: { word: string }) {\n return {word};\n}",[],[159,239,255],"d77b2010-54e5-11f0-b7f7-f69ea79377d9","App.tsx","5d72fcff-d180-4e46-8e1d-da8e75754a5c",29,["D",1751200658772],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { CurrentWord, LastWord, NextWord } from \"/frontend/components/CurrentWord.tsx\";\nimport { History } from \"/frontend/components/History.tsx\";\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst wordlist = [\n \"elpmaxe\",\n \"string\",\n \"radar\",\n \"dessert\",\n];\n\nexport function App() {\n const [path, setPath] = useState([]);\n const [currentWordIndex, setCurrentWordIndex] = useState(0);\n const [history, setHistory] = useState([]);\n const [timer, setTimer] = useState(0);\n const [lastWord, setLastWord] = useState({ word: \"\", path: \"\" });\n\n const handlePathUpdate = (newPath) => {\n setPath(newPath);\n };\n\n const handleWordComplete = () => {\n // When word is completed, log current word and path to history, then move to next word\n const currentWord = wordlist[currentWordIndex];\n setHistory(prev => [...prev, { word: currentWord, path: path.join(\"\") }]);\n setLastWord({ word: currentWord, path: path.join(\"\") });\n setPath([]); // Reset path\n\n setCurrentWordIndex(prev => (prev + 1) % wordlist.length); // Move to next word, wrap around\n };\n\n return (\n

\n \n \n\n {/*

Current Path: {path.join(\"\")}

*/}\n\n \n

\n );\n}",[],[159,239,262],"80530a7c-5130-11f0-b402-f69ea79377d9",["D",1750792920080],[186,187,188,189,190],[159,239],["D",1750792920080],[185,191,192,193,194],[159],"916269ce-54e7-11f0-87de-f69ea79377d9",["D",1751201400172],[],[166,33],"8052ff64-5130-11f0-b402-f69ea79377d9","index.ts",["D",1750792920080],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","twowords",[],[166,282],["D",1750792920080],[182,183],[166],["D",1750792920080],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_18":54,"_105":106,"_107":24},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"ctx",{"_78":-5,"_129":329,"_330":331,"_332":333,"_334":24,"_335":24,"_336":24,"_337":58,"_338":-5,"_339":-7,"_340":-7,"_341":62,"_342":24,"_343":24,"_344":-5,"_345":24,"_346":24,"_347":24,"_348":-5},"ENV",{"_300":301,"_302":303,"_304":86,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v32