React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_263":264,"_265":266},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":85,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":24,"_125":126,"_127":57,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",20,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/CurrentWord.tsx","latestPath","fileId","f773731a-5376-11f0-bebf-f69ea79377d9","name","CurrentWord.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\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

Last Word

\n Word: {word}\n

\n Path: {path}\n

\n );\n}","createdAt",["D",1751043087119],"branchVersion","branchId","804d3f02-5130-11f0-b402-f69ea79377d9","id","8049b33c-5130-11f0-b402-f69ea79377d9","IsItTwoWords",["D",1750792920080],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","28015561-01b3-426c-9a3e-35cb76970cae","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":53,"_104":105,"_106":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"isOwned",76,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",67,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","alexwein","handle","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":259,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":260,"_79":261,"_81":262,"_83":24},"tree",[181,183,191],"files",[181,182,183,184,185,186,187,188,189,190,191],"counts",{"_170":61,"_171":172,"_173":61,"_174":175,"_176":177},"contents",[144,145,146],"upstreamProject",{"_42":93,"_31":139,"_51":140,"_52":141,"_48":49,"_77":142},"upstreamBranch",{"_42":88,"_37":132,"_133":134,"_31":85,"_86":93,"_13":135,"_87":-5,"_89":-5,"_136":137,"_46":-5,"_83":24,"_48":49,"_97":138,"_62":95,"_96":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789592399&sig=9f2b8198a6bd290c0e4cd558a371acaf6bae0541324daebbd1636993bd403dce",{"_99":138,"_107":143},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592399&sig=e3667930a878fd5db49e47cce78fe270a8ba33317e34775a1ada2dd4a7c49d8d",{"_42":165,"_31":166,"_29":167,"_150":-5,"_40":41,"_39":161,"_152":57,"_37":168,"_13":61,"_33":163,"_35":-5,"_23":24,"_156":-5,"_26":169},{"_42":158,"_31":159,"_29":160,"_150":-5,"_40":41,"_39":161,"_152":57,"_37":162,"_13":61,"_33":163,"_35":-5,"_23":24,"_156":-5,"_26":164},{"_42":147,"_31":148,"_29":149,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":153,"_13":154,"_33":20,"_35":155,"_23":24,"_156":-5,"_26":157},"5854d670-5362-11f0-8b33-f69ea79377d9","README.md","29ee1cf0-abef-4cb8-9e22-49d1fbb5cdbf","parentId",19,"latest",["D",1751034230224],4,"## Name TBD\n\n1. Is it Two Words?\n2. Star/Rats\n3. backwords\n4. Quick Swipe Word Quiz #1\n5. emagdrow\n\n\n1. starting menu\n2. scoring\n3. how to\n4. share link\n\nhandle data: random for now into 3 packs?\n\n1. pack 1\n2. pack 2\n\n\nstate: time, score, current_word_index","label",[148],"805313b4-5130-11f0-b402-f69ea79377d9","frontend","0c79d68b-9b8e-46ee-b6e5-d021138429db",1,["D",1750792920080],"directory",[159],"80530662-5130-11f0-b402-f69ea79377d9","backend","a573a2a2-3bfd-4c81-b9ce-1b41cc01ce78",["D",1750792920080],[166],"pulls","branches",3,"forks","envVars",{"_178":61,"_180":61},"connections",{"_178":61,"_179":61},"count","unfilledCount","emptyCount",{"_42":165,"_31":166,"_29":167,"_150":-5,"_40":41,"_39":161,"_152":57,"_37":256,"_13":61,"_33":163,"_35":-5,"_23":24,"_156":-5,"_193":257,"_26":258},{"_42":248,"_31":249,"_29":55,"_150":167,"_40":41,"_39":161,"_152":24,"_37":250,"_13":61,"_33":251,"_35":252,"_23":24,"_156":253,"_193":254,"_26":255},{"_42":158,"_31":159,"_29":160,"_150":-5,"_40":41,"_39":161,"_152":57,"_37":245,"_13":61,"_33":163,"_35":-5,"_23":24,"_156":-5,"_193":246,"_26":247},{"_42":241,"_31":231,"_29":227,"_150":160,"_40":41,"_39":161,"_152":57,"_37":242,"_13":61,"_33":163,"_35":-5,"_23":24,"_156":-5,"_193":243,"_26":244},{"_42":232,"_31":233,"_29":234,"_150":227,"_40":41,"_39":235,"_152":24,"_37":236,"_13":237,"_33":34,"_35":238,"_23":24,"_156":-5,"_193":239,"_26":240},{"_42":226,"_31":32,"_29":30,"_150":227,"_40":41,"_39":14,"_152":24,"_37":228,"_13":61,"_33":34,"_35":36,"_23":24,"_156":-5,"_193":229,"_26":230},{"_42":218,"_31":219,"_29":220,"_150":160,"_40":41,"_39":221,"_152":24,"_37":222,"_13":199,"_33":20,"_35":223,"_23":24,"_156":-5,"_193":224,"_26":225},{"_42":211,"_31":212,"_29":213,"_150":160,"_40":41,"_39":161,"_152":24,"_37":214,"_13":61,"_33":20,"_35":215,"_23":24,"_156":-5,"_193":216,"_26":217},{"_42":204,"_31":205,"_29":206,"_150":160,"_40":41,"_39":161,"_152":57,"_37":207,"_13":61,"_33":34,"_35":208,"_23":24,"_156":-5,"_193":209,"_26":210},{"_42":196,"_31":197,"_29":198,"_150":160,"_40":41,"_39":199,"_152":24,"_37":200,"_13":161,"_33":20,"_35":201,"_23":24,"_156":-5,"_193":202,"_26":203},{"_42":147,"_31":148,"_29":149,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":192,"_13":154,"_33":20,"_35":155,"_23":24,"_156":-5,"_193":194,"_26":195},["D",1751034230224],"children",[],[148],"04470b10-52af-11f0-a4ed-f69ea79377d9","style.css","731e6046-02d8-42cd-bc36-7d32279fa2cf",2,["D",1750957209290],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}\n\n.container {\n position: relative;\n width: 100%;\n max-width: 600px;\n height: 200px;\n margin: 0 auto;\n background-color: #f8f8f5; /* offwhite background */\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.center-text {\n position: relative;\n z-index: 2;\n color: #333; /* dark gray */\n background-color: #f8f8f5;\n padding: 0.5em 1em;\n font-size: 1.5rem;\n text-align: center;\n}\n\n.hitbox {\n position: absolute;\n top: 0;\n height: 100%;\n width: 50%;\n z-index: 1;\n touch-action: none;\n}\n\n.hitbox.left {\n left: 0;\n}\n\n.hitbox.right {\n right: 0;\n}\n\n.hitbox {\n position: absolute;\n top: 0;\n height: 100%;\n width: 50%;\n z-index: 3;\n touch-action: none;\n}\n\n.back {\n position: absolute;\n top: 0;\n height: 100%;\n width: 50%;\n z-index: 1;\n}\n\n.back.left {\n left: 0;\n background-color: #add8e6; /* light blue */\n}\n\n.back.right {\n right: 0;\n background-color: #e6ccff; /* light purple */\n}",[],[159,197],"80530f7c-5130-11f0-b402-f69ea79377d9","index.tsx","69904acc-e989-49ee-8628-4bff2b45ddb0",["D",1750792920080],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[159,205],"80530de2-5130-11f0-b402-f69ea79377d9","index.html","895eb8ac-7e2c-4406-a11e-437689cf4352",["D",1750792920080],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[159,212],"656e26b6-52b0-11f0-860a-f69ea79377d9","favicon.svg","266ef955-f81b-4a2b-b528-117a49775db9",6,["D",1750957801781],"\n",[],[159,219],"f7737252-5376-11f0-bebf-f69ea79377d9","8c2398a1-6a4d-42b0-814f-1cd6d4944e5f",["D",1751043087119],[],[159,231,32],"components","fc70698a-52b4-11f0-b7d7-f69ea79377d9","App.tsx","5d72fcff-d180-4e46-8e1d-da8e75754a5c",16,["D",1750959773121],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, 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 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 setPath(prev => [...prev, 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 setPath(prev => [...prev, 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, log current word and path to history, then move to next word\n if (path.length > 0) {\n const currentWord = wordlist[currentWordIndex];\n setHistory(prev => [...prev, { word: currentWord, path: path.join(\"\") }]);\n setPath([]); // Reset path\n setCurrentWordIndex(prev => (prev + 1) % wordlist.length); // Move to next word, wrap around\n }\n };\n\n return (\n

\n \n

{wordlist[currentWordIndex]}

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

\n \n {history.length > 0 && (\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 \n );\n}",[],[159,231,233],"80530a7c-5130-11f0-b402-f69ea79377d9",["D",1750792920080],[185,186],[159,231],["D",1750792920080],[184,187,188,189,190],[159],"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,249],["D",1750792920080],[182],[166],["D",1750792920080],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":53,"_104":105,"_106":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"ctx",{"_77":-5,"_129":296,"_297":298,"_299":300,"_301":24,"_302":24,"_303":24,"_304":57,"_305":-5,"_306":-7,"_307":-7,"_308":61,"_309":24,"_310":24,"_311":-5,"_312":24,"_313":24,"_314":24,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":85,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"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 · v20