\n {colors.map((color, index) => (\n onColorSelect(color)}\n title={color}\n />\n ))}\n

\n );\n}\n\nfunction LEDPeg({ color, onClick }: LEDProps) {\n return (\n onClick()}\n >\n \n );\n}\n\nfunction initializeGrid() {\n const grid: Array> = [];\n for (let row = 0; row < 32; row++) {\n const curRow = [];\n for (let col = 0; col < 16; col++) {\n curRow.push({ color: \"#000000\" } as LEDData);\n }\n grid.push(curRow);\n }\n return grid;\n}\n\nexport function App() {\n const [grid, setGrid] = useState>>(initializeGrid());\n const [gridName, setGridName] = useState(\"\");\n const [savedGrids, setSavedGrids] = useState([]);\n const [selectedGrid, setSelectedGrid] = useState(\"\");\n const [saveStatus, setSaveStatus] = useState(\"\");\n const [selectedColor, setSelectedColor] = useState(PEG_COLORS[0]);\n\n useEffect(() => {\n fetchSavedGrids();\n }, []);\n\n const fetchSavedGrids = async () => {\n try {\n const response = await fetch(\"/api/grids\");\n const data = await response.json();\n if (data.success) {\n setSavedGrids(data.keys);\n }\n } catch (error) {\n console.error(\"Error fetching saved grids:\", error);\n }\n };\n\n const handleSaveGrid = async () => {\n if (!gridName.trim()) {\n setSaveStatus(\"Please enter a name for your grid\");\n return;\n }\n\n try {\n const response = await fetch(\"/api/save-grid\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n grid,\n name: gridName,\n }),\n });\n\n const data = await response.json();\n if (data.success) {\n setSaveStatus(`Grid saved successfully as: ${data.key}`);\n setGridName(\"\");\n fetchSavedGrids(); // Refresh the list of saved grids\n } else {\n setSaveStatus(`Error: ${data.error}`);\n }\n } catch (error) {\n console.error(\"Error saving grid:\", error);\n setSaveStatus(\"Error saving grid. Please try again.\");\n }\n };\n\n const handleLoadGrid = async () => {\n if (!selectedGrid) {\n setSaveStatus(\"Please select a grid to load\");\n return;\n }\n\n try {\n // First, load the selected grid\n const response = await fetch(`/api/grid/${selectedGrid}`);\n const data = await response.json();\n if (data.success && data.data.grid) {\n setGrid(data.data.grid);\n setSaveStatus(`Grid loaded successfully: ${selectedGrid}`);\n\n // Then, save this grid to the special 'lite-brite' key\n try {\n await fetch(\"/api/save-grid\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n grid: data.data.grid,\n name: \"lite-brite\",\n }),\n });\n console.log(\"Grid saved to special 'lite-brite' key\");\n } catch (saveError) {\n console.error(\"Error saving to lite-brite key:\", saveError);\n // Don't update the UI status for this background operation\n }\n } else {\n setSaveStatus(`Error: ${data.error || \"Could not load grid\"}`);\n }\n } catch (error) {\n console.error(\"Error loading grid:\", error);\n setSaveStatus(\"Error loading grid. Please try again.\");\n }\n };\n\n return (\n

Lite Brite

\n \n

Select a Peg Color

\n \n

\n\n

\n {grid.map((row, rowIndex) => (\n

\n {row.map((peg, colIndex) => (\n pegClickHandler(grid, setGrid, rowIndex, colIndex, selectedColor)}\n />\n ))}\n

\n ))}\n

\n\n

Save Your Creation

\n setGridName(e.target.value)}\n placeholder=\"Enter a name for your grid\"\n className=\"grid-name-input\"\n />\n \n

\n\n

Load a Saved Creation

\n setSelectedGrid(e.target.value)}\n className=\"grid-select\"\n >\n \n {savedGrids.map((item) => (\n \n ))}\n \n \n

\n\n {saveStatus &&

{saveStatus}

}\n\n

Saved Grids in Storage

\n {savedGrids.length > 0\n ? (\n

\n {item.key}\n

\n )\n :

No saved grids found

}\n

\n );\n}",[],[190,196,212],[190,196],{"_104":222,"_96":223,"_161":224,"_163":191,"_164":142,"_165":225,"_167":168,"_106":226,"_101":32,"_170":206,"_172":227,"_173":22,"_174":-5,"_175":228,"_99":229},"cba7eb2e-0a80-11f0-9366-569c3dd06744","favicon.svg","cba7ec0a-0a80-11f0-9366-569c3dd06744",29,["D",1743020873728],"",[],[190,223],{"_104":231,"_96":232,"_161":233,"_163":191,"_164":142,"_165":234,"_167":168,"_106":235,"_101":236,"_170":206,"_172":237,"_173":22,"_174":-5,"_175":238,"_99":239},"2bab5342-0a88-11f0-9772-569c3dd06744","index.html","1c2b2b39-005f-4f2f-bdb6-03fec3e7aaf9",41,["D",1743024041286],7,"\n\n \n \n \n Lite Brite - from the 80s\n \n \n \n \n

\n \n \n \n",[],[190,232],{"_104":241,"_96":242,"_161":243,"_163":191,"_164":142,"_165":244,"_167":168,"_106":245,"_101":32,"_170":216,"_172":246,"_173":22,"_174":-5,"_175":247,"_99":248},"8276df30-0a82-11f0-8f18-569c3dd06744","index.tsx","8276dff8-0a82-11f0-8f18-569c3dd06744",39,["D",1743021609925],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"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(\n \n \n \n);",[],[190,242],[190],{"_104":251,"_96":252,"_161":253,"_163":-5,"_164":142,"_165":166,"_167":168,"_106":254,"_101":32,"_170":206,"_172":255,"_173":22,"_174":-5,"_175":256,"_99":257},"a0cb78f4-0a66-11f0-99ad-569c3dd06744","README.md","2cb3f4d2-9080-4f39-acb6-3881fc38ddd3",["D",1743009634862],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[252],"files",[158,177,188,194,200,210,221,230,240,250],"counts",{"_262":32,"_263":166,"_264":32,"_265":266},"pulls","branches","forks","envVars",{"_267":32,"_268":32},"count","emptyCount","contents",[],{"_104":178,"_164":142,"_161":180,"_96":179,"_172":184,"_170":183,"_101":182,"_163":162,"_106":272,"_165":121,"_174":-5,"_99":273},["D",1743024820316],[160,179],"upstreamProject",{"_104":150,"_96":276,"_112":277,"_114":-5,"_110":111,"_23":278},"reactHonoStarter","Starter template with client-side React & Hono server",{"_94":279,"_134":280},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_104":145,"_106":283,"_284":285,"_96":44,"_143":150,"_101":286,"_144":-5,"_146":-5,"_287":288,"_108":-5,"_155":22,"_110":111,"_154":279,"_16":152,"_153":276},["D",1740674013689],"updatedAt",["D",1755284984205],72,"lockfileKey","1764013157902-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":44,"_99":100,"_102":295,"_206":300,"_303":304,"_356":357,"_369":-7,"_370":32,"_371":22},{"_104":105,"_96":97,"_106":296,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":22,"_119":-5,"_120":121,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":297,"_136":298,"_139":299,"_155":22},["D",1743009634862],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_104":142,"_143":105,"_144":145,"_146":147,"_148":111,"_149":150,"_151":152,"_153":97,"_154":95},{"_104":178,"_96":179,"_161":180,"_163":162,"_164":142,"_165":121,"_167":168,"_106":301,"_101":182,"_170":183,"_172":184,"_173":22,"_174":-5,"_99":302},["D",1743024820316],[160,179],"history",[305,307,312,317,323,329,335,341,347,352],{"_104":178,"_164":142,"_161":180,"_96":179,"_172":184,"_170":183,"_101":182,"_163":162,"_106":306,"_165":121,"_174":-5},["D",1743024820316],{"_104":308,"_164":142,"_161":180,"_96":179,"_172":309,"_170":183,"_101":205,"_163":162,"_106":310,"_165":311,"_174":-5},"7ab37128-0a82-11f0-a2b3-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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 favicon directly\napp.get(\"/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\napp.get(\"/frontend/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve CSS file directly\napp.get(\"/frontend/components/App.css\", c => serveFile(\"/frontend/components/App.css\", import.meta.url));\n\n// Serve index.tsx directly\napp.get(\"/frontend/index.tsx\", c => serveFile(\"/frontend/index.tsx\", import.meta.url));\n\n// Serve App.tsx directly\napp.get(\"/frontend/components/App.tsx\", c => serveFile(\"/frontend/components/App.tsx\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => {\n console.log(\"Serving file:\", c.req.path);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",["D",1743021596900],37,{"_104":313,"_164":142,"_161":180,"_96":179,"_172":314,"_170":183,"_101":236,"_163":162,"_106":315,"_165":316,"_174":-5},"4f5d372a-0a82-11f0-9fcc-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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 favicon directly\napp.get(\"/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\napp.get(\"/frontend/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve CSS file directly\napp.get(\"/frontend/components/App.css\", c => serveFile(\"/frontend/components/App.css\", import.meta.url));\n\n// Serve index.tsx directly\napp.get(\"/frontend/index.tsx\", c => serveFile(\"/frontend/index.tsx\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => {\n console.log(\"Serving file:\", c.req.path);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",["D",1743021524191],36,{"_104":318,"_164":142,"_161":180,"_96":179,"_172":319,"_170":183,"_101":320,"_163":162,"_106":321,"_165":322,"_174":-5},"9ea33eca-0a81-11f0-8114-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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 favicon directly\napp.get(\"/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\napp.get(\"/frontend/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve CSS file directly\napp.get(\"/frontend/components/App.css\", c => serveFile(\"/frontend/components/App.css\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => {\n console.log(\"Serving file:\", c.req.path);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",6,["D",1743021227682],34,{"_104":324,"_164":142,"_161":180,"_96":179,"_172":325,"_170":183,"_101":326,"_163":162,"_106":327,"_165":328,"_174":-5},"98e94b6e-0a81-11f0-a635-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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 favicon directly\napp.get(\"/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\napp.get(\"/frontend/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => {\n console.log(\"Serving file:\", c.req.path);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",5,["D",1743021218088],32,{"_104":330,"_164":142,"_161":180,"_96":179,"_172":331,"_170":183,"_101":332,"_163":162,"_106":333,"_165":334,"_174":-5},"d259dffe-0a80-11f0-ae17-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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 favicon directly\napp.get(\"/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\napp.get(\"/frontend/favicon.svg\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",4,["D",1743020884959],31,{"_104":336,"_164":142,"_161":180,"_96":179,"_172":337,"_170":183,"_101":338,"_163":162,"_106":339,"_165":340,"_174":-5},"7002dc94-0a6b-11f0-987c-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n // Use a special fixed key for 'lite-brite'\n const key = name === \"lite-brite\" \n ? \"lite-brite\" \n : `litebrite_${name}_${Date.now()}`;\n \n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",3,["D",1743011700534],21,{"_104":342,"_164":142,"_161":180,"_96":179,"_172":343,"_170":183,"_101":344,"_163":162,"_106":345,"_165":346,"_174":-5},"d662afc4-0a6a-11f0-9d7c-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n const key = `litebrite_${name}_${Date.now()}`;\n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\n\n// API endpoint to serve a grid as a PPM file\napp.get(\"/api/ppm/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n // Get the grid data from blob storage\n const data = await blob.getJSON(key);\n const grid = data.grid;\n \n if (!grid) {\n return c.json({ success: false, error: \"Invalid grid data\" }, 400);\n }\n \n // Create PPM header: P6 format, 32x16 dimensions, 255 max color value\n const header = \"P6\\n32 16\\n255\\n\";\n \n // Convert grid data to binary RGB values\n const rgbData = new Uint8Array(32 * 16 * 3); // 3 bytes per pixel (R,G,B)\n \n let byteIndex = 0;\n for (let col = 0; col < 16; col++) {\n for (let row = 0; row < 32; row++) {\n // Get the hex color from the grid\n const hexColor = grid[row][col].color;\n \n // Convert hex to RGB bytes\n const r = parseInt(hexColor.substring(1, 3), 16);\n const g = parseInt(hexColor.substring(3, 5), 16);\n const b = parseInt(hexColor.substring(5, 7), 16);\n \n // Add RGB bytes to the output\n rgbData[byteIndex++] = r;\n rgbData[byteIndex++] = g;\n rgbData[byteIndex++] = b;\n }\n }\n \n // Combine header (as text) with binary RGB data\n const headerBytes = new TextEncoder().encode(header);\n const ppmData = new Uint8Array(headerBytes.length + rgbData.length);\n ppmData.set(headerBytes, 0);\n ppmData.set(rgbData, headerBytes.length);\n \n // Return the PPM file with appropriate headers\n return new Response(ppmData, {\n headers: {\n \"Content-Type\": \"image/x-portable-pixmap\",\n \"Content-Disposition\": `attachment; filename=\"${key}.ppm\"`\n }\n });\n } catch (error) {\n console.error(\"Error generating PPM:\", error);\n return c.json({ success: false, error: \"Failed to generate PPM file\" }, 500);\n }\n});\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;",2,["D",1743011442799],18,{"_104":348,"_164":142,"_161":180,"_96":179,"_172":349,"_170":183,"_101":166,"_163":162,"_106":350,"_165":351,"_174":-5},"87f1b74c-0a68-11f0-b1d0-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\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// API endpoint to save grid data to blob storage\napp.post(\"/api/save-grid\", async c => {\n const body = await c.req.json();\n const { grid, name } = body;\n \n if (!grid || !name) {\n return c.json({ success: false, error: \"Missing grid data or name\" }, 400);\n }\n \n const key = `litebrite_${name}_${Date.now()}`;\n await blob.setJSON(key, { grid, timestamp: new Date().toISOString() });\n \n return c.json({ success: true, key });\n});\n\n// API endpoint to get all blob storage items\napp.get(\"/api/grids\", async c => {\n const keys = await blob.list(\"litebrite_\");\n return c.json({ success: true, keys });\n});\n\n// API endpoint to get a specific grid by key\napp.get(\"/api/grid/:key\", async c => {\n const key = c.req.param(\"key\");\n try {\n const data = await blob.getJSON(key);\n return c.json({ success: true, data });\n } catch (error) {\n return c.json({ success: false, error: \"Grid not found\" }, 404);\n }\n});\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;",["D",1743010452201],15,{"_104":353,"_164":142,"_161":180,"_96":179,"_172":354,"_170":183,"_101":32,"_163":162,"_106":355,"_165":166,"_174":-5},"a0cb671a-0a66-11f0-99ad-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-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;",["D",1743009634862],"versions",[358,360,361,362,363,364,365,366,367,368],{"_206":305,"_359":307},"previous",{"_206":307,"_359":312},{"_206":312,"_359":317},{"_206":317,"_359":323},{"_206":323,"_359":329},{"_206":329,"_359":335},{"_206":335,"_359":341},{"_206":341,"_359":347},{"_206":347,"_359":352},{"_206":352,"_359":-5},"versionNumber","page","hasNext","actionData","errors"]

bradley

litebrite

History for index.ts