Focus Grid (Deno)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_135":-5,"_20":136,"_22":137,"_138":139,"_140":141,"_26":142,"_24":143,"_144":-5,"_145":-5,"_146":51,"_147":148,"_149":43,"_150":-5,"_151":-5,"_152":153},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","salon","name","untitled-2301","branchName","main","version","path","index.html","project",{"_33":81,"_13":14,"_44":82,"_83":-5,"_84":51,"_85":86,"_87":86,"_88":-5,"_89":-5,"_90":91,"_92":70,"_93":43,"_94":-5,"_95":71,"_96":97,"_98":99,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":105,"_106":105,"_107":108,"_109":108,"_110":108,"_111":105,"_112":105,"_113":114,"_115":116,"_117":118,"_119":51},"tree",[54,55,56],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","ba2fa886-2b15-11f0-8f91-569c3dd06744","fileId","9309217e-2b15-11f0-b5b6-569c3dd06744","parentId","branchId","fdb0bd9a-2b13-11f0-a5f4-569c3dd06744","branchVersion",18,"latest",true,"createdAt",["D",1746603276634],3,"fileType","content","\n\n \n \n \n Focus Grid (Deno)\n \n \n \n

\n \n \n","deleted",false,"label",[19],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":78,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":79,"_18":80},{"_33":68,"_13":69,"_35":70,"_37":-5,"_38":39,"_40":71,"_42":43,"_44":72,"_17":73,"_47":74,"_48":75,"_50":51,"_52":-5,"_65":76,"_18":77},{"_33":57,"_13":58,"_35":59,"_37":-5,"_38":39,"_40":60,"_42":43,"_44":61,"_17":62,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":66,"_18":67},"2d236e40-2b16-11f0-9745-569c3dd06744","new-file-3446.tsx","2babf37a-2b16-11f0-ac09-569c3dd06744",27,["D",1746603469495],1,"script","","children",[],[58],"20b80a12-2b16-11f0-9f16-569c3dd06744","main.tsx","0016a1d0-2b14-11f0-8113-569c3dd06744",25,["D",1746603448651],20,"http","/** @jsxImportSource /react */\nimport { renderToString } from \"https://esm.sh/react-dom/server\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react\";\n\n/* ---------- Types ---------- */\ninterface Scores {\n relevancy: number;\n relatability: number;\n likeness: number;\n}\n\ninterface NavNode {\n id: string;\n row: number;\n col: number;\n data?: T;\n scores: Scores;\n}\n\ninterface FocusGridProps {\n nodes: NavNode[];\n initialId?: string;\n scoreWeights?: Partial;\n onFocusChange?: (node: NavNode) => void;\n renderNode: (node: NavNode, focused: boolean) => React.ReactNode;\n className?: string;\n gridCols?: number;\n gap?: string;\n}\n\n/* ---------- Constants ---------- */\nconst DEFAULT_WEIGHTS: Scores = {\n relevancy: 1,\n relatability: 1,\n likeness: 1,\n};\n\nconst SWIPE_THRESHOLD = 32;\n\ntype Dir = \"up\" | \"down\" | \"left\" | \"right\";\n\n/* ---------- Component ---------- */\nfunction FocusGrid({\n nodes,\n initialId,\n scoreWeights = DEFAULT_WEIGHTS,\n onFocusChange,\n renderNode,\n className,\n gridCols = 4,\n gap = \"1rem\",\n}: FocusGridProps) {\n const [focusedId, setFocusedId] = useState(() => {\n const initialNode = initialId && nodes.find((node) => node.id === initialId);\n return initialNode ? initialId : nodes[0]?.id || \"\";\n });\n\n const containerRef = useRef(null);\n const cellRefs = useRef>(new Map());\n\n const getNextId = useCallback(\n (dir: Dir): string | undefined => {\n const current = nodes.find((node) => node.id === focusedId);\n if (!current) return undefined;\n\n const weight = (s: Scores) =>\n (s.relevancy * (scoreWeights.relevancy ?? DEFAULT_WEIGHTS.relevancy))\n + (s.relatability * (scoreWeights.relatability ?? DEFAULT_WEIGHTS.relatability))\n + (s.likeness * (scoreWeights.likeness ?? DEFAULT_WEIGHTS.likeness));\n\n let best: { id: string; score: number; primaryDist: number; secDist: number } | undefined;\n\n nodes.forEach((node) => {\n if (node.id === current.id) return;\n const rowDiff = node.row - current.row;\n const colDiff = node.col - current.col;\n\n const isDirOk = (dir === \"up\" && rowDiff < 0)\n || (dir === \"down\" && rowDiff > 0)\n || (dir === \"left\" && colDiff < 0)\n || (dir === \"right\" && colDiff > 0);\n\n if (!isDirOk) return;\n\n const primaryDist = dir === \"up\" || dir === \"down\" ? Math.abs(rowDiff) : Math.abs(colDiff);\n const secDist = dir === \"up\" || dir === \"down\" ? Math.abs(colDiff) : Math.abs(rowDiff);\n const compositeScore = weight(node.scores);\n\n if (\n !best\n || primaryDist < best.primaryDist\n || (primaryDist === best.primaryDist && compositeScore > best.score)\n || (primaryDist === best.primaryDist && compositeScore === best.score && secDist < best.secDist)\n ) {\n best = { id: node.id, score: compositeScore, primaryDist, secDist };\n }\n });\n\n return best?.id;\n },\n [focusedId, nodes, scoreWeights],\n );\n\n const updateFocus = useCallback(\n (id: string) => {\n setFocusedId(id);\n const el = cellRefs.current.get(id);\n if (el) {\n el.focus({ preventScroll: true });\n }\n\n const node = nodes.find(n => n.id === id);\n if (onFocusChange && node) {\n onFocusChange(node);\n }\n },\n [nodes, onFocusChange],\n );\n\n const onKey = useCallback(\n (e: KeyboardEvent) => {\n if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;\n let dir: Dir | undefined;\n switch (e.key) {\n case \"ArrowUp\":\n dir = \"up\";\n break;\n case \"ArrowDown\":\n dir = \"down\";\n break;\n case \"ArrowLeft\":\n dir = \"left\";\n break;\n case \"ArrowRight\":\n dir = \"right\";\n break;\n }\n if (dir) {\n const id = getNextId(dir);\n if (id && id !== focusedId) {\n e.preventDefault();\n updateFocus(id);\n }\n }\n },\n [focusedId, getNextId, updateFocus],\n );\n\n const touch = useRef<{ x: number; y: number } | null>(null);\n\n const onTouchStart = useCallback((e: React.TouchEvent) => {\n const t = e.touches[0];\n touch.current = { x: t.clientX, y: t.clientY };\n }, []);\n\n const onTouchEnd = useCallback((e: React.TouchEvent) => {\n if (!touch.current) return;\n const t = e.changedTouches[0];\n const dx = t.clientX - touch.current.x;\n const dy = t.clientY - touch.current.y;\n\n if (Math.abs(dx) < SWIPE_THRESHOLD && Math.abs(dy) < SWIPE_THRESHOLD) return;\n\n const dir: Dir = Math.abs(dx) > Math.abs(dy) ? (dx < 0 ? \"right\" : \"left\") : dy < 0 ? \"down\" : \"up\";\n\n const id = getNextId(dir);\n if (id && id !== focusedId) {\n updateFocus(id);\n }\n touch.current = null;\n }, [focusedId, getNextId, updateFocus]);\n\n useEffect(() => {\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"keydown\", onKey);\n container.addEventListener(\"touchstart\", onTouchStart as EventListener);\n container.addEventListener(\"touchend\", onTouchEnd as EventListener);\n\n return () => {\n container.removeEventListener(\"keydown\", onKey);\n container.removeEventListener(\"touchstart\", onTouchStart as EventListener);\n container.removeEventListener(\"touchend\", onTouchEnd as EventListener);\n };\n }\n }, [onKey, onTouchStart, onTouchEnd]);\n\n return (\n \n {nodes.map((node) => {\n const isFocused = node.id === focusedId;\n return (\n {\n if (el) {\n cellRefs.current.set(node.id, el);\n }\n }}\n style={{\n position: \"relative\",\n userSelect: \"none\",\n }}\n >\n {renderNode(node, isFocused)}\n \n );\n })}\n \n );\n}\n\n// Example Usage (React)\ninterface Race {\n name: string;\n description: string;\n color: string;\n img: string;\n}\n\nconst races: NavNode[] = [\n {\n id: \"human\",\n row: 0,\n col: 0,\n scores: { relevancy: 0.7, relatability: 0.9, likeness: 0.8 },\n data: {\n name: \"Human\",\n description: \"Versatile and adaptable...\",\n color: \"#4A90E2\",\n img: \"https://via.placeholder.com/150\",\n },\n },\n {\n id: \"elf\",\n row: 0,\n col: 1,\n scores: { relevancy: 0.8, relatability: 0.7, likeness: 0.9 },\n data: {\n name: \"Elf\",\n description: \"Graceful and long-lived...\",\n color: \"#863AEB\",\n img: \"https://via.placeholder.com/150\",\n },\n },\n {\n id: \"dwarf\",\n row: 1,\n col: 0,\n scores: { relevancy: 0.9, relatability: 0.8, likeness: 0.7 },\n data: {\n name: \"Dwarf\",\n description: \"Sturdy and resilient...\",\n color: \"#D4A33D\",\n img: \"https://via.placeholder.com/150\",\n },\n },\n {\n id: \"orc\",\n row: 1,\n col: 1,\n scores: { relevancy: 0.6, relatability: 0.5, likeness: 0.6 },\n data: {\n name: \"Orc\",\n description: \"Strong and Aggressive\",\n color: \"#388E3C\",\n img: \"https://via.placeholder.com/150\",\n },\n },\n];\n\nconst RaceChooser = () => {\n return (\n \n nodes={races}\n initialId=\"human\"\n renderNode={(node, focused) => (\n \n

{node.data!.name}

{node.data!.description}

\n \n )}\n onFocusChange={(node) => console.log(\"focused →\", node.id)}\n scoreWeights={{ relevancy: 1.5, likeness: 1 }}\n gridCols={2}\n gap=\"1rem\"\n />\n );\n};\n\nexport default RaceChooser;",[],[69],["D",1746603276634],[],[19],"fdb05a12-2b13-11f0-a5f4-569c3dd06744",["D",1746602530902],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b12b39d0-1fe4-11f0-9001-4fc1852e0e06","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","45a0d482-0d4d-4887-9bc4-d08243be47a9","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_134":130},"org",{"_11":12,"_128":-5,"_129":130,"_90":91,"_131":132,"_133":51},"branch",{"_17":60,"_13":16,"_33":39,"_120":81,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":14,"_127":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ3NnI5NzZ4ajBmUUZoTUxYdExrMmZYWnAzdyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":81,"_13":14,"_44":173,"_83":-5,"_84":51,"_85":86,"_87":86,"_88":-5,"_89":-5,"_90":91,"_92":70,"_93":43,"_94":-5,"_95":71,"_96":97,"_98":99,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":105,"_106":105,"_107":108,"_109":108,"_110":108,"_111":105,"_112":105,"_113":174,"_115":175,"_117":176,"_119":51},[164,165,166],"files",[164,165,166],"counts",{"_155":97,"_156":62,"_157":62,"_32":158,"_159":160},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":154},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks",{"_161":97,"_163":97},"connections",{"_161":97,"_162":97},"count","unfilledCount","emptyCount",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":78,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":171,"_18":172},{"_33":68,"_13":69,"_35":70,"_37":-5,"_38":39,"_40":71,"_42":43,"_44":72,"_17":73,"_47":74,"_48":75,"_50":51,"_52":-5,"_65":169,"_18":170},{"_33":57,"_13":58,"_35":59,"_37":-5,"_38":39,"_40":60,"_42":43,"_44":61,"_17":62,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":167,"_18":168},[],[58],[],[69],[],[19],["D",1746602530902],{"_11":12,"_134":130},{"_11":12,"_128":-5,"_129":130,"_90":91,"_131":132,"_133":51},{"_17":60,"_13":16,"_33":39,"_120":81,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":14,"_127":12},"ctx",{"_113":-5,"_151":210,"_211":212,"_213":214,"_215":51,"_216":51,"_217":51,"_218":43,"_219":-5,"_220":-7,"_221":-7,"_222":97,"_223":51,"_224":51,"_225":-5,"_226":51,"_227":51,"_228":51,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":16,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]