Focus Grid (Deno)

\n \n \n",3,["D",1746603276634],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_182":26,"_184":26},"connections",{"_182":26,"_183":26},"count","unfilledCount","emptyCount",{"_35":166,"_13":18,"_64":65,"_45":-5,"_37":38,"_171":89,"_191":107,"_39":205,"_41":169,"_67":21,"_167":168,"_69":24,"_172":-5,"_194":206,"_17":207},{"_35":197,"_13":198,"_64":105,"_45":-5,"_37":38,"_171":110,"_191":107,"_39":199,"_41":200,"_67":201,"_167":202,"_69":24,"_172":-5,"_194":203,"_17":204},{"_35":188,"_13":189,"_64":190,"_45":-5,"_37":38,"_171":131,"_191":107,"_39":192,"_41":176,"_67":68,"_167":193,"_69":24,"_172":-5,"_194":195,"_17":196},"2d236e40-2b16-11f0-9745-569c3dd06744","new-file-3446.tsx","2babf37a-2b16-11f0-ac09-569c3dd06744","latest",["D",1746603469495],"","children",[],[189],"20b80a12-2b16-11f0-9f16-569c3dd06744","main.tsx",["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;",[],[198],["D",1746603276634],[],[18],["D",1746602530902],{"_11":12,"_144":72},{"_11":12,"_140":-5,"_71":72,"_30":70,"_141":142,"_143":24},{"_41":131,"_13":16,"_35":38,"_132":95,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":14,"_139":12},"ctx",{"_54":-5,"_163":245,"_246":247,"_248":249,"_250":24,"_251":24,"_252":24,"_253":107,"_254":-5,"_255":-7,"_256":-7,"_257":26,"_258":24,"_259":24,"_260":-5,"_261":24,"_262":24,"_263":24,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":16,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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"]

History · index.html