\n \n \n \n",[104],"b45759b3dc27db417022c9e94978f8ba24e7df180f3299caad6a5f9d2679fe8a","e2240bac-418b-11f0-883e-76b3cceeab13","e0e955f2-4187-11f0-83ff-76b3cceeab13",41,["D",1749072949867],6,"\n\n \n Hi there!\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n

Hi there!

\n\n

\n I'm your cool new webpage. Made with Val Town!\n

\n \n",[104],"c7361dc92d6ef7bac8fa83bfd60c3e7225006fd4a979847612f5e344669e252b",{"_72":147,"_74":148,"_76":-7},{"_72":137,"_74":138,"_76":-7},{"_72":126,"_74":127,"_76":-7},"script.js",{"_32":128,"_13":126,"_79":129,"_81":-5,"_82":33,"_83":130,"_84":26,"_34":131,"_40":132,"_87":133,"_89":134,"_66":48,"_91":-5,"_92":-7,"_72":135,"_94":136},"20acf350-4215-11f0-b215-76b3cceeab13","27db6ac2-4188-11f0-9fb1-76b3cceeab13",47,["D",1749131895828],7,"script","/* If you're feeling fancy you can add interactivity\n to your site with Javascript.\n Note: TypeScript won't work in this file. */\n\n// prints \"hi\" in the browser's dev tools console\nconsole.log(\"hi\");",[126],"64f11332c09344f36075ba3f447d75f81cd65f6db469468e727edd7dfd221d08","favicon.svg",{"_32":139,"_13":137,"_79":140,"_81":-5,"_82":33,"_83":141,"_84":26,"_34":142,"_40":143,"_87":88,"_89":144,"_66":48,"_91":-5,"_92":-7,"_72":145,"_94":146},"b66b6a14-418b-11f0-810d-76b3cceeab13","ab042b20-418b-11f0-ae3f-76b3cceeab13",37,["D",1749072876514],3,"",[137],"20dd0276a145731b8dca440fe16f3c1fcd48c45325412e3b210256e959015e92","README.md",{"_32":149,"_13":147,"_79":150,"_81":-5,"_82":33,"_83":60,"_84":48,"_34":151,"_40":152,"_87":88,"_89":153,"_66":48,"_91":-5,"_92":-7,"_72":154,"_94":155},"4d0c0baa-4217-11f0-ba6e-76b3cceeab13","8ddbf374-4187-11f0-aa65-76b3cceeab13",["D",1749132829269],28,"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\nIf you want more interactivity, check out this\n[React starter](https://www.val.town/x/std/reactHonoStarter).\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.",[147],"b98e0d30d7738f1f9895a67ecf662a9a4fb62187304f833f088a2ef0e7312a85",{"_72":157,"_74":-7,"_76":158},"main.js",{"_32":159,"_13":157,"_79":160,"_81":-5,"_82":58,"_83":161,"_84":26,"_34":162,"_40":100,"_87":133,"_89":163,"_66":48,"_91":-5,"_92":-7,"_72":164,"_94":165},"598fe0b8-554a-11f0-8212-f69ea79377d9","d1163278-53af-11f0-96bb-f69ea79377d9",17,["D",1751243826692],"const TILE_WIDTH = 1000;\nconst TILE_HEIGHT = 1000;\n\nconst UI_STATE = {\n brushColor: \"#000000\",\n zoom: 0.4,\n};\n\nconst NUMBER_VALUE_KEYS = [\"brushSize\"];\n\ndocument.querySelectorAll(\"#tools input\").forEach((input) => {\n const updateUIState = (el) => {\n const stateKey = el.name;\n const value = el.value;\n if (NUMBER_VALUE_KEYS.includes(stateKey)) {\n UI_STATE[stateKey] = parseInt(value, 10);\n } else {\n UI_STATE[stateKey] = value;\n }\n };\n\n if (input.checked) updateUIState(input);\n input.addEventListener(\"change\", (e) => updateUIState(e.target));\n});\n\nlet IS_DRAWING = false;\n\nconst mainCanvas = document.getElementById(\"mainCanvas\");\nconst layerCanvas = document.getElementById(\"layerCanvas\");\n\nconst mainCtx = mainCanvas.getContext(\"2d\");\nconst layerCtx = layerCanvas.getContext(\"2d\");\n\nfunction setMainCanvasSize() {\n const dpr = window.devicePixelRatio || 1;\n mainCanvas.width = window.innerWidth * dpr;\n mainCanvas.height = window.innerHeight * dpr;\n mainCanvas.style.width = window.innerWidth + \"px\";\n mainCanvas.style.height = window.innerHeight + \"px\";\n mainCtx.scale(dpr, dpr);\n}\n\nsetMainCanvasSize();\nwindow.addEventListener(\"resize\", setMainCanvasSize);\n\nlayerCanvas.width = TILE_WIDTH;\nlayerCanvas.height = TILE_HEIGHT;\n\n// Define the special tile that accepts draw events\nconst specialTileX = 1;\nconst specialTileY = 1;\n\nfunction getLayerCoords(e) {\n const rect = mainCanvas.getBoundingClientRect();\n const scaleX = TILE_WIDTH / rect.width;\n const scaleY = TILE_HEIGHT / rect.height;\n\n let clientX, clientY;\n if (e instanceof MouseEvent) {\n clientX = e.clientX;\n clientY = e.clientY;\n } else {\n // Use the first touch point for drawing\n clientX = e.touches[0].clientX;\n clientY = e.touches[0].clientY;\n }\n\n // Calculate which tile the mouse is over\n const tileWidth = TILE_WIDTH * UI_STATE.zoom;\n const tileHeight = TILE_HEIGHT * UI_STATE.zoom;\n\n const tileIndexX = Math.floor((clientX - rect.left) / tileWidth);\n const tileIndexY = Math.floor((clientY - rect.top) / tileHeight);\n\n // Coordinates relative to the layer\n const layerX = clientX / UI_STATE.zoom - TILE_WIDTH * tileIndexX;\n const layerY = clientY / UI_STATE.zoom - TILE_HEIGHT * tileIndexY;\n\n // Check if the coordinates are within the special tile\n const isWithinSpecialTile = tileIndexX === specialTileX\n && tileIndexY === specialTileY\n && layerX >= 0\n && layerX < TILE_WIDTH\n && layerY >= 0\n && layerY < TILE_HEIGHT;\n\n return {\n x: layerX,\n y: layerY,\n isWithinSpecialTile,\n };\n}\n\nfunction updateDisplay() {\n mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);\n\n const tilesX = Math.ceil(mainCtx.canvas.width / (TILE_WIDTH * UI_STATE.zoom)) + 1;\n const tilesY = Math.ceil(mainCtx.canvas.height / (TILE_HEIGHT * UI_STATE.zoom)) + 1;\n\n for (let x = 0; x < tilesX; x++) {\n for (let y = 0; y < tilesY; y++) {\n const tileX = x * TILE_WIDTH * UI_STATE.zoom;\n const tileY = y * TILE_HEIGHT * UI_STATE.zoom;\n\n mainCtx.drawImage(\n layerCanvas,\n tileX,\n tileY,\n TILE_WIDTH * UI_STATE.zoom,\n TILE_HEIGHT * UI_STATE.zoom,\n );\n\n // Draw a red square only around the special tile\n if (x === specialTileX && y === specialTileY) {\n mainCtx.strokeStyle = \"violet\";\n mainCtx.lineWidth = 2;\n mainCtx.strokeRect(tileX, tileY, TILE_WIDTH * UI_STATE.zoom, TILE_HEIGHT * UI_STATE.zoom);\n }\n }\n }\n requestAnimationFrame(updateDisplay);\n}\n\nfunction startDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = true;\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n if (isWithinSpecialTile) {\n // Draw a circle as soon as the brush stroke starts, so a click or tap will result in a circle\n layerCtx.beginPath();\n layerCtx.arc(x, y, UI_STATE.brushSize / 2, 0, Math.PI * 2);\n layerCtx.fillStyle = UI_STATE.brushColor;\n layerCtx.fill();\n\n // Begin a line as well.\n layerCtx.beginPath();\n layerCtx.moveTo(x, y);\n }\n}\n\nfunction stopDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = false;\n layerCtx.closePath();\n}\n\nfunction draw(e) {\n e.preventDefault(); // Prevent default touch behavior\n\n if (!IS_DRAWING) return;\n\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n\n // Only draw if within the special tile area\n if (isWithinSpecialTile) {\n layerCtx.lineTo(x, y);\n layerCtx.strokeStyle = UI_STATE.brushColor;\n layerCtx.lineWidth = UI_STATE.brushSize;\n layerCtx.lineCap = \"round\";\n layerCtx.lineJoin = \"round\";\n layerCtx.stroke();\n }\n}\n\n// Add both mouse and touch event listeners\nmainCanvas.addEventListener(\"mousedown\", startDrawing);\nmainCanvas.addEventListener(\"mousemove\", draw);\nmainCanvas.addEventListener(\"mouseup\", stopDrawing);\nmainCanvas.addEventListener(\"mouseout\", stopDrawing);\n\nmainCanvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchmove\", draw, { passive: false });\nmainCanvas.addEventListener(\"touchend\", stopDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchcancel\", stopDrawing, { passive: false });\n\n// mainCanvas.addEventListener('pointerdown', startDrawing, { passive: false })\n// mainCanvas.addEventListener('pointermove', draw, { passive: false })\n// mainCanvas.addEventListener('pointerup', stopDrawing, { passive: false })\n// mainCanvas.addEventListener('pointercancel', stopDrawing, { passive: false })\n\nupdateDisplay();",[157],"7308f49b29f8df6c4ceb467dced47488fe95f44aaca452704b93a5c1ae3e02de",["D",1751067431505],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","cea41dc4-b4c3-4a38-8ee6-ee9b5960fda2","pinnedFileId","351db508-4b7a-40df-9dc1-818be7094620","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"dbeafde9-66b9-4cff-8625-2da1195a1c5d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_205":201},"org",{"_11":12,"_199":-5,"_200":201,"_171":172,"_202":203,"_204":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaGQyZVFDeXM0U3YzNkpjdHpudnBqcHRtOGQifQ","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":276,"_46":-5,"_167":48,"_49":50,"_168":50,"_169":-5,"_170":-5,"_171":172,"_173":174,"_175":26,"_176":26,"_177":-5,"_178":179,"_53":180,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":186,"_187":186,"_188":189,"_190":189,"_191":189,"_192":186,"_193":186,"_194":277,"_196":278,"_198":279,"_47":48},"tree",[263,264,265,266],"files",[263,264,265,266],"counts",{"_253":179,"_254":244,"_255":179,"_256":257,"_258":259},"contents",[236,237,238,239],"upstreamProject",{"_32":39,"_13":56,"_169":232,"_170":233,"_49":50,"_194":234},"upstreamBranch",{"_32":33,"_34":230,"_36":231,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_174":229},"draw.halffullheart.com",["D",1749070628054],["D",1779896149804],"Basic HTML starter template based on Glitch's starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1e130d76-f5f9-42d2-df67-91517700ff00/square512?exp=1789556399&sig=f55b1da9030932fec62e1a097b2a1e82a86b7e16c80b8da846d667319f37c879",{"_11":52,"_205":235},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",{"_32":107,"_13":104,"_79":108,"_81":-5,"_82":58,"_83":109,"_84":26,"_34":251,"_40":111,"_87":88,"_89":112,"_66":48,"_91":-5,"_72":252},{"_32":159,"_13":157,"_79":160,"_81":-5,"_82":58,"_83":161,"_84":26,"_34":249,"_40":100,"_87":133,"_89":163,"_66":48,"_91":-5,"_72":250},{"_32":242,"_13":243,"_79":174,"_81":-5,"_82":58,"_83":244,"_84":26,"_34":245,"_40":179,"_87":246,"_89":247,"_66":48,"_91":-5,"_72":248},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":57,"_84":26,"_34":240,"_40":86,"_87":88,"_89":90,"_66":48,"_91":-5,"_72":241},["D",1751338935861],[73],"a5e10a42-53af-11f0-94c6-f69ea79377d9","main.tsx",1,["D",1751067431505],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[243],["D",1751243826692],[157],["D",1751338779910],[104],"pulls","branches","forks","envVars",{"_260":179,"_262":179},"connections",{"_260":179,"_261":179},"count","unfilledCount","emptyCount",{"_32":107,"_13":104,"_79":108,"_81":-5,"_82":58,"_83":109,"_84":26,"_34":110,"_40":111,"_87":88,"_89":112,"_66":48,"_91":-5,"_92":274,"_72":275},{"_32":159,"_13":157,"_79":160,"_81":-5,"_82":58,"_83":161,"_84":26,"_34":162,"_40":100,"_87":133,"_89":163,"_66":48,"_91":-5,"_92":272,"_72":273},{"_32":242,"_13":243,"_79":174,"_81":-5,"_82":58,"_83":244,"_84":26,"_34":269,"_40":179,"_87":246,"_89":247,"_66":48,"_91":-5,"_92":270,"_72":271},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":57,"_84":26,"_34":85,"_40":86,"_87":88,"_89":90,"_66":48,"_91":-5,"_92":267,"_72":268},[],[73],["D",1751067431505],[],[243],[],[157],[],[104],["D",1751067431505],{"_11":12,"_205":201},{"_11":12,"_199":-5,"_200":201,"_171":172,"_202":203,"_204":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_194":-5,"_226":313,"_314":315,"_316":317,"_318":48,"_319":48,"_320":48,"_321":26,"_322":-5,"_323":-7,"_324":-7,"_325":179,"_326":48,"_327":48,"_328":-5,"_329":48,"_330":48,"_331":48,"_332":-5},"ENV",{"_284":285,"_286":287,"_288":16,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Compare

Mergehalffullheart/mainintotemplates/main

index.html+98-20

style.css+52-8

main.js+181-0

README.md+0-45

favicon.svg+0-13

script.js+0-6