[{"_1":2,"_177":-5,"_178":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","8a08d4a46a197c541e82d5fac862bafdcf40c111","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_151":152,"_174":175,"_176":-5},"handle","drewmcdonald","name","flipdot","path","backend/rendering/font-loader.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":117,"_119":-5,"_120":32,"_14":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":131,"_134":135,"_137":138,"_150":20},"id","c3bdecb0-ba4d-11f0-aa28-0224a6c84d84","createdAt",["D",1762350360767],"deletedAt","legacyEnvVars","privacy","public","description","server for flipdot display content","imageUrl","b8db9d60-1994-11f0-a97f-49be2029e0a3","pinnedFileId","036ffad0-bcd1-11f0-a8c9-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","5affebf8-2371-44b9-a6da-146d4a0e1f13","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_132":133},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmtBUlRqVEEwb1lKTWo3UHNHN25IZlo0UFYifQ","org",{"_94":95,"_136":133,"_12":113},"avatar","branch",{"_139":140,"_96":44,"_102":141,"_142":103,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},"version",112,"c3be6604-ba4d-11f0-aa28-0224a6c84d84","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":153,"_96":154,"_155":156,"_157":158,"_159":141,"_160":161,"_162":117,"_104":163,"_139":164,"_165":166,"_167":168,"_169":20,"_170":-5,"_98":171},"5633f5f0-bfd3-11f0-9cb4-42dde27851f2","font-loader.ts","fileId","91c80e82-bfd1-11f0-975a-42dde27851f2","parentId","cc69d0b0-bcd0-11f0-a582-42dde27851f2","branchId","branchVersion",99,"latest",["D",1762957485360],2,"fileType","script","content","/**\n * Font loader for pre-rendered JSON fonts\n * Loads fonts from the Python driver's rendered font files\n */\n\n/**\n * Font metadata and glyph data\n */\nexport interface FontData {\n name: string;\n source_file: string;\n height: number;\n baseline_offset: number;\n space_width: number;\n char_spacing: number;\n glyphs: Record;\n}\n\n/**\n * Cache of loaded fonts\n */\nconst fontCache: Map = new Map();\n\n/**\n * Default display baseline position on 14-pixel display\n * Set at pixel 11 from top, leaving 3 pixels below for descenders\n */\nexport const DISPLAY_BASELINE = 11;\n\n/**\n * Available font names\n * Note: hanover_6x13m font is too large for Val Town file limits (101K)\n */\nexport const AVAILABLE_FONTS = [\"axion_6x7\", \"cg_pixel_4x5\"];\n\n/**\n * Default font name\n */\nexport const DEFAULT_FONT = \"axion_6x7\";\n\n/**\n * Load a font from JSON file\n * Works in both local dev (using Deno.readTextFile) and Val Town (using readFile utility)\n */\nexport async function loadFont(fontName: string): Promise {\n // Check cache first\n if (fontCache.has(fontName)) {\n return fontCache.get(fontName)!;\n }\n\n // Validate font name\n if (!AVAILABLE_FONTS.includes(fontName)) {\n throw new Error(\n `Unknown font: ${fontName}. Available fonts: ${AVAILABLE_FONTS.join(\", \")}`,\n );\n }\n\n try {\n let fontContent: string;\n\n // Determine if we're running locally or on Val Town\n const isLocal = import.meta.url.startsWith(\"file://\");\n\n if (isLocal) {\n // Local development: use Deno's file system APIs\n const currentDir = new URL(\".\", import.meta.url).pathname;\n const fontPath = `${currentDir}../../fonts/${fontName}.json`;\n fontContent = await Deno.readTextFile(fontPath);\n } else {\n // Val Town: use readFile utility\n const { readFile } = await import(\"https://esm.town/v/std/utils@85-main/index.ts\");\n const fontPath = `/fonts/${fontName}.json`;\n fontContent = await readFile(fontPath, import.meta.url);\n }\n\n const fontData = JSON.parse(fontContent) as FontData;\n\n // Cache the font\n fontCache.set(fontName, fontData);\n\n return fontData;\n } catch (error) {\n throw new Error(`Failed to load font ${fontName}: ${error}`);\n }\n}\n\n/**\n * Get a font, loading it if necessary\n * Returns default font if requested font is not available\n */\nexport async function getFont(fontName?: string): Promise {\n const name = fontName || DEFAULT_FONT;\n\n try {\n return await loadFont(name);\n } catch (error) {\n console.warn(\n `Failed to load font ${name}, falling back to ${DEFAULT_FONT}:`,\n error,\n );\n return await loadFont(DEFAULT_FONT);\n }\n}\n\n/**\n * Get bitmap for a single character from a font\n * Returns space glyph for unsupported characters\n */\nexport function renderChar(font: FontData, char: string): number[][] {\n // Try to find the character in the font\n if (char in font.glyphs) {\n return font.glyphs[char];\n }\n\n // Try uppercase version\n const upperChar = char.toUpperCase();\n if (upperChar in font.glyphs) {\n return font.glyphs[upperChar];\n }\n\n // Fall back to space\n return font.glyphs[\" \"] || [];\n}\n\n/**\n * Calculate the width of a character in pixels\n */\nexport function getCharWidth(font: FontData, char: string): number {\n const glyph = renderChar(font, char);\n if (glyph.length === 0) return font.space_width;\n\n // The glyph is stored as rows, each row is an array of columns\n // Find the maximum width across all rows\n let maxWidth = 0;\n for (const row of glyph) {\n maxWidth = Math.max(maxWidth, row.length);\n }\n\n return maxWidth;\n}\n\n/**\n * Measure text width in pixels (including spacing)\n */\nexport function measureText(font: FontData, text: string): number {\n if (text.length === 0) return 0;\n\n let totalWidth = 0;\n for (let i = 0; i < text.length; i++) {\n totalWidth += getCharWidth(font, text[i]);\n if (i < text.length - 1) {\n totalWidth += font.char_spacing;\n }\n }\n\n return totalWidth;\n}\n\n/**\n * Render text at a specific X offset (for scrolling)\n * Returns a flat bit array for the display.\n */\nexport function renderTextAtOffset(\n font: FontData,\n text: string,\n displayWidth: number,\n displayHeight: number,\n xOffset: number,\n): number[] {\n // Calculate y-offset to align font baseline to display baseline\n const yOffset = DISPLAY_BASELINE - font.baseline_offset;\n\n // Initialize empty display buffer\n const bits = new Array(displayWidth * displayHeight).fill(0);\n\n // Render each character\n let cursorX = xOffset;\n for (let i = 0; i < text.length; i++) {\n const charBitmap = renderChar(font, text[i]);\n const charWidth = getCharWidth(font, text[i]);\n\n // Draw character to buffer\n for (let row = 0; row < charBitmap.length; row++) {\n const rowData = charBitmap[row];\n for (let col = 0; col < rowData.length; col++) {\n const x = cursorX + col;\n const y = yOffset + row;\n\n // Bounds check\n if (x >= 0 && x < displayWidth && y >= 0 && y < displayHeight) {\n const bitIndex = y * displayWidth + x;\n bits[bitIndex] = rowData[col];\n }\n }\n }\n\n cursorX += charWidth + font.char_spacing;\n }\n\n return bits;\n}\n\n/**\n * Generate scrolling animation frames for text\n * Text scrolls from right to left across the display\n */\nexport function renderScrollingText(\n font: FontData,\n text: string,\n displayWidth: number,\n displayHeight: number,\n frameDelayMs: number = 100,\n): Array<{ bits: number[]; duration_ms: number }> {\n const textWidth = measureText(font, text);\n const frames: Array<{ bits: number[]; duration_ms: number }> = [];\n\n // Start position: text completely off-screen to the right\n // End position: text completely off-screen to the left\n const startX = displayWidth;\n const endX = -textWidth;\n\n // Generate frames scrolling from right to left, one pixel at a time\n for (let x = startX; x >= endX; x--) {\n const bits = renderTextAtOffset(font, text, displayWidth, displayHeight, x);\n frames.push({\n bits,\n duration_ms: frameDelayMs,\n });\n }\n\n return frames;\n}\n\n/**\n * Render text to a flat bit array (28×14 pixels = 392 bits)\n * Text is centered horizontally, baseline-aligned vertically.\n */\nexport function renderText(\n font: FontData,\n text: string,\n displayWidth: number,\n displayHeight: number,\n): number[] {\n const textWidth = measureText(font, text);\n\n // Calculate horizontal centering offset\n const xOffset = Math.floor((displayWidth - textWidth) / 2);\n\n return renderTextAtOffset(font, text, displayWidth, displayHeight, xOffset);\n}\n","deleted","label",[172,173,154],"backend","rendering","permalink","https://www.val.town/x/drewmcdonald/flipdot/code/backend/rendering/font-loader.ts","extension","actionData","errors"]