[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_189":190,"_191":192},"routes/_app.x.$handle.$name",{"_99":98,"_32":50,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_21":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":25,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":-5,"_61":25,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",3,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","backend","latestPath","fileId","a05299ce-158f-4894-8c20-a5ef78b3be0d","name","fileType","directory","content","createdAt",["D",1768152291198],"branchVersion","branchId","0ffa6b50-ef12-11f0-9d03-42dde27851f2",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"backend/index.ts","6fc3e6c4-ef12-11f0-896b-42dde27851f2","index.ts","script","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",["D",1768152291198],"id","0ff9fd50-ef12-11f0-9d03-42dde27851f2","SpaceCalc",["D",1768152130494],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","e10ec796-a337-47bd-a6d5-bef5676f576a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","cb63511a-a208-459b-9390-6570936cba44","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":59,"_103":104,"_105":25},"branch",{"_13":88,"_32":89,"_48":40,"_90":49,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":50,"_97":98},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","changesbyjames","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OFYA1ikCms1olIa5BUUthUgI3O.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_36":185,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":-5,"_61":25,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":186,"_83":187,"_85":188,"_87":25},"tree",[154,156],"files",[154,155,156,157,158],"counts",{"_144":65,"_145":135,"_146":65,"_147":148,"_149":150},"contents",[129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":141,"_32":28,"_30":31,"_134":-5,"_39":40,"_38":14,"_136":137,"_36":142,"_13":65,"_33":34,"_35":-5,"_24":25,"_139":-5,"_27":143},{"_48":131,"_32":132,"_30":133,"_134":-5,"_39":40,"_38":135,"_136":137,"_36":138,"_13":65,"_33":34,"_35":-5,"_24":25,"_139":-5,"_27":140},"5512fae0-ef12-11f0-bed9-42dde27851f2","frontend","5010c31e-0d49-490e-9a73-a73273551f62","parentId",1,"latest",true,["D",1768152246416],"label",[132],"6fc4049c-ef12-11f0-896b-42dde27851f2",["D",1768152291198],[28],"pulls","branches","forks","envVars",{"_151":65,"_153":65},"connections",{"_151":65,"_152":65},"count","unfilledCount","emptyCount",{"_48":141,"_32":28,"_30":31,"_134":-5,"_39":40,"_38":14,"_136":137,"_36":182,"_13":65,"_33":34,"_35":-5,"_24":25,"_139":-5,"_165":183,"_27":184},{"_48":178,"_32":44,"_30":43,"_134":31,"_39":40,"_38":14,"_136":25,"_36":179,"_13":65,"_33":45,"_35":46,"_24":25,"_139":-5,"_165":180,"_27":181},{"_48":131,"_32":132,"_30":133,"_134":-5,"_39":40,"_38":135,"_136":137,"_36":175,"_13":65,"_33":34,"_35":-5,"_24":25,"_139":-5,"_165":176,"_27":177},{"_48":168,"_32":169,"_30":170,"_134":133,"_39":40,"_38":135,"_136":25,"_36":171,"_13":65,"_33":21,"_35":172,"_24":25,"_139":-5,"_165":173,"_27":174},{"_48":159,"_32":160,"_30":161,"_134":133,"_39":40,"_38":162,"_136":25,"_36":163,"_13":65,"_33":45,"_35":164,"_24":25,"_139":-5,"_165":166,"_27":167},"6cc9b548-ef12-11f0-aa0a-42dde27851f2","script.js","6cc9b624-ef12-11f0-aa0a-42dde27851f2",2,["D",1768152286204],"/**\n * Room (cm): bottom width 155, left height 115, right height 255, top is a straight slope.\n * Rectangle is axis-aligned, sitting on the floor (y=0), near the tall wall with a gap \"offset\".\n *\n * @param {number} width Rectangle width along the floor (cm)\n * @param {number} height Rectangle height (cm)\n * @param {number} offset Gap from the tall (right) wall (cm)\n * @returns {{fits: boolean, reason: string, xLeft: number, xRight: number, maxHeightAtLeft: number}}\n */\nfunction fitsInRoom(width, height, offset) {\n const roomWidth = 155;\n const leftHeight = 115;\n const rightHeight = 255;\n\n if (width < 0 || height < 0 || offset < 0) {\n return { fits: false, reason: \"width/height/offset must be >= 0\", xLeft: NaN, xRight: NaN, maxHeightAtLeft: NaN };\n }\n\n // 1) Compute rectangle x-range from the tall wall (right side)\n const xRight = roomWidth - offset;\n const xLeft = xRight - width;\n\n // 2) Horizontal bounds\n if (xLeft < 0) {\n return {\n fits: false,\n reason: `Doesn't fit horizontally: left edge would be at x=${xLeft.toFixed(2)}cm (needs >= 0).`,\n xLeft, xRight, maxHeightAtLeft: NaN\n };\n }\n\n // 3) Slanted ceiling/wall line: y_max(x) = leftHeight + (rightHeight-leftHeight) * (x/roomWidth)\n const slope = (rightHeight - leftHeight) / roomWidth; // 140/155\n const maxHeightAtLeft = leftHeight + slope * xLeft;\n\n // 4) Vertical clearance at the tightest point (left edge)\n if (height > maxHeightAtLeft) {\n return {\n fits: false,\n reason: `Too tall at xLeft=${xLeft.toFixed(2)}cm: max height there is ${maxHeightAtLeft.toFixed(2)}cm.`,\n xLeft, xRight, maxHeightAtLeft\n };\n }\n\n return {\n fits: true,\n reason: \"Fits within the sloped profile at the given offset.\",\n xLeft, xRight, maxHeightAtLeft\n };\n}\n\n// Room constants\nconst ROOM_WIDTH = 155;\nconst LEFT_HEIGHT = 115;\nconst RIGHT_HEIGHT = 255;\n\n// Canvas drawing functions\nfunction drawSideView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Scale factors\n const scaleX = (canvasWidth - 40) / ROOM_WIDTH;\n const scaleY = (canvasHeight - 40) / RIGHT_HEIGHT;\n const offsetX = 20;\n const offsetY = 20;\n \n // Draw room outline (side view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.beginPath();\n // Floor\n ctx.moveTo(offsetX, canvasHeight - offsetY);\n ctx.lineTo(offsetX + ROOM_WIDTH * scaleX, canvasHeight - offsetY);\n // Left wall\n ctx.moveTo(offsetX, canvasHeight - offsetY);\n ctx.lineTo(offsetX, canvasHeight - offsetY - LEFT_HEIGHT * scaleY);\n // Right wall\n ctx.moveTo(offsetX + ROOM_WIDTH * scaleX, canvasHeight - offsetY);\n ctx.lineTo(offsetX + ROOM_WIDTH * scaleX, canvasHeight - offsetY - RIGHT_HEIGHT * scaleY);\n // Sloped ceiling\n ctx.moveTo(offsetX, canvasHeight - offsetY - LEFT_HEIGHT * scaleY);\n ctx.lineTo(offsetX + ROOM_WIDTH * scaleX, canvasHeight - offsetY - RIGHT_HEIGHT * scaleY);\n ctx.stroke();\n \n // Draw object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scaleX;\n const objWidth = width * scaleX;\n const objHeight = height * scaleY;\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle\n ctx.fillRect(objX, canvasHeight - offsetY - objHeight, objWidth, objHeight);\n ctx.strokeRect(objX, canvasHeight - offsetY - objHeight, objWidth, objHeight);\n \n // Draw height limit line at left edge\n if (!isNaN(result.maxHeightAtLeft)) {\n ctx.strokeStyle = '#f59e0b';\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 5]);\n const limitY = canvasHeight - offsetY - result.maxHeightAtLeft * scaleY;\n ctx.beginPath();\n ctx.moveTo(objX, limitY);\n ctx.lineTo(objX + objWidth, limitY);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText('Left wall', offsetX + 5, canvasHeight - offsetY - LEFT_HEIGHT * scaleY - 5);\n ctx.fillText('Right wall', offsetX + ROOM_WIDTH * scaleX - 50, canvasHeight - offsetY - RIGHT_HEIGHT * scaleY - 5);\n ctx.fillText('Floor', offsetX + ROOM_WIDTH * scaleX / 2 - 15, canvasHeight - offsetY + 15);\n}\n\nfunction drawTopView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Scale factors (using room depth of 100cm for visualization)\n const roomDepth = 100;\n const scaleX = (canvasWidth - 40) / ROOM_WIDTH;\n const scaleY = (canvasHeight - 40) / roomDepth;\n const offsetX = 20;\n const offsetY = 20;\n \n // Draw room outline (top view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.strokeRect(offsetX, offsetY, ROOM_WIDTH * scaleX, roomDepth * scaleY);\n \n // Draw object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scaleX;\n const objWidth = width * scaleX;\n const objDepth = 30 * scaleY; // Assume 30cm depth for visualization\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle (centered in room depth)\n const objY = offsetY + (roomDepth * scaleY - objDepth) / 2;\n ctx.fillRect(objX, objY, objWidth, objDepth);\n ctx.strokeRect(objX, objY, objWidth, objDepth);\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText('Short wall', offsetX + 5, offsetY - 5);\n ctx.fillText('Tall wall', offsetX + ROOM_WIDTH * scaleX - 50, offsetY - 5);\n \n // Draw offset indicator\n if (!isNaN(result.xRight)) {\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n ctx.setLineDash([3, 3]);\n const offsetLineX = offsetX + (ROOM_WIDTH - offset) * scaleX;\n ctx.beginPath();\n ctx.moveTo(offsetLineX, offsetY);\n ctx.lineTo(offsetLineX, offsetY + roomDepth * scaleY);\n ctx.stroke();\n ctx.setLineDash([]);\n \n ctx.fillStyle = '#6b7280';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${offset}cm`, offsetLineX + 5, offsetY + 15);\n }\n}\n\nfunction updateResults() {\n const width = parseFloat(document.getElementById('width').value) || 0;\n const height = parseFloat(document.getElementById('height').value) || 0;\n const offset = parseFloat(document.getElementById('offset').value) || 0;\n \n const result = fitsInRoom(width, height, offset);\n \n // Update results display\n const resultsDiv = document.getElementById('results');\n const resultContent = document.getElementById('result-content');\n \n resultsDiv.classList.remove('hidden');\n \n if (result.fits) {\n resultsDiv.className = 'mt-6 p-4 rounded-md bg-green-50 border border-green-200';\n resultContent.innerHTML = `\n

\n ✅\n Object fits!\n

Position: ${result.xLeft.toFixed(1)}cm to ${result.xRight.toFixed(1)}cm from left wall

Max height at left edge: ${result.maxHeightAtLeft.toFixed(1)}cm

Your object height: ${height}cm

Clearance: ${(result.maxHeightAtLeft - height).toFixed(1)}cm

\n `;\n } else {\n resultsDiv.className = 'mt-6 p-4 rounded-md bg-red-50 border border-red-200';\n resultContent.innerHTML = `\n

\n ❌\n Object doesn't fit\n

${result.reason}

\n ${!isNaN(result.maxHeightAtLeft) ? `

Max height at that position: ${result.maxHeightAtLeft.toFixed(1)}cm

` : ''}\n

\n `;\n }\n \n // Update visualizations\n const sideCanvas = document.getElementById('sideCanvas');\n const topCanvas = document.getElementById('topCanvas');\n \n drawSideView(sideCanvas, width, height, offset, result);\n drawTopView(topCanvas, width, height, offset, result);\n}\n\n// Event listeners\ndocument.addEventListener('DOMContentLoaded', function() {\n const inputs = ['width', 'height', 'offset'];\n inputs.forEach(id => {\n document.getElementById(id).addEventListener('input', updateResults);\n });\n \n document.getElementById('calculate').addEventListener('click', updateResults);\n \n // Initial calculation\n updateResults();\n});","children",[],[132,160],"5512bd28-ef12-11f0-bed9-42dde27851f2","index.html","5512be04-ef12-11f0-bed9-42dde27851f2",["D",1768152246416],"\n\n\n \n \n Room Fitting Calculator\n \n \n\n\n

Room Fitting Calculator

\n \n

Object Dimensions

\n \n

\n Width (cm)\n \n

\n \n

\n Height (cm)\n \n

\n \n

\n Offset from tall wall (cm)\n \n

\n \n \n

Results:

\n \n \n

Room Specifications:

• Width: 155 cm
• Left wall height: 115 cm
• Right wall height: 255 cm
• Sloped ceiling from left to right

\n \n \n

Room Visualization

\n \n \n

Side View

\n \n \n

Top View

\n\n \n\n",[],[132,169],["D",1768152246416],[157,158],[132],"6fc3e61a-ef12-11f0-896b-42dde27851f2",["D",1768152291198],[],[28,44],["D",1768152291198],[155],[28],["D",1768152130494],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":59,"_103":104,"_105":25},{"_13":88,"_32":89,"_48":40,"_90":49,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":50,"_97":98},"ctx",{"_81":-5,"_126":222,"_223":224,"_225":226,"_227":25,"_228":25,"_229":25,"_230":137,"_231":-5,"_232":-7,"_233":-7,"_234":65,"_235":25,"_236":25,"_237":-5,"_238":25,"_239":25,"_240":25,"_241":-5},"ENV",{"_193":194,"_195":196,"_197":89,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221},"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"]

Diff · v3